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(" ")), []);

trimStart和trimEnd

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: , prop2: , prop3:  };

// 转化为键值对数组:
let array = Object.entries(obj);
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]

将所有对象属性的值平方:

array = array.map(([key, value]) => [key, Math.pow(value, )]);
// [["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

ES2019 的新特性的更多相关文章

  1. 【CuteJavaScript】ES2019 新特性汇总

    最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~ 另外之前也整理了 <ES6 ...

  2. ES2019新特性的学习

    前言 前端技术更新的实在是太快了,各种框架百花齐放,随着NodeJs不断的兴起,各种构建工具也是层出不穷,这不,前两周尤雨溪开源了Vue.js3.0源码之后,很多大佬早已把源码剖析皮都不剩了:昨天No ...

  3. 【ES】338- ECMAScirpt 2019 新特性汇总

    点击上方"前端自习课"关注,学习起来~ 最近在做的一个活动,大家都可以参与: 送 1600 元超大现金红包啦,走过路过不要错过哦 ~ 最近 ECMAScript2019,最新提案完 ...

  4. ES10(2019)有哪些更新和新特性?

    ES10新特性(2019) 行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配 更加友好的 JSON.stringify 新增了Array的flat( ...

  5. 从 ES6 到 ES10 的新特性万字大总结

    以下文章来源于鱼头的Web海洋 ,作者陈大鱼头   鱼头的Web海洋 一个名为Web的海洋世界 (给前端大全加星标,提升前端技能) 作者:鱼头的Web海洋 公号 / 陈大鱼头 (本文来自作者投稿) 介 ...

  6. 从ES6到ES10的新特性万字大总结

    介绍ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范.这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实 ...

  7. 个人认为目前比较好用的ECMAScript(16-20)新特性

    ECMAScript(16.17.18.19)新特性 Array.prototype.includes includes 是数组上的简单实例方法,可以轻松查找到数组中是否包含指定内容(包括NaN) 返 ...

  8. ES6、ES7、ES8、ES9、ES10新特性

    ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...

  9. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

随机推荐

  1. 初学Python之爬虫的简单入门

    初学Python之爬虫的简单入门 一.什么是爬虫? 1.简单介绍爬虫   爬虫的全称为网络爬虫,简称爬虫,别名有网络机器人,网络蜘蛛等等. 网络爬虫是一种自动获取网页内容的程序,为搜索引擎提供了重要的 ...

  2. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  3. Distilling the Knowledge in a Neural Network

    url: https://arxiv.org/abs/1503.02531 year: NIPS 2014   简介 将大模型的泛化能力转移到小模型的一种显而易见的方法是使用由大模型产生的类概率作 ...

  4. 前端之jquery1

    jquery介绍 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. ...

  5. 刷抖音太累,教你用Python把高颜值的小姐姐都爬下来慢慢看

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 星安果.AirPython 目 标 场 景 相信大家平时刷抖音短视频 ...

  6. Vue中的组件及路由使用

    1.组件是什么        组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声 ...

  7. 数据库-用户管理与pymysql

    mysql用户管理 !这是dba的活儿!,但是万一公司没有dba? mysql用户指的是什么? 我们每一次在操作前都需要指定账号和密码,这个账号就是mysql的用户; 为什么要管理? 一个公司不可能只 ...

  8. fwrite(): send of 8192 bytes failed with errno=104 Connection reset by peer

    问题:fwrite(): send of 8192 bytes failed with errno=104 Connection reset by peer 问题描述 通过mysql + sphinx ...

  9. selenium 优化 提升性能

    结果: 用时:7.200437545776367s用时:5.909301519393921s headless用时:4.924464702606201s headless\phone用时:4.9358 ...

  10. git设置github的远程仓库的相关操作

        git能够把github作为远程仓库,本地可以进行推送有关变更,从而多人可以进行协作开发工作.    1  ssh-keygen -t rsa -C "your-email@163. ...