ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性？（一）-阿里云开发者社区

大厂面试题分享面试题库

前后端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库 web前端面试题库 VS java后端面试题库大全

ES7

ES2016（ES7）中新增了如下特性👇

Array.prototype.includes
Exponentiation Operator

一、`Array.prototype.includes`

1.1 定义

includes()方法用来判断一个数组或字符串中是否包含一个指定的值

返回值： 如果包含返回true，否则返回false。

1.2 语法

arr.includes(valueToFind)
arr.includes(valueToFind, fromIndex)

let arr = [1, 2, 3, 4];
arr.includes(3);        // true
arr.includes(5);        // false
arr.includes(3, 1);     // true

1.2.1 fromIndex大于等于数组长度

返回false

arr.includes(3, 3);     // false
arr.includes(3, 20);    // false

1.2.2 计算出的索引小于0

如果fromIndex为负值，使用数组长度 + fromIndex计算出的索引作为新的fromIndex，如果新的fromIndex为负值，则搜索整个数组。

arr.includes(3, -100);  // true
arr.includes(3, -1);    // false

二、`Exponentiation Operator`幂运算

幂运算符**，相当于Math.pow()

5 ** 2                  // 25
Math.pow(5, 2)          // 25

ES8

ES2017（ES8）新增了以下特性👇

Async functions
Object.entries
Object.values
Object.getOwnPropertyDescriptors
Trailing commas

一、`Async functions`

1.1 定义

Async functions 是 async 声明的函数，async 函数是 AsyncFunction 构造函数的实例，其中允许使用 await 关键字。

1.2 语法

async function name([param[, param[, ...param]]]) {
  // statements
}

1.3 返回值

一个Promise

1.4 例子

const promise = () => {
  console.log('1');
  return new Promise((resolve, reject) => {
    resolve('2');
  });
};
const asyncFun = async() => {
  console.log('3');
  const test = await promise();
  console.log('4', test);
}
asyncFun();                        // 3 1 4 2

二、`Object.entries`

2.1 返回值

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

2.2 语法

Object.entries(obj);

2.3 例子

let obj = {a: 1, b: 2};
Object.entries(obj);        // [['a', 1], ['b', 2]]

三、`Object.values`

3.1 返回值

Object.values()方法返回一个给定对象自身可枚举属性值的数组

3.2 语法

Object.values(obj);

3.3 例子

let obj = {a: 1, b: 2};
Object.values(obj);         // [1, 2]

四、`Object.getOwnPropertyDescriptors`

4.1 返回值

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符

4.2 语法

Object.getOwnPropertyDescriptors(obj);

4.3 例子

let obj = {a: 1, b: 2};
Object.getOwnPropertyDescriptors(obj);   // [a: {configurable: true, enumerable: true, value: 1, writable: true}, b: {configurable: true, enumerable: true, value: 2, writable: true}]

五、`Trailing commas` 尾后逗号

5.1 定义

如果你想要添加新的属性，并且在上一行已经使用了尾后逗号，你可以仅仅添加新的一行，而不需要修改上一行

5.2 注意

JSON 不允许尾后逗号

5.3 举例

字面量中的尾后逗号

对象

let obj = {
  a: 1,
  b: 2
}

数组

let arr = [
  1, 
  2
]

函数中的尾后逗号

参数定义

function(x, y) {}
function(x, y,) {}
(x, y) => {}
(x, y,) => {}

函数调用

fun(x, y)
fun(x, y,)

不合法的尾后逗号
不含参数或者在剩余参数后面加逗号，都是不合法的尾后逗号

function(,) {}
(,) => {}
fn(,)
function(...arg,) {}
(...arg,) => {}

解构中的尾后逗号

let [a, b,] = [1, 2];
let {x, y} = {x: 1, y: 2};

JSON中的尾后逗号
JSON中不允许出现尾后逗号

JSON.parse("[1, 2, 3,]")  // ❌
JSON.parse('{"a": 1,}')   // ❌
JSON.parse("[1, 2, 3]")   // ✅
JSON.parse('{"a": 1}')    // ✅

六、`String.prototype.padStart()`

6.1 定义

padStart() 用另一个字符串填充当前字符串。

6.2 返回值

在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

6.3 语法

str.padStart(targetLength);
str.padStart(targetLength, padString);

targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString（可选）：填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "。

6.4 例子

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

七、`String.prototype.padEnd()`

7.1 定义

padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充）。

7.2 返回值

返回在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。

7.3 语法

1. str.padEnd(targetLength)
2. str.padEnd(targetLength, padString)

targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString（可选）：填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "。

7.4 例子

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

ES9

ES2018（ES9）新增了如下特性👇

Async iterators 异步迭代器
Object rest properties 剩余属性
Object spread properties 扩展属性
Promise.prototype.finally

一、`Async iterators` 异步迭代器

1.1 返回值

Async iterator 对象的 next() 方法返回一个 Promise，这个 Promise 的返回值可以被解析成 {value, done} 的格式，

1.2 语法

iterator.next().then(({value, done}) => {});

1.3 举例

const asyncIterator = () => {
  const array = [1, 2];
  return {
    next: function() {
      if(array.length) {
        return Promise.resolve({
          value: array.shift(),
          done: false
        });
      }
      return Promise.resolve({
        done: true
      });
    }
  }
}
let iterator = asyncIterator();
const test = async() => {
  await iterator.next().then(console.log);  // {value: 1, done: false}
  await iterator.next().then(console.log);  // {value: 2, done: false}
  await iterator.next().then(console.log);  // {done: true}
}
test();

1.4 可以使用 `for-await-of` 在循环中异步调用函数

const promises = [
  new Promise((resolve) => resolve(1)),
  new Promise((resolve) => resolve(2)),
  new Promise((resolve) => resolve(3)),
];
const test = async() => {
  for await (const p of promises) {
    console.log('p', p);
  }
};
test();

二、`Object rest properties`

2.1 举例

let test = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
let {a, b, ...rest} = test;
console.log(a);               // 1
console.log(b);               // 2
console.log(rest);            // {c: 3, d: 4}

2.2 注意

null 不能使用扩展运算符

let {a, b, ...rest} = null;    // ❌

三、`Object spread properties`

3.1 举例

let test = {
  a: 1,
  b: 2
}
let result = {c: 3, ...test};
console.log(result);             // {c: 3, a: 1, b: 2}

let test = null;
let result = {c: 3, ...test};    // {c: 3}

四、`Promise.prototype.finally`

4.1 定义

在Promise结束的时候，不管是结果是resolved还是rejected，都会调用finally中的方法

finally中的回调函数不接受任何参数

4.2 返回值

一个Promise

4.3 语法

const promise = new Promise((resolve, reject) => {
  resolve('resolved');
  reject('rejectd');
})
promise.then((res) => {
  console.log(res);
}).finally(() => {
  console.log('finally')
});

4.4 举例

const promise = new Promise((resolve, reject) => {
  resolve(1);
  reject(2);
});
const test = () => {
  console.log(3);
  promise.then((res) => {
    console.log(4, res);
  }).catch(err => {
    console.log(5, err);
  }).finally(() => {
    console.log(6);
  });
};
test();  // 3 4 1 6

ES10

ES2019（ES10）新增了如下新特性👇：

Array.prototype.{flat, flatMap}扁平化嵌套数组
Object.fromEntries
String.prototype.{trimStart, trimEnd}
Symbol.prototype.description
Optional catch binding
Array.prototype.sort() is now required to be stable

一、`Array.prototype.{flat, flatMap}` 扁平化嵌套数组

1.1 Array.prototype.flat

1.1.1 定义

flat()方法会按照一个可指定的深度遍历递归数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

1.1.2 语法

arr.flat([depth]);

depth 是数组遍历的深度，默认是1。

1.1.3 返回值

一个新数组，不会改变旧数组。

1.1.4 举例

const arr = [1, 2, [[[[3, 4]]]]];
arr.flat();          // [1, 2, [[[3, 4]]]]
arr.flat(3);         // [1, 2, [3, 4]]
arr.flat(-1);        // [1, 2, [[[[3, 4]]]]]
arr.flat(Infinity);  // [1, 2, 3, 4]

1.1.5 注意

flat()会移除数组中的空项

let arr = [1, 2, , , 3];
arr.flat();           // [1, 2, 3]

1.1.6 替换

reduce与contact

let arr = [1, 2, [3, 4]];
arr.reduce((arr, val) => arr.concat(val), []);

... 扩展运算符与contact

let arr = [1, 2, [3, 4]];
[].contact(...arr);

更多替换方式请查看MDN

ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性？（二）：https://developer.aliyun.com/article/1415028

ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性？（一）

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

ES7

一、Array.prototype.includes

1.1 定义

1.2 语法

二、Exponentiation Operator幂运算

ES8

一、Async functions

1.1 定义

1.2 语法

1.3 返回值

1.4 例子

二、Object.entries

2.1 返回值

2.2 语法

2.3 例子

三、Object.values

3.1 返回值

3.2 语法

3.3 例子

四、Object.getOwnPropertyDescriptors

4.1 返回值

4.2 语法

4.3 例子

五、Trailing commas 尾后逗号

5.1 定义

5.2 注意

5.3 举例

六、String.prototype.padStart()

6.1 定义

6.2 返回值

6.3 语法

6.4 例子

七、String.prototype.padEnd()

7.1 定义

7.2 返回值

7.3 语法

7.4 例子

ES9

一、Async iterators 异步迭代器

1.1 返回值

1.2 语法

1.3 举例

1.4 可以使用 for-await-of 在循环中异步调用函数

二、Object rest properties

2.1 举例

2.2 注意

三、Object spread properties

3.1 举例

四、Promise.prototype.finally

4.1 定义

4.2 返回值

4.3 语法

4.4 举例

ES10

一、Array.prototype.{flat, flatMap} 扁平化嵌套数组

1.1 Array.prototype.flat

热门文章

最新文章

相关电子书

大厂面试题分享面试题库

前后端面试题库（面试必备）推荐：★★★★★

一、`Array.prototype.includes`

二、`Exponentiation Operator`幂运算

一、`Async functions`

二、`Object.entries`

三、`Object.values`

四、`Object.getOwnPropertyDescriptors`

五、`Trailing commas` 尾后逗号

六、`String.prototype.padStart()`

七、`String.prototype.padEnd()`

一、`Async iterators` 异步迭代器

1.4 可以使用 `for-await-of` 在循环中异步调用函数

二、`Object rest properties`

三、`Object spread properties`

四、`Promise.prototype.finally`

一、`Array.prototype.{flat, flatMap}` 扁平化嵌套数组