微信小程序开发学习笔记（二）: JavaScript

本篇目录

本篇目录
说明
ECMAScript
大事记摘抄
ECMAScript 6 入门
JavaScript 入门
语言自身的基本概念
- 语句
- 变量
- 标识符
- 注释
- 区块
- 条件语句
- 循环语句
- 数据类型
  - null 与 undefined
  - 布尔值
  - 数值
  - 字符串
  - 对象
  - 函数
  - 数组
- 运算符
- 数据类型转化
- 错误处理
- 面向对象
- 异步操作
- 严格模式
- 编程建议
- 标准库
与运行环境相关的概念
参考

说明

ECMAScript6 直接上手使用见：JavaScript/ES6 快速上手教程。小程序学习笔记计划都更新到这里记录。

对于前端程序员来说，小程序的技术栈和前端开发相差不大，比较容易上手。如果没有接触过前端技术，有必要先补一下前端的知识，对前端有一个整体的认识，《现代前端技术解析》是非常好的入门书。

这篇笔记里主要记录 JavaScript 的知识，JavaScript 的标准在不停演进，微信小程序支持了绝大多数 ES6 API ，同时为了安全，小程序不支持动态执行 JS代码详情见：微信小程序 JavaScript 支持情况。

ECMAScript

ECMAScript 是 ECMA International 指定的标准，目的是创建标准化的 JavaScript，已经发展到了 2018 年的 ES9。不过主流似乎是 2015 年制定 ES6，譬如微信小程序就明确说自己实现了大多数 ES6 的接口。

下面的资料分别是最权威的英文资料和比较权威的中文资料：

第一份是在 ECMA International 的标准列表中找到的 ES9，奇怪的是没有历史年份的连接。第二份是阮一峰编写的，在我的认知里，阮一峰在前端方面的造诣很高，博客文章清晰易懂，所以他写的《ECMAScript 6 入门]》应该也不错。第三份是阮一峰在第二份资料中给出 JavaScript 入门教程，这份是阮一峰维护的，很新。

大事记摘抄

2013年，ECMA 正式推出 JSON 的国际标准，这意味着 JSON 格式已经变得与 XML 格式一样重要和正式了。

2015年3月，Facebook 公司发布了 React Native 项目，将 React 框架移植到了手机端，可以用来开发手机 App。它会将 JavaScript 代码转为 iOS 平台的 Objective-C 代码，或者 Android 平台的 Java 代码，从而为 JavaScript 语言开发高性能的原生 App 打开了一条道路。

2015年6月，ECMA 标准化组织正式批准了 ECMAScript 6 语言标准，定名为《ECMAScript 2015 标准》。JavaScript 语言正式进入了下一个阶段，成为一种企业级的、开发大规模应用的语言。这个标准从提出到批准，历时10年，而 JavaScript 语言从诞生至今也已经20年了。

2015年6月，Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。这是一种 JavaScript 引擎的中间码格式，全部都是二进制，类似于 Java 的字节码，有利于移动设备加载 JavaScript 脚本，执行速度提高了 20+ 倍。这意味着将来的软件，会发布 JavaScript 二进制包。

2016年6月，《ECMAScript 2016 标准》发布。与前一年发布的版本相比，它只增加了两个较小的特性。

2017年6月，《ECMAScript 2017 标准》发布，正式引入了 async 函数，使得异步操作的写法出现了根本的变化。

2017年11月，所有主流浏览器全部支持 WebAssembly，这意味着任何语言都可以编译成 JavaScript，在浏览器运行。

摘录自：JavaScript 周边大事记。

ECMAScript 6 入门

按照 ECMAScript 6 入门的建议先把 JavaScript 教程学习一下，简直让人崩溃…… 快速翻阅了 JavaScript 教程，就一个感觉， JavaScript 这门语言太变态了，看了一天，头晕脑胀。

建议将 JavaScript 教程大概学习一下，直接就使用 ECMAScript 6 入门的语法和用法，直接学习使用正确的方式，而不是记住很多种不建议的用法！

如果对 js 的运行环境、DOM 和浏览器模型等不熟悉，可以熟读 JavaScript 教程中的相关章节。

各大浏览器对 ES6 的支持情况：查看。

Babel、Traceur 可以将 ES6 代码转为 ES5 代码。

新增 let 命令，用于声明在所在的代码块内有效的变量；
let 定义的命令没有变量提升，必须先声明再使用，let 声明的变量不能重复；
let 相当于增加了块级作用域；
ES6 允许在块级作用域之中声明函数，函数声明语句的行为类似于let，在块级作用域之外不可引用，ES5 不允许；
const 声明不可改变的常量，只在声明的块级作用域内有效；
const 要求的是特定内存中的数据不能改动，复合类型数据，变量指向的是保存一个指针，const只能保证指针地址是不变的；
将对象冻结，应该使用 Object.freeze()；
还增加了 import 和 class 命令；
var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性；
Node 模块和 ES6 模块中，this返回的是当前模块；
允许模式匹配的变量定义方式：let [a, b, c] = [1, 2, 3];

JavaScript 入门

基本概念分为两部分，第一部分是每种编程语言都会有的基本概念，第二部分是 JavaScript 的运行场景带来的一些特有的属性或操作，主要与浏览器相关。

语言自身的基本概念

语句
变量
标识符
注释
区块
条件语句
循环语句
运算符
数据类型转化
错误处理
标准库
面向对象
异步操作

语句

statement，以;结尾。

变量

用 var 声明（可省略）：

变量名区分大小写；
没有赋值的变量值是特殊值 undifined；
是动态类型；
声明变量的语句运行时自动提升到代码头部；
ES5 只有两个作用域：全局作用域、函数作用域，ES6 增加了块级作用域。

标识符

identifier，用来标记变量、函数等的名字：

区分大小写；
以 Unicode 字母、$、_ 开头。

下面这些保留的关键字不能做标识符：

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

注释

单行注释用//；
多行注释用/* */；
历史上兼容 html，也被看作单行注释。

区块

block，用 { } 包裹的任意数量的语句，注意 js 中区块不是 var 声明的变量的作用域。

在区块中声明的变量，在区块外可以使用，区块不构成变量的作用域，因此一般也不单独使用：

{
  var a = 1;
}
a // 1

条件语句

支持 if ... else if ... ；
支持 switch ... case ...；
真是 true，伪是 false，优先使用「严格相等运算符」 ===；
switch 的 case 语句判断时用的运算符是 ====，且需要用 break 跳出；
支持三元运算符 ?...:。

if 语句：

if (m === 0) {
  // ...
} else if (m === 1) {
  // ...
} else if (m === 2) {
  // ...
} else {
  // ...
}

switch 语句，需要使用 break 终止，case 的判断采用的是 ===：

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

三元运算符：

var even = (n % 2 === 0) ? true : false;

循环语句

支持 for、while、do...while；
支持用 break 跳出、用 continue 跳过；
可以跳转到指定标签。

for 语句：

for (var i = 0; i < x; i++) {
  console.log(i);
}

for ( ; ; ){
  console.log('Hello World');
}

while 语句：

while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

do {
  console.log(i);
  i++;
} while(i < x);

跳转到标签：

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }

数据类型

截止 ES6 总过有七种数据类型：

数值
字符串
布尔值
undifined
null
对象，又可以分为普通对象、数组、函数。
Symbol （ES6 新增）

js 的变量是动态类型，可以用下面的方法判断一个值的类型：

typeof
instanceof
Object.prototype.toString

typeof 的返回值分别是number、string、boolean、function、undifined、object：

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
typeof null // "object"
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
...

null 与 undefined

null 与 undefined 值的含义很接近，在 if 语句中都会被转转成 false，它俩也被 == 认为相同。undefined 存在是历史原因，谷歌开发的替代语言 Dart 只有 null 没有 undefined：

undefined == null  // true

但是，判断一个变量是否存在，typeof 返回的是 undefined，不是 null。

布尔值

应当使用 boolean 的位置，上面的值自动转换为布尔值。

被转换为 false 的类型：

undefined
null
false
0
NaN
""或''（空字符串）

除此之外，全部是 true。

数值

所有数字都是 64 位的浮点数，1 和 1.0 相同，使用国际标准 IEEE754，符号位 1 位，指数 11 位，小数 52 位。

需要特别注意都是浮点数不是精确值，小数结果需要特别注意：

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

能够精确表示的十进制数范围是 -2^53 ~ 2^53（15位以及以内的十进制数）。

能表示的最大整数是 2^1024，超过这个值时，返回 Infinity：

Math.pow(2, 1024) // Infinity

小于等于 2^(-1075）的数值，返回 0：

Math.pow(2, -1075) // 0

具体的最大值和最小值用下面的方法获取：

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

支持科学计数：

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23

八进制前缀 0o、0O，十六进制前缀 0x、0X，二进制前缀 0b、0B。

js 的零有正负之分，在作为分母的时候，两者是有区别的，结果分别是 +Inifinity 和 -Inifinity：

(1 / +0) === (1 / -0) // false

NaN 表示非数值，NaN 本身一个 number，不等于任何值包括自己，与任何其它数的运算都是 NaN：

5 - 'x' // NaN

typeof NaN // 'number'

NaN === NaN // false

NaN + 32 // NaN

Infinity 大于 NaN 以外的一切数值，-Inifinity 小于 NaN 以外的一切数值，与 NaN 比较全是返回 false，0 乘以 Infinity 结果是 NaN：

0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity

Infinity + Infinity // Infinity
Infinity * Infinity // Infinity
Infinity - Infinity // NaN
Infinity / Infinity // NaN

undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity

5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0

全局方法 parsetInt()，第一个参数是要转换的字符串，第二个参数是进制:

将字符串转为整数
字符串头部有空格，空格会被自动去除
参数不是字符串，则会先转为字符串再转换
遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分
字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN
返回值只有两种可能，要么是一个十进制整数，要么是NaN
字符串以0开头，将其按照10进制解析
字符串以0x或0X开头，parseInt会将其按照十六进制数解析
将科学计数法的表示方法视为字符串
字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值，如果最高位无法转换，则直接返回NaN。

parseInt('123')  // 123，字符串转换为整数
parseInt('1.23') // 1
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15
parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

全局方法 parseFloat()，将一个字符串转换成浮点数：

字符串符合科学计数法，则会进行相应的转换
包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分
自动过滤字符串前导的空格
参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN
将空字符串转为NaN

isNaN() 判断一个值是否为 NaN。

传入字符串的时候，字符串会被先转成NaN，所以最后返回true
使用isNaN之前，最好判断一下数据类型

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的这个特点，进行判断：

function myIsNaN(value) {
  return value !== value;
}

isFinite方法返回一个布尔值，表示某个值是否为正常的数值 Infinity、-Infinity、NaN 和 undefined 以外的值都返回 true。

字符串

单引号字符串的内部，可以使用双引号；
双引号字符串的内部，可以使用单引号；
单引号内使用单引号、双引号内使用双引号，必须转义；
由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号；
字符串默认只能写在一行内，分成多行将会报错；
长字符串必须分成多行，可以在每一行的尾部使用反斜杠；
连接运算符（+）可以连接多个单行字符串；
字符串可以被视为字符数组，编号从 0 开始，超出边界返回 undefined；
无法改变字符串之中的单个字符，字符串内部的单个字符无法改变和增删；
length属性返回字符串的长度，无法改变；
使用 Unicode 字符集，引擎内部，所有字符都用 Unicode 表示；
会自动识别一个字符是字面形式表示，还是 Unicode 形式表示，输出时，所有字符都会转成字面形式；
每个字符在 JavaScript 内部都是以16位（即2个字节）的 UTF-16 格式储存，单位字符长度固定为16位长度，即2个字节；
以为历史原因对 UTF-16 的支持不完整，不支持四字节的字符，一个四字节字符被 js 认为是 2 个字符;

var s = 'hello';
s.length // 5

输出多行字符串，利用多行注释的变通：

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')

转义字符：

\0 ：null（\u0000）
\b ：后退键（\u0008）
\f ：换页符（\u000C）
\n ：换行符（\u000A）
\r ：回车键（\u000D）
\t ：制表符（\u0009）
\v ：垂直制表符（\u000B）
\' ：单引号（\u0027）
\" ：双引号（\u0022）
\\ ：反斜杠（\u005C）

Unicode 字符表示方法：

反斜杠后面紧跟三个八进制数（000到377），代表一个字符，例如 \251，只能表示 256 种字符；
\x后面紧跟两个十六进制数（00到FF），代表一个字符，例如 \xA9，只能表示 256 种字符；
\u后面紧跟四个十六进制数（0000到FFFF），代表一个字符，例如 \u00A9。

在非特殊字符前面使用反斜杠，则反斜杠会被省略。

在标识符中使用 Unicode 字符：

var f\u006F\u006F = 'abc';
foo // "abc"

一个四字节字符的长度：

'𝌆'.length // 2

JavaScript 原生提供两个 Base64 相关的方法：

btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值

将非 ASCII 码字符转为 Base64 编码，须转码：

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

对象

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合；
所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），可以不加引号；
如果键名是数值，会被自动转为字符串；
键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），且也不是数字，则必须加上引号；
每一个键名又称为“属性”（property），“键值”可以是任何数据类型；
一个属性的值为函数，通常把这个属性称为“方法”；
属性的值还是一个对象，可以形成了链式引用；
属性之间用逗号分隔，最后一个属性可加可不加；
属性可以动态创建，不必在对象声明时就指定；
不同的变量名指向同一个对象，这些变量都是引用，修改一个影响全部；
引用只局限于对象，如果两个变量指向同一个原始类型的值，变量都是拷贝；
读取对象属性，1 使用点运算符，2 使用方括号运算符，方括号内部可以使用表达式，数字自动转换为字符串；
数值键名不能使用点运算符，只能使用方括号运算符；
查看一个对象本身的所有属性：Object.keys(obj)；
delete 命令用于删除对象的属性，删除成功后返回 true；
delete 删除一个不存在的属性，delete不报错，而且返回 true；
只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除；
delete 命令只能删除对象本身的属性，无法删除继承的属性；
in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值）；
in 运算符能识别哪些属性是对象自身的，哪些属性是继承的,使用对象的 hasOwnProperty 方法判断是否为对象自身的属性；
for…in循环用来遍历所有可遍历（enumerable）的属性，会跳过不可遍历的属性，也遍历继承的属性；
with 在操作同一个对象的多个属性时，提供一些书写的方便；
如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量；

对象定义：

var obj = {
  foo: 'Hello',
  bar: 'World'
};

读取属性：

var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

属性后绑定：

var obj = { p: 1 };

// 等价于

var obj = {};
obj.p = 1;

查看对象所有属性：

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

删除对象的属性：

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

遍历所有可以遍历的属性：

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

with 语句：

with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;

建议不要使用 with 语句，可以考虑用一个临时变量代替 with：

with(obj1.obj2.obj3) {
  console.log(p1 + p2);
}

// 可以写成
var temp = obj1.obj2.obj3;
console.log(temp.p1 + temp.p2);

函数

三种声明方式：function 命令、函数表达式、Function 构造函数；
如果同一个函数被多次声明，后面的声明就会覆盖前面的声明；
函数可以调用自身，形成递归（recursion）;
函数与其他数据类型地位平等；
函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部；
函数的name属性返回函数的名字；
函数自带属性：函数名 .name、传入参数个数 .length、函数代码 .toString()；
函数外部定义的变量是全局变量，可以在函数内部读取；
函数内部定义的变量会覆盖同名的全局变量；
函数运行时使用的定义函数时的作用域；
调用函数时无论提供多少个参数（或者不提供参数），JavaScript 都不会报错！
一定要省略靠前的参数，只有显式传入undefined；
原始类型的值（数值、字符串、布尔值），传递方式是传值传递；
复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）；
函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，不会影响到原始值；
有同名的参数，则取最后出现的那个值；
arguments对象包含了函数运行时的所有参数，arguments[0]就是第一个参数；
正常模式下，arguments对象可以在运行时修改，严格模式下，arguments对象与函数参数不具有联动关系（修改arguments对象不会影响到实际的函数参数）；
arguments很像数组，但它是一个对象，数组专有的 slice 、forEach 方法不能在 arguments 上使用；
arguments对象带有一个callee属性，返回它所对应的原函数；
通过arguments.callee 可以调用函数自身，在严格模式里面是禁用的；
闭包可以读取函数内部的变量，使得内部变量记住上一次调用时的运算结果；
立即执行定义的函数：不要让 function 出现在行首，将其放在一个圆括号里面，或者用其它方法，只要 function 不在行首就可以；
eval命令接受一个字符串作为参数，并将这个字符串当作语句执行；
放在eval中的字符串，应该有独自存在的意义，不能用来与eval以外的命令配合使用；
如果eval的参数不是字符串，那么会原样返回；
eval没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题；
使用严格模式，eval内部声明的变量，不会影响到外部作用域；
凡是使用别名执行eval，eval内部一律是全局作用域；

function 命令声明函数：

function print(s) {
  console.log(s);
}

函数表达式声明函数：

var print = function(s) {
  console.log(s);
};

Function 构造函数声明：

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

函数的 name 属性：

function f1() {}
f1.name // "f1"

以字符串的形式返回函数的代码：

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }

原生函数返回 [native code]：

Math.sqrt.toString()
// "function sqrt() { [native code] }"

函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，不会影响到原始值；

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

严格模式修改 arguments，对传入参数无影响：

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

将 arguments 转换成数组：

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

立即执行定义的函数：

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

严格模式 eval 不影响外部：

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

使用别名执行 eval，eval 内部用的是全局作用域：

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

数组

数组用方括号表示，编号从 0 开始；
数组也可以先定义后赋值；
任何类型的数据，都可以放入数组；
数组属于一种特殊的对象，typeof 运算符会返回数组的类型是 object；
数组的特殊性体现在，它的键名是按次序排列的一组整数（0，1，2…），Object.keys方法返回数组的所有键名；
数组的length属性，返回数组的成员数量，成员最多（2^32-1）个；
数组的数字键不需要连续，length属性的值总是比最大的那个整数键大1；
length属性是可写的，人为设置一个小于当前成员个数的值，数组的成员会自动减少到length设置的值；
清空数组的一个有效方法，就是将length属性设为0；
如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位;
数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值；
检查某个键名是否存在的运算符in，适用于对象，也适用于数组；
for…in循环不仅可以遍历对象，也可以遍历数组，但是，for…in不仅会遍历数组所有的数字键，还会遍历非数字键。；
不推荐使用for…in遍历数组，考虑使用for循环或while循环；
数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）；
如果最后一个元素后面有逗号，并不会产生空位；
数组的空位是可以读取的，返回undefined；
使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性；
使用数组的forEach方法、for…in结构、以及Object.keys方法进行遍历，空位都会被跳过；
如果某个位置是undefined，遍历的时候就不会被跳过；
空位就是数组没有这个元素，所以不会被遍历到，而undefined则表示数组有这个元素，值是undefined；
一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象语法上称为“类似数组的对象”（array-like object）；
数组的slice方法可以将“类似数组的对象”变成真正的数组；

数组的数字键不需要连续：

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

把类似数组的对象转换成数组：

var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
  console.log(chr);
});
// a
// b
// c

运算符

算数运算符： +、-、*、/、**（指数）、%（余数）、++、–

加法运算符会被重载；
加法外的运算符，所有运算子一律转为数值，再进行相应的数学运算；
运算子是对象，必须先转成原始类型的值，obj.valueOf().toString()；
余数运算符结果的正负号由第一个运算子的正负号决定；
余数运算符还可以用于浮点数的运算，浮点数不是精确的值，无法得到完全准确的结果；
指数运算符是右结合，而不是左结合，先进行最右边的计算；

比较运算符：>、<、<=、>=、==、===、!=、!==。

字符串按照字典顺序进行比较；
两个运算子都是原始类型的值，则是先转成数值再比较；
任何值（包括NaN本身）与NaN比较，返回的都是false；
运算子是对象，会转为原始类型的值，再进行比较；
相等运算符（==）比较两个值是否相等，严格相等运算符（===）比较它们是否为“同一个值”；
两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转换成同一个类型，再用严格相等运算符进行比较；
严格相等：两个复合类型（对象、数组、函数）的数据比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个地址；
严格相等：正0等于负0；
严格相等：undefined和null与自身严格相等；
“严格不相等运算符”（!==），先求严格相等运算符的结果，然后返回相反值；
普通相等：undefined和null与其他类型的值比较时，结果都为false，它们互相比较时结果为true；
相等运算符隐藏的类型转换，会带来一些违反直觉的结果；
建议不要使用相等运算符（==），最好只使用严格相等运算符（===）；

布尔运算符：!、&&、

、?…:…

二进制运算符：

、&、~、^、«、»、»>（头部补 0 右移动）

位运算符直接处理每一个比特位（bit），速度极快;
位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行；
做位运算的时候，是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数；
二进制否运算符（~）将每个二进制位都变为相反值；
一个数与自身的取反值相加，等于-1；
连续对两个数a和b进行三次异或运算，可以互换它们的值；
左移运算符，尾部补0；
右移头部补符号位；
头部补零的右移运算符（»>）头部一律补零，不考虑符号位；

其它运算符：void（执行表达式，不返回任何值）、,（返回后一个表达式的值）。

void 运算符常用语浏览器连接，方法执行，确不产生页面跳转：

<a href="javascript: void(document.form.submit())">
  提交
</a>

加法运算符会被重载：

true + true // 2
1 + true // 2
'a' + 'bc' // "abc"
1 + 'a' // "1a"
false + 'a' // "falsea"
'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"

加法外的运算符，所有运算子一律转为数值，再进行相应的数学运算：

- '2' // -1
* '2' // 2
/ '2' // 0.5

运算子是对象，必须先转成原始类型的值（obj.valueOf().toString()，调用对象的 valueof() 方法，然后调用toString()），然后再相加：

var obj = { p: 1 };
obj.valueOf().toString() // "[object Object]"

可以自定定义 valueOf 和 toString 方法：

var obj = {
  valueOf: function () {
    return 1;
  }
};

obj + 2 // 3

指数运算符是右结合的：

// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512

利用位运算符特性，将数值转换成 32 位整数：

function toInt32(x) {
  return x | 0;
}

数据类型转化

强制转换函数 Number()、String()、Boolean()；
Number() 转换比 parseInt 严格，有一个字符无法转成数值，整个字符串就会被转为NaN；
Number() 的参数是对象时，将返回NaN，除非是包含单个数值的数组；
String() 可以将任意类型的值转化成字符串；
String() 的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式;
Boolean() 将任意类型的值转为布尔值；
比较琐碎的是自动转换，运算符章节已经包含该部分内容；

错误处理

解析或者运行时，发生粗欧文抛出用 Error() 构造的对象；
Error 实例对象必须有 message 属性，name 和 stack 属性不是标准要求；
原生定义了 Error 的 6 个派生对象：SyntaxError、ReferenceError、RangeError、TypeError、URIError、EvalError；
可以自定义错误对象；
用 throw 抛出错误对象实例，实际 throw 可以抛出任意类型的值；
用 try…catch 捕获thow 抛出的值，try…catch 可以嵌套；
支持 try…catch…finally，finally 无论是否抛出异常都会被执行，中断执行之前先执行 finally 代码块，然后在提示报错信息；
catch 中的 throw 和 return 都会等 finally 中的代码执行结束后再运行，但是如果 finally 中有 return ，那么 catch 中的 thrown 和 return 就不会执行了，也就是说如果在 finally 中返回了，就直接返回了；

错误实例：

var err = new Error('出错了');
err.message // "出错了"

自定义错误对象：

function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

面向对象

new 执行构造函数，构造函数返回实例对象；
构造函数内部可以用 new.target，用 new 指令时，new.target指向当前函数；
Object.create()：以现有的对象作为模板，生成新的实例对象；
this 可以用在构造函数之中，表示实例对象；
this 在函数体内部，指代函数当前的运行环境；
全局环境使用this，它指的就是顶层对象window；
构造函数中的this，指的是实例对象；
对象的方法里面包含this，this的指向就是方法运行时所在的对象；
this的指向是不确定的，所以切勿在函数中包含多层的this；
数组的map和foreach方法，允许提供一个函数作为参数，这个函数内部不应该使用this；
回调函数中的this往往会改变指向，最好避免使用；
JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向；
函数实例的call方法，函数内部this指向第一个传入参数，如果参数为空、null和undefined，则默认传入全局对象，后面的参数是函数调用时所需的参数；
函数实例的apply()，函数内部this指向第一个传入参数，第二个参数是调用参数数组；
bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数，剩余参数作为函数的传入参数；
类的继承通过原型对象 prototype 实现， ES6 引入了 class 方法；
原型对象的所有属性和方法，都能被实例对象共享；
prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数；
instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例；
子类的构造函数中调用父类的构造函数：第一步, Super.call(this) ，第二步，子类的原型指向父类的原型；
JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能；
JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”；

用 new 调用构造函数：

function f() {
  console.log(new.target === f);
}

f() // false
new f() // true

以现有对象为模版，创建新的对象：

var person1 = {
  name: '张三',
  age: 38,
  greeting: function() {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};

var person2 = Object.create(person1);

person2.name // 张三
person2.greeting() // Hi! I'm 张三.

bind 绑定方法：

var print = d.getTime.bind(d);
print() // 1481869925657

原型对象：

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

父类：

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

子类:

// 第一步，子类继承父类的实例
function Rectangle() {
  Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
  this.base = Shape;
  this.base();
}

// 第二步，子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

多重继承：

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world'

异步操作

回调函数；
事件监听；
发布/订阅；
定时器，setTimeout()、setInterval()、clearTimeout()、clearInterval()
Promise 对象充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口
所有异步任务都返回一个 Promise 实例。Promise 实例有一个then方法，用来指定下一步的回调函数；
Promise构造函数接受一个参数分别是resolve和reject的函数，这两个参数是由 JavaScript 提供的函数；
resolve：Promise实例的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject：Promise实例的状态从“未完成”变为“失败”，异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去；
Promise 实例的then方法，用来添加回调函数；

var timerId = setTimeout(func|code, delay);

var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);

clearTimeout(id1);
clearInterval(id2);

// f1的异步操作执行完成，就会执行f2。
var p1 = new Promise(f1);
p1.then(f2);

严格模式

严格模式是从 ES5 进入标准，明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。

进入严格模式方法：

'use strict';

严格模式特点：

只读属性不可写；
只设置了取值器 get 的属性不可写；
对禁止扩展的对象添加新属性，会报错；
eval、arguments 不可用作标识名；
函数不能有重名的参数；
禁止八进制的前缀0表示法；
全局变量必须显式声明；
禁止 this 关键字指向全局对象；
禁止使用 fn.callee、fn.caller；
禁止使用 arguments.callee、arguments.caller;
禁止删除变量；
禁止使用 with 语句；
创设 eval 作用域；
arguments 不再追踪参数的变化；
非函数代码块不得声明函数，ES6 会引入块级作用域；
严格模式新增了一些保留字：implements、interface、let、package、private、protected、public、static、yield；

编程建议

如果前后两句加上分号后无法解释，js 引擎会将两句合并，即不自动在行尾加分号，会出现很奇特的效果，因此最好不省略分号；
switch…case结构可以用对象结构代替。

没有加分号的代码：

a = b = c = 1

a
++
b
--
c

console.log(a, b, c)
// 1 2 0

等同于：

a = b = c = 1;
a;
++b;
--c;

标准库

Object 对象:

Object.getPrototypeOf()
Object.setPrototypeOf()
Object.create()
Object.prototype.isPrototypeOf()
Object.prototype.proto
Object.getOwnPropertyNames()
Object.prototype.hasOwnProperty()

对象的拷贝：

function copyObject(orig) {
  var copy = Object.create(Object.getPrototypeOf(orig));
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

function copyOwnPropertiesFrom(target, source) {
  Object
    .getOwnPropertyNames(source)
    .forEach(function (propKey) {
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
  return target;
}

ES 2017 引入的写法:

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}

属性描述对象:

Array 对象:

包装对象:

Boolean 对象:

Number 对象:

String 对象:

Math 对象:

Date 对象:

RegExp 对象:

JSON 对象：

与运行环境相关的概念

DOM
事件
浏览器模型

console 对象

console 是 JavaScript 的原生对象，用于输出信息到控制台，包含以下静态方法：

console.log()
console.info()
console.debug()
console.warn()
console.error()
console.table()  // 将复合类型数据以表格形式显示
console.count()  // console 计数器，以输入参数为标签，分类计数
console.dir()    // 以目录形式显示
console.dirxml() // 以目录树形式显示
console.assert() // 断言，第一个参数是条件，第二个是参数是不成立时的显示值
console.time()，console.timeEnd() //用于计时，参数是计时器名称；
console.group()，console.groupEnd()，console.groupCollapsed()  //显示分组边界
console.trace()  // 显示调用堆栈
console.clear()  // 清空控制台

这些方法会：

自动添加换行符；
可以使用格式字符串，支持占位符；
console.debug 在打开显示级别在 verbose 的情况下显示；

console 支持的占位符，其中 %c 必须对应 CSS 代码：

%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格式字符串

控制台自带命令行方法

$_：上一个表达式值；
$0 - $4：最近五个在 Elements 选中的 Dom 元素；
$(selector)：第一个匹配的元素；
$$(selector)：返回选中的 DOM 对象；
$x(path)：返回匹配特定 XPath 表达式的所有 DOM 元素；
inspect(object)：打开相关面板，并选中相应的元素，显示它的细节；
getEventListeners(object): 登记了回调函数的各种事件；
keys(object)：返回一个数组，包含object的所有键名；
values(object)：object的所有键值；
monitorEvents(object[, events])：监听特定对象上发生的特定事件；
Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面；

DOM

节点类型 7 种： Document、DocumentType、Element、Attribute、Text、Comment、DocumentFragment。

所有 DOM 对象都继承 Node 属性和方法：

Node.prototype.nodeType
Node.prototype.nodeName
Node.prototype.nodeValue
Node.prototype.textContent
Node.prototype.baseURI
Node.prototype.ownerDocument
Node.prototype.nextSibling
Node.prototype.previousSibling
Node.prototype.parentNode
Node.prototype.parentElement
Node.prototype.firstChild，Node.prototype.lastChild
Node.prototype.childNodes
Node.prototype.isConnected

Node.prototype.appendChild()
Node.prototype.hasChildNodes()
Node.prototype.cloneNode()
Node.prototype.insertBefore()
Node.prototype.removeChild()
Node.prototype.replaceChild()
Node.prototype.contains()
Node.prototype.compareDocumentPosition()
Node.prototype.isEqualNode()，Node.prototype.isSameNode()
Node.prototype.normalize()
Node.prototype.getRootNode()

Document 属性和方法：

document.cookie
document.designMode
document.implementation
document.open()，document.close()
document.write()，document.writeln()
document.querySelector()，document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()
document.getElementById()
document.elementFromPoint()，document.elementsFromPoint()
document.caretPositionFromPoint()
document.createElement()
document.createTextNode()
document.createAttribute()
document.createComment()
document.createDocumentFragment()
document.createEvent()
document.addEventListener()，document.removeEventListener()，document.dispatchEvent()
document.hasFocus()
document.adoptNode()，document.importNode()
document.createNodeIterator()
document.createTreeWalker()
document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()
document.getSelection()

Element 属性和方法：

Element.attributes
Element.className，Element.classList
Element.dataset
Element.innerHTML
Element.outerHTML
Element.clientHeight，Element.clientWidth
Element.clientLeft，Element.clientTop
Element.scrollHeight，Element.scrollWidth
Element.scrollLeft，Element.scrollTop
Element.offsetParent
Element.offsetHeight，Element.offsetWidth
Element.offsetLeft，Element.offsetTop
Element.style
Element.children，Element.childElementCount
Element.firstElementChild，Element.lastElementChild
Element.nextElementSibling，Element.previousElementSibling

Element.querySelector()
Element.querySelectorAll()
Element.getElementsByClassName()
Element.getElementsByTagName()
Element.closest()
Element.matches()

Element.scrollIntoView()
Element.getBoundingClientRect()
Element.getClientRects()
Element.insertAdjacentElement()
Element.insertAdjacentHTML()，Element.insertAdjacentText()
Element.remove()
Element.focus()，Element.blur()
Element.click()

Element.getAttribute()
Element.getAttributeNames()
Element.setAttribute()
Element.hasAttribute()
Element.hasAttributes()
Element.removeAttribute()

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知

事件

EventTarget.addEventListener()
EventTarget.removeEventListener()
EventTarget.dispatchEvent()

浏览器模型

参考

编程基础系统基础关注跟踪

Kubernetes Prometheus 超级账本

小程序