JavaScript基础

2020-08-04  本文已影响0人  Scincyc

1 - 编程语言

1.1 编程

1.2 计算机语言

1.3 编程语言

编程语言：
    可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言和高级语言。
语言类型 说明
汇编语言 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

1.4 翻译器

    高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。

1.5 编程语言和标记语言区别

语言 说明
编程语言 编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言 标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。

总结

  1. 计算机可以帮助人类解决某些问题
  2. 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
  3. 编程语言有机器语言、汇编语言、高级语言
  4. 高级语言需要一个翻译器转换为计算机识别的机器语言
  5. 编程语言是主动的有很强的逻辑性

2 - 计算机基础

2.1 计算机组成

硬件（输入 输出 cpu 内存 硬盘）+软件（系统软件 应用软件）

2.2 数据存储

  1. 计算机内部使用二进制 0 和 1来表示数据。
  2. 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
  3. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

大小关系：bit < byte < kb < GB < TB<.....

2.4 程序运行

计算机运行软件的过程：
1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中
2. CPU执行内存中的代码
   注意：之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

3 - 初始JavaScript

3.1 JavaScript 是什么

布兰登·艾奇用10天设计出JavaScript，最初名LiveScript，后与sun合作改名

3.2 JavaScript的作用

3.3 HTML/CSS/JS 的关系

3.4 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

3.5 JS 的组成

  1. ECMAScript

    ​ ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

    ​ 基于JavaScript（网景公司）、Jscript（微软公司）

    ​ ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

    更多参看MDN: MDN手册

  2. DOM——文档对象模型

    ​ 文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

  3. BOM——浏览器对象模型

    ​ 浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

3.6 JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部。

  1. 行内式

    <input type="button" value="点我试试" onclick="alert('Hello World')" />
    • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
    • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
    • 可读性差， 在html中编写JS大量代码时，不方便阅读；
    • 引号易错，引号多层嵌套匹配时，非常容易弄混；
    • 特殊情况下使用

  2. 内嵌式

    <script>
    alert('Hello  World~!');
</script>
    • 可以将多行JS代码写到 script 标签中
    • 内嵌 JS 是学习时常用的方式

  3. 外部JS文件

    <script src="my.js"></script>
    • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
    • 引用外部 JS文件的 script 标签中间不可以写代码
    • 适合于JS 代码量比较大的情况

4 - JavaScript注释

4.1 单行注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。
JS中的注释主要有两种，分别是 单行注释 和 多行注释。

单行注释的注释方式如下：

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来   

// 用来注释单行文字（  快捷键   ctrl  +  /   ）

4.2 多行注释

多行注释的注释方式如下：

/*
  获取用户年龄和姓名
  并通过提示框显示出来
*/

/* */  用来注释多行文字（ 默认快捷键  alt +  shift  + a ）

快捷键修改为： ctrl + shift + /

vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认

5 - JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

6 - 变量的概念

6.1 什么是变量

变量是用于存放数据的容器

6.2 变量在内存中的存储

    本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。

7 - 变量的使用⭐

7.1 声明变量

//  声明变量  
var age; //  声明一个 名称为age 的变量

7.2 赋值

age = 10; // 给 age  这个变量赋值为 10

7.3 变量的初始化

var age  = 18;  // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。

7.4 变量语法扩展

7.5 变量命名规范

规则：

8 - 数据类型

8.1 数据类型简介

8.2 简单数据类型

简单数据类型（基本数据类型）

简单数据类型 说明 默认值
Number 数字型，包括整型和浮点型 21 0.21 0
Boolean 布尔类型，true false等价于1 0 false
String 字符串类型 “ ”
Undefined var a; 声明了变量a但没有赋值，此时a = undefined undefined
Null var a = null; 声明了变量a为空值 null

1、数字型 Number

​ JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。

var age = 21;       // 整数
var Age = 21.3747;  // 小数

  1. 数字型进制

    最常见的进制有二进制、八进制、十进制、十六进制。

      // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;

    现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

  2. 数字型范围

    • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

    • 最小值：Number.MIN_VALUE，这个值为：5e-32

  3. 数字型三个特殊值

    • Infinity ，代表无穷大，大于任何数值

    • -Infinity ，代表无穷小，小于任何数值

    • NaN ，Not a number，代表一个非数值

      isNaN：用来判断一个变量是否为非数字的类型，是数字返回 true 否则 false

         var usrAge = 21;
   var isOk = isNaN(userAge);
   console.log(isNum);          // false ，21 不是一个非数字
   var usrName = "andy";
   console.log(isNaN(userName));// true ，"andy"是一个非数字

2、字符串型 String

​ 字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

​ 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

  1. 字符串引号嵌套

    ​ JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

    var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

  2. 字符串转义符

    ​ 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

    ​ 转义符都是 \ 开头的，常用的转义符及其说明如下：

    转义符 解释说明
    \n 换行符，n 是 newline 的意思
    \ \ 斜杠 \
    ' ' 单引号
    " ”双引号
    \t tab 缩进
    \b 空格 ，b 是 blank 的意思

  3. 字符串长度

    ​ 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

    var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

  4. 字符串拼接

    • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

    • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

      //1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112
      • + 号总结口诀：数值相加 ，字符相连

  5. 字符串拼接加强

    console.log('pink老师' + 18);        // 只要有字符就会相连 
var age = 18;
console.log('pink老师age岁啦');      // 这样不行哦
console.log('pink老师' + age);         // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
    • 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值
    • 变量是不能添加引号的，因为加引号的变量会变成字符串
    • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

3、布尔型Boolean

​ 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

​ 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

4、Undefined和 Null

​ 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

​ 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

8.3 获取变量数据类型

8.4 数据类型转换

​ 什么是数据类型转换？

​ 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

1、转换为字符串

var num=1;
/* 方式1：toString() */
alert(num.toString());
/* 方式2：String()强制转换 */
alert(String(num));
/* 方式3：+加号拼接 */
alert(num+"yes");

2、转换为数字型（重点）

/* parseInt(string) */
parseInt('78');
/* parseFloat(string) */
parseFloat('832.23');
/* Number()强制转换 */
Number('12');
/* js隐式转换 */
'12' - 0;

3、转换为布尔型

/* Boolean() */
Boolean('true')

9 - 解释型语言和编译型语言

9.1 概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器

9.2 执行过程

类似于请客吃饭：

    编译语言：首先把所有菜做好，才能上桌吃饭

    解释语言：好比吃火锅，边吃边涮，同时进行

10 - 关键字和保留字

10.1 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

10.2 关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

10.3 保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

11 - 运算符（操作符）⭐

11.1 运算符的分类

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

11.2 算数运算符

11.3 递增和递减运算符

11.4 比较运算符

11.5 逻辑运算符

11.6 赋值运算符

概念：用来把数据赋值给变量的运算符。
= += -= *= /= %=

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

11.7 运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元 ++ -- !
3 算数 先* / % 后 + -
4 关系 > >= < <=
5 相等 == != === !==
6 逻辑 先 && 后 ||
7 赋值 =
8 逗号 ,

12 - 流程控制

12.1 流程控制概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：**流程控制就是来控制代码按照一定结构顺序来执行**

流程控制主要有三种结构，分别是**顺序结构**、**分支结构**和**循环结构**，代表三种代码执行的顺序。

12.2 顺序流程控制

​ 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

12.3 分支流程控制

12.4 三元表达式

12.5 switch分支流程控制

13 - 循环⭐

13.1 for循环

  1. 执行操作表达式，此时第一轮结束。
  2. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
  3. 继续执行操作表达式，第二轮结束。
  4. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

断点调试：

    断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

13.2 双重for循环

13.3 while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

注意：

13.4 do-while循环

do... while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

13.5 continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }
/*结果
我正在吃第1个包子呢
我正在吃第2个包子呢
这个包子有虫子，扔掉
我正在吃第4个包子呢
我正在吃第5个包子呢
*/

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }
/*结果
我正在吃第1个包子呢
我正在吃第2个包子呢
*/

14 - 代码规范

14.1 标识符命名规范

14.2 操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
}

14.3 单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

14.4 其他规范

关键词、操作符之间后加空格
比如：if括号前后空格
if (true) {}
比如：for括号前后空格
for (var i = 0; i < 100; i++) {}

15 - 数组⭐

15.1 数组的概念

15.2 创建数组

JS 中创建数组有两种方式：

15.3 获取数组中的元素

​ 索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）,通过“数组名[索引]”的形式来获取数组中的元素

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

15.4 遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

15.5 数组中新增元素

​ 数组中可以通过以下方式在数组的末尾插入新元素：

  数组[ 数组.length ] = 新数据;

16 - 函数⭐

16.1 函数的概念

就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

16.2 函数的使用

1、声明函数

// 声明函数
function 函数名() {
    //函数体代码
}

2、调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

3、函数的封装

16.3 函数的参数

1、函数参数语法

2、函数形参和实参数量不匹配时

参数个数 说明
实参个数=形参个数 输出正确结果
实参个数>形参个数 只取到形参的个数
实参个数<形参个数 多的形参定义为undefined，结果为NaN 
注意：在JavaScript中，形参的默认值是undefined。

小结：

16.4 函数的返回值

1、return 语句

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

2、break ,continue ,return 的区别

16.5 arguments的使用

​ 当不确定有多少个参数传递的时候，可以用 arguments 来获取。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

16.6 函数案例

    函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行

16.7 函数的两种声明方式

17 - 作用域⭐

17.1 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了命名冲突。

JavaScript（es6前）中的作用域有两种：全局作用域、局部作用域（函数作用域）

17.2 全局作用域

作用于所有代码执行的环境(<script> 标签内部) 或者 一个独立的 js 文件

17.3 局部作用域

作用于函数内的代码环境，就是局部作用域，也称为函数作用域

17.4 JS没有块级作用域

18 - 变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量  局部变量

18.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

18.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

18.3 全局变量和局部变量的区别

19 - 作用域链

只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在**[内部函数可以访问外部函数变量]**的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

案例分析1：
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

作用域链：采取就近原则的方式来查找变量最终的值

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

20 - 预解析

20.1 预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

20.2 变量预解析

预解析也叫做变量、函数提升，就是变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

console.log(num);  // 结果是多少？
var num = 10;      // ？

结果：undefined

20.3 函数预解析

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数

fn();
function fn() {
    console.log('打印');
}

结果：控制台打印字符串 --- ”打印“

20.4 函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('想不到吧');
}

结果：报错提示 ”fn is not a function"

解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

21 - 对象⭐

21.1 对象的相关概念

21.2 创建对象的三种方式

1、利用字面量创建对象

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

（1）对象的使用

（2）变量、属性、函数、方法总结

属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器

方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容

2、利用 new Object 创建对象

3、利用构造函数创建对象

21.3 遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作

for (变量 in 对象名字) {
    // 在此执行代码
}

语法中的变量是自定义的，通常我们会将这个变量写为 k 或者 key

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

22 - 内置对象

22.1 内置对象

​ JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
​ 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发

​ JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

22.2 查文档

​ 查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可
​ Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API
​ MDN:https://developer.mozilla.org/zh-CN/

22.3 Math对象

​ Math 对象不是构造函数，跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员

属性、方法名 功能
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值

​ 注意：上面的方法使用时必须带括号

​ 获取指定范围内的随机整数：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

22.4 日期对象

​ Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

22.5 数组对象

1、创建数组的两种方式

2、检测是否为数组

3、添加删除数组元素的方法

push(参数1...)//末尾追加元素 返回新的长度 注意修改原数组
pop()//删除最后一个元素 返回删除元素 修改原数组
unshift(参数1...)//开头追加元素 返回新的长度 注意修改原数组
shift()//删除开头一个元素 返回删除元素 修改原数组

注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

4、数组排序

reverse()//颠倒数组中元素顺序（无参数），会改变原数组，返回新数组
sort()//对数组元素排序，会改变原数组，返回新数组

注意：sort方法需要传入参数来设置升序、降序排序

5、数组索引方法

indexOf()//数组中查找给定元素的第一个索引，不存在则返回-1
lastIndexOf()//数组中查找给定元素的最后一个索引，不存在则返回-1

6、数组转换为字符串

toString()//把数组转换为字符串，逗号分隔每一项
join('分隔符')//如果不传参数，则按照","拼接元素

7、其他方法

concat()//连接2个或多个数组 不影响原数组 返回新数组
slice()//返回截取的数组 slice(begin,end)
splice()//返回被删除元素的新数组 splice（第几个开始，要删除的个数）

22.6 字符串对象

1、基本包装类型

​ 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean

​ 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

2、字符串的不可变

​ 当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
​ 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

3、根据字符返回位置

indexOf('要找的字符', 开始的位置)//找不到则返回-1
lastIndexOf()//从后往前找，只找第一个匹配的

​ 案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

  1. 先查找第一个o出现的位置
  2. 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
  3. 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

4、根据位置返回字符

charAt(index)//返回指定位置的字符
charCodeAt(index)//返回指定位置字符的ASCII码
str[index]//返回指定位置的字符 html5，ie8+支持

​ 案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

  1. 核心算法：利用 charAt(） 遍历这个字符串

  2. 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1

  3. 遍历对象，得到最大值和该字符

    ​ 注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数

5、字符串操作方法

concat(str1, str2, str3...)//拼接字符串，等效于+，+更常用
substr(start, length)//截取字符串 参数：开始位置索引 截取个数
slice(start, end)//截取字符串 end取不到
substring(start, end)//和slice相似，区别在于不接受负值

6、replace()方法

​ replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

字符串.replace(被替换的字符串， 要替换为的字符串)；

7、split()方法

​ split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

字符串.split("分割字符")

23 - 简单数据类型和复杂数据类型

23.1 简单数据类型

​ 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

23.2 复杂数据类型

​ 复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

23.3 堆栈

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

23.4 简单类型传参

​ 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

​ 运行结果如下：

11
10

23.5 复杂数据类型传参

​ 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?

​ 运行结果如下：

刘德华
刘德华
张学友
张学友
上一篇下一篇

猜你喜欢

热点阅读