JS March 16, 2019

ES2019的新功能

Words count 4k Reading time 4 mins. Read count 0

前言

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 属性能够直接获取描述。

0%