新增数据结构 Set、Map

一、新增数据结构 Set

1. Set 数据的特点

Set 数据类型为 object
Set 数据结构类似数组，可遍历
Set 数据只存在 键（或者说键名、键值是相同）

let a = 1;
let b = {key: 'bb'};
let set = new Set([a, b]);

console.log(set);  // 如下图

Set 数据内的成员是唯一的
- 内部作：强等于 === 判断
- NaN等于自身（也就是说，一个Set类型的数据，最多只能有一个 NaN）
- 判断对象的唯一性：向 Set 中添加对象时，判断对象是否指向同一块内存地址，且内存中存储的数据是否一致

let a = {a: 1};
let b = {b: 1};
let c = 2;
let d = 2;

let set = new Set([a, b, c, d]);

console.log(set.size);  // 3

2. Set 数据的创建： `new Set()` （有强相等的成员，不会重复添加）

Set 本身是一个构造函数，用来生成 Set 数据结构
参数： 数组 / 伪数组或不传
创建时：有强相等的成员，不会重复添加

const set = new Set([1, 2, 3, 4, 4]);
console.log(set.size);  // 4

const dom = document.querySelectorAll('div');
const set = new Set(dom);
console.log(dom);

3. Set 实例属性

Set.prototype.constructor：构造函数，默认就是Set函数
Set.prototype.size：返回Set实例的成员总数

4. Set 实例操作方法（向 Set 加入值的时候，不会发生类型转换）

add(value)：添加某个值，返回 Set 结构本身（如果有，则覆盖）；可链式写法
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：用来查找值；返回一个布尔值，表示该值是否为Set的成员
clear()：清除所有成员，没有返回值

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

Array.from 方法可以将 Set 结构转为数组

const items = new Set([1, 2, 3, 4, 5, 6, 7]);
const array = Array.from(items);

console.log(array); // [1, 2, 3, 4, 5]

5. Set 实例遍历方法

Set 数据默认可遍历（默认调用 Set 实例的 `value` 方法）

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);   // // red  、 green  、 blue
}

keys( ) 、values( ) 、entries( )：返回键名的遍历器

// keys方法和values方法的行为完全一致 【只包含键值】

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
    console.log(item);      // red  、 green  、 blue
}

for (let item of set.values()) {
    console.log(item);      // red  、 green  、 blue
}

// entries方法返回的遍历器，【同时包括键名和键值】，所以每次输出一个数组，它的两个成员完全相等
for (let item of set.entries()) {
    console.log(item);      // ["red", "red"] 、 ["green", "green"] 、 ["blue", "blue"]
}

forEach( )：使用回调函数遍历每个成员

Set 结构的实例与数组一样，也拥有 forEach 方法，用于对每个成员执行某种操作，没有返回值
forEach 方法还可以有第二个参数，表示绑定处理函数内部的this对象
Set 结构中：键和值是一样的

set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

6. Set 数据遍历的应用

扩展运算符[...arr]内部使用for...of循环，所以也可以用于 Set 结构

数组去重：扩展运算符和 Set 结合

应用：数组去重
- 方式一： [...new Set(array)]
- 方式二： Array.from(new Set(array))

// 方法一：
const set = new Set([1, 2, 3, 4, 4 , 5, 5]);
const result = [...set];

console.log(result);    // [1, 2, 3, 4, 5]

// 方法二：
const set = new Set([1, 2, 3, 4, 4 , 5, 5]);
const result = Array.from(set);

console.log(result);    // [1, 2, 3, 4, 5]

实现并集、交集、差集：数组方法和 Set 结合

<script>
    let a1 = [1, 2, 3, 4];
    let a2 = [3, 4, 5, 6];

    let set1 = new Set(a1);
    let set2 = new Set(a2);

    let union = new Set([...set1, ...set2]);        // 并集

    let intersect = [...set1].filter((item) => {    // 交集
        return set2.has(item);
    });

    let difference = [...set1].filter((item) => {   // 差集
        return !set2.has(item);
    });

    console.log([...union]);    // 并集   [1, 2, 3, 4, 5, 6]
    console.log(intersect);     // 交集   [3, 4]
    console.log(difference);    // 差集   [1, 2]
</script>

7. 改变 Set 数据中的成员：目前只能间接改变（先变为数组，再变回Set）

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

二、新增数据结构 WeakSet

参考

三、新增数据结构 Map

1. Map 数据的特点

Map 数据类型为 object
Map 数据结构类似数组，可遍历
Map 数据存在 键 - 值；且键可以是任意类型（弥补了ES5中对象的键只能是字符串）

2. 创建 Map 对象：`new Map()`

Map 本身是一个构造函数，用来生成 Map 数据结构
可接受参数： 二维数组（内层数组是：键值对数组['aa', 1]）
- 参数：任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构

const map = new Map([
    ['name', '张三'],
    ['title', 'Author']
]);

console.log(map.size); // 2

3. Map 实例属性

Map.prototype.constructor：构造函数，默认就是Map函数
Map.prototype.size：返回Map实例的成员总数

const map = new Map();
    
map.set(['a'], 555);
map.set('b', 666);

console.log(map.get(['a'])); // undefined
console.log(map.get('b')); // 666

4. Map 操作方法

set(key, value)：设置键值对，返回 Map 结构（若 键 存在严格相等，则旧值被新值覆盖）；可链式写法
get(key)：获取 key 对应的值（若找不到 key，则返回undefined）
has(key)：用来查找键名；判断 key 是否存在，返回布尔值
delete(key)：删除，返回布尔值，是否删除成功
clear()：清空 Map 内所有值，无返回值

5. Map 遍历方法

Map 数据默认可遍历（默认调用 Map 实例的 `value` 方法）

const map = new Map([
    ['a', 1], ['b', 2]
]);

for(let item of map) {
    console.log(item);  // ['a', 1] ['b', 2]
}

`keys()`：返回键名的遍历器

const map = new Map([
    ['a', 1], ['b', 2]
]);

for(let item of map.keys()) {
    console.log(item);  // a b
}

`values()`：返回键值的遍历器。

const map = new Map([
    ['a', 1], ['b', 2]
]);

for(let item of map.values()) {
    console.log(item);  // 1 2
}

`entries()`：返回所有成员的遍历器

const map = new Map([
    ['a', 1], ['b', 2]
]);

for(let item of map.entries()) {
    console.log(item);  // ['a', 1] ['b', 2]
}

for(let [key, value] of map.entries()) {
    console.log(key);  // a b
}

`forEach()`：遍历 Map 的所有成员

const map = new Map([
    ['a', 1],
    ['b', 2]
]);


map.forEach((item, index) => {
    console.log(item); // 1 2
    console.log(index); // a b
});

6. 扩展运算符获取 map 中的成员

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

7. 改变 Map 数据中的成员：目前只能间接改变（先变为数组，再变回Map）

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

8. Map 转换

Map 转成数组

数组转成 Map

Map 转成对象

对象转成 Map

Map 转成 JSON

JSON 转成 Map

五、新增数据结构 WeakMap

1. WeakMap 数据

WeakMap结构与Map结构类似，也是用于生成键值对的集合

2. WeakMap与Map的区别（一）

WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名

3. WeakMap与Map的区别（二）

WeakMap 的成员都是弱引用，随时可能消失（不会被计入垃圾回收机制）

4. WeakMap 的作用

作用一：储存DOM节点（不用担心这些节点从文档移除时，会引发内存泄漏）
- 如果使用Set存储DOM节点,由于Set对成员的引用是计入“引用计数”的，所以从文档中移除节点后，垃圾回收器还是没有办法回收节点的内存，只有你显式地在Set中删除节点后节点的内存才会被回收
作用二：实现私有属性

posted @ 2018-04-04 14:14 执着的程序员~ 阅读(120) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

新增数据结构 Set、Map

一、新增数据结构 Set

1. Set 数据 的特点

2. Set 数据 的创建： new Set() （有强相等的成员，不会重复添加）

3. Set 实例 属性

4. Set 实例 操作方法（向 Set 加入值的时候，不会发生类型转换）

5. Set 实例 遍历方法

Set 数据 默认可遍历（默认调用 Set 实例的 value 方法）

keys( ) 、values( ) 、entries( )：返回键名的遍历器

forEach( )：使用回调函数遍历每个成员

6. Set 数据 遍历的应用

数组去重： 扩展运算符 和 Set 结合

实现 并集、交集、差集：数组方法 和 Set 结合

7. 改变 Set 数据 中的成员：目前只能间接改变（先变为数组，再变回Set）

二、 新增数据结构 WeakSet

三、 新增数据结构 Map

1. Map 数据 的特点

2. 创建 Map 对象：new Map()

3. Map 实例 属性

4. Map 操作方法

5. Map 遍历方法

Map 数据 默认可遍历（默认调用 Map 实例的 value 方法）

keys()：返回 键名 的遍历器

values()：返回 键值 的遍历器。

entries()：返回所有成员的遍历器

forEach()：遍历 Map 的所有成员

6. 扩展运算符 获取 map 中的成员

7. 改变 Map 数据 中的成员：目前只能间接改变（先变为数组，再变回Map）

8. Map 转换

Map 转成 数组

数组 转成 Map

Map 转成 对象

对象 转成 Map

Map 转成 JSON

JSON 转成 Map

五、 新增数据结构 WeakMap

1. WeakMap 数据

2. WeakMap与Map的区别（一）

3. WeakMap与Map的区别（二）

4. WeakMap 的作用

公告

1. Set 数据的特点

2. Set 数据的创建： `new Set()` （有强相等的成员，不会重复添加）

3. Set 实例属性

4. Set 实例操作方法（向 Set 加入值的时候，不会发生类型转换）

5. Set 实例遍历方法

Set 数据默认可遍历（默认调用 Set 实例的 `value` 方法）

6. Set 数据遍历的应用

数组去重：扩展运算符和 Set 结合

实现并集、交集、差集：数组方法和 Set 结合

7. 改变 Set 数据中的成员：目前只能间接改变（先变为数组，再变回Set）

二、新增数据结构 WeakSet

三、新增数据结构 Map

1. Map 数据的特点

2. 创建 Map 对象：`new Map()`

3. Map 实例属性

Map 数据默认可遍历（默认调用 Map 实例的 `value` 方法）

`keys()`：返回键名的遍历器

`values()`：返回键值的遍历器。

`entries()`：返回所有成员的遍历器

`forEach()`：遍历 Map 的所有成员

6. 扩展运算符获取 map 中的成员

7. 改变 Map 数据中的成员：目前只能间接改变（先变为数组，再变回Map）

Map 转成数组

数组转成 Map

Map 转成对象

对象转成 Map

五、新增数据结构 WeakMap