前言
ECMAScript 每年都会发布一个新版本,其中的提案是已经正式通过的,并分发给开发者和用户。本文将讨论该语言的最新版本,以及它又具有了什么新功能。
ES10/ES2019 在本次更新中有很大的改进。它引入了一些新的函数和方法,使开发者能够编写更少的代码,并提高工作效率。
flat()
flat() 是一种用于扁平数组的方法。在某些时候,数组的元素还是数组,这些类型的数组称为嵌套数组。
要取消数组的嵌套(扁平它们),我们不得不使用递归。现在引入flat(),可以用一行代码完成。 一个被展平的数组是一个深度为 0 的数组,flat() 接受一个参数,一个代表深度的数字。深度指的是数组内嵌套的数量。下面这个例子可以帮你理解嵌套和深度。
var arr = [1,2,3,[4,5,6,[7,8,9,[1,2,3]]]];
console.log(arr.flat(3)); // [1,2,3,4,5,6,7,8,9,1,2,3]
通常在 JavaScript 中,数组的深度可以为无穷大,或者直到内存不足为止。假设一个数组的嵌套深度为3,并且我们仅将其展平到深度 2,那么主数组中仍然会存在一个嵌套数组。
flatMap()
flatMap() 用于展平嵌套数组并根据给出的像 map() 这样的函数更改值。此函数作用于数组并用一个回调函数作为参数。回调函数用于指示数组应该怎样被展平。它就像 map 一样工作,此外也使它变得扁平。如果你想了解有关 map 的更多信息,请查看关于this的文章。
flatMap()`` 可用于展平深度为1的数组,它在内部调用 map 函数,后跟着参数深度为1的 flat 函数.
var array = arr.flatMap((callback(currentValue)));
返回值
带有操纵值的扁平数组,由提供给它的回调函数提供。就像一个map一样。
map() + flat() => flatmap()
var arr = [1,2,3,4];
console.log(arr.map(x=>[x*2])); // [2],[4],[6],[8]
console.log(arr.flatMap(x=>[x*2])); //[2,4,6,8]
在此例中,我们逐个显示 map 和 flatMap 以显示两个函数之间的差异。 map() 返回嵌套数组,
而flatMap() 的输出除了数组的展平外,还与 map 的结构相同。
Object.fromEntries()
另一个非常有用的函数 Object.fromEntries 用于根据提供的键值对生成对象。它接受一个键值对列表,并返回一个对象,对象的属性由参数 entries66n 给出。它的作用与 **Object.entries()**相反
参数
接受任何可迭代的对象,即数组。
返回值
返回有给定键值对的对象。
const entries = new Map([
['apple','orange'],
['grapes','peach']
]);
const obj = Object.formEntries(entries);
console.log(obj);// {apple:"orange",grapes:"peach"}
我们可以看到,当向 fromEntries() 函数提供了一个map(将值成对存储)时,会得到一个对象,其对应的键值对和 map 中一样。
trimStart()
trimStart() 方法删除字符串开头的空格。 trimLeft() 是此方法的别名。
var message = ' Hello World';
console.log(message);// ' Hello World'
console.log(message.trimStart());//'Hello World'
trimEnd()
trimEnd() 方法删除字符串末尾的空格。 trimRight() 是此方法的别名。
var message = 'Hello World ';
console.log(message);// ' Hello World'
console.log(message.trimEnd());//'Hello World'
修改 catch 绑定
在 ES10 之前,我们必须通过语法为 catch 子句绑定异常变量,无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。
示例
function isValid(ison){
try{
JSON.parse(json);
return true;
}catch {
return false;
}
}
在上面的例子中,可以看到没有为 catch 提供变量。
符号描述
当我们在 JS 中创建一个 Symbol 时,可以指定一个在以后用于调试的描述。得到这个描述的过程有点无聊,必须再次重新构造 Symbol,并在 toString() 方法的帮助下才能访问描述。
ES10添加了一个新的名为 description 的只读属性,它返回 Symbol 的描述。
示例
const symbol = Symbol("this is a symbol");
console.log(symbol.toString()); // Symbol(My Symbol);
console.log(symbol.destription); // My Symbol
可以看到使用 Symbol 的.description 属性能够直接获取描述。