ES6-ES12所有特性详解

目录

ES6 (ECMAScript 2015):

1. 块级作用域变量声明 (let 和 const):

2. 箭头函数:

3. 解构赋值:

4. 参数默认值:

5. 模板字符串:

6. 增强的对象字面量:   

7. 类和模块:  

ES7 (ECMAScript 2016):

1.Array.prototype.includes: 判断数组是否包含指定的元素。

ES8 (ECMAScript 2017):

1.Async/Await: 异步函数用于更简化和清晰地处理异步操作。 

ES9 (ECMAScript 2018):

1.Rest/Spread 属性: 用于展开数组和对象。

ES10 (ECMAScript 2019):

1.Array.prototype.flat 和 Array.prototype.flatMap: 用于扁平化数组和映射数组。

ES11 (ECMAScript 2020):

1.可选链操作符: 安全地访问对象属性，避免出现未定义或空值的异常。

ES12 (ES2021):

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