AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-01-10 131
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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

文章标签：
前端开发
数据格式
JSON
索引
网络架构
前端技术栈
目录
相关文章
那维莱特
|
7月前
|
JavaScript
es5和es6的区别
es5和es6的区别
那维莱特
64 0
雷霆半月斩掉你的板砖
|
7月前
|
存储 JavaScript 前端开发
ES5和ES6的区别是什么？
ES5和ES6的区别是什么？
雷霆半月斩掉你的板砖
266 0
进军全栈攻城狮
|
前端开发
ES6、ES7、ES8、ES9、ES10、ES11新特性2
ES6、ES7、ES8、ES9、ES10、ES11新特性
进军全栈攻城狮
91 0
进军全栈攻城狮
|
JSON 前端开发 JavaScript
ES6、ES7、ES8、ES9、ES10、ES11新特性3
ES6、ES7、ES8、ES9、ES10、ES11新特性
进军全栈攻城狮
108 0
CodeQi技术小栈
|
4月前
|
JavaScript 前端开发 Java
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性？
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性？
CodeQi技术小栈
100 3
进军全栈攻城狮
|
前端开发 JavaScript Java
ES6、ES7、ES8、ES9、ES10、ES11新特性1
ES6、ES7、ES8、ES9、ES10、ES11新特性
进军全栈攻城狮
119 0
泡芙-草莓
|
7月前
|
前端开发 JavaScript API
ES6和ES5的区别
ES6和ES5的区别
泡芙-草莓
54 0
她说她一如既往的爱我
|
7月前
|
JavaScript
es5和es6 的区别？
es5和es6 的区别？
她说她一如既往的爱我
57 0
前端技术栈
|
7月前
|
前端开发 JavaScript Java
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性？（二）
ES7、ES8、ES9、ES10、ES11、ES12都增加了那些新特性？（二）
前端技术栈
108 0
前端技术栈
|
7月前
|
JavaScript
ES6 新特性 ES6使用 超实用
ES6 新特性 ES6使用 超实用
前端技术栈
54 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    40
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    103
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    30
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    36
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    39
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    27
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    104
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    255
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    151
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    34

    • 相关电子书

    更多
  • ES6 必知必会
  • Accelerating Spark-ML with Redis modules
  • 低代码开发师（初级）实战教程
    • 下一篇
    DataWorks