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);