ES7~ES12是 ES6 的补充，里面有很多比较灵活的用法可以在日常中使用，如果对 ES6 不太熟悉的可以看看这里：JavaScript｜ES6日常用法详解
ES7 - Array Includes
在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true， 否则返回false。
arr.includes(valueToFind[, fromIndex])
fromIndex(可选): 从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false
console.log(arr.includes(3, 3)); // false
console.log(arr.includes(3, -1)); // true
ES7 –指数(乘方) exponentiation运算符
在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。 在ES7中，增加了 ** 运算符，可以对数字来计算乘方。
console.log(2 ** 3); // 8
console.log(2 ** -3); // 0.125
ES8 Object values
之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值：
const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.values(obj)); // [1, 2, 3]
ES8 Object Entries
通过Object.entries可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]
ES8 String PadStart和PadEnd
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。
const str = 'hello';
console.log(str.padStart(10, 'hi')); // 'hihello'
console.log(str.padEnd(10, 'hi')); // 'hellohi'
// 小场景：对银行卡实现位数隐藏
const card = '1234 1234 1234 1234';
const lastFour = card.slice(-4);
const masked = lastFour.padStart(card.length, '*');
console.log(masked); // '************1234'
ES8 - Trailing Commas
在 ES8 中，我们可以通过在函数参数的最后一个元素后面添加逗号来让 JavaScript 忽略最后一个参数。
function log(a, b, c,) {
console.log(a, b, c);
}
log(1, 2, 3); // 1 2 3
log(1, 2, 3, 4); // 1 2 3
ES10 - flat flatMap
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
注意一：flatMap是先进行map操作，再做flat的操作；
注意二：flatMap中的flat相当于深度为1；
const arr = [1, 2, 3, [4, 5], 6, [7, [8, 9]]];
console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr2 = ['a b c', 'd e f', 'g h i'];
console.log(arr2.flatMap(x => x.split(' '))); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
ES10 - Object fromEntries
ES8提供了对象转换方法Object.fromEntries，可以将一个键值对数组转换为对象，如果有entries怎么转换成对象呢？
const entries = [['name', '张三'], ['age', 18]];
const obj = Object.fromEntries(entries);
console.log(obj); // {name: '张三', age: 18}
ES10 - trimStart trimEnd
去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？
ES10中给我们提供了trimStart和trimEnd；
const str = ' hello ';
console.log(str.trimStart()); // 'hello '
console.log(str.trimEnd()); // ' hello'
console.log(str.trim()); // 'hello'
ES11 - BigInt
BigInt是一个新的数据类型，它可以表示一个大的整数，比如 JavaScript 中的整数只能表示到 2^53 之间，BigInt 可以表示到 2^1024 之间。BitInt的表示方法是在数值的后面加上n。
const int = 2 ** 53;
console.log(int) // 9007199254740992
console.log(int + 1); // 9007199254740992 无法直接加1，因为这个数超过了2的53次方
const bigInt = BigInt(9007199254740993);
console.log(bigInt); // 9007199254740993n
ES11 - Nullish Coalescing Operator
ES11，Nullish Coalescing Operator增加了空值合并操作符：
const a = undefined;
const r1 = a ?? 'default';
console.log(r1); // 'default'
const r2 = a || 'default';
console.log(r2); // 'default'
ES11 - Optional Chaining
ES11，Optional Chaining增加了对象属性的可选调用：
const obj = {
a: {
b: {
c: 'hello'
}
}
};
if (obj.a && obj.a.b && obj.a.b.c) {
console.log(obj.a.b.c); // 'hello'
}
console.log(obj?.a?.b?.c); // 'hello'
console.log(obj?.a?.b?.d); // undefined
ES11 - Global This
在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的：比如在浏览器中可以通过this、window来获取，在Node中我们需要通过global来获取……那么在ES11中对获取全局对象进行了统一的规范：globalThis：
console.log(global); // <ref *1> Object [global] {...}
console.log(this); // Window {...}
console.log(globalThis); // Window {...}
ES12 - FinalizationRegistry
FinalizationRegistry是一个新的对象，用于管理对象的清理工作，它可以在可以让你在对象被垃圾回收时请求一个回调。
FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）; 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;
const registry = new FinalizationRegistry(
(target) => {
console.log('对象被销毁', target); // <ref *2> Object {...}
}
);
const obj = {name: '张三'};
registry.register(obj, 'hello');
obj = null;
ES12 - WeakRefs
WeakRefs是一个新的对象，用于管理对象的弱引用，如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：如果我们希望是一个弱引用的话，可以使用WeakRef；
const obj = {name: '张三'};
const weakRef = new WeakRef(obj);
weakRef.name = '李四';
console.log(obj.name); // 张三
ES12 - logical assignment operators
- ||= 逻辑或赋值运算
let message = "hello world"
message = message || "default value" // "hello world"
message ||= "default value" // "hello world"
- &&= 逻辑与赋值运算
let message = "hello world"
message = message && "default value" // "default value"
message &&= "default value" // "default value"
let info = { name: '张三' };
info &&= info.name; // "张三"
- ??= 逻辑或赋值运算
let message = "hello world"
message ??= "default value" // "hello world"
let blank = ''
blank ??= "default value" // "default value"