ES6(ECMAScript 6)中常用的知识点总结（包含示例代码）

ES6(ECMAScript 6)是JavaScript语言的最新版本,它在ES5的基础上做了很多增强和扩展，使JavaScript的编程模式更加现代化和优雅,不仅拓展了语言表达能力,也为编程带来了全新的编程范式和思维方式。在项目中使用ES6,让代码更加简洁、方便模块化和面向对象实现等，进而提高开发效率、减少代码量。

ES6 常用新特性如下：

• let/const
• 箭头函数
• 模板字符串
• 解构赋值
• 模块化
• 类和继承
• 默认参数
• rest参数
• 扩展运算符
• Promise
• 迭代器等
• Symbol
• Iterator
• Generator
• Proxy

以下是一些ES6常见的知识点和示例代码：

1. let和const
   • let用于声明块级作用域变量
   • const用于声明常量,常量必须初始化

let x = 1;
if (x === 1) {
  let x = 2; // 这个x只在If语句块内有效
  console.log(x); // 输出2
}
console.log(x); // 输出1

const PI = 3.14159;
PI = 1; // 错误,PI是常量

2. 箭头函数
   • 更简洁的函数书写方式
   • 继承当前上下文的this关键字

const add = (a, b) => a + b;

const obj = {
  value: 1,
  getPlusValue: function(b) {
    return this.value + b; // this绑定到obj
  },
  getPlusValueES6: (b) => {
    return this.value + b; // this继承外层上下文
  }
}

3. 模板字符串
   • 用反引号 `` 标识
   • 可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量/表达式

let name = "Bruce";
console.log(`Hello ${name}`); // Hello Bruce

let str = `This 
is 
a 
multi-line
string`; // 多行字符串

4. 解构赋值
   • 可以从数组或对象中提取值,对变量进行赋值

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

let obj = {name: "Bruce", age: 30};
let {name, age} = obj;
console.log(name, age); // Bruce 30

5. 模块导入导出
   • 使用 export 导出模块中的变量、函数或类
   • 使用 import 导入其他模块中的部分或全部

// module.js
export const name = "Bruce";
export function sayHi() {
  console.log("Hi");
}

// app.js 
import { name, sayHi } from "./module.js";
console.log(name); // Bruce
sayHi(); // Hi

6. 类和继承
   • 使用 class 关键字定义类
   • 使用 extends 关键字实现继承
   • 支持静态方法和构造器

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类构造函数
  }
  bark() {
    console.log("Woof Woof!");
  }
}

let dog = new Dog("Buddy");
dog.sayName(); // My name is Buddy
dog.bark(); // Woof Woof!

7. 默认参数值
   • 在定义函数时可以为参数设置默认值

function say(message="Hi") {
  console.log(message);
}

say(); // Hi
say("Hello"); // Hello

8. rest参数
   • 用于获取函数的实参,存入数组中

function add(...nums) {
  let sum = 0;
  for(let n of nums) {
    sum += n;
  }
  return sum;
}

console.log(add(1,2,3)); // 6
console.log(add(4,5,6,7,8,9)); // 39

9. spread操作符
   • 可以在函数调用/数组构造时将数组表达式展开

let params = [3,5,1];
console.log(Math.max(...params)); // 5 
console.log([...'hello']); // ['h','e','l','l','o']

10. 对象字面量扩展
    • 可以直接在对象中添加函数
    • 属性名可以是变量/表达式
    • 可通过扩展运算符复制对象的可枚举属性

let obj = {
  name: "Bruce",
  sayName() {
    console.log(this.name);
  },
  [Symbol.iterator]: function() {
    // ...
  }
}

let obj2 = { ...obj, age: 30 }; // 复制obj所有可枚举属性到obj2

11. Promise
    • 异步编程的一种解决方案
    • 代表一个异步操作的最终结果

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("Hello World");
  }, 2000);
});

promise.then(function(value) {
  console.log(value); // Hello World
});

12. for…of循环
    • 可以遍历各种可迭代对象(Array、Map、Set等)

let arr = ['a', 'b', 'c'];
for(let x of arr) {
  console.log(x); // 依次输出a, b, c
}

13. Map和Set
    • Map是存储key-value对的有序集合
    • Set是不重复值的有序集合

let map = new Map();
map.set('name', 'Bruce');
map.set('age', 30);
console.log(map.get('name')); // Bruce

let set = new Set();
set.add(1);
set.add(5);
set.add(5); // 重复的5会被忽略
console.log(set.size); // 2

14. Symbol
    • 一种新的原始数据类型,可作为对象属性的标识符
    • 每个Symbol值都是不相等的

let symbol1 = Symbol("id");
let symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // false

let obj = {};
obj[symbol1] = "Hello";
console.log(obj[symbol1]); // Hello

15. 迭代器Iterator
    • 为各种数据结构提供统一的访问接口
    • 支持对象实现Iterator接口,从而可以用for…of遍历

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }
console.log(iter.next()); // { value: undefined, done: true }

16. 生成器Generator
    • 可以暂停执行的函数
    • 通过yield关键字交还控制权
    • 配合Iterator可实现惰性运算

function* idGen() {
  let id = 0;
  while(true) {
    yield id++;
  }
}

let gen = idGen();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

17. 代理Proxy
    • 用于修改某些操作的默认行为
    • 等同于在语言层面做出修改,可以对编程语言进行拓展

let obj = { name: "Bruce" };
let proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`Reading ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
  }
});

proxy.name; // Reading name, Bruce
proxy.name = "Clark"; // Setting name to Clark

18. 反射Reflection
    • 将对象内部特征反射于外部可操作,与Proxy形成映射
    • ES6新增Reflect对象与Proxy相呼应

Reflect.getPrototypeOf({}) === Object.getPrototypeOf({});
Reflect.get(obj, 'name') === obj.name;