ECMA7 新标准概述
ECMA7 新标准概述
日常工作中,ES5 ES6 的语法经常使用,一部分新标准和提案已经增加,这里简单总结一下。
ES7
- array.includes(item) return bool
ES8
- Async Functions
- SharedArrayBuffer和Atomics
- Object.values、Object.entries、Object.getOwnPropertyDescriptors()
- String padding
- 函数参数列表和调用中的尾逗号
ES9
- 对象的Rest以及Spread
- Asynchronous iteration
- Promise.prototype.finally()
- 正则扩展--先行断言以及后行断言-Unicode转义-命名捕获组
ES10
- array.flat()
- array.flatMap()
- string.trimStart()
- string.trimEnd()
- Object.fromEntries()
1. Array includes 方法
includes() 方法用来判断数组中是否包含一个特定的值,如果包含 ,返回true,若不包含,返回false。
此方法对标 数组 的 indexOf(),产生主要是为了解决indexOf 什么问题呢?
- 简便的判断
includes() 方法返回值是布尔值可以直接在if判断,而indexOf返回的是值类型 -1,判断时候更加冗余。
const ary = [0];
if (ary.indexOf(0) !== -1) { console.log("存在")
}
if (ary.includes(1)) { console.log("存在")
}
- 对于 NaN 的判断
indexOf 无法对NaN进行准确的判断,includes 可以对于进行正确判断。
const ary = [NaN];
console.log(ary.indexOf(NaN)) //-1
console.log(ary.includes(NaN))//true
- 对于 underfind 的判断
当数组值为空,indexOf 判断空为 -1,includes则会进行正确的判断。
const ary = new Array(3);
console.log(ary.indexOf(undefined)); //-1
console.log(ary.includes(undefined)) //true
2. 求幂运算符(**)
Math.pow(2,3) 等价于 2 ** 3。
3. Async Functions
谷歌中默认启用异步函数,我们可以利用 async/await 像编写同步代码一样的编写基于Promise的代码,当您使用await某个Promise 时,函数暂停执行,直到Promise执行返回结果,这种暂停不会阻塞主线程,如果Promise执行,则返回值,如果拒绝,则返回错误值。
async/await 会提高代码的可读行,去掉层层回调。
function logFetch(url) { return fetch(url).then(response => response.text()).then(text => { console.log(text);
}).catch(err => { console.error('fetch failed', err);
});
}
使用async/await改写:
async function logFetch(url) { try { const response = await fetch(url);
console.log(await response.text());
}
catch (err) { console.log('fetch failed', err);
}
}
使用async/await 构建 api模块:
export async function requestRaw(url: string, data?: any, type?: string) { if (url.stratsWith('/')) { url = [process.env.isProduction ? new String('') : '/api', url].join('');
}
let headers:{[index:string]: any} = {};
let form = data;
headers['ContentType'] = 'application/json;charset=utf-8';
if (isPlainObject(form)) { form = JSON.stringity(form);
headers['ContentType'] = 'application/json;charset=utf-8';
}
let response = await fetchRequest(url, { method: type || 'GET',
body: form,
credentials: 'include',
headers
});
return await response;
}export async function resuest(url: string, data?: any, type?: string) { let result = await requestRaw(url, data, type);
return result;
}
4. SharedArrayBuffer
在了解SharedArrayBuffer之前我们首先要了解一下内存之类的知识。
假如我们要将一个数字放进内存中,我们会首先将它转化为32位或者64位字大小,如果要放入一个非数字,JS Engine会通过编码器运行该值,然后通过编码方式,例如UTF-8,获取该值得二进制表示。JS引擎会在内存中找到可以存放此二进制的位置,进行分配内存,之后js引擎会持续跟踪该变量是否仍可从程序中的任何位置访问。如果无法再访问该变量,则将回收内存,以便JS引擎可以在其中放置新值。如果无法在访问到它们,则进行清除,此过程称为垃圾回收。JS类语言称为内存管理语言,它并不会直接操作内存,自动管理内存会使管理人员更加轻松,但是会产生一定的性能开销。
但是,例如C等手动管理内存语言,C没有JavaScript在内存上做的那个抽象层。相反,你直接在内存上运行。您可以从内存加载内容,并可以将内容存储到内存中。假如React使用C写出来,那么它可以借助WebAssembly来进行内存管理,关于什么是WebAssembly?
WebAssembly是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如C / C ++等语言提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。对于网络平台而言,WebAssembly具有巨大的意义——它提供了一条途径,以使得以各种语言编写的代码都可以以接近原生的速度在Web中运行。在这种情况下,以前无法以此方式运行的客户端软件都将可以运行在Web中。
WebAssembly被设计为可以和JavaScript一起协同工作——通过使用WebAssembly的JavaScript API,你可以把WebAssembly模块加载到一个JavaScript应用中并且在两者之间共享功能。这允许你在同一个应用中利用WebAssembly的性能和威力以及JavaScript的表达力和灵活性,即使你可能并不知道如何编写WebAssembly代码。
那么,我们为什么需要ArrayBuffers?
ArrayBuffer
对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer
不能直接操作,而是要通过类型数组对象或DataView
对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
即使你在JS中也可以通过ArrayBuffer对内存数据进行处理,你为什么需要进行处理?正如前面所说的自动内存管理语言对于内存处理都有一种权衡,增加一些开销,某种程度会导致性能问题。JS对于新创建的变量,因为引擎会对其进行分析,所以可能需要要为它进行预留大约2倍以上内存空间,这可能导致内存大量的浪费。
var buffer = new ArrayBuffer(8);console.log(buffer.byteLength);
// expected output: 8
除了使用ArrayBuffer时,您不能将任何JavaScript类型放入其中,如对象或字符串。您可以添加的唯一内容是字节,实际上并没有将这个字节直接添加到ArrayBuffer中。就其本身而言,这个ArrayBuffer不知道该字节应该有多大,或者不应该将不同类型的数字转换为字节。ArrayBuffer本身只是一堆零和一行。ArrayBuffer不知道该数组中第一个元素和第二个元素之间的除法位置。
为什么我们需要SharedArrayBuffer?
ArrayBuffers可以减少主线程必须完成的工作量。更加高效的做法是分开进行工作,在其他语言中使用线程来进行分解工作,在JS中使用Web Worker,但是他们不像其他语言一样,它们是不共享内存的,也就是你干你的,我干我的。如果我们想要共享某些数据就必须进行复制,通过函数postMessage来进行。postMessage接受放入的其他对象,对其进行序列化,将其发送给其他Web工作者,然后将其反序列化并放入内存中。对于某些类型的数据,如ArrayBuffers,您可以执行所谓的传输内存。这意味着移动特定的内存块,以便其他Web工作者可以访问它。但是第一个Web工作者再也无法访问它了。
使用SharedArrayBuffer,两个Web工作者(两个线程)都可以写入数据并从同一块内存中读取数据。这意味着他们没有使用postMessage的通信开销和延迟。两个Web工作人员都可以立即访问数据。但是,同时从两个线程立即访问存在一些危险。它可以导致所谓的竞争条件。
5. Object.values 和 Object.entries
这两个api就比较简单了。
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
6. String padding
padStart()方法用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。
padEnd() 方法会用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。从当前字符串的末尾(右侧)开始填充。
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"'abc'.padEnd(10); // "abc "
'abc'.padEnd(10, "foo"); // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1); // "abc"
7. 结尾逗号
自我认为此新特性唯一好处就是代码结构更加明了,易读。当你需要再次增加属性时候,方便许多。。。。。
let obj = { first: 'Cat',
last: 'Dog',
};
let arr = [
'red',
'green',
'blue',
];
8. 对象的 Rest /Spread 属性
在ES6数组中,我们引入了 Rest /Spread属性。
// Rest
const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers// Spread
const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)
在ES9中可以在对象中使用此属性。
// Rest
const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }
// Spread
const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
9. Asynchronous iteration (异步迭代)
新的for-await-of
构造允许您使用异步可迭代对象作为循环迭代:
for await (const o of array) { console.log(o)
}
10. Promise.prototype.finally()
finally()
允许您运行一些代码,无论 promise 的执行成功或失败。
fetch('xxx')
.then(console.log('成功'))
.catch(error => console.error(error))
.finally(() => console.log('结束'))
11. 正则扩展--先行断言以及后行断言
先行断言(lookahead):您可以使用 ?=
匹配一个字符串,该字符串后面跟着一个特定的子字符串,?!
执行逆操作,匹配一个字符串,该字符串后面没有一个特定的子字符串。
/a(?= b)/.test('a c b') //false
/a(?= b)/.test('a b c') //true/a(?! b)/.test('a c b') // true
/a(?! b)/.test('a b c') // false
上面例子表示的是 a 的后面是 b 采用的是先行断言。
先行断言(lookahead)使用?=
符号。
/(?<=a) b/.test('c b') //false
/(?<=a) b/.test('a b') // true/(?<!a) b/.test('c b') //true
/(?<!a) b/.test('a b') // false
上面例子表示的是 b 的前面是 a 采用的是后行断言###
12. 正则扩展--命名捕获组
在 ES2018 中,可以为捕获组分配一个名称,而不是仅在结果数组中分配一个 slot(插槽):
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2019-05-30')// result.groups.year === '2019';
// result.groups.month === '05';
// result.groups.day === '30';
13. 正则扩展--Unicode转义
Unicode 标准为每个符号分配各种属性和属性值,比如希腊字母π
在 Unicode 中有独特的属性和属性值,在ES9之前,我们是无法直接匹配这种独特的属性,只能借助一些正则表达式的库,例如 xregexp 这种正则表达式的库,来创建增强型的正则表达式。
const regexGreekSymbol = XRegExp('\\p{Greek}', 'A')
regexGreekSymbol.test('π') // true
这种库是运行时的依赖,不利于性能要求较高的web应用,并且 当Unicode 标准更新时,必须要更新 xregexp 才能使用新数据,至于π 为什么是Greek,需要参看 Unicode编码表 。
在新功能中使用 \p{} 匹配所有 Unicode 字符,否定为 \P{}。
任何 unicode 字符都有一组属性。 例如,Script确定语言系列,ASCII是一个布尔值, 对于 ASCII 字符,值为true,依此类推。 您可以将此属性放在花括号中,正则表达式将检查是否为真。
/^\p{ASCII}+$/u.test('eee') // true
/^\p{ASCII}+$/u.test('EEE1@') // true
/^\p{ASCII}+$/u.test('WWW
ECMA7 新标准概述相关推荐
- Java黑皮书课后题第5章:*5.47(商业:检测ISBN-13)ISBN-13是标识书籍的新标准。它使用13位数字d1d2d3~d12d13,d13是校验和。如果校验和为10,则替换为0。求所有数字
5.47(商业:检测ISBN-13)ISBN-13时标识书籍的新标准.它使用13位数字d1d2d3~d12d13,d13是校验和.读入前12位输出全部位数 题目 题目概述 运行示例 破题 代码 题目 ...
- 国内工业控制系统标准概述
国内工业控制系统 标准概述在国内,自 2010 年前后已陆续开展工业控制系统信息安全相关标准的研究制定工作.截至目前, 全国已有多个相关标委会开展了该领域标准执行工作.全国工业过程测量和控制标准化 技 ...
- MPEG-CDVA标准概述论文粗译 Compact Descriptors for Video Analysis:the Emerging MPEG Standard
文章翻译只是为了更好地理解论文--英语水平欠佳,谨慎参考. 面向视频分析的紧凑视觉描述子 Abstract 文章对正在制定中的MPEG-CDVA标准做了概述.MPEG-CDVA标准旨在定义标准的二进制 ...
- Servlet 3.0 新特性概述
Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若 ...
- 【谷歌推网页爬虫新标准,开源robots.txt解析器】
https://www.toutiao.com/a1638031116246019 [谷歌推网页爬虫新标准,开源robots.txt解析器] 对于接触过网络爬虫的人来说 robots.txt 绝不陌生 ...
- 5G新标准将延迟3个月发布,但5G“新战场”已经明确
来源:雷锋网 2019年,5G开启商用元年.2020年开年,5G智能手机的发布就迎来了一个发布高峰,2月份至今,国内就有10多款5G手机发布.5G手机的数量和销量也迅速增长,根据工信部副部长辛国斌给出 ...
- 华为等向联合国提议重构互联网:提议采用一种新的核心网络技术新标准,名为“New IP”...
来源:云头条 新架构将支持尖端技术,华为曾表示,新技术的一些部分已经在建造中,相关部分已准备好在2021年之前进行测试. 以下为<演示文稿>: <金融时报>消息,中国已向联合国 ...
- 字节腾讯阿里罕见联手:发布直播技术新标准,要让手机直播像电视一样丝滑...
明敏 发自 凹非寺 量子位 | 公众号 QbitAI 字节.阿里.腾讯3家大厂联手搞了件大事: 把传统直播3-6秒的延迟,直接拉低到1秒内大关,最低可到500毫秒的那种. 就在最近,火山引擎与阿里云. ...
- 1977标准_超过8分,就是痛风!附痛风诊断新标准和治疗原则
我们发现,在现实生活中,仍有不少朋友不能确定自己的关节症状是否属于痛风.确实,痛风是一种容易误诊的疾病,医学界对于痛风的诊断标准也经历了多次变更(分别有1963年的罗马诊标准.1968年的纽约诊断标准 ...
最新文章
- 牛客网编程初学者入门训练 BC28
- Memcached原理深度分析详解
- S3C2440的LCD编程
- log4net 小记
- dijkstra算法matlab程序_Dijkstra算法例子
- STM32H743+CubeMX-ADC+DMA采样四路AD
- java swing mysql实现的员工工资管理系统项目
- JAVA基础之JDK、JRE、JVM关系
- GitHub的page构建自己的博客以及添加自己的域名
- 嵌入式Linux系统工程师系列之ARM920T的MMU与Cache
- linux上怎么实现ssh免密登录
- mysql中分层查询_在mysql中连接任意数量的字符串行(分层查询)
- 群智能(SI)与蚁群优化(ACO)概述
- maya 白天室内灯光_Maya课时:白天的灯光构建视频教程_翼狐网
- 国内安装oh-my-zsh
- AXP221电源管理芯片使用注意点
- python爬虫读取pdf_Python读取PDF内容
- soft-nms(softnms)(pytorch实现) softer nms
- 环回接口---loopback
- [jQuery]黑马课程学习笔记(一篇完)
热门文章
- SimNow暂停服务后的模拟交易解决方案
- 【射频知识】自动增益控制(AGC)电路
- Support for password authentication was removed on August 13, 2021. Please ...
- 【题解】康娜的线段树
- java列名无效_java中的列名无效
- 如何做好应用市场推广?
- 判断一个点是否在多边形内部
- 用 Silverlight 开发围棋在线对弈程序(一)UI 雏形
- 贾跃亭不是老赖?网传贾跃亭已偿还200亿债务,你怎么看?...
- 基于matlab的单周期控制三相高功率因数并网逆变器的建模与仿真,基于Matlab的单周期控制三相高功率因数并网逆变器的建模与仿真...