JavaScript的ES10、ES11新增内容
ES10新增
1. 数组方法 flat
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。flat意为平，就相当于降维。将二维数组转为一维亦可其他。
var newArray = arr.flat([depth])
// depth: 默认值为1，可写可不写
实例使用：
const nums = [10, 20, [2, 9], [[30, 40], [10, 45]], 78, [55, 88]];
const newNums = nums.flat();
console.log(newNums);
// [ 10, 20, 2, 9, [ 30, 40 ], [ 10, 45 ], 78, 55, 88 ]
const newNums2 = nums.flat(2);
console.log(newNums2);
// [10, 20, 2, 9, 30, 40, 10, 45, 78, 55, 88]
2.数组方法 flatMap
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
// 回调函数参数：当前值、下标、当前数组，thisArg指定this
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
实例使用：
// 1. flatMap和map的关系
const nums2 = [10, 20, 30]
const newNums3 = nums2.flatMap(item => {
return item * 2
})
const newNums4 = nums2.map(item => {
return item * 2
})
console.log(newNums3);// [ 20, 40, 60 ]
console.log(newNums4);// [ 20, 40, 60 ]
// 2. flatMap的应用场景
const messages = ["Hello World", "my name is fct"];
const words1 = messages.map(item => {
return item.split(" ")
})
const words2 = messages.flatMap(item => {
return item.split(" ")
})
console.log(words1);
// [ [ 'Hello', 'World' ], [ 'my', 'name', 'is', 'fct' ] ]
console.log(words2);
// [ 'Hello', 'World', 'my', 'name', 'is', 'fct' ]
3.对象方法 formEntries
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。
**Object.fromEntries() **方法把键值对列表转换为一个对象。
首先回顾下，Object.entries()方法
const obj = {
name: "fct",
age: 21,
height: 1.80
}
const entries = Object.entries(obj);
console.log(entries);
// [ [ 'name', 'fct' ], [ 'age', 21 ], [ 'height', 1.8 ] ]
这时候将entries要转变成对象格式怎么办？
// 传统：
const newObj = {};
for (const entry of entries) {
newObj[entry[0]] = entry[1];
}
console.log(newObj);// { name: 'fct', age: 21, height: 1.8 }
使用Object.fromEntries()
const newObj = Object.fromEntries(entries)
console.log(newObj);// { name: 'fct', age: 21, height: 1.8 }
实际例子：
// 获取URL上的query参数为对象格式
const queryString = 'name=fct&age=21&height=1.80';
const queryParams = new URLSearchParams(queryString);
// for (const param of queryParams) {
// console.log(param);
// }
const paramObj = Object.fromEntries(queryParams);
console.log(paramObj);// { name: 'fct', age: '21', height: '1.80' }
4. 字符串的方法 trimStart 和 trimEnd
trimStart() 方法从字符串的开头删除空格。trimEnd() 方法从一个字符串的末端移除空白字符。
const message = " Hello World "
console.log(message.trim()); //Hello World
console.log(message.trimStart()); //Hello World
console.log(message.trimEnd()); // Hello World
ES11新增
1.大整数 BigInt
BigInt 是一种内置对象，它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。
// ES11之前 max_safe_integer
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt); // 9007199254740991
// 不安全整数
console.log(maxInt + 1); // 9007199254740992
console.log(maxInt + 2); // 9007199254740992
// ES11之后: BigInt
const bigInt = 900719925474099100n;
console.log(bigInt + 10n); // 900719925474099110n
const num = 100;
console.log(bigInt + BigInt(num)); // 900719925474099200n
const smallNum = Number(bigInt);
console.log(smallNum); // 900719925474099100
2. 空值合并运算符
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子：
// const foo = undefined;
// const foo = null;
const foo = 0;
// const foo = "";
const baz = foo || "default value"
const bar = foo ?? "defualt value"
console.log(baz);
console.log(bar);
3. 可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish（一个 nullish 值要么是 null 要么是 undefined） ( null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
const info = {
name: "why",
// friend: {
// girlFriend: {
// name: "hmm"
// }
// }
}
// 打印对象中 undefined 上的xxxx，会报错
// console.log(info.friend.girlFriend.name);
// 报错 Cannot read property 'girlFriend' of undefined
// 解决：
console.log(info.friend?.girlFriend?.name); // undefined
console.log('其他的代码----');
4. globalThis全局属性
全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）。
// 获取某一个环境下的全局对象(Global Object)
// 在浏览器下
// console.log(window);
// console.log(this);
// 在node下
// console.log(global);
// ES11
console.log(globalThis);
