JavaScript 是一门动态、弱类型的编程语言，广泛用于 Web 开发中。随着 JavaScript 的不断发展，ES6、ES7、ES8、ES9 和 ES10 等版本相继推出了许多新特性，本文将对这些新特性进行总结和介绍。
ES6 新特性
let 和 const 声明
ES6 引入了两个新的声明变量的关键字：let 和 const。let 声明的变量作用域为块级作用域，而 const 声明的变量是一个只读的常量。
let a = 1; const b = 2; a = 3; b = 4; // TypeError: Assignment to constant variable.
模板字符串
ES6 引入了模板字符串，可以用来更方便地拼接字符串。
const name = 'John';
const age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);箭头函数
ES6 引入了箭头函数，可以用来更简洁地定义函数。
const add = (a, b) => a + b; console.log(add(1, 2)); // 3
默认参数
ES6 允许在函数定义时设置默认参数值。
const multiply = (a, b = 1) => a * b; console.log(multiply(2)); // 2
解构赋值
ES6 引入了解构赋值，可以用来更方便地获取对象或数组中的值。
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- -- ----- - ----- --- - - ------- ----------------- ----- -- ---- -- ----- ------- - --- -- --- ----- --- -- -- - -------- -------------- -- --- -- - - -
扩展运算符
ES6 引入了扩展运算符，可以用来更方便地展开数组或对象。
-- -------------------- ---- ------- ----- -------- - --- -- --- ----- -------- - --- -- --- ----- -------- - ------------- ------------- ---------------------- -- --- -- -- -- -- -- ----- ------- - - ----- ------- ---- -- -- ----- ------- - - ----------- -------- ---- ---- --- -- --------------------- -- - ----- ------- ---- --- -------- ---- ---- --- -
类
ES6 引入了类，可以用来更方便地定义对象的行为。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
-
----- ------ - --- -------------- ----
------------------ -- ------ -- ---- -- ---- --- - -- -- ----- ----Promise
ES6 引入了 Promise，可以用来更方便地处理异步操作。
-- -------------------- ---- -------
----- --------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
------------- ------- ----------------
-- ------
---
--
--------------------- -- ------------------- -- ---- ------- -------------ES7 新特性
Array.prototype.includes()
ES7 引入了 Array.prototype.includes() 方法，可以用来更方便地判断数组中是否包含某个元素。
const numbers = [1, 2, 3]; console.log(numbers.includes(2)); // true console.log(numbers.includes(4)); // false
指数运算符
ES7 引入了指数运算符 **，可以用来更方便地计算幂运算。
console.log(2 ** 3); // 8
ES8 新特性
异步函数
ES8 引入了异步函数，可以用来更方便地处理异步操作。
const fetchData = async () => {
const data = await fetch('https://api.example.com/data');
return data.json();
};
fetchData().then(data => console.log(data));Object.entries() 和 Object.values()
ES8 引入了 Object.entries() 和 Object.values() 方法，可以用来更方便地获取对象的属性和值。
const person = {
name: 'John',
age: 30
};
console.log(Object.entries(person)); // [['name', 'John'], ['age', 30]]
console.log(Object.values(person)); // ['John', 30]字符串填充
ES8 引入了字符串填充方法 padStart() 和 padEnd()，可以用来更方便地填充字符串。
const str = 'Hello'; console.log(str.padStart(10, '-')); // ----Hello console.log(str.padEnd(10, '-')); // Hello----
ES9 新特性
异步迭代器
ES9 引入了异步迭代器，可以用来更方便地处理异步操作。
-- -------------------- ---- -------
----- --------- - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ------ - --------------------------
----- ------ -
----- - ----- ----- - - ----- --------------
-- ------ -
------
-
-------------------
-
--
------------Promise.prototype.finally()
ES9 引入了 Promise.prototype.finally() 方法，可以用来更方便地处理 Promise 的状态。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('Done!'));ES10 新特性
Array.prototype.flat()
ES10 引入了 Array.prototype.flat() 方法，可以用来更方便地将嵌套数组展开。
const numbers = [1, [2, [3, [4]]]]; console.log(numbers.flat()); // [1, 2, [3, [4]]] console.log(numbers.flat(2)); // [1, 2, 3, [4]]
Array.prototype.flatMap()
ES10 引入了 Array.prototype.flatMap() 方法，可以用来更方便地对数组进行映射和展开。
const numbers = [1, 2, 3]; console.log(numbers.flatMap(x => [x * 2])); // [2, 4, 6]
String.prototype.trimStart() 和 String.prototype.trimEnd()
ES10 引入了 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法，可以用来更方便地去掉字符串开头和结尾的空格。
const str = ' Hello '; console.log(str.trimStart()); // 'Hello ' console.log(str.trimEnd()); // ' Hello'
Object.fromEntries()
ES10 引入了 Object.fromEntries() 方法，可以用来更方便地将键值对数组转换为对象。
const entries = [['name', 'John'], ['age', 30]];
console.log(Object.fromEntries(entries)); // { name: 'John', age: 30 }总结
本文介绍了 JavaScript ES6、ES7、ES8、ES9 和 ES10 的所有新特性，包括 let 和 const 声明、模板字符串、箭头函数、默认参数、解构赋值、扩展运算符、类、Promise、异步函数、Object.entries() 和 Object.values()、字符串填充、异步迭代器、Promise.prototype.finally()、Array.prototype.flat()、Array.prototype.flatMap()、String.prototype.trimStart() 和 String.prototype.trimEnd()、Object.fromEntries() 等。这些新特性的引入使得 JavaScript 更加强大和灵活，可以更方便地进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6552fba8d2f5e1655dcad66d