ES6 新特性

数组解构

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量

const arr = [1, 2, 3];
const [a, b, c] = arr; // a b c 分别为1，2，3

对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功则将对象属性的值赋值给变量

const person = { name: 'zhangsan', age: 30, sex: '男' };
const { name, age, sex } = person; // name = "zhangsan"

// name 用于和对象的 key 进行匹配，将匹配到的 value 赋值给变量 myName
const { name: myName } = person; // myName = "zhangsan"

扩展运算符

扩展运算符 (...) 可以将数组、 Set 、字符串、对象拆分成以逗号分隔的参数序列；可应用于对象的浅拷贝

const arr = [1, 2, 3];
...arr; // 1, 2, 3
console.log([...arr]); // [1, 2, 3]

// 用于数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // 方法1
arr1.push(...arr2); // 方法2 结果数组是 arr1

// 伪数组转真实数组：先用扩展运算符解开，再外面加中括号变成数组
[...arrayLike]  // 适用于可遍历的伪数组

// 对象浅拷贝
const obj1 = { name: "Kobe", address: {x: 100, y: 100}}
const obj2 = { ...obj1 }  // 相当于let obj2 = Object.assign({}, obj1)

const arr = [1, 2, 3, 4];
const [ , , ...rest] = arr;  // rest = [3, 4]

// 字符串转数组
const arr = [..."hello"];

// 使用字面量合并两个对象
const obj1 = { a: 1, b: 2 }
const obj2 = { a: 3, c: 4 }
const newObj = { ...obj1, ...obj2 }  // { a: 3, b: 2, c: 4}
// 上述操作会合并 obj1 和 obj2 中的属性，obj2 有的以 obj2 为主，obj2 没有的，以 obj1 为主

模板字符串

ES6 新增创建字符串的方法，使用反引号定义；本是上是一个字符串，但是其中可以解析变量、函数；用 ${}；模板字符串可以换行

const fn = () => { return '我是fn函数' };
const html = `我是模板字符串 ${fn()}`; // 我是模板字符串 我是 fn 函数

映射 Map

Map 是一种新的集合类型，用于存储键值对的数据结构。特点是：

• 键和值可以是任何类型
• 具有顺序性，实现了迭代器 Iterator
• 底层通过哈希表实现的
• Map 没有原型链上的属性，所有的键值对都存储在自身中，因此操作更直接和高效

// 创建映射
const myMap = new Map();
const m = new Map([['name', 'zhangsan'], ['age', 18]]); // 将二维数组转换成 Map
const m = new Map(Object.entries(obj)); // 将对象转换成 Map

// 1. set() 添加键值对，返回 Map 本身
myMap.set('name', 'John');

// 2. get() 通过键取值，返回值
myMap.get('name'); // John

// 3. has() 查询键是否存在，返回布尔值
myMap.has('name'); // true

// 4. delete() 删除键值对，返回是否删除成功的布尔值
myMap.delete('age');

myMap.size; // 1

// 5. clear() 清空键值对，无返回值
myMap.clear();

myMap.size; // 0

// 可以使用 forEach，for...of 遍历
// 使用 for...of 遍历得到的每一项是一个键值对数组
// for (const item of myMap) 和 for (const item of myMap.entries()) 结果似乎是一样的
// 可以使用 myMap.keys() myMap.values() myMap.entries() 方法，类似于数组
// 不能使用 for...in 遍历

弱映射 WeakMap

WeakMap 是 Map 的“兄弟”类型，其键必须是对象，且对键的引用是弱引用，不会阻止垃圾回收；不可迭代

应用场景：存储 DOM 节点元数据，当节点被删除后，垃圾回收程序就可以立即释放其内存

const key1 = { id: 1 }, key2 = { id: 2 }, key3 = { id: 3 };

// 使用嵌套数组初始化弱映射
const wm = new WeakMap([
  [key1, "val1"],
  [key2, "val2"],
]);

wm.set(key3, "val3");

// 没有 clear 方法

集合 Set

Set 类似于数组，但是成员值都是唯一的，不重复

集合存储数据是通过哈希表实现的，在 Set 中访问数据的时间复杂度是 O(1)，数组中是 O(n)

const s = new Set();
const set = new Set([1,2,3,4,4]);  // [1,2,3,4] 数组去重

// 1. add() 添加某个值，返回 Set 本身
s.add(1).add(2).add(3);

// 2. has() 查询某个值，返回布尔值
s.has(1);

// 3. delete() 删除某个值，返回是否删除成功布尔值
s.delete(2);

// 4. clear() 清空所有成员，没有返回值
s.clear();

s.size;

弱集合 WeakSet

WeakSet 是 Set 的“兄弟”类型，其元素必须是对象，且对元素的引用是弱引用，不会阻止垃圾回收；不可迭代

const val1 = { id: 1 }, val2 = { id: 2 }, val3 = { id: 3 }; 

const ws = new WeakSet([val1, val2]);
ws.set(val3);

Map 和 Set 不能使用 for...in 来遍历，要想遍历他们最好使用 .keys() .value() .entries() 方法