ECMAScript 2019(ES10)新特性简介
简介
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:
- Hex escape:16进制escape。转义的是2位的16进制。
> '\x7A' === 'z'
true
- Unicode escape:转义的是4位的16进制
> '\u007A' === 'z'
true
- 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)新特性简介的更多相关文章
- ECMAScript 2016(ES7)新特性简介
简介 自从ES6(ECMAScript 2015)在2015年发布以来,ECMAScript以每年一个版本的速度持续向前发展.到现在已经是ECMAScript 2020了. 每个版本都有一些新的特性, ...
- ECMAScript 2017(ES8)新特性简介
目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...
- ECMAScript 2018(ES9)新特性简介
目录 简介 异步遍历 Rest/Spread操作符和对象构建 Rest Spread 创建和拷贝对象 Spread和bject.assign() 的区别 正则表达式 promise.finally 模 ...
- ECMAScript 2020(ES11)新特性简介
目录 简介 动态imports import.meta export加强 BigInt matchAll() globalThis Promise.allSettled() ??操作符 ?.操作符 总 ...
- ECMAScript 2021(ES12)新特性简介
简介 ES12是ECMA协会在2021年6月发行的一个版本,因为是ECMAScript的第十二个版本,所以也称为ES12. ES12发行到现在已经有一个月了,那么ES12有些什么新特性和不一样的地方呢 ...
- 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% ...
- ES6、ES7、ES8、ES9、ES10新特性
ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- ECMAScript 6新特性简介
目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...
随机推荐
- 配置Nginx的坑及思路
我配置的是Django + uwsgi + Nginx 说下思路,先进行模块化测试: Django: Django 下 第一个坑是sql版本低问题,原因用pip安装不正确,在网上查了下按这个文章重装下 ...
- 原生JS快速实现拖放
原生 JS 快速实现拖放 拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生 js 实现起来也非常的方便.接下来我们就用原生 js 和 css 快速实现拖放效果 html ...
- POJ-1751(kruskal算法)
Highways POJ-1751 注意这里的样例答案也是对的,只是输出顺序改变,但是这也没关系,因为题目加了特殊判断. #include<iostream> #include<cs ...
- LightOJ-1074(SPFA判负圈+Bellman-Ford算法)
Extended Traffic LightOJ-1074 这题因为涉及到减法和三次方,所以可能会出现负圈. 这里使用的算法叫做SPFA算法,这个可以用来判负圈和求解最短路.Bellman-Ford算 ...
- Image Super-Resolution via Sparse Representation——基于稀疏表示的超分辨率重建
经典超分辨率重建论文,基于稀疏表示.下面首先介绍稀疏表示,然后介绍论文的基本思想和算法优化过程,最后使用python进行实验. 稀疏表示 稀疏表示是指,使用过完备字典中少量向量的线性组合来表示某个元素 ...
- 2.2 Python3基础-基本数据类型
>>返回主目录 源代码 # 基本数据类型 # Number类型:如何查看变量的数据类型? name = 'Portos' print(type(name)) # 结果:str print( ...
- 【pytest官方文档】解读fixtures - 7. Teardown处理,yield和addfinalizer
当我们运行测试函数时,我们希望确保测试函数在运行结束后,可以自己清理掉对环境的影响. 这样的话,它们就不会干扰任何其他的测试函数,更不会日积月累的留下越来越多的测试数据. 用过unittest的朋友相 ...
- MySQL深入研究--学习总结(4)
前言 接上文,继续学习后续章节.细心的同学已经发现,我整理的并不一定是作者讲的内容,更多是结合自己的理解,加以阐述,所以建议结合原文一起理解. 第13章<为什么表数据删除一般,表文件大小不变?& ...
- JVM 中的垃圾回收
说到JVM,总是绕不开垃圾回收,因为其是JVM的核心之一,因为对象的创建是非常频繁的,想要提高程序的执行效率,拥有一个高效的垃圾回收机制是必不可少的. 首先要明确,因为对象的创建只在堆中,所以垃圾回收 ...
- Hibernate学习实例
一 Hibernate简介 Hibernate是一种Java语言下的对象关系映射(ORM)解决方案.为面向对象的领域模型到传统的关系型数据库的映射提供了一个使用方便的框架. 二 Hibernate设计 ...