ES6

let 和 const

let
	块级作用域
	不会被预解析（变量提升）
	暂时性死区
	不能重复声明
const
	常量，同let

解构赋值

// 对象解构：变量名 和 属性名 要对应
let obj = {
  a: 1,
  b: 2,
  c: 3,
};
let { a: x, c } = obj; // 将a重命名为x
console.log(x, c); // 1, 3
// 数组解构：变量名 和 值索引对应
let arr = [1, 2];
[b, a] = arr;
console.log(a, b); // 2, 1
// 字符串解构同数组
let str = "ABCD";
let [a, b] = str;
console.log(a, b); // A, B

扩展运算符

// 对象
// 展开运算符
let obj = {
  a: 1,
  b: 2,
};
let obj2 = {
  ...obj,
  c: 3,
  d: 4,
};
console.log(obj2);
/*
    {
        "a": 1,
        "b": 2,
        "c": 3,
        "d": 4
    }
*/
// 剩余参数
let { a, ...d } = obj2;
console.log(a, d);
/*
    1,
    {
        "b": 2,
        "c": 3,
        "d": 4
    }
*/
// 数组
// 展开运算符
let arr = [1, 2, 3];
let arr2 = ["a", ...arr, "b"];
console.log(arr2); // ["a", 1, 2, 3, "b"]
// 剩余参数
let arr3 = [1, 2, 3, 4, 5];
let [a, ...b] = arr3;
console.log(a, b); // 1, [2, 3, 4, 5]

Set 和 Map

Set

基础属性
Set.prototype.size属性 数据长度
Set.prototype.add() 添加子项  返回 set 数据本身
Set.prototype.has() 是否包含子项
Set.prototype.delete() 删除子项 返回 true | false
Set.prototype.clear(): 清空Set实例 返回 undefined
可迭代: (键名=键值)
Set.prototype.keys():返回键名;
Set.prototype.values(): 返回键值；
Set.prototype.entries(): 返回键值对;
可以包含任何 JavaScript 数据类型作为值

注:不会添加重复的值 返回类数组用[...set]或 Array.from(set)转为数组

let data = [...new Set([1, 2, 3, 1, 2])];
console.log(data); // [1, 2, 3]

扩展 WeakSet

成员都是对象 （WeakSet中的值只能是Object）
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
不支持迭代

Map

基础属性
Map.prototype.size属性 数据长度
Map.prototype.set() 设置子项  返回 Map 数据本身
Map.prototype.get() 不存在为undefined
Map.prototype.has() 是否包含子项
Map.prototype.delete() 删除子项 返回 true | false
Map.prototype.clear(): 清空Set实例 返回 undefined
可迭代:
Map.prototype.keys():返回键名;
Map.prototype.values(): 返回键值；
Map.prototype.entries(): 返回键值对;

使用 new 关键字和 Map 构造函数可以创建一个空映射 作用 快速找到 key 对应的 value，比对象性能好

const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

扩展 WeakMap

只接受对象作为键名 （WeakMap中的键只能是Object，只要有一个键无效就会抛出错误）
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不支持迭代

const weakMap = new WeakMap([
  [key1, 1],
  [key2, 2],
]);

箭头函数

1. 没有自己的 this,通常指向外部的对象的 this；
2. 不可以当作构造函数，即不能使用 new 命令；
3. 没有 arguments 对象，可以用 rest 代替；
4. 不可以使用 yield 命令，不能作为 Generator 函数。

对象方法

Object.assign(target, ...sources);

将所有可枚举属性的值从一个或多个源对象复制到目标对象
参数:
    target 目标对象
    sources 源对象
返回值：
    合并后的目标对象

Object.is(value1, value2);

判断两个值是否是相同的值。
规则：
    两个值都是 undefined
    两个值都是 null
    两个值都是 true 或者都是 false
    两个值是由相同个数的字符按照相同的顺序组成的字符串
    两个值指向同一个对象
    两个值都是数字并且
    都是正零 +0
    都是负零 -0
    都是 NaN
返回值：
    true || false

数组方法

Array.from(arrayLike[, mapFn[, thisArg]])

将类数组转换成数组
参数：
    arrayLike 类数组
    mapFn 类似 map 方法，循环类数组时的回函函数，返回值组成新数组
    thisArg mapFn 函数执行时的 this 指向
返回值
    根据 arrayLike 生成的新数组

Array.isArray(data)

检测数据是否是个数组
参数：
    data 要检测的数据
返回值:
    true 数组，false 非数组

Array.of(element0[, element1[, ...[, elementN]]])

将参数转成一个数组
参数：
    elementN 要放入数组中的数据
返回值：
    新数组

Array.prototype.fill(value[, start[, end]]);

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
参数：
    用来填充数组元素的值。
    可选参数：
        start
            起始索引，默认值为 0。
        end
            终止索引，默认值为 arr.length

Array.prototype.find(callback[, thisArg])

查找数组中满足要求的第一个元素的值
参数：
    callback
        element 当前遍历到的元素
        index[可选] 当前遍历到的索引
        array[可选] 数组本身
    thisArg 执行回调时用作 this 的对象
返回值
    数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

下文的 callback, thisArg 和当前一致 不再赘述

Array.prototype.findIndex(callback[, thisArg])

查找数组中满足要求的第一个元素的值的索引
返回值：
    满足要求的值的索引

字符串方法

String.prototype.includes(valueToFind[, fromIndex])

判断字符串是否包含一个指定的值
详细： 参考数组的 includes

String.prototype.startsWith(searchString[, position])

判断当前字符串是否以另外一个给定的子字符串开头
参数
    searchString 要搜索的子字符串。
    position
        在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
返回值
    如果传入的子字符串在搜索字符串的开始则返回 true；否则将返回 false。

String.prototype.endsWith(searchString[, length])

判断当前字符串是否是以另外一个给定的子字符串“结尾”
参数
    searchString 要搜索的子字符串。
    length 作为 str 的长度。默认值为 str.length
返回值
    如果传入的子字符串在搜索字符串的末尾则返回 true；否则将返回 false。

String.prototype.repeat(count)

构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
参数
    count 介于 0 和正无穷大之间的整数。表示在新构造的字符串中重复了多少遍原字符串
返回值
    生成的新字符串

模板字符串

允许嵌入表达式的字符串字面量
${}中放差值表达式
`string text ${expression} string text`;

函数的默认值

function fn(a = 10) {
  return a + 1;
}
fn(); // 11

Symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。
只要属性名是 Symbol 类型，可以保证不会与其他属性名产生冲突。

对象的简洁表示

let a = 0;
let b = 1;
let obj = {
  a, // a: a
  c() {
    console.log(123);
  },
};

属性名表达式

let n = "name";
let obj = {
  [n]: "leo",
};

// 作为属性名
let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = "Hello!";
// 第二种写法
let a = {
  [mySymbol]: "Hello!",
};
a[mySymbol]; // "Hello!"

Class

构造函数的语法糖

ES7

数组方法

Array.prototype.includes(valueToFind[, fromIndex])

判断数组中是否包含一个指定的值
参数：
    valueToFind 需要查找的值
    fromIndex 处开始向后查找

返回值：
    true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex

指数运算符

在 ES7 之前，计算数字的指数需要通过 Math.pow 方法来完成，在 ES7 中，增加了**运算符，可以来计算指数。

const res1 = Math.pow(2, 4);
const res2 = 2 ** 4;
// res1 == res2

ES8

对象方法

Object.values(target)

获取目标对象的所有value值。
参数:
    target 对象
返回值：
    所有value的数组

Object.entries(target)

获取到一个二维数组，数组中会存放可枚举的键值对数组，数组元素分别为对象的key和value。
参数:
    target 对象
返回值：
    二维数组 每一项是[key,value]

传入一个数组，下标作为第一个元素
传入一个字符串，下标作为第一个元素

Object.getOwnPropertyDescriptors(target)

获取一个对象的所有自身属性的描述符
参数:
    target 目标对象
返回值：
    对象的所有自身属性的描述符

字符串方法

String.prototype.padStart(strLength,padString)

对字符串进行前填充

String.prototype.padEnd(strLength,padString)

对字符串进行前填充
参数:
    strLength 字符串填充后的长度
    padStaring 填充的内容
返回值：
    填充后的字符串

函数参数列表结尾允许逗号

SharedArrayBuffer 对象

对象用来表示一个通用的、固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。
与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被转移。

Atomics 对象

Atomics 对象提供了一组静态方法对 SharedArrayBuffer 和  ArrayBuffer 对象进行原子操作。

ES9

Rest/Spread 属性

Rest 参数语法允许我们将一个不定数量的参数表示为一个数组

正则新特性

dotAll

匹配除回车外的任何单字符，标记 s 改变这种行为，允许行终止符的出现

命名捕获组

允许命名捕获组使用符号?`<name>`，既便于阅读代码，又便于引用

// 日期转为美国的MM-DD-YYYY
const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d = "2018-04-30",
  usDate = d.replace(reDate, "$<month>-$<day>-$<year>");

ES10

数组方法

Array.prototype.flat([depth])

扁平化多维数组
参数：
    depth 指定要提取嵌套数组的结构深度，默认值为 1。
返回值：
    一个包含将数组与子数组中所有元素的新数组

Array.prototype.flatMap(callback[, thisArg])

它与 map 和 深度值 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些
返回值：
    一个包含将数组与子数组中所有元素的新数组

字符串方法

String.prototype.trimStart()

trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。

String.prototype.trimEnd()

trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

String.prototype.matchAll(regexp)

参数：
    regexp 匹配的正则表达式。
    如果所传参数不是一个正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。
返回值：
    一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

对象方法

Object.fromEntries(iterable)

把键值对列表转换为一个对象。（Map对象转对象）
参数：
   iterable 类似ArrayMap或者其它实现了可迭代协议的可迭代对象。
返回值：
    一个由该迭代对象条目提供对应属性的新对象。

Symbol.prototype.description

创建时 Symbol([description])
返回创建对象时的description  它会返回 Symbol 对象的可选描述的字符串。

可选 Catch

try {
} catch (err) {}

// 这里的err是必须的参数，在ES10可以省略这个参数：
try {
} catch {}

ES11

空值合并

逻辑操作符?? 当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数

    let foo = {
        a: false,
        b: null,
        c: undefined
        d: '',
    }
    let a = foo.a ?? 'demo1'  // false
    let b = foo.b ?? 'demo2'  // demo2
    let c = foo.c ?? 'demo3'  // demo3
    let d = foo.d ?? 'demo4'  // ''
    let e = foo.e ?? 'demo5'  // 'demo5'

可选链操作符

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。

let foo = {};
let a = foo.a.name; // TypeError: Cannot read properties of undefined (reading 'name')
let b = foo.b?.name; // undefined

// 和空值合并使用 设置默认值
let c = foo.c?.name ?? ""; // ""

import() 按需导入

btn.onclick = function () {
  import("./module.js").then((module) => {
    console.log(module);
  });
};

新基本数据类型 BigInt

BigInt 是一种内置对象，它提供了一种方法来表示大于 2^53 - 1 的整数。
这原本是 Javascript 中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
不同点：
    1. 不能用于 Math 对象中的方法;
    2. 不能和任何 Number 实例混合运算，两者必须转换成同一种类型，但可以相互比较。
    在两种类型来回转换时要小心，因为 BigInt 变量在转换成 Number 变量时可能会丢失精度。

globalThis

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）
严格模式下获取全局 this

浏览器：window 对象
node：global 对象

ES12

字符串方法

String.prototype.replaceAll(regexp|substr, newSubstr|function)

返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。

备注：当使用一个 `regex`时，您必须设置全局（“ g”）标志，否则，它将引发 TypeError：“必须使用全局 RegExp 调用 replaceAll”。
参数:
    regexp|substr       必填。规定子字符串或要替换的模式的 RegExp 对象。 匹配的正则|被匹配的字符串
    newSubstr|function 	必填。一个字符串值。规定了替换文本或生成替换文本的函数。
返回值：
    填充后的字符串

WeakRefs

WeakRef对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被GC回收

逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而 JavaScript 已存在的 复合赋值运算符有：

a ||= b; // a = a || b; 等价于：a = a ? a : b
a &&= b; // a = a && b; 等价于：a = a ? b : a
a ??= b; // a = a ?? b; 等价于：a = (a === null || a === undefined) ? b : a

数字分隔符

允许数值字面量中间包含不连续的_，以提高可读性。当文件被解析时，这些下划线将被自动去除。
注：只能在数字之间，只允许一个下划线作为数字分隔符
例：1_000_000_000; // 十进制