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()
函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象