ES10新增功能

ES2019或ES10是JavaScript的2019版本。在2015年进行重大更新之后,JavaScript每年都在发展。开发人员可以获得一小组有用的功能,这些功能可以帮助我们在创新与稳定性之间取得平衡。

您也可以在此博客中了解JavaScript的发展,因为第一篇文章发布于2015年。现在是时候从实际角度考察ES2019更新。像往常一样,不要期望对理论上的极端情况进行冗长的描述。本文宁愿加倍讨论实际用例。

JavaScript兼容性表

如果您想查看每个JavaScript版本的完整更新列表,请查看此兼容性表。当我在最新的Google Chrome浏览器中查看更新时,我发现即使对于建议的ES2020版本,大多数测试也已通过。

请注意,您的代码可能必须支持多个浏览器。因此,请考虑在您的应用程序中使用polyfills。

让我们一一探索ES2019功能列表:

1. Object.fromEntries

回想一下Object.entriesES2015:

1.  Object.entries({first: 'Zsolt', last: 'Nagy'});

2.  // [["first", "Zsolt"], ["last","Nagy"]]

提供逆变换是很有意义的:

1.  Object.fromEntries([["first", "Zsolt"], ["last", "Nagy"]]);

2.  // {first: "Zsolt", last: "Nagy"}

除了使用数组之外,您还可以通过Map创建对象:

1.  var postBoxes = newMap();

2.  postBoxes.set('128', 'first message');

3.  postBoxes.set('15', 'second message');

4.   

5.  Object.fromEntries(postBoxes);

6.  // {'15': "second message", '128': "first message"}

2.字符串修剪

假设给出了一个字符串,其中要插入的内容被空白字符(换行符,制表符,空格等)包围:

1.  const template = ` 

2.  <h3>String trimming</h3>

3.  `;

在早期版本的JavaScript中,已经可以进行修整:

1.  template.trim()

2.  // "<h3>String trimming</h3>"

在ES2019中,也可以只修剪字符串的左侧或右侧。

·  trimStart并且trimLeft在我们必须将文本(包括末尾的空格)插入特定位置时非常方便。

·  trimEnd并且trimRight在我们必须在文本结尾之后插入一些内容时非常方便(例如,在= $0突出显示控制台中DOM元素的标记之前显示HTML标记)。

还请注意ES2019 trimStart和trimEnd方法删除了ES添加的填充padStart和padEnd:

3. Array.prototype.flat

所述flat阵列的方法变平以下述方式排列:如果A是我们的数组的元素,并且A是一个数组,然后A被取代...A。

[1, 2, [3, [4, 5]]].flat()

变成

[1, 2, ...[3, [4, 5]]]

变成

[1, 2, 3, [4, 5]]

该flat方法可以采用可选的数字参数。如果此参数为1,则展平将在一个级别上发生。换句话说,A.flat(1)与等效A.flat()。

如果提供的参数,flat则该参数至少1必须flattening为发生:

·  [[1]].flat(0)住宿[[1]],

·  [[1]].flat(1)成为[1]。

当flat具有大于的整数参数时1,展平变为递归操作,其中在每个递归级别上,的参数均flat减小1。

1.  // Original call:

2.  [1, 2, [3, [4, 5]]].flat(2)  

3.   

4.  // Move the flattening inside the array members

5.  // of the flattened array:

6.  [1, 2, ...[3, [4, 5].flat(1)]]

7.   

8.  // Spread the values

9.  [1, 2, 3, [4, 5].flat(1)]

10.

11.// Flatten the [4, 5] array

12.[1, 2, 3, ...[4, 5]]

13.

14.// Extract the values

15.[1, 2, 3, 4, 5]

flat提供无限长深度展平的特殊情况:

A.flat(Infinity)

这种特殊情况很少使用,因为开发人员应该知道他们的数据结构,这样他们就已经知道需要平整多少个级别。在实践中,最通常的情况是需要一种扁平化,因为我们通常不从API检索嵌套的多维数组。

练习:假设TicTacToe游戏的状态是以二维数组的形式给出的。将游戏板转换为字符串9以简化计算。

1.  const board = [

2.      ['X', 'O', '.'],

3.      ['.', 'O', '.'],

4.      ['O', 'X', 'X']

5.  ];

预期产量:

'XO..O.OXX'

解决方案

1.  board.flat().join('')

2.  // "XO..O.OXX"

4. Array.prototype.flatMap

这部分很容易。假设有一个array A,并且transformer给出了一个函数。

A.flatMap(transformer)定义为A.map(transformer).flat()。

首先,我们使用transformer函数映射每个元素,然后展平数组。请注意,展平是在一个级别上。

关于命名的一句话。您可能想知道flatMap如果我们使用mapfirst和flatsecond 为何调用此函数。为什么不呢mapFlat?原因有很多。

首先,flatMap是函数式编程中的众所周知的功能。Lodash拥有RxJ和RxJ。

其次,请注意,链式表示法A.map(f).flat()将一切颠倒了。如果我们只有函数而不是链式数组方法,则表达式将如下所示:flat(map(A, f))。功能应用程序的这种自然顺序由功能组成规则定义。

练习:假设您有一级方程式车队的清单。

1.  const teams = [

2.      { name: 'Ferrari', drivers: ['S.Vettel', 'C.Leclerc'] },

3.      { name: 'Mercedes', drivers: ['L.Hamilton', 'V.Bottas'] },

4.      { name: 'Red Bull', drivers: ['M.Verstappen', 'A.Albon'] },

5.      { name: 'McLaren', drivers: ['C.Sainz', 'L.Norris'] }

6.  ];

创建一个JavaScript表达式,该表达式以任何顺序返回驱动程序数组。

解决方案

我们可以创建一个循环并连接drivers每个团队的值。或者,我们也可以将每个团队的价值映射到他们的驱动程序列表上(采摘),然后将其串联起来。

1.  teams.flatMap( team => team.drivers )

2.  // ["S.Vettel", "C.Leclerc", "L.Hamilton","V.Bottas",

3.  // "M.Verstappen", "A.Albon", "C.Sainz","L.Norris"]

5.可选的捕获绑定

您多久编写一次try- catch代码段,而没有使用catch块提供的错误对象?

1.  try {

2.      // Parsing userinput

3.  } catch(e) {

4.      console.warn('Invalid user input.');

5.  }

我知道e代码中只是一个不必要的字符,但是创建和从未使用过变量看起来很令人不安。ES2019通过使错误对象绑定成为可选选项来结束这个小问题:

1.  try {

2.      // Parsing userinput

3.  } catch {

4.      console.warn('Invalid user input.');

5.  }

6. Symbol.prototype.description

description符号的属性返回其描述。该描述是只读的。

1.  const s1 = Symbol(),

2.        s2 = Symbol('text');

3.   

4.  console.log( s1.description )

5.  > undefined

6.   

7.  console.log( s2.description )

8.  > 'text

在极少数情况下,您在对象中使用了符号键,并且想要在该键上打印调试或日志记录信息,那么description属性可能会派上用场。

为了便于演示,建议使用字符串而不是符号。

即使不使用符号描述来确定两个符号是否相同,这些描述仍可以在代码中使用,因为它们存储了可选的字符串数据。

1.  const s1 = Symbol('text'),

2.        s2 = Symbol('text');

3.   

4.  console.log( 's1 == s2', s1 == s2 );

5.  > false

6.   

7.  console.log(

8.      's1.description ==s2.description',

9.      s1.description == s2.description

10.);

7. Function.prototype.toString

本节非常明显,足以以查理·卓别林的风格进行说明。

1.  Array.from.toString()

2.  > "function from() { [native code] }"

3.   

4.  (x => 2*x).toString()

5.  > "x => 2*x"

6.   

7.  var hello = function() {

8.      console.log('hello');

9.  }

10.

11.hello.toString()

12.> "function() {

13.      console.log('hello');

14.  }"

用例:文档,调试。

8.格式良好的JSON.stringify

这是您已经了解并欣赏的典型更新,或者根本不会打扰您。

请在tc39 /proposal-well-formed-stringify存储库中找到详细信息。这样做的目的是防止Unicode字符串出现格式错误。

9.稳定的Array.sort

对数组进行排序时,该数组的某些元素可能相等。这些相等元素的顺序由排序算法保留。

这是另一种边缘情况,可帮助您在基于不同的列(升序和降序)对表进行排序时使渲染的毛刺稍微减少。

例:

1.  const rows = [

2.      {

3.          name: 'Larry',

4.          website: 'google.com',

5.          topic: '42',

6.          year: 1998

7.      },

8.      {

9.          name: 'Zsolt',

10.        website: 'devcareermastery.com',

11.        topic: 'IT Career',

12.        year: 2015

13.    },

14.    {

15.        name: 'Zsolt',

16.        website: 'zsoltnagy.eu',

17.        topic: 'JavaScript',

18.        year: 2015

19.    }

20.];

假设两个元素相等(即比较器返回零),则现在保证这些元素保持其原始顺序:

1.  rows.sort( ({name: first}, {name: second}) => {

2.      if ( first > second ) return1;

3.      if ( first < second ) return-1;

4.      return0;

5.  } );

这些年来保持不变:

rows.sort( (x, y) => x.year - y.year );

这是另一种极端情况,在极端情况下,可能会阻止您不稳定的行由应用程序呈现或由API返回。

10. JSON超集

除非您曾经担心过,否则不要担心。该规范可能值得一读。

此更新主要是关于标准化和指定准确的定义,基于这些定义可以很好地描述和规范语言规范。

对于软件工程师来说,这仅意味着在极少数情况下您遇到行分隔符('\u2028')或页面分隔符('\u2029')的问题,请确保将它们统一视为空格字符,就像空格,制表符或换行符一样字符。

原文:http://www.zsoltnagy.eu/whats-new-in-es2019/

了解新钛云服

招聘:高级运维工程师

新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照

深耕专业,矗立鳌头,新钛云服获千万Pre-A轮融资

新钛云服,打造最专业的Cloud MSP+,做企业业务和云之间的桥梁

新钛云服一周年,完成两轮融资,服务五十多家客户

上海某仓储物流电子商务公司混合云解决方案

新钛云服出品的部分精品技术干货

国内主流公有云VPC使用对比及总结

万字长文:云架构设计原则|附PDF下载

刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!

Ceph OSD故障排除|万字经验总结

七个用于Docker和Kubernetes防护的安全工具

运维人的终身成长,从清单管理开始|万字长文!

OpenStack与ZStack深度对比:架构、部署、计算存储与网络、运维监控等

什么是云原生?

IT混合云战略:是什么、为什么,如何构建?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6-ES12是JavaScript的不同版本,每个版本都引入了新的特性和改进。以下是一些ES6到ES12的新特性的示例: ES6(2015年): 1. 箭头函数:简化了函数的语法。 2. 模板字面量:使用反引号(`)来创建多行字符串和插入变量。 3. 解构赋值:从对象或数组中提取值并赋给变量。 4. let和const:引入块级作用域的变量声明方式。 5. Promise:处理异步操作的更强大的方式。 ES7(2016年): 1. Array.prototype.includes():判断数组是否包含某个元素。 2. 指数操作符:使用双星号(**)进行指数运算。 ES8(2017年): 1. async/await:更简洁地处理异步操作。 2. Object.values()和Object.entries():从对象中提取值或键值对。 ES9(2018年): 1. Rest/Spread属性:通过...语法来处理函数参数和对象字面量。 2. Promise.prototype.finally():在Promise结束时执行操作。 ES10(2019年): 1. Array.prototype.flat()和Array.prototype.flatMap():用于处理嵌套数组的方法。 2. Object.fromEntries():将键值对列表转换为对象。 ES11(2020年): 1. 可选链操作符(Optional chaining):简化了访问深层嵌套属性的方式。 2. Nullish coalescing操作符:提供了一种默认值的设定方式。 ES12(2021年): 1. Promise.any():在多个Promise中返回最快解决的结果。 2. Logical Assignment Operators:提供了逻辑运算符与赋值的结合方式。 当然,以上仅是一些主要的新特性,ES6-ES12还有其他许多有用的功能和语法改进。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值