1. 数组扩展 : Array.prototype.flat()

• 用于数组扁平化
• 参数表示数组递归深度，默认值为1，Infinity 表示展开所有

const arr1 = [ 1, 2, [ 3, 4 ] ]
console.log(arr1.flat()) // => [ 1, 2, 3, 4 ]

const arr2 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr2.flat()) // => [ 1, 2, 3, 4, [ 5, 6, [ 7, 8 ] ] ]

const arr3 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr3.flat(2)) // => [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

const arr4 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr4.flat(Infinity)) // => [ 1, 2, 3, 4, 5, 6, 7, 8 ]

2. JSON 扩展 : stringify 加强格式转化

• 增强了 JSON 在格式转换的时候的能力，主要是针对于 emoji 的表现
• 以前, emoji 和一些其他特殊字符被表示为两个代理项的组合, 如果我们用 JSON 进行格式转换的时候, 会被转换为无效字符

// 以前
JSON.stringify('😎') // => '"�"'
// 现在
JSON.stringify('😎') // => '"\\ud83d"'

3. 空值运算符 ( ?? )

• 只有当运算符左侧是 null 或者 undefined 的时候, 才会返回右侧的操作数据, 否则就返回左侧的操作数据
• || 运算符：如果左侧为 假值 的时候, 就会返回右侧的数据
• ?? 运算符：只有左侧为 null 或 undefined 的时候, 才会返回右侧的数据

const r1 = false || '张三'
console.log(r1) // => 张三

const r2 = false ?? '张三'
console.log(r2) // => false

4. 模块化扩展 : 动态导入

• 结合了 async 和 awiat 语法
• 语法: import( '地址' )

// utils.js
const add = (a, b) => a + b
export { add }

// index.js
const fn = async () => {
    const utils = await import('utils.js')
    const res = utils.add(10. 20)
    console.log(res) // => 30
}

5. 数值分隔符

• 在书写数值的时候, 可以以 下划线(_) 作为分隔符书写

const num = 10_000_000_000
console.log(num); // => 10000000000

6. 逻辑运算符的赋值表达式

• 逻辑运算符与赋值表达式结合

a ||= b
a &&= b
a ??= b


a ||= b
// 等价于 if (!a) a = b
// 当 a 为 假值 的时候, 把 b 的值赋值给 a


a &&= b
// 等价于 if (a) a = b
// 当 a 为 真值 的时候, 把 b 的值赋值给 a


a ??= b

// 等价于 a ?? (a = b)
// 当 a 的值不是 undefined 或者 null 的时候, 把 b 的值赋值给 a

7. 数组扩展 : Array.prototype.at() 方法

• 语法 : 数组.at( 索引 )
• 通过索引访问数组内某一个数据
• 比我们的 数组[索引] 更强大一些

const arr = [ 10, 20, 30, 40 ]

// 以前: 
console.log(arr[1]) // => 20
// 现在:
console.log(arr.at(1)) // => 20

// 以前:
console.log(arr[arr.length - 2]) // => 30
// 现在:
console.log(arr.at(-2)) // => 30

8. 对象方法

• Object.is()：严格判断两个值是否相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true
 
Object.is('foo', 'bar');     // false
Object.is([], []);           // false
 
var test = { a: 1 };
Object.is(test, test);       // true
 
Object.is(null, null);       // true
 
// 特例
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

9. Module

1. CommonJs（典型代表：node.js早期）：

   • 它通过 require 来引入模块，通过 module.exports 定义模块的输出接口
   • 这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的
   • 因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题
   • 但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适

2. AMD（典型代表：require.js）：

   • 这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行
   • 所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范

3. CMD（典型代表：sea.js）：

   • 这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范
   • 它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同

4. ES6 Module：

   • ES6 提出的方案，使用 import 和 export 的形式来导入导出模块