ES6、ES7、ES8、ES9、ES10、ES11新特性2

简介: ES6、ES7、ES8、ES9、ES10、ES11新特性

ES7新特性(2016)

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

2.指数操作符

在ES7中引入了指数运算符****具有与Math.pow(..)等效的计算结果。

// 不使用指数操作符
function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}
console.log(calculateExponent(2, 10)); // 输出1024
console.log(Math.pow(2, 10)); // 输出1024
//使用指数操作符
console.log(2**10);// 输出1024

ES8新特性(2017)

  • async/await
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()

1.async/await

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

2.Object.values()

Object.values()是一个Object.keys()类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。假设我们要遍历如下对象obj的所有值:

const obj = {a: 1, b: 2, c: 3};
Object.keys(obj)
(3) ["a", "b", "c"]
Object.values(obj)
(3) [1, 2, 3]

3.Object.entries()

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

接下来我们来遍历上文中的obj对象的所有属性的key和value:

// ES7
Object.keys(obj).forEach(key=>{
 console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3
// ES8
for(let [key,value] of Object.entries(obj1)){
 console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3
Object.entries(obj)
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
__proto__: Array(0)

4.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

Object.getOwnPropertyDescriptors(obj)

返回obj对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

const obj2 = {
 name: 'Jine',
 get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//  value:"Jine",
//  writable:true
//   }
// }





相关文章
|
11月前
|
前端开发 JavaScript
ES6(三)
es6补充知识
59 1
|
11月前
|
JSON 前端开发 JavaScript
ES6、ES7、ES8、ES9、ES10、ES11新特性3
ES6、ES7、ES8、ES9、ES10、ES11新特性
|
3月前
|
前端开发 JavaScript 网络架构
|
11月前
|
前端开发 JavaScript Java
ES6、ES7、ES8、ES9、ES10、ES11新特性1
ES6、ES7、ES8、ES9、ES10、ES11新特性
|
3月前
|
JSON 前端开发 数据格式
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(一)
|
3月前
|
前端开发 JavaScript Java
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性?(二)
初学es6
初学es6
64 0
|
JavaScript 前端开发 Java
【ES6】初识
【ES6】初识
|
前端开发 JavaScript
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(3)
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(3)
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(3)
|
前端开发 索引
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(1)
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(1)
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结(1)