简单总结一些常用的ES6新特性，如有错误的地方欢迎指正！
ES6（ECMAScript 2015）的出现大幅提升了代码的简洁性、可读性和可维护性。下面我将会从核心作用和具体用法两个方面简单总结一下。

---

一、变量声明优化：块级作用域

1. let与 const

   • 作用：解决 var的函数作用域和变量提升问题，引入块级作用域（{}内有效），避免变量污染。

   • 用法：

     // let 允许重新赋值
     let count = 0;
     if (true) {
       let count = 1; // 块内独立作用域
     }
     console.log(count); // 0 
     
     // const 声明常量（不可重新赋值，但对象属性可修改）
     const PI = 3.14;
     const user = { name: "Alice" };
     user.name = "Bob"; // 合法（修改属性）
     

---

二、函数增强

1. 箭头函数（Arrow Functions）

   • 作用：简化回调函数写法，自动绑定外层 this，避免传统函数的 this指向问题。

   • 用法：

     // 简写形式
     const add = (a, b) => a + b; // 隐式返回结果
     
     // this 绑定示例
     const obj = {
       name: "Alice",
       greet: function() {
         setTimeout(() => {
           console.log(`Hello, ${this.name}`); // this 指向 obj
         }, 100);
       }
     };
     

2. 默认参数（Default Parameters）

   • 作用：简化参数未传递时的默认值处理。

   • 用法：

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

3. 剩余参数（Rest Parameters）

   • 作用：将不定数量的参数合并为数组，替代 arguments对象。

   • 用法：

     function sum(...numbers) {
       return numbers.reduce((acc, curr) => acc + curr, 0);
     }
     console.log(sum(1, 2, 3)); // 6
     

---

三、数据处理简化

1. 解构赋值（Destructuring）

   • 作用：从数组/对象中快速提取值，减少冗余代码。

   • 用法：

     // 数组解构
     const [x, y] = [1, 2]; // x=1, y=2
     
     // 对象解构（支持别名和默认值）
     const { name: userName, age = 18 } = { name: "Bob" }; 
     console.log(userName); // "Bob", age=18
     

2. 模板字符串（Template Literals）

   • 作用：支持多行字符串和变量插值，避免拼接符 +。

   • 用法：

     const name = "Alice";
     const message = `Hello, ${name}!
     This is a multiline string.`;
     

3. 扩展运算符（Spread Operator）

   • 作用：展开数组或对象，用于合并、浅拷贝和函数传参。

   • 用法：

     // 数组合并
     const arr1 = [1, 2];
     const arr2 = [...arr1, 3]; // [1, 2, 3]
     
     // 对象合并
     const obj1 = { a: 1 };
     const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
     

---

四、异步编程革新

1. Promise

   • 作用：解决回调地狱（Callback Hell），提供链式异步操作管理。

   • promise的状态只能从 未完成->完成, 未完成->失败 且状态不可逆转
     1、状态成功(resolve)，进入then()得到异步任务的正确结果
     2、状态失败(reject)，进入catch()获取异常信息

   • 用法：

     function fn(flag) {
       return new Promise(function (resolve, reject) {
         setTimeout(() => {
           if (flag === true) {
             resolve('promise状态为成功！')
           }
           if (flag === false) {
             reject('promise状态失败！')
           }
         }, 2000)
       })
     }
     
     fn(true)
       .then(res => {
         console.log(111111, res) // promise状态为成功！（2秒后执行）
       })
       .catch(err => {
         console.log(222222, err)
       })
     
     

2. async/await（ES2017）

   • 作用：以同步方式写异步代码，提升可读性。

   • 用法：

     async function loadData() {
       try {
         const data = await fetchData(); // 等待 Promise 完成
         console.log(data);
       } catch (err) {
         console.error(err);
       }
     }
     

---

五、面向对象与模块化

1. 类（Class）

   • 作用：语法糖，简化原型继承的写法，支持构造函数、继承和静态方法。

   • 用法：

     class Animal {
       constructor(name) {
         this.name = name;
       }
       speak() {
         console.log(`${this.name} makes a noise.`);
       }
     }
     class Dog extends Animal {
       speak() {
         super.speak(); // 调用父类方法
         console.log("Woof!");
       }
     }
     

2. 模块化（Modules）

   • 作用：原生支持代码拆分，避免全局污染。

   • 用法：

     // math.js
     export const PI = 3.14;
     export function add(a, b) { return a + b; }
     
     // app.js
     import { PI, add } from './math.js';
     

---

六、新增数据结构与方法

1. Set 与 Map

   • 作用：

     • Set：存储唯一值，用于去重。
     • Map：键值对集合，键可为任意类型（优于 Object）。

   • 用法：

     // Set 去重
     const nums = new Set([1, 1, 2]); // {1, 2}
     
     // Map 存储键值对
     const map = new Map();
     map.set("name", "Alice"); 
     console.log(map.get("name")); // "Alice"
     

2. 数组与对象扩展方法

   • 数组：

     • find()/ findIndex()：查找满足条件的元素/索引。
     • includes()：判断是否包含某值。

     [1, 2, 3].find(x => x > 1); // 2
     

   • 对象：

     • Object.keys()/ Object.values()：获取键/值数组。
     • Object.entries()：将对象转为键值对数组。

     Object.entries({ a: 1, b: 2 }); // [['a', 1], ['b', 2]]
     

---

七、可选链和空值合并

1. 可选链操作符（ ?.）

作用

安全访问嵌套对象属性或调用函数，避免因中间值为 null或 undefined导致的运行时错误。若链中任一环节为 null/undefined，则立即短路返回 undefined。

用法与示例

1. 访问嵌套属性

   const user = { profile: { name: "Alice" } };
   // 安全访问可能不存在的属性
   const city = user?.profile?.address?.city; // 若 address 不存在 → 返回 undefined
   

2. 调用可能不存在的函数

   const obj = { log: () => console.log("Hello") };
   obj.log?.(); // 输出 "Hello"
   obj.print?.(); // print 不存在 → 静默失败，不报错
   

3. 访问数组元素或动态属性

   const arr = [ { id: 1 } ];
   const firstItem = arr?.[0]?.id; // 1
   const prop = "name";
   const value = user?.[prop]; // 动态属性名
   

使用场景

• 处理 API 返回的不确定数据结构（如后端字段可能缺失）。

• 安全访问 DOM 元素属性：

  const text = document.querySelector(".title")?.innerText; // 元素不存在时返回 undefined
  

• 替代冗长的 &&链式检查（如 obj && obj.a && obj.a.b）。

---

2. 空值合并操作符（ ??）

作用

为变量提供默认值，仅当左侧值为 null或 undefined时，才返回右侧默认值。与 ||不同，它不会因左侧为 0、""、false等 falsy 值触发默认值。

用法与示例

const input = { value: 0, text: "" };

// 空值合并：仅处理 null/undefined
const val1 = input.value ?? 10; // 0（因为 0 不是 null/undefined）
const val2 = input.text ?? "Default"; // ""（空字符串不是 null/undefined）

// 对比 || 运算符（处理所有 falsy 值）
const val3 = input.value || 10; // 10（0 是 falsy）
const val4 = input.text || "Default"; // "Default"（"" 是 falsy）

使用场景

• 保留有意义的值（如 0、false、空字符串），避免被默认值覆盖。

• 配置项默认值初始化：

  const timeout = config.timeout ?? 3000; // 若未配置 timeout，默认为 3000ms
  

---

结合使用 ?.和 ??

两者常配合使用：先安全访问属性，再提供精准默认值。

// 若 user.contact 或 .phone 不存在，返回 "N/A"
const phone = user?.contact?.phone ?? "N/A";

1. 避免访问深层属性时因 null/undefined报错（?.的作用）。
2. 仅在属性确实为 null/undefined时提供默认值，保留其他有效值如 0或 false（??的作用）。

---

注意事项

1. 不可用于赋值

   let obj = {};
   obj?.property = 1; // 语法错误！
   

2. 变量需先声明

   未声明的变量直接使用 ?.会触发 ReferenceError：

   undeclaredVar?.prop; // 报错：undeclaredVar is not defined
   

3. 兼容性

   ?.和 ??属于 ES2020 标准，需确保运行环境支持（如 Node.js 14+、现代浏览器）。旧环境可通过 Babel 转译。