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); // 输出1const 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 Brucelet 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 3let 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')); // Brucelet set = new Set();
set.add(1);
set.add(5);
set.add(5); // 重复的5会被忽略
console.log(set.size); // 2

好的,我继续介绍一些ES6其他常见的知识点:

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

let symbol1 = Symbol("id");
let symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // falselet 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;