ES7/ES8新特性总结
es7新特性
ES2016添加了两个小的特性来说明标准化过程:
数组includes()方法,用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。
a ** b指数运算符,它与 Math.pow(a, b)相同。
1.Array.prototype.includes()
includes()
函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true
,否则返回 false
。
includes
函数与 indexOf
函数很相似,下面两个表达式是等价的:
arr.includes(x)
arr.indexOf(x) >= 0
接下来我们在ES7之前的做法来判断数字中是否包含某个元素:
在ES7之前的做法
使用
indexOf()
验证数组中是否存在某个元素,这时需要根据返回值是否为-1来判断:
let arr = ['react', 'angular', 'vue']
if (arr.indexOf('react') !== -1) console.log('react')
使用ES7的includes()
使用includes()验证数组中是否存在某个元素,这样更加直观简单
let arr = ['react', 'angular', 'vue']
if (arr.includes('react') console.log('react')
他们的区别在于,includes可以查找NaN,而indexOf不能:
[NaN].includes(NaN) // true
[NaN].indexOf(NaN) // -1
另外include是不区分+0和-0的:
[-0].includes(+0) // true
2.指数操作符
在ES7中引入了指数运算符 `**`, `**`具有与 `Math.pow(..)`等效的计算结果。
使用指数运算符**,就像+、-等操作符一样:
console.log(2 ** 10)
另外幂操作符的优先级是非常高的,** > * > +
2**2 * 2 // 8
2 ** (2*2) // 16
es8新特性
- - async/await
- - `Object.values()`
- - `Object.entries()`
- - String padding: `padStart()`和 `padEnd()`,填充字符串达到当前长度
- - 函数参数列表结尾允许逗号
- - `Object.getOwnPropertyDescriptors()`
- - `ShareArrayBuffer`和 `Atomics`对象,用于从共享内存位置读取和写
1.async/await
ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了 `next()`方法返回一个Promise。 async/await也可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码,使得异步代码看起来像同步代码。 因此 `await`可以和 `for...of`循环一起使用,以串行的方式运行异步操作。例如:
async function process(array) {for await(let i of array) {doSomething(i)}
}async fetchData(query) =>{ try { const response = await axios.get(`/query?query=${query}`); const data = response.data; return data; }catch (error) { console.log(error) }}
fetchData(query).then(data =>{ this.processfetchedData(data)
})
2.Object.values()
Object.values()
是一个与 Object.keys()
类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。
假设我们要遍历如下对象 obj
的所有值:
const obj = { a: 1, b: 2, c: 3 }
使用Object.values() :ES8
const value = Object.values(obj1)
console.log(values) // [1, 2, 3]
3.Object.entries()
Object.entries()
函数返回一个给定对象自身可枚举属性的键值对的数组。
接下来我们来遍历上文中的 obj
对象的所有属性的key和value:
不使用Object.entries() :ES7
Object.keys(obj).forEach( key => {conosle.log('key:' + key + 'value:' + obj[key])
})
// key: b value: 2
使用Object.entries() :ES8
for(let [key, value] of Object.entries(obj1)) {console.log(`key: ${key} value:${value}` )
}
4.String padding
在ES8中String新增了两个实例函数 String.prototype.padStart
和 String.prototype.padEnd
,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。
String.padStart(targetLength,[padString])
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
padString:(可选)填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " "。
String.padEnd(targetLength,padString])
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
padString:(可选) 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " ";
使用实例:
当我们格式化时间的时候,如果时间需要处理成:2022-06-19这种格式的时候,为了显示当前日期,并且当月份和日期小于10的时候在前面补0,那我就可以这样做:
const date = new Date()
let year = date.getFullYear(); //获取年份
let month = date.getMonth().toString().padStart(2,'0'); //获取月份
let day = date.getDate().toString().padStart(2,'0'); //获取日期
const dataStr = year + '-' + month + '-' + day
5.Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()
函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象
ES7/ES8新特性总结相关推荐
- ES6/ES7/ES8新特性汇总
ES6起各个版本的新特性汇总 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-417.关于ECMA的 ...
- ES6-Promise简介、ES7 新特性及ES8新特性-async和await
目录 ES6-Promise Promise简介 Promise.prototype.then方法 Promise.prototype.catch方法 ES7 新特性 Array.prototype. ...
- JavaScript——ES8新特性
ES8新特性 一.async 和 await 1. async 函数 2. await 表达式 3. 实例 二.对象方法扩展 一.async 和 await async 和 await 两种语法结合可 ...
- ES7、ES8新特性
概述 JavaScript,作为一门处于高速发展期的开发语言,正在变的越来越完善.稳定.我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈中. ECMAScript 是标准化的 JavaSc ...
- ES6和ES7及ES8新特性最新规范知识详细总结
一.ECMASript 相关介绍 ECMA概述 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWfWai55-1637595380774)(images/微信截图_2 ...
- ECMAScript 2017(ES8)新特性简介
文章目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是EC ...
- JavaScript-ES7~ES8新特性使用教程
因为ES6的内容太多了, 如果想学ES6的新特性, 那么可以看 http://t.csdn.cn/1bXjB 超级全, 吐血编写 ES7 includes() 数组中是否包含 includes() 方 ...
- ECMAScript 2016(ES7) 的新特性总结
快速通道: ES6.ES7.ES8.ES9.ES10.ES11.ES12.ES13新特性大全 老样子,先纵览下 ES2016 的新功能,ES2016添加了两个小的特性来说明标准化过程: 数组inclu ...
- ES7~ES13新特性(二)
1 ES7新增特性解析 2 ES8新增特性解析 3 ES10新增特性解析 4 ES11新增特性解析 5 ES12新增特性解析 6 ES13新增特性解析 ES8-对象相关的属性 ---entries的使 ...
最新文章
- 清空控制台Console.log()信息
- linux配置文件怎么把某行后几个字符替换_vim(Linux运维)
- [APIO2010]
- ITK:应用Atan图像过滤器
- python/Django(增、删、改、查)操作
- 5种比较流行的Linux发行版
- Linux编程练习 --多线程4--条件变量
- .Net培训个人总结笔记26
- python2与pyrhon3的区别,python—文件操作,函数练习题
- SpringSecurity Basic Authentication
- 简单使用Idea创建三层架构项目和数据库连接(使用原生ajax进行访问+ajax)
- 在vue项目中调用echarts官网百度地图实例
- VS中使用ankhSVN
- ENVI5.3.1高分2号影像预处理流程
- 一键生成数据库文档(持续更新)
- 你眼中的程序员是什么样子的?
- 路由器 刷rom php,路由器刷固件常用命令Openwrt 之mtd/mtd_write烧写固件
- 微软借云重振中国市场希望渺茫
- 计算机工业设计id,我所认识的工业设计(ID)
- 用Python制作游戏外挂(上)