从 ES6 到 ES10，JavaScript 的新特性一次搞定！
JavaScript 作为一门广泛应用于前端开发的语言，其不断更新的版本也让我们开发者能够更加便捷地开发出更加高效、美观的网站。本文将介绍从 ES6 到 ES10 的 JavaScript 新特性，让你一次性了解各个版本的更新内容。
一、ES6
- 箭头函数
ES6 引入了箭头函数，使得函数的语法更加简洁，同时也可以避免 this 指针指向的问题。
示例代码：
// 传统函数写法 function sum(a, b) { return a + b; } // 箭头函数写法 const sum = (a, b) => a + b;
- 解构赋值
解构赋值可以将数组或对象的值赋给变量，使得代码更加简洁。
示例代码：
// 数组解构赋值 const [a, b, c] = [1, 2, 3]; // 对象解构赋值 const { name, age } = { name: 'Tom', age: 18 };
- 模板字符串
模板字符串可以在字符串中插入变量，使得字符串的拼接更加方便。
示例代码：
const name = 'Tom'; const str = `My name is ${name}.`;
- let 和 const
let 和 const 用于声明变量，let 声明的变量可以被重新赋值，而 const 声明的变量不可被重新赋值。
示例代码：
let a = 1; a = 2; const b = 1; b = 2; // 报错
- Promise
Promise 是一种异步编程的解决方案，可以避免回调地狱的问题。
示例代码：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ------------------- -- ------ --- -------------------- -- - ------------------- ---展开代码
二、ES7
- 指数运算符
ES7 引入了指数运算符，可以简化指数运算的写法。
示例代码：
const a = 2 ** 3; // 等同于 2 * 2 * 2
- Array.prototype.includes()
Array.prototype.includes() 用于判断数组中是否包含某个元素。
示例代码：
const arr = [1, 2, 3]; const result = arr.includes(2); // true
三、ES8
- async/await
async/await 是一种异步编程的解决方案，可以让异步代码的写法更加简洁明了。
示例代码：
-- -------------------- ---- ------- ----- -------- --------- - ----- ------ - ----- -------------------------------------- ----- ---- - ----- -------------- ------ ----- - --------------------- -- - ------------------ ---展开代码
- Object.entries()
Object.entries() 用于将对象转换为数组。
示例代码：
const obj = { name: 'Tom', age: 18 }; const arr = Object.entries(obj); // [['name', 'Tom'], ['age', 18]]
四、ES9
- Rest/Spread 属性
Rest/Spread 属性可以将数组或对象的属性展开，使得代码更加简洁。
示例代码：
// Rest 属性 const arr = [1, 2, 3, 4]; const [a, b, ...rest] = arr; // a = 1, b = 2, rest = [3, 4] // Spread 属性 const obj1 = { name: 'Tom' }; const obj2 = { age: 18 }; const obj = { ...obj1, ...obj2 }; // { name: 'Tom', age: 18 }
- Promise.prototype.finally()
Promise.prototype.finally() 用于在 Promise 执行完成后执行某个操作。
示例代码：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ------------------- -- ------ --- ------------------ -- - ----------------------- ---展开代码
五、ES10
- Array.prototype.flat()
Array.prototype.flat() 用于将多维数组转换为一维数组。
示例代码：
const arr = [1, [2, [3]]]; const result = arr.flat(); // [1, 2, [3]]
- String.prototype.trimStart() 和 String.prototype.trimEnd()
String.prototype.trimStart() 和 String.prototype.trimEnd() 用于去除字符串的头尾空格。
示例代码：
const str = ' hello world '; console.log(str.trimStart()); // 'hello world ' console.log(str.trimEnd()); // ' hello world'
以上就是从 ES6 到 ES10 的 JavaScript 新特性，希望能够帮助到你更好地了解 JavaScript 语言的进化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d59d47a941bf7134ab1c83
