ES6 是 ECMA 为 JavaScript 制定的第 6 个版本的标准，标准委员会 TC39 最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。ECMAscript 2015 是在2015年6月份发布的ES6的第一个版本。依次类推 ECMAscript 2016 是 ES6 的第二个版本、 ECMAscript 2017 是 ES6 的第三个版本。查看浏览器对ES6的语法支持情况。以下记录了 ES6 的比较常见的特性，并做了简单的解释，默认为 ES2015 引入（finished）的，如果不是则在后面用（）标志引入的版本。也可以从这里查看从哪个版本支持。

语句 & 声明 & 表达式 & 运算符

  1. let 和 const 变量声明
    let const 声明的变量具有块级作用域，不会变量提升，不能重复声明。
    const 声明常量，声明时必须立即初始化。
1
2
let x = 1;
const y = 2;
  1. 变量的解构赋值
    ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
1
2
let [x, y] = [1, 2, 3];
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

  1. globalThis 对象
    引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。(ES2020)

  2. for…of 循环表达式
    for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

  3. new.target
    new.target属性允许你检测函数或构造函数是否是通过new运算符被调用的。在通过new运算符被初始化的函数或构造函数中，new.target返回一个指向构造函数或函数的引用。在普通的函数调用中，new.target 的值是undefined。

  4. … spread扩展操作符
    扩展运算符 … 将一个数组或arguments或对象的可遍历属性（ES2018）转为用逗号分隔的参数序列。

字符串

  1. 支持 Unicode 表示，允许采用 \uxxxx 形式表示一个字符
  2. 行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配 （ES2019）
  3. 为字符串添加了遍历器接口，支持使用for…of循环遍历字符串
  4. 模板字符串，可以使用反引号 ``来拼接多行字符串，将变量名写在 ${} 中
1
2
3
4
5
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);
  1. 标签模板
    模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。标签模板可以用来过滤 HTML 字符串，防止用户输入恶意内容，也可以用来解决多语言转换的问题（i18n）。
1
2
3
4
5
6
let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
  1. 新添加的字符串方法及实例方法
方法 作用 例子
String.raw() String.raw() 是一个模板字符串的标签函数，是用来获取一个模板字符串的原始字符串的，占位符（例如 ${foo}）会被处理为它所代表的其他字符串，而转义字符（例如 \n）不会。 String.raw('Hi\n${2+3}!') === 'Hi\\n5!'
String.fromCodePoint() 返回使用指定的代码点序列创建的字符串 String.fromCodePoint(0x1D306, 0x61, 0x1D307) === "\uD834\uDF06a\uD834\uDF07"
String.prototype.codePointAt() 返回一个 Unicode 编码点值的非负整数 'd'.codePointAt() === 100
String.prototype.startsWith() 用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。 'i love u'.startsWith('i lo')
String.prototype.endsWith() 用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。 'i love u'.endsWith('e u')
String.prototype.repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。 'isee '.repeat(3) === 'isee isee isee '
String.prototype.normalize() 按照指定的一种 Unicode 正规形式将当前字符串正规化。（如果该值不是字符串，则首先将其转换为一个字符串）。 '\u00F1'.normalize() === '\u006E\u0303'.normalize()
String.prototype.includes() 用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。 'To be, or not to be, that is the question.'.includes('To be')
String.prototype.padStart() 用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。(ES2017) 'abc'.padStart(10, "foo") === 'foofoofabc'
String.prototype.padEnd() 用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。(ES2017) 'abc'.padEnd(10, 'foo') === 'abcfoofoof'
String.prototype.trimStart() 从字符串的开头删除空格。trimLeft() 是此方法的别名。(ES2019) ' Hello world! '.trimStart() === 'Hello world! '
String.prototype.trimEnd() 从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。(ES2019) ' Hello world! '.trimStart() === ' Hello world!'
String.prototype.matchAll() 返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。(ES2020) 'test1test2'.matchAll(/t(e)(st(\d?))/g)
String.prototype.replaceAll() 被用来在正则表达式和字符串直接比较，然后用新的子串来替换所有被匹配的子串。（ES2021）
  1. JSON.stringify 行为改变 (ES2019)
    如果遇到0xD800到0xDFFF之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

正则

  1. 从 ES2015 开始，当第一个参数为正则表达式而第二个标志参数存在时，不再抛错
1
var regex = new RegExp(/xyz/, 'i');
  1. 字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。

String.prototype.match 调用 RegExp.prototype[Symbol.match]
String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
String.prototype.search 调用 RegExp.prototype[Symbol.search]
String.prototype.split 调用 RegExp.prototype[Symbol.split]

  1. 新添加了实例属性与对应的修饰符
实例属性 修饰符 含义
RegExp.prototype.unicode u 用来正确处理大于\uFFFF的 Unicode 字符(ES2018)
RegExp.prototype.sticky y 反映了搜索是否具有粘性（ 仅从正则表达式的 lastIndex 属性表示的索引处搜索 ）
RegExp.prototype.flags 返回一个字符串，由当前正则表达式对象的标志组成。
RegExp.prototype.dotAll s 使得.可以匹配任意单个字符(ES2018)
  1. 支持后行断言 (ES2018)
1
2
3
4
5
6
7
// 先行断言 先行否定断言
/\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
/\d+(?!%)/.exec('that’s all 44 of them')                 // ["44"]

//后行断言 后行否定断言
/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
/(?<!\$)\d+/.exec('it’s is worth about €90')                // ["90"]
  1. Unicode 属性类 \P \p (ES2018)
    引入了一种新的类的写法\p{…}和\P{…}，允许正则表达式匹配符合 Unicode 某种属性的所有字符。
1
2
const regexGreekSymbol = /\p{Script=Greek}/u; // \p{Script=Greek}指定匹配一个希腊文字母
regexGreekSymbol.test('π'); // true
  1. 具名组匹配 & 具名组匹配的引用 (ES2018)
    正则表达式可以使用圆括号进行组匹配
1
2
3
4
5
6
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

如果要在正则表达式内部引用某个“具名组匹配”，可以使用 \k<组名> 的写法。

1
2
3
const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false

数值

  1. 数值二进制和八进制表示法
    分别用前缀0b（或0B）和0o（或0O）表示。
1
2
0b111110111 === 503 // true
0o767 === 503 // true
  1. 方法 Number.isFinite(), Number.isNaN()
    与全局方法isFinite()和isNaN()相比，这两个新方法只对数值有效，非数值返回 false
1
2
3
4
5
6
7
8
9
10
isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false

  1. Number.parseInt(), Number.parseFloat()
    与全局方法 parseInt() 和 parseFloat() 相同

  2. Number.isInteger()
    用来判断一个数值是否为整数

  3. Number.EPSILON 属性
    常量，表示 1 与大于 1 的最小浮点数之间的差

1
Number.EPSILON === Math.pow(2, -52)
  1. Number.MAX_SAFE_INTEGER 与 Number.MIN_SAFE_INTEGER，Number.isSafeInteger()
    Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER这两个常量，用来表示JavaScript能够准确表示的整数范围的上下限。
1
2
3
4
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true

Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。

  1. Math 对象的新方法（17个）
方法 含义
Math.trunc(x) 返回一个数的整数部分，直接去除其小数点及之后的部分。
Math.sign(x) 返回一个数的符号，得知一个数是正数、负数还是 0。
Math.cbrt(x) 返回一个数的立方根。
Math.clz32(x) 返回一个 32 位整数的前导零的数量。
Math.imul(x, y) 返回 32 位整数乘法的结果。
Math.fround(x) 返回最接近一个数的单精度浮点型表示。
Math.imul(x, y) 返回 32 位整数乘法的结果。
Math.hypot([x[, y[, …]]]) 返回其所有参数平方和的平方根。
Math.expm1(x) 返回 exp(x) - 1 的值。
Math.log1p(x) 返回一个数加 1 的和的自然对数（㏒e，即 ㏑）。
Math.log10(x) 返回一个数以 10 为底数的对数。
Math.log2(x) 返回一个数以 2 为底数的对数。
Math.sinh(x) 返回x的双曲正弦
Math.cosh(x) 返回x的双曲余弦
Math.tanh(x) 返回x的双曲正切
Math.asinh(x) 返回x的反双曲正弦
Math.acosh(x) 返回x的反双曲余弦
Math.atanh(x) 返回x的反双曲正切
  1. 指数运算符 **(ES2016)
    右结合的指数运算符
1
2
2 ** 2 === Math.pow(2, 2)
2 ** 3 ** 2 === 2 ** (3 ** 2)

  1. BitInt 数据类型 (ES2020)
    BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示

  2. _ 数字分隔符 （ES2021）
    可以使用下划线来分割数字，下划线没有实际的意义数字的值不会变化，更具有可读性

1
2
1_000_000_000 === 1000000000;
101_475_938.38 === 101475938.38;

函数

  1. 函数参数的默认值
1
2
3
4
5
6
7
function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }
  1. rest 参数
    允许将一个不定数量的参数表示为一个数组
1
2
3
4
5
6
7
8
9
10
11
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

  1. 只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式

  2. 函数 Function.name 属性，返回该函数的函数名

  3. 箭头函数
    (1) 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
    (2) 不可以当作构造函数
    (3) 不可以使用arguments对象
    (4) 不可以使用yield命令

  4. 尾递归调用优化

  5. 允许函数的最后一个参数有尾逗号 (ES2017)

  6. Function.prototype.toString() 将会包含注释空格 (ES2019)

  7. catch 命令的参数可省略 (ES2019)

数组

  1. 扩展运算符 … 将一个数组转为用逗号分隔的参数序列
1
2
console.log(...[1, 2, 3])
// 1 2 3
  1. Array.from() 方法 类似数组的对象（array-like object）和可遍历（iterable）的对象 转换为数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

// string
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

// Set 对象
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
  1. Array.of() 将一组值，转换为数组
1
2
Array(3) // [, , ,]
Array.of(3) // [3]

  1. 数组实例方法 copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

  2. 数组实例方法 find() 和 findIndex() 用于找出第一个符合条件的数组成员和位置

  3. 数组实例方法 fill() 使用给定值，填充一个数组

  4. 数组实例方法 entries() keys() values() 对健值对、健名、健值进行遍历，返回Interator对象

  5. 数组实例方法 includes() 返回一个布尔值，表示某个数组是否包含给定的值 (ES2016)

  6. 数组实例方法 flat() flatMap() 对数组进行扁平化，映射后扁平化 (ES2019)

1
2
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
  1. Array.prototype.sort() 的默认排序算法稳定 (ES2019)

对象

  1. 对象属性的简洁表示法
1
2
3
4
5
const foo = 'bar';
const baz = {foo};

// 等同于
const baz = {foo: foo};
  1. 定义对象时，属性名允许使用表达式
1
2
3
4
5
6
let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

  1. super 关键字 代表对象的原型对象

  2. 扩展运算符 … 将一个对象的可遍历属性转为用逗号分隔的参数序列（ES2018）

  3. 可选链操作符 ?. 用于在获取对象属性或调用对象方法时预先判断对象的属性方法是否存在 （ES2020）

1
2
3
4
5
6
7
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

// 相当于
const firstName = message?.body?.user?.firstName || 'default';
  1. 空值合并操作符 ?? 用于对 null 与 undefined的值赋值默认值 （ES2020）
1
2
3
4
// 与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0 或 false）时。
const showMask = settings.showMask || true;

const showMask = settings.showMask ?? true;
  1. 对象方法 Object.is() 用于判断两个值是否同值相等
    与 === 基本一致，有两个例外
1
2
3
4
5
+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

  1. 对象方法 Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

  2. 对象方法 Object.getOwnPropertyDescriptors() 用于获取所指定对象的所有自身属性的描述符 （ES2017）

  3. 对象方法 Object.getPrototypeOf() 与 Object.setPrototypeOf()

在 ES2015中 Object.getPrototypeOf() 的入参如果不是对象将会被转换成对象
Object.setPrototypeOf() 用设置一个指定的对象的原型 (即, 内部[[Prototype]]属性）到另一个对象或 null。同样如果入参不是对象将会被转换成对象。

  1. 对象方法 Object.entries() (ES2017) Object.keys() Object.values() (ES2017) 对健值对、健名、健值进行遍历，返回Interator对象

  2. 对象方法 Object.fromEntries() 用于把键值对列表转换为一个对象。(ES2019)

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，一个symbol值能作为对象属性的标识符

  1. Symbol的实例属性 Symbol.prototype.description 返回Symbol 的描述 (ES2019)

  2. Symbol方法 Symbol.for()，Symbol.keyFor()
    Symbol.for(key) 方法会根据给定的键 key，来从运行时的 symbol 注册表中找到对应的 symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入全局 symbol 注册表中。
    Symbol.keyFor(sym) 方法用来获取 symbol 注册表中与某个 symbol 关联的键。

  3. Symbol的属性
    这些属性存在的意义为，子类可以重载这些属性来改变默认的行为。
    这些属性都是不可写不可枚举不可配置的。

属性 作用
Symbol.hasInstance Symbol.hasInstance用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。
Symbol.isConcatSpreadable Symbol.isConcatSpreadable用于配置某对象作为Array.prototype.concat()方法的参数时是否展开其数组元素。
Symbol.species Symbol.species 是个函数值属性，其被构造函数用以创建派生对象
Symbol.match Symbol.match 指定了匹配的是正则表达式而不是字符串。String.prototype.match() 方法会调用此函数
Symbol.replace Symbol.replace 这个属性指定了当一个字符串替换所匹配字符串时所调用的方法。String.prototype.replace() 方法会调用此方法。
Symbol.search Symbol.search 指定了一个搜索方法，这个方法接受用户输入的正则表达式，返回该正则表达式在字符串中匹配到的下标，这个方法由以下的方法来调用 String.prototype.search()
Symbol.split Symbol.split 指向 一个正则表达式的索引处分割字符串的方法。 这个方法通过 String.prototype.split() 调用
Symbol.iterator Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用
Symbol.toPrimitive Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。
Symbol.toStringTag Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString() 方法会去读取这个标签并把它包含在自己的返回值里。
Symbol.unscopables Symbol.unscopables 指用于指定对象值，其对象自身和继承的从关联对象的 with 环境绑定中排除的属性名称。
Symbol.asyncIterator Symbol.asyncIterator 符号指定了一个对象的默认异步迭代器。如果一个对象设置了这个属性，它就是异步可迭代对象，可用于for await…of循环（ES2018）

Set & Map

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

  1. Set的实例属性 Set.prototype.size 返回 Set 对象中的值的个数

  2. Set的实例方法

方法 作用
Set.prototype.add(value) 在Set对象尾部添加一个元素。返回该Set对象。
Set.prototype.delete(value) 删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value) 返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear() 移除Set对象内的所有元素。
Set.prototype.entries() 返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似， 每个值的键和值相等。
Set.prototype.keys() 与values()方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。
Set.prototype.values() 返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。
Set.prototype.forEach(callbackFn[, thisArg]) 按照插入顺序，为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数，回调中的this会是这个参数。

WeakSet 对象允许你将弱保持对象存储在一个集合中。
与Set有两点不同
（1）与Set相比，WeakSet 只能是对象的集合，而不能是任何类型的任意值。
（2）WeakSet持弱引用：集合中对象的引用为弱引用。 如果没有其他的对WeakSet中对象的引用，那么这些对象会被当成垃圾回收掉。 这也意味着WeakSet中没有存储当前对象的列表。 正因为这样，WeakSet 是不可枚举的。

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。和Object类似，最大的不同的是Map的key可以是任意值，而Object的key必须是string 或者Symbol。

  1. Map的实例属性 Map.prototype.size 返回 Map 对象中键值对的个数。

  2. Map的实例方法

方法 作用
Map.prototype.get(key) 返回键对应的值，如果不存在，则返回undefined。
Map.prototype.set(key, value) 设置Map对象中键的值。返回该Map对象。
Map.prototype.delete(key) 如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
Map.prototype.has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。
Map.prototype.clear() 移除Map对象的所有键/值对
Map.prototype.entries() 返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的 [key, value] 数组。
Map.prototype.keys() 返回一个新的 Iterator对象， 它按插入顺序包含了Map对象中每个元素的键 。
Map.prototype.values() 返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值 。
Map.prototype.forEach(callbackFn[, thisArg]) 按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。

WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。

Proxy & Reflect

Proxy 对象用于代理基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

用法

1
const p = new Proxy(target, handler);

target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

Reflect 是一个内置反射对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。
Reflect可以和Proxy配合使用来完成默认行为的基础上定制自定义的行为。

handler 对象的方法

proxy handler方法 含义 Reflect方法 含义
get(target, propKey, receiver) 拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。 Reflect.get(target, propKey, receiver) 获取对象身上某个属性的值，类似于 target[propKey]。
set(target, propKey, value, receiver) 拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。 Reflect.set(target, propKey, value, receiver) 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
has(target, propKey) 拦截propKey in proxy的操作，返回一个布尔值。 Reflect.has(target, propKey) 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
deleteProperty(target, propKey) 拦截delete proxy[propKey]的操作，返回一个布尔值。 Reflect.deleteProperty(target, propKey) 作为函数的delete操作符，相当于执行 delete target[propKey]。
ownKeys(target) 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。 Reflect.ownKeys(target) 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响).
getOwnPropertyDescriptor(target, propKey) 拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。 Reflect.getOwnPropertyDescriptor(target, propKey) 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符, 否则返回 undefined.
defineProperty(target, propKey, propDesc) 拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。 Reflect.defineProperty(target, propKey, propDesc) 和 Object.defineProperty() 类似。如果设置成功就会返回 true
preventExtensions(target) 拦截Object.preventExtensions(proxy)，返回一个布尔值。 Reflect.preventExtensions(target) 类似于 Object.preventExtensions()。返回一个Boolean。
getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy)，返回一个对象。 Reflect.getPrototypeOf(target) 类似于 Object.getPrototypeOf()。
isExtensible(target) 拦截Object.isExtensible(proxy)，返回一个布尔值。 Reflect.isExtensible(target) 类似于 Object.isExtensible().
setPrototypeOf(target, proto) 拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。 Reflect.setPrototypeOf(target, proto) 设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true。
apply(target, object, args) 拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。 Reflect.apply(target, thisArgument, args) 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似。
construct(target, args) 拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。 Reflect.construct(target, args) 对构造函数进行 new 操作，相当于执行 new target(…args)。

Proxy 方法 Proxy.revocable() 创建一个可销毁的代理对象

1
2
3
4
let {proxy, revoke} = Proxy.revocable(target, handler);

// 调用revoke()可销毁proxy
revoke()

Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
一个 Promise有以下几种状态:

  • pending: 初始状态，既不是成功，也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

  1. Promise实例方法 Promise.prototype.then() 用来执行resolved状态的回调

  2. Promise实例方法 Promise.prototype.catch() 用来执行错误时的回调（包括reject和抛出错误）

  3. Promise实例方法 Promise.prototype.finally() 用来执行不管 Promise 对象最后状态如何，都会执行的操作（ES2018）

  4. Promise方法 Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

  5. Promise方法 Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise resolve 或 reject，返回的 promise 就会 resolve 或 reject。

  6. Promise方法 Promise.allSettled()返回一个在所有给定的promise都已经 fulfilled 或rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的promise结果。 (ES2020)

  7. Promise方法 Promise.any(iterable) 接收一个Promise对象的集合，当其中的一个promise 成功，就返回那个成功的 promise 的值。 (ES2021)

  8. Promise方法 Promise.reject(reason) 方法返回一个带有拒绝原因的Promise对象。

  9. Promise方法 Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。

Generator

Generator 是由一个 generator function(function*) 或 GeneratorFunction 构造器生成新的 返回的符合 iterator 和 iterable 的对象

1
2
3
4
5
6
7
8
function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}

let g = gen(); 
// "Generator { }"

Gnerator对象实例方法

方法 含义
Generator.prototype.next() 返回一个由 yield表达式生成的值。
Generator.prototype.return() 返回给定的值并结束生成器。
Generator.prototype.throw() 向生成器抛出一个错误。

GeneratorFunction构造器生成新的 Generator 对象。

1
new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody)

async await (ES2017)

async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。

Module(import & export)

静态的import 语句用于导入由另一个模块导出的绑定。
export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

用法 

1
2
3
4
5
6
7
8
9
10
11
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name"); // 动态import (ES2020)
1
2
3
4
5
6
7
export var foo ='bar';
export function foo(){};
export default function cube(x) {
  return x * x * x;
}
export {foo as bar};
export { es6 as default } from './someModule';  // 支持引入导出重命名

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
同时import命令具有提升效果，会提升到整个模块的头部，首先执行。

1
2
3
4
5
export * as ns from "mod";

// 等同于
import * as ns from "mod";
export {ns};
  1. import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的URL。(ES2020)
1
2
3
4
5
<script type="module">
import './index.mjs?someURLInfo=5';
</script>

console.log(import.meta); // { url: "file:///home/user/my-module.mjs" }

class

class 声明创建一个基于原型继承的具有给定名称的新类。类声明不存在变量提升。

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class ClassName [extends] {
  static #privateProp = 0; // 静态私有属性 (不会被实例继承，不会被子类继承)
  #privateProp = 0; // 私有属性 (不会被子类继承)
  _prop = 0; // 类实例属性 (实例继承)
  constructor() {
    // 类的构造函数
    this._prop = 1; // this代表了实例
  }
  someMethod() {
    // 类实例方法(实例继承，子类继承)
  }
  static staticMethod() {
    // 静态方法（不会被实例继承，可以被子类继承）
  }
  static #privateMethod = () => {
    // 私有静态方法 （ES2020 stage3 不会被实例继承，不会被子类继承）
  }
  #privateSomeMethod = ()=> {
    // 私有方法 （ES2020 stage3 实例继承，不会被子类继承）
  }
}
let inst = new ClassName(); // 声明类的实例
inst.someMethod(); // 调用实例的方法
ClassName.staticMethod(); // 调用类的静态方法

class ChildClass extends ClassName { // 子类
  someMethod() {
    super.staticMethod(); // 可以通过super调用父类上的方法
  }
}
ChildClass.staticMethod() // 子类可以继承父类的静态方法

SharedArrayBuffer & Atomics (ES2017)

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。
Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象和 ArrayBuffer 对象进行原子操作。