ES6新特性

ES6

1. 箭头函数

更简洁的语法：箭头函数可以减少冗余的代码，使函数表达式更加简洁。
没有自己的 this 值：箭头函数没有自己的 this 值，它会继承外层函数的 this 值。这在处理嵌套函数时特别有用，避免了传统函数中 this 上下文丢失的问题。
不能用作构造函数：箭头函数不能使用 new 关键字创建对象实例，因为它们没有自己的 this。
没有 arguments 对象：箭头函数也没有自己的 arguments 对象，但可以使用剩余参数 …args 来代替。
```
// 箭头函数
const f = v => v;
// 等同于
const f = function (v) {
    return v;
};
```

2. 模板字符串

    // 模板字符串
    const foo = `hello
    world`;
    // 等同于
    const foo = "hello\nworld";
    // 字符串中可以包含反引号

    const bar = `hello
    \`world`;
    // 等同于           
    const bar = "hello\n`world";

    // 模板字符串中嵌入变量
    const name = "runoob";
    const foo = `hello, ${name}`;
    // 等同于
    const foo = "hello, " + name;

    // 模板字符串中可以调用函数
    const foo = `hello ${functionBar()}`;
    // 模板字符串中可以调用对象的方法
    const foo = `hello ${objectBar.methodBar()}`;

3. 解构赋值

    // 数组解构 
    const [a, b, c] = [1, 2, 3];

    // 剩余元素
    const numbers = [1, 2, 3, 4, 5];
    const [first, second, ...rest] = numbers;
    console.log(first); // 输出: 1
    console.log(second); // 输出: 2
    console.log(rest);   // 输出: [3, 4, 5]

    // 对象解构
    const { foo, bar } = { foo: "aaa", bar: "bbb" };

    // 重命名变量
    const person = {
        firstName: 'Alice',
        lastName: 'Johnson',
        age: 30
    };

    const { firstName: fName, age: personAge } = person;
    console.log(fName);      // 输出: 'Alice'
    console.log(personAge);  // 输出: 30

    // 函数参数解构
    function add([x, y]) {
        return x + y;
    }
    // 函数返回值解构
    function example() {
        return {
            foo: "aaa",
            bar: "bbb"
        };
    }
    const { foo, bar } = example();

    // 嵌套解构
    const nestedObj = {
        outer: {
            inner: {
            value: 42
            }
        }
     };

    const { outer: { inner: { value } } } = nestedObj;
    console.log(value);

4. Promise

用于处理异步操作的一种方式，解决了回调地狱（Callback Hell）问题，使异步编程变得更加直观和易读。

Promise 是一种表示异步操作结果的对象，它可以有三种状态：

Pending（待定）：初始状态，表示异步操作正在进行中。
Fulfilled（已完成）：表示异步操作成功完成，并且返回了结果。
Rejected（已拒绝）：表示异步操作失败，通常会返回一个错误原因。

使用 Promise 可以更好地组织和控制异步代码流程，避免了回调地狱和层层嵌套的问题。

// 创建一个 Promise
const promise = new Promise((resolve, reject) => {
  // 异步操作，可以是网络请求、文件读取等
  setTimeout(() => {
    const success = true; // 假设操作成功
    if (success) {
      resolve("Operation successful");
    } else {
      reject("Operation failed");
    }
  }, 1000);
});

// 处理 Promise 结果
promise.then(result => {
  console.log(result); // 输出: "Operation successful"
}).catch(error => {
  console.error(error); // 输出: "Operation failed"
});

ES2017

1. async/await

async 函数是 Generator 函数的语法糖，它使得异步操作变得更加方便。

async function fetchData1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data 1 fetched");
    }, 1000);
  });
}

async function main() {
  try {
    console.log("Before fetchData1");
    const data1 = await fetchData1();
    console.log("After fetchData1");

    console.log(data1);
  } catch (error) {
    console.error(error);
  }
}

console.log("Before calling main");
main();
console.log("After calling main");

ES2020

1. 空值合并运算符 `??`

空值合并运算符 ?? 用于处理变量为 null 或 undefined 时的情况，它会返回第一个非空的操作数。这与逻辑或运算符 || 不同，?? 只在左操作数为 null 或 undefined 时才会返回右操作数。

示例：

const value1 = null;
const value2 = "Hello";

const result = value1 ?? value2;
console.log(result); // 输出: "Hello"

2. 可选链运算符 `?.`

可选链运算符 ?. 用于访问对象的属性或调用方法，但在访问的路径上遇到 null 或 undefined 时会立即返回 undefined，而不会抛出错误。这在访问可能不存在的属性或方法时非常有用。

示例：

const person = {
  name: "John",
  address: {
    city: "New York",
  },
};

const cityName = person?.address?.city;
console.log(cityName); // 输出: "New York"

const unknown = person?.unknownProperty?.nestedProperty;
console.log(unknown); // 输出: undefined

这里，person?.address?.city 在 person 对象上安全地访问了 address 和 city 属性，而 person?.unknownProperty?.nestedProperty 在路径中遇到未定义的属性时返回 undefined。