首页   

JavaScript: ES2019更新了什么呢?

前端技术小哥  ·  · 4 年前
阅读 23

JavaScript: ES2019更新了什么呢?

原文:blog.tildeloop.com/posts/javas…
译者:前端技术小哥

JavaScript(JS)是最流行的编程语言之一,也是Web开发的主要语言之一,它在不断发展,每一次迭代都会带来一些新的内部变化。让我们来看看ES2019的一些新功能,它们可能很快就会进入我们的日常代码:

Array.flat()
现在我们可以将嵌套数组按照指定的深度递归展开。默认值是1,如果想完全展开则使用Infinity。该方法不会修改原始数组,而是创建一个新的数组:

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
复制代码

如果你的数组中有一个空槽,它将被删除:

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
复制代码

Array.flatMap()
这是一个全新的方法,它结合了基本的map函数,然后使用新的Array.flat()方法将结果展平1个深度:

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]); // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]); // [4, 8, 12]
复制代码

另一个更有用的例子:

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); // [["This","is","a"],["regular"],["sentence"]]
sentence.flatMap(x => x.split(" ")); // ["This","is","a","regular", "sentence"]

复制代码

String.trimStart() and String.trimEnd()
除了同时删除字符串两边的空格的String.Trim()之外,现在还出现了另一个方法只删除字符串两边任意一边的空格:

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";
复制代码

Object.fromEntries
这是一个全新的方法:根据提供的键值对生成对象。它是我们熟悉的函数Object.Entries的逆向操作。(Object.Entries将对象转换为数组,以便更容易地进行操作。)在转换之后,我们会得到一个数组,但是现在我们可以将调整过后的数组返回到一个对象中。让我们试着用一个例子,我们想平方所有对象属性的值:

const obj = { prop1: 2, prop2: 10, prop3: 15 };

let array = Object.entries(obj); // [["prop1", 2], ["prop2", 10], ["prop3", 15]]

复制代码

让我们用一个简单的映射将新生成的键值对的值平方:

array = array.map(([key, value]) => [key, Math.pow(value, 2)]); // [["prop1", 4], ["prop2", 100], ["prop3", 225]]

我们已经转换了对象值,但我们只剩下一个数组,这时候我们就需要Object.fromEntries,它将数组转换回一个对象:

const newObj = Object.fromEntries(array); // {prop1: 4, prop2: 100, prop3: 225}

可选的catch绑定
这个新提案使我们能够完全省略catch()块,因为在很多情况下,我们并不需要它:

try {
  //...
} catch (er) {
  //handle error with parameter er
}

try {
  //...
} catch {
  //handle error without parameter
}

复制代码

Symbol.description
我们现在可以任意访问一个Symbol的description属性,无需借助toString()方法。

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"
复制代码

函数.toString ()
现在,我们对一个函数调用toString(),将完全按照定义的方式返回函数,包括空格和注释。之前我们有:

function /* foo comment */ foo() {}

foo.toString(); // "function foo() {}"
复制代码

然后现在是:

foo.toString(); // "function /* foo comment */ foo() {}"

JSON.parse()
现在,行分隔符 (\u2028) 和段落分隔符 (\u2029) 能被正确地解析,而不会导致SyntaxError。

希望本文能帮助到您!

看之后
点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
关注公众号「新前端社区」,享受文章首发体验!
每周重点攻克一个前端技术难点。

推荐文章
思宇MedTech  ·  最新医械标准!98项制修订计划出炉!  ·  1 月前  
中国国际期货  ·  【315投资者保护】警惕外盘期货“杀猪盘”  ...  ·  3 年前  
猪业网  ·  分享图片  ·  4 年前  
© 2022 51好读
删除内容请联系邮箱 2879853325@qq.com