es

ES6

ECMAScript 6（也被称为 ES2015）引入了许多新的语言特性和改进，以增强 JavaScript 的功能和可读性。

let 和 const 关键字：

let 用于声明变量，具有块级作用域。
const 用于声明常量，也具有块级作用域，且其值在声明后不能被重新赋值。

let x = 5;
const PI = 3.14;

可能触发暂时性死区

箭头函数：

箭头函数提供了一种更简洁的函数定义语法，并且不会改变 this 的指向。

// 传统函数表达式
function add(x, y) {
  return x + y;
}

// 箭头函数
const add = (x, y) => x + y;

模板字符串：

模板字符串允许在字符串中插入变量和换行符，使用反引号 ` 包裹。

let name = "Alice";
let greeting = `Hello, ${name}!`;

解构赋值：

解构赋值允许通过模式匹配的方式从数组或对象中提取值，并赋给变量。

// 数组解构
let [x, y] = [1, 2];

// 对象解构
let {name, age} = {name: "Alice", age: 25};

默认参数值：

函数参数可以设置默认值。

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();      // "Hello, Guest!"
greet("Bob"); // "Hello, Bob!"

Rest 和 Spread 操作符：

... 用于收集函数的剩余参数（Rest 操作符）或将数组/对象展开为独立的元素（Spread 操作符）。

// Rest 操作符
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

// Spread 操作符
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

类和继承：

ES6 引入了类的概念，提供了更易于理解和使用的面向对象的语法。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Buddy");
dog.speak(); // "Buddy barks."

Promise：

Promise 是一种处理异步操作的对象，用于更清晰地表达和处理异步代码。

let fetchData = () => {
  return new Promise((resolve, reject) => {
    // 异步操作成功
    resolve("Data fetched successfully");
    // 或者异步操作失败
    // reject("Error fetching data");
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Map 和 Set：

Map 和 Set 是新的集合类型，提供更灵活的键值对存储和集合操作。

// Map
let myMap = new Map();
myMap.set("key", "value");
console.log(myMap.get("key")); // "value"

// Set
let mySet = new Set([1, 2, 3, 3, 4]);
console.log(mySet.size); // 4

Generator 函数：

Generator 函数允许在函数执行的过程中暂停，并在需要时恢复执行。它通过使用 yield 关键字实现。

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

let generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

Async/Await：

Async/Await 是一种更直观、更易读的异步编程模式，基于 Promise。

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

ES7

ES7（ECMAScript 2016）相对于 ES6（ECMAScript 2015）并没有太多新增的语言特性，主要是一些较小的语言改进和增强。

Array.prototype.includes()

Array.prototype.includes() 方法用于判断数组中是否包含某个指定的值，并返回一个布尔值。

const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // false

指数运算符 **

ES7 引入了指数运算符 **，用于计算一个数的幂。

console.log(2 ** 3); // 8
console.log(10 ** -2); // 0.01

Object.values() 和 Object.entries()

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组。
Object.- entries() 方法返回一个给定对象自身的所有可枚举属性的键值对数组。

const obj = { a: 1, b: 2, c: 3 };

console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

ES6​

ES7​

ES6

ES7