简介

ES10是ECMA协会在2019年6月发行的一个版本,因为是ECMAScript的第十个版本,所以也称为ES10.

今天我们讲解一下ES10的新特性。

ES10引入了2大特性和4个小的特性,我们接下来一一讲解。

Array的新方法flat和flatMap

在ES10中,给Array引入了两个新的方法,分别是flat和flatMap。

先来看一下flat。

我们看一下 Array.prototype.flat() 的定义:

.flat(depth = 1): any[]

flat的作用是将Array中的Array中的内容取出来,放到最顶层Array中。我们可以传入一个depth参数,表示的是需要flat的Array层级。

举个例子:

> [ 1,2, [3,4], [[5,6]] ].flat(0) // no change
[ 1, 2, [ 3, 4 ], [ [ 5, 6 ] ] ] > [ 1,2, [3,4], [[5,6]] ].flat(1)
[ 1, 2, 3, 4, [ 5, 6 ] ] > [ 1,2, [3,4], [[5,6]] ].flat(2)
[ 1, 2, 3, 4, 5, 6 ]

当depth=0的时候,就表示不会对Array内置的Array进行flat操作。

我们再看一下Array.prototype.flatMap()的定义:

 .flatMap<U>(
callback: (value: T, index: number, array: T[]) => U|Array<U>,
thisValue?: any
): U[]

flatMap是map和flat的结合,下面的两个操作是等价的:

arr.flatMap(func)
arr.map(func).flat(1)

我们看几个flatMap的例子:

> ['a', 'b', 'c'].flatMap(x => x)
[ 'a', 'b', 'c' ]
> ['a', 'b', 'c'].flatMap(x => [x])
[ 'a', 'b', 'c' ]
> ['a', 'b', 'c'].flatMap(x => [[x]])
[ [ 'a' ], [ 'b' ], [ 'c' ] ] > ['a', 'b', 'c'].flatMap((x, i) => new Array(i+1).fill(x))
[ 'a', 'b', 'b', 'c', 'c', 'c' ]

Object的新方法fromEntries

Object.fromEntries的主要作用就是通过给定的[key,value],来创建新的Object对象。

var newObj =  Object.fromEntries([['foo',1], ['bar',2]]);
console.log(newObj);
{ foo: 1, bar: 2 }

上面例子中,我们通过给定的两个key-value对,创建了新的object对象。

和fromEntries相反的方法,就是Object.entries,用来遍历对象属性。

还是刚刚的例子,我们再调用一下Object.entries方法:

console.log(Object.entries(newObj));
[ [ 'foo', 1 ], [ 'bar', 2 ] ]

String的新方法trimStart和trimEnd

JS中已经有了trim的方法,可以消除String前后的空格。

> '  abc  '.trim()
'abc'

但有时候可能需要消除前面或者后面的空格,ES10引入了trimStart和trimEnd方法:

> '  abc  '.trimStart()
'abc '
> ' abc '.trimEnd()
' abc'

注意,有些浏览器可能已经有了trimLeft和trimRight方法,在EMCAScript规范中,他们和trimStart,trimEnd是等价的。

可访问的Symbol的description属性

我们在创建Symbol的时候,可以传入一个description作为参数来构建Symbol:

const sym = Symbol('www.flydean.com');

在ES10之前,我们想要访问Symbol的description是这样做的:

console.log(String(sym));
//Symbol(www.flydean.com)

现在我们可以直接通过description属性来访问了:

console.log(sym.description);
//www.flydean.com

可忽略的catch参数

在传统的写法中,catch是要接受一个error参数的:

try {
// ···
} catch (error) {
// ···
}

但有时候我们已经知道这个异常是不重要的,或者说,我们想忽略掉这个异常,那么在ES10中,我们可以省略这个error参数:

try {
// ···
} catch {
// ···
}

Array的稳定排序

Array有个sort功能,可以根据元素内容进行排序。

ES10中引入了稳定排序的概念,也就是说如果排序的key是相同的,那么这些相同key的顺序在排序中是不会发生变化的。

举个例子:

const arr = [
{ key: 'b', value: 1 },
{ key: 'a', value: 2 },
{ key: 'b', value: 3 },
];
arr.sort((x, y) => x.key.localeCompare(y.key, 'en-US'));

我们根据key来进行排序,从而让a,排在b前面,但是两个key=b的元素位置是不会变化的。

console.log(arr);
[
{ key: 'a', value: 2 },
{ key: 'b', value: 1 },
{ key: 'b', value: 3 }
]

JSON.stringify

JSON是一个很方便的数据传输格式,它不像XML那么复杂,优点就是体积小,便于传输。

根据RFC3629的规范,在公共环境中传输JSON,必须使用UTF-8进行编码。

JSON text exchanged between systems that are not part of a closed

ecosystem MUST be encoded using UTF-8 [RFC3629].

在讲JSON.stringify之前,我们先回顾一下ES6中的Escape sequences。

ES6中有三种escape:

  1. Hex escape:16进制escape。转义的是2位的16进制。
  > '\x7A' === 'z'
true
  1. Unicode escape:转义的是4位的16进制
 > '\u007A' === 'z'
true
  1. Unicode code point escape:转义的是1位或者多位的16进制
  > '\u{7A}' === 'z'
true

最后一个转义是在ES6中引入的。

unicode字符集最后是要存储到文件或者内存里面的,直接存储的话,空间占用太大。那怎么存呢?使用固定的1个字节,2个字节还是用变长的字节呢?于是我们根据编码方式的不同,分成了UTF-8,UTF-16,UTF-32等多种编码方式。

其中UTF-8是一种变长的编码方案,它使用1-4个字节来存储。UTF-16使用2个或者4个字节来存储。

而UTF-32是使用4个字节来存储。这三种编码方式中,只有UTF-8是兼容ASCII的,这也是为什么国际上UTF-8编码方式比较通用的原因(毕竟计算机技术都是西方人搞出来的)。

我们知道在Unicode编码中,U+D800到U+DFFF的这些字符是预留给UTF-16使用,如果我们输入的是这个范围内的字符的话,是无法被转换成为UTF-8格式的。

这就是原来的JSON.stringify可能出现的问题。

在ES10中,JSON.stringify对于这些不可转换成UTF-8的字符,直接返回对应的code unit escape sequences。

console.log(JSON.stringify('\u{D800}'));
"\ud800"

JSON 被归为ECMAScript的子集

在之前,JSON不是ECMAScript的子集,从而导致有些可以在JSON中包含的字符,不能够在ECMAScript的字面量中出现,比如U+2028 和U+2029 :

const sourceCode = '"\u2028"';
eval(sourceCode); // SyntaxError JSON.parse(json); // OK

这次改变之后,我们在编码的时候就不需要再去区分是JSON还是ECMAScript了。

Function的toString方法

在ES10中,如果Function可以通过以ECMAScript源代码的方式表示的话,则toString会直接返回这个函数的代码:

> class C { foo() { /*hello*/ } }
> C.prototype.foo.toString()
'foo() { /*hello*/ }'

如果是一些native的方法,比如底层c或者c++实现的代码,则直接返回[native code]:

> Math.pow.toString()
'function pow() { [native code] }'

本文作者:flydean程序那些事

本文链接:http://www.flydean.com/ecmascript-10/

本文来源:flydean的博客

欢迎关注我的公众号:「程序那些事」最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

ECMAScript 2019(ES10)新特性简介的更多相关文章

  1. javaScript ES7 ES8 ES9 ES10新特性

    参考文献: https://tuobaye.com/2018/11/27/%E7%BB%86%E8%A7%A3JavaScript-ES7-ES8-ES9-%E6%96%B0%E7%89%B9%E6% ...

  2. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  3. ECMAScript 6新特性简介

    目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...

  4. PHP7 新特性 简介

    整理了一些常用的新特性,欢迎点赞!!! 新增操作符 1.?? $username = $_GET['user'] ?? ''; $username = isset($_GET['user']) ? $ ...

  5. webpack3新特性简介

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  6. Java8 新特性简介

    Java8是2014年发布的,至今也已经有快三年的时间了,之前虽然有学习过,但是学的比较零散,不成系统,而且也没有覆盖到Java8所有的特性. 由于公司已经使用了JDK1.8,所以工作中能使用Java ...

  7. java8新特性——简介

    java8问世已经有好长时间了,但是之前项目中都没有使用到,所以一直都只是了解一些,近期刚刚换了家新公司,在开发中需要使用到java8来开发,所以也是马上赶来学习一下java8得新特性. 一.新特性 ...

  8. java8新特性-简介

    一.主要内容 :其中最为核心的为lambda 表达式 与 Stream API lambda表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期API ...

  9. Java高效开发IntelliJ IDEA 2019.1 新特性

    1. 重构类.文件.符号,Action 搜索 IntelliJ IDEA(以下简称 IDEA) 中的搜索可以分为以下几类 类搜索,比如 Java,Groovy,Scala 等类文件 文件搜索,类文件之 ...

  10. iOS13 新特性简介

    目录 一.Dark Mode 暗黑模式 二.Status Bar更新 三.UIActivityIndicatorView加载视图 四.总结 一.Dark Mode 暗黑模式 1.1 iOS13推出了D ...

随机推荐

  1. Jpush推送模块

      此文章已于 14:17:10 2015/3/24 重新发布到 鲸歌 Jpush推送模块     或以上版本的手机系统. SDK集成步骤 .导入 SDK 开发包到你自己的应用程序项目 •    解压 ...

  2. Python学习笔记5-元组

    元组是用圆括号括起来的,其中的元素之间用逗号隔开 >>> t = 123,'abc',["come","here"] >>> ...

  3. BZOJ2708 [Violet 1]木偶

    首先想到的是贪心...肯定不对嘛...T T 然后发现其实是可以DP的...不过我们要先排序 令f[i]表示前i个木偶最坏要丢掉几个,则 f[i] = max(f[j] + calc(j + 1, i ...

  4. usb协议分析-设备描述符配置包-描述符

    /* usb协议分析仅供大家参考---设备描述符配置包,设备描述符, 地址设置, 配置描述符, 字符串描述符 */ /* -1- usb设备描述符配置包 */ typedef struct _USB_ ...

  5. Linux之查看文件大小

    1.查看当前文件大小du -sh ./ du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=< ...

  6. Cannot create a session after the response has been committed

    有时候在操作Session时,系统会抛出如下异常 java.lang.IllegalStateException: Cannot create a session after the response ...

  7. Git Step by Step – (6) Git远程仓库

    前面文章中出现的所有Git操作都是基于本地仓库的,但是日常工作中需要多人合作,不可能一直都在自己的代码仓库工作.所以,这里我们就开始介绍Git远程仓库. 在Git系统中,用户可以通过push/pull ...

  8. 【数据库】MFC ODBC(二)

    三.CRecordset类 1.IsBOF与IsEOF (1)IsBOF 如果记录集没有记录,或已经向前游动到第一个记录之前,则返回非零:否则返回0.详细说明如下: 1)访问Open函数之后,如果记录 ...

  9. [CC-MCHEF]MasterChef

    [CC-MCHEF]MasterChef 题目大意: \(n(n\le10^5)\)片花,第\(i\)片花的美观度为\(b_i(|b_i|\le10^9)\).总体美观度为各片花的美观度之和. 由于有 ...

  10. Java中多线程重复启动

    在面试时候经常被问到多线程的相关问题: 今天在测试的时候发现下面的代码会抛出异常: java.lang.IllegalThreadStateException public static void m ...