ES6-ES12所有特性详解
目录
1.Array.prototype.includes: 判断数组是否包含指定的元素。
1.Async/Await: 异步函数用于更简化和清晰地处理异步操作。
1.Array.prototype.flat 和 Array.prototype.flatMap: 用于扁平化数组和映射数组。
1.可选链操作符: 安全地访问对象属性,避免出现未定义或空值的异常。
1.Promise.any: 接受一个 Promise 数组,返回其中第一个成功的 Promise。
ES6 (ECMAScript 2015) 到 ES12 (ECMAScript 2021) 是一系列 JavaScript 的版本,每个版本都引入了许多新的语法和功能。下面是每个版本中的一些主要特性的实例和解析:
ES6 (ECMAScript 2015):
1. 块级作用域变量声明 (let 和 const):
let x = 10; // 块级作用域变量
const y = 20; // 块级作用域常量
块级作用域变量声明通过 "let" 和 "const" 关键字提供了更好的变量作用域控制,取代了之前常用的 "var" 关键字。
2. 箭头函数:
const sum = (a, b) => a + b;
箭头函数提供了更简洁的语法来定义函数,并且自动绑定上下文。
3. 解构赋值:
const [a, b] = [1, 2]; // 数组解构赋值
const { x, y } = { x: 10, y: 20 }; // 对象解构赋值
解构赋值允许从数组或对象中提取值并赋给变量,简化了变量的声明和赋值过程。
4. 参数默认值:
function greet(name = "World") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, World!
greet("John"); // Hello, John!
参数默认值允许在函数定义时为参数提供默认值,简化了函数调用时的操作。
5. 模板字符串:
const name = "John";
console.log(`Hello, ${name}!`); // Hello, John!
模板字符串提供了一个更方便的方式来拼接字符串,可以在字符串中使用变量,并支持多行字符串的定义。
6. 增强的对象字面量:
const x = 10, y = 20;
const obj = { x, y }; // 简化的属性定义
const method = {
greet() {
console.log("Hello!");
}
}; // 简化的方法定义
增强的对象字面量提供了更简洁的语法来定义对象属性和方法。
7. 类和模块:
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}!`);
}
}
export default Person;
类和模块引入了面向对象编程的概念,提供了更清晰和模块化的代码组织方式。
ES7 (ECMAScript 2016):
1.Array.prototype.includes: 判断数组是否包含指定的元素。
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
ES8 (ECMAScript 2017):
1.Async/Await: 异步函数用于更简化和清晰地处理异步操作。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();
ES9 (ECMAScript 2018):
1.Rest/Spread 属性: 用于展开数组和对象。
const arr = [1, 2, 3];
const newObj = { ...obj, x: 4 };
ES10 (ECMAScript 2019):
1.Array.prototype.flat 和 Array.prototype.flatMap: 用于扁平化数组和映射数组。
const arr = [1, [2, 3], [4, [5]]];
console.log(arr.flat()); // [1, 2, 3, 4, [5]]
ES11 (ECMAScript 2020):
1.可选链操作符: 安全地访问对象属性,避免出现未定义或空值的异常。
const person = {
name: "John",
age: 30,
address: {
city: "New York"
}
};
const city = person?.address?.city; // "New York"
空位合并运算符: 提供了一种简洁的方式来提供默认值,当属性值为 null 或 undefined 时使用。
const name = person?.name ?? "Anonymous"; // "John"
const nickname = person?.nickname ?? "No nickname"; // "No nickname"
ES12 (ES2021):
1.Promise.any: 接受一个 Promise 数组,返回其中第一个成功的 Promise。
const promises = [
Promise.reject("Error 1"),
Promise.reject("Error 2"),
Promise.resolve("Success"),
];
Promise.any(promises)
.then(value => console.log(value)) // "Success"
.catch(error => console.error(error));
数字分隔符: 可以使用下划线作为数字中的分隔符,提高数字的可读性。
const million = 1_000_000;
console.log(million); // 1000000