ES10新特性你了解多少

ES10的新特性主要有：

对象方法扩展

字符串扩展方法

数组的扩展方法

Symbol 扩展

try...catch 改变

toString() 改变

一。对象方法扩展

const result = Object.fromEntries([
  ["tom", "cat"],
  ["helandi", "spider man"],
]);
console.log("result", result);

const result2 = Object.entries({ hun: "shi" });
console.log("result2", result2);

输出结果：

 

 Object.fromEntries() 方法可以将二维数组转换为对象，Object.entries() 可以将对象转换为二维数组。

二。字符串扩展方法

trimStart()： 清除字符串前面的空格， 

trimEnd()： 清除字符串后面的空格。

const str = '   I love China    ';
const str1 = str.trimStart();
const str2 = str.trimEnd();
console.log('str1', str1);
console.log('str2', str2);

 输出结果：

 三。数组的扩展方法

1.flat

作用：Array.flat() 方法会按照一个可指定的深度递归遍历数组 ，将所有元素与遍历到的子数组的元素合并为一个新数组返回。

返回值：一个包含将数组与子数组中所有元素的新数组

是否改变原有数组：否

输出结果：

2.flatMap 

作用：flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

是否改变原数组：否

看个例子：

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const arr1 = [1, 4, 9, 16];
const map1 = arr1.map((x) => x * 2);
console.log("map1", map1); // [2,8,18,32]

 但是有时，我们需要跳过数组中的某些元素，已上面的例子为例，当我们需要跳过元素 1 时，我们一般采用结合 filter 方法：

const arr1 = [1, 4, 9, 16];
const map2 = arr1.filter((x) => x !== 1).map((x) => x * 2);
console.log("map2", map2); // [8,18,32]

 除了使用 map 和 filter 结合的方式，还有没有其他方式呢？

ES10新特性：使用 flatMap。

const arr1 = [1, 4, 9, 16];
const map3 = arr1.flatMap((x) => (x === 1 ? [] : [x * 2]));
console.log("map3", map3); // [8,18,32]

flatMap 能用于在 map 期间增删数据（也就是修改 items 的数量）。换句话说，它允许你遍历很多项使之成为另一些项，而不是总是一对一，从这个意义上讲，它的作用类似于 filter 的对立面。只需返回一个1项元素数组以保留该项，返回一个多元素数组以添加项，或返回一个0项元素数组以删除该项。

 那 flatMap 和map有什么区别呢？

flatMap 和 map 、深度 depth 为1 的falt 几乎相同，但是 flatMap 通常在合并成一种方法的效率稍微高些。

四。Symbol 扩展 

Symbol.description 用于获取 Symbol 的描述字符串。 

const s = Symbol("spider");
console.log("s", s.description); // spider

 五。try...catch

在ES10 中，try...catch 语句中的参数变为了一个可选项。以前我们写 try...catch 语句时，必须传递一个异常参数，这就意味着，即使我们在 catch 中不需要这个异常参数，也必须要把它传递进去。

try {
  // trycode
} catch (error) {
  console.error('error', error);
}

在 ES10 中，我们可以省略这个参数：

try {
  // trycode
} catch {
  console.error('error', error);
}

六。toString 

在 ES2019中，function.toString() 发生了变化，之前执行这个方法，得到的字符串是去除空白符号的，而现在，得到的字符串是呈现出源码的样子。

function sum(a, b) {
  return a + b;
}
console.log(sum.toString());