简单举例总结ES6语法新特性

仅供学习，错误可以在评论区指出~

ES6介绍

首先大致介绍一下ES6，ES是ECMAScript 的简称，ECMAScript是由 TC39 委员会负责制定和维护的 JavaScript 标准。ES6 标志着 ECMAScript 标准发展历程中的一次飞跃，它在 JavaScript 的基础上引入了许多全新的语法、内建对象和 API，不仅提升了代码的可读性和可维护性，也为开发大型应用提供了更强大的工具和更简洁的编程方式。

ES6新特性

1. 箭头函数

箭头函数提供了一种更简洁的函数表达方式，并且不会绑定自己的 this。

// 普通函数写法：
function add(a, b) {
  return a + b;
}

// 箭头函数写法：
const addArrow = (a, b) => a + b;

console.log(addArrow(2, 3)); // 输出 5

2. 解构赋值

解构赋值可以快速地将对象或数组中的值提取到变量中

// 对象解构
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name, age); // 输出 "Alice 30"

// 数组解构
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 输出 "1 2"

3. 模板字符串

模板字符串使用反引号 (`) 包裹，可以在其中嵌入变量和表达式，书写多行字符串更方便。

const nameStr = 'Bob';
const ageNum = 25;
const greeting = `Hello, my name is ${nameStr} and I am ${ageNum} years old.`;
console.log(greeting);
// 输出 "Hello, my name is Bob and I am 25 years old."

4. Promise

Promise 是异步操作的一种解决方案，用于处理异步事件和回调地狱问题。

const promiseExample = new Promise((resolve, reject) => {
  // 模拟异步操作，例如 1 秒后返回成功
  setTimeout(() => {
    resolve('Operation successful!');
  }, 1000);
});

promiseExample.then(result => {
  console.log(result); // 1秒后输出 "Operation successful!"
}).catch(error => {
  console.error(error);
});

5. Symbol

Symbol 是 ES6 新增的一种基本数据类型，用于生成独一无二的标识符，常用于对象属性的独占键。

const sym1 = Symbol('unique');
const sym2 = Symbol('unique');

console.log(sym1 === sym2); // 输出 false，两个 Symbol 永远不相等

// 用作对象属性
const obj = {
  [sym1]: 'value1'
};
console.log(obj[sym1]); // 输出 "value1"

6. 新的变量声明方式：let 和 const

let 和 const 替代传统的 var，具有块级作用域，其中 const 声明的是常量，不可重新赋值。

// let 声明变量，有块级作用域
let count = 1;
count = 2; 
console.log(count); // 输出 2

// const 声明常量，一经赋值不可更改
const PI = 3.14159;
console.log(PI); // 输出 3.14159

7. 模块化

ES6 模块化支持通过 export 将模块内容导出，通过 import 导入使用。
（注意：实际使用时需要在支持 ES6 模块的环境中执行，比如现代浏览器或 Node.js）

// module.js 模块文件
export const sayHello = (name) => `Hello, ${name}!`;
// 也可以使用默认导出
export default function greet(name) {
  return `Greetings, ${name}!`;
}

// main.js 文件中导入模块内容
import greet, { sayHello } from './module.js';

console.log(sayHello('World')); // 输出 "Hello, World!"
console.log(greet('Alice'));      // 输出 "Greetings, Alice!"

8. for…of 循环

for…of 循环用于遍历可迭代对象（如数组、Map、Set、字符串等）运行代码，遍历的是元素值。

const numbers = [10, 20, 30];

for (const num of numbers) {
  console.log(num);
}
// 依次输出 10, 20, 30

9. 扩展运算符（Spread Operator）

扩展运算符 ... 可以将数组或对象拆解为单个元素或属性，常用于合并数组或传递函数参数。

// 数组展开：将数组元素展开成独立参数
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

10. 展开运算符（用于对象）

在 ES2018 中，对象也可以使用展开运算符，将对象属性展开到另一个对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }

11. Map 和 Set

ES6 新增了两种数据结构：

• Map： 一种键值对集合，键可以是任意类型。

• Set： 一种值的集合，所有值都是唯一的。

// Map 示例
const map = new Map();
map.set('name', 'Charlie');
map.set('age', 28);
console.log(map.get('name')); // 输出 "Charlie"

// Set 示例
const set = new Set();
set.add(1);
set.add(2);
set.add(1);  // 重复的元素不会被添加
console.log(set); // 输出 Set { 1, 2 }

12. Proxy

Proxy 允许你对基本操作（如属性访问、赋值、函数调用等）进行拦截(get关键字拦截)和自定义处理。

// 使用 const 声明变量（const 是关键字，用于声明常量）
const target = { 
  message: 'Hello' // 定义目标对象，包含一个属性 message
};

// 定义 handler 对象，其中包含用于拦截操作的 trap 方法
const handler = {
  // 这里的 "get" 必须为固定名称（get 是固定的 trap 方法名称，不可更改），用于拦截属性读取操作
  get: function(target, prop, receiver) {  // function 是关键字，target、prop、receiver 为形参
    // 判断被访问的属性名（prop）是否存在于目标对象（target）中
    if (prop in target) { // if 和 in 均为关键字，in 检查 target 对象中是否存在属性 prop
      // 如果存在，返回目标对象中该属性的值
      return target[prop];
    } else {
      // 如果不存在，返回一个自定义的提示信息
      // 模板字符串（template literal）使用反引号（`）和 ${} 内嵌表达式
      return `Property "${prop}" does not exist`;
    }
  }
};

// 创建一个 Proxy 实例，第一个参数为目标对象，第二个参数为 handler 对象
// Proxy 是全局构造函数，也是 ES6 中新增的对象（Proxy 是保留字，必须这样写）
const proxy = new Proxy(target, handler);

// 使用 console.log 来输出结果，console 是全局对象，这里的 log 是其方法
console.log(proxy.message);      // 输出 "Hello"，因为 target 对象中存在 message 属性
console.log(proxy.nonExistent);  // 输出 "Property "nonExistent" does not exist"
// 当访问 proxy.nonExistent 时，get trap 被触发，由于 nonExistent 不在 target 中，因此返回自定义字符串

13. 类（Class）

ES6 引入了 class 关键字，使得定义构造函数和原型方法的方式更接近传统面向对象编程语言的写法。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hi, I am ${this.name} and I am ${this.age} years old.`;
  }
}

const personObj = new Person('Dave', 32);
console.log(personObj.greet());  // 输出 "Hi, I am Dave and I am 32 years old."

14. 默认参数（Default Parameters）

在定义函数时，可以为参数设置默认值，简化代码逻辑。

function multiply(a, b = 2) {
  return a * b;
}

console.log(multiply(5));    // 只传一个参数，输出 10（5*2）
console.log(multiply(5, 3)); // 输出 15（5*3）