JavaScript:ES2019 的新特性(译)

 更新时间:2019年08月08日 09:52:28   作者:瓶子君  
这篇文章主要介绍了JavaScript:ES2019 的新特性(译),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

作为最流行的编程语言和最重要的 Web 开发语言之一,JavaScript 不断演变,每次迭代都会得到一些新的内部更新。让我们来看看 ES2019 有哪些新的特性,并加入到我们日常开发中:

Array.prototype.flat()

Array.prototype.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]

flat() 方法会移除数组中的空项:

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

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 Array.prototype.map 和 深度值为 1的 Array.prototype.flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

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"]

// 可以使用 归纳(reduce) 与 合并(concat)实现相同的功能
sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);

String.prototype.trimStart() 和 String.prototype.trimEnd()

除了能从字符串两端删除空白字符的 String.prototype.trim() 之外,现在还有单独的方法,只能从每一端删除空格:

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";
  • trimStart() :别名 trimLeft(),移除原字符串左端的连续空白符并返回,并不会直接修改原字符串本身。
  • trimEnd() :别名 trimRight(),移除原字符串右端的连续空白符并返回,并不会直接修改原字符串本身。

Object.fromEntries

将键值对列表转换为 Object 的新方法。

它与已有 Object.entries() 正好相反,Object.entries()方法在将对象转换为数组时使用,它返回一个给定对象自身可枚举属性的键值对数组。

但现在您可以通过 Object.fromEntries 将操作的数组返回到对象中。

下面是一个示例(将所有对象属性的值平方):

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]]

我们将转换后的数组 array 作为参数传入 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

description 是一个只读属性,它会返回 Symbol 对象的可选描述的字符串,用来代替 toString() 方法。

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"

testSymbol.toString(); // "Symbol(Desc)"

Function.toString()

现在,在函数上调用 toString() 会返回函数,与它的定义完全一样,包括空格和注释。

之前:

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

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

现在:

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

JSON.parse() 改进

行分隔符 (u2028) 和段落分隔符 (u2029),现在被正确解析,而不是报一个语法错误。

var str = '{"name":"Bottle\u2028AnGe"}'
JSON.parse(str)
// {name: "Bottle
AnGe"}

原文链接:JavaScript: What's new in ES2019

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 每天一篇javascript学习小结(基础知识)

    每天一篇javascript学习小结(基础知识)

    这篇文章主要介绍了javascript基本的知识点,包括字符串、特殊字符运算、变量转字符串等,对javascript的基础知识讲解的很全面,为了更好地帮助大家学习javascript,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现网站首页图片滚动显示

    js实现网站首页图片滚动显示

    网站首页图片滚动显示对于很多朋友都有很大的吸引,因为它可以带来意想不到视觉冲击效果,接下来本文也实现一下,感兴趣的朋友可以参考下,或许对你学习js知识有所帮助
    2013-02-02
  • 详解PHP中pathinfo()函数导致的安全问题

    详解PHP中pathinfo()函数导致的安全问题

    这篇文章主要给大家介绍了PHP中pathinfo()函数导致的安全问题,文中给出了详细的介绍与示例代码,相信对大家的理解和学习具有一定的参考借鉴价值,需要的朋友可以参考下,下面来一起看看吧。
    2017-01-01
  • JavaScript事件对象event用法分析

    JavaScript事件对象event用法分析

    这篇文章主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-07-07
  • JavaScript方法_动力节点Java学院整理

    JavaScript方法_动力节点Java学院整理

    这篇文章主要介绍了JavaScript方法,详细的介绍了JavaScript几种函数定义方式及使用方法,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS操作XML实例总结(加载与解析XML文件、字符串)

    JS操作XML实例总结(加载与解析XML文件、字符串)

    这篇文章主要介绍了JS操作XML的方法,结合实例形式总结分析了JavaScript加载与解析XML文件及字符串的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 在点击div中的p时,如何阻止事件冒泡

    在点击div中的p时,如何阻止事件冒泡

    本文主要介绍了在点击div中的p时,如何阻止事件冒泡的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript模板引擎EJS特性及用法详解

    JavaScript模板引擎EJS特性及用法详解

    EJS是一种简单而灵活的模板引擎,用于将数据动态渲染到网页上,本文将从介绍EJS的背景和起源开始,详细介绍EJS的特性和使用方法,包括安装配置、基本语法和标签、数据绑定和逻辑控制、模板的继承和包含等方面,感兴趣的同学跟着小编一起来学习吧
    2023-06-06
  • 点击按钮出现60秒倒计时的简单js代码(推荐)

    点击按钮出现60秒倒计时的简单js代码(推荐)

    下面小编就为大家带来一篇点击按钮出现60秒倒计时的简单js代码(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js保留两位小数方法总结

    js保留两位小数方法总结

    本篇文章给大家总结了js保留两位小数的各种方法以及每种方法的实例代码分析,如果大家对此有需要,一起来学习下js保留两位小数的方法吧。
    2018-01-01

最新评论