从 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 是一种异步编程的解决方案，可以避免回调地狱的问题。
示例代码：
// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
});
promise.then((value) => {
console.log(value);
});二、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 是一种异步编程的解决方案，可以让异步代码的写法更加简洁明了。
示例代码：
// www.javascriptcn.com code example
async function getData() {
const result = await fetch('https://api.example.com/data');
const data = await result.json();
return data;
}
getData().then((data) => {
console.log(data);
});- 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 执行完成后执行某个操作。
示例代码：
// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
});
promise.finally(() => {
console.log('finally');
});五、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