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 引入了解构赋值，可以用来更方便地获取对象或数组中的值。
// javascriptcn.com 代码示例
const person = {
name: 'John',
age: 30
};
const { name, age } = person;
console.log(name, age); // John 30
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3扩展运算符
ES6 引入了扩展运算符，可以用来更方便地展开数组或对象。
// javascriptcn.com 代码示例
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const numbers3 = [...numbers1, ...numbers2];
console.log(numbers3); // [1, 2, 3, 4, 5, 6]
const person1 = {
name: 'John',
age: 30
};
const person2 = {
...person1,
address: '123 Main St'
};
console.log(person2); // { name: 'John', age: 30, address: '123 Main St' }类
ES6 引入了类，可以用来更方便地定义对象的行为。
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person = new Person('John', 30);
person.sayHello(); // Hello, my name is John and I am 30 years old.Promise
ES6 引入了 Promise，可以用来更方便地处理异步操作。
// javascriptcn.com 代码示例
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched successfully!');
}, 2000);
});
};
fetchData().then(data => console.log(data)); // Data fetched successfully!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 引入了异步迭代器，可以用来更方便地处理异步操作。
// javascriptcn.com 代码示例
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
console.log(value);
}
};
fetchData();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