【JS】Set 与 Map 的使用

Set 与 Map 的使用方法

1 Set 对象

Set 是ES6中新增的一种数据类型，也可称为集合。Set 对象允许存储任何类型的唯一值。

const mySet = new Set();

1.1 Set 的属性

1 size 返回集合所包含元素的数量。

const mySet = new Set();
console.log(mySet.size); // 0 新创建的集合为一个空对象，长度为0

mySet.add(1); // add(value) 向集合中添加元素
console.log(mySet.size); // 1

1.2 Set 的操作方法

1. add(value) ，向集合添加一个新的项。

const mySet = new Set();

// 向集合中添加项
set.add(1);
set.add('2');
set.add({
    
     name: '小徐' });
set.add([1, 2, 3]);

console.log(mySet); // Set(4) { 1, '2', { name: '小徐' }, [ 1, 2, 3 ] }
console.log(mySet.size); // 4

// 注意：如果添加了重复的项，只会保留一个
mySet.add(1);
console.log(mySet);// Set(4) { 1, '2', { name: '小徐' }, [ 1, 2, 3 ] }
console.log(mySet.size); // 4

2. delete(value) 从集合中移除一个值，并返回一个布尔值，来表示是否移除成功。

const mySet = new Set();
set.add(1);

console.log(mySet.delete(1)); // true 成功
console.log(mySet.delete('1')); // false 失败

3. has(value) 判断值在集合中是否存在，返回一个布尔值。

const mySet = new Set();
set.add(1);

console.log(mySet.has(1)); // true 存在
console.log(mySet.has('1')); // false 不存在

4. clear() 移除集合里所有的项。

const mySet = new Set();
set.add(1);
console.log(mySet); // { 1 }

mySet.clear(); // 清除所有
console.log(mySet); // {}

5. values() 返回一个新的迭代器对象，包含 Set 对象中的按插入顺序排列的所有元素的值。

const mySet = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(mySet); // { 1, 2, 3 }
console.log(mySet.values()); // { 1, 2, 3 }

6. keys() 返回一个新的迭代器对象，包含 Set 对象中的按插入顺序排列的所有元素的值。

// keys() 方法是 values() 方法的别名。

const mySet = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(mySet); // { 1, 2, 3 }
console.log(mySet.keys()); // { 1, 2, 3 }

7. entries() 方法返回一个新的对象，这个对象包含的元素是类似 [value, value] 形式的数组，value 是集合对象中的每个元素，迭代器对象元素的顺序即集合对象中元素插入的顺序。由于集合对象不像 Map 对象那样拥有 key，然而，为了与 Map 对象的 API 形式保持一致，故使得每一个条目的 key 和 value 都拥有相同的值，因而最终返回一个 [value, value] 形式的数组。

扫描二维码关注公众号，回复： 15385325 查看本文章

const mySet = new Set();
mySet.add(10);
mySet.add('ten');

const iterator1 = mySet.entries();

for (const entry of iterator1) {
    
    
  console.log(entry);
  // expected output: [10, 10]
  // expected output: ["ten", "ten"]
}

1.3 Set 的遍历方法

const mySet = new Set();
......

// 可以直接对 Set 对象进行变量
for (const item of mySet) {
    
    
  console.log('item',item);
}
for (const item of mySet.keys()) {
    
    
  console.log('item',item);
}
for (const item of mySet.values()) {
    
    
  console.log('item',item);
}
mySet.forEach((item) => {
    
    
  console.log('item', item);
})

1.4 Set 实例

1 使用 Array.from，将 Set 转换为 Array

console.log('mySet', mySet); // { 1, 2, 3 }
const myArr = Array.from(mySet);

console.log('myArr', myArr); // [ 1, 2, 3 ]

2 用…(展开操作符) 操作符，将 Set 转换为 Array

console.log('mySet', mySet); // { 1, 2, 3 }
console.log([...mySet]); // 与 myArray 完全一致

3 用 Set 构造器，将 Array 转换为 Set

const myArr = [1, 2, 3];
const mySet = new Set(myArr);

console.log('mySet', mySet); // { 1, 2, 3 }

4 数组去重

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

5 求并集

let arr1 = [1,2,3];
let arr2 = [3,4,5];
let s1 = new Set([...arr1,...arr2]) 
console.log([...s1]); [ 1, 2, 3, 4, 5 ]

6 求交集

const set1 = new Set([1, 2]) // { 1, 2 }
const set2 = new Set([2, 3]) // { 2, 3 }
const set3 = new Set([...set1].filter(item => set2.has(item))) // { 2 }

let arr1 = [1,2,3,1];
let arr2 = [3,4,5,4];
let arr = [...new Set(arr1)].filter((item) => new Set(arr2).has(item))
console.log(arr)//[3]

7 求差集

let arr1 = [1, 2, 3, 1];
let arr2 = [3, 4, 5, 4];
let arr = [...new Set(arr1)].filter((item) => !new Set(arr2).has(item))
console.log(arr)//[1,2] 这是arr1差arr2的结果是[1,2],如果是arr2差arr1就是[4,5]

2 Map 对象

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

// 创建一个 Map 对象
const myMap = new Map();
console.log(myMap); // {} 初始值为一个空对象

2.1 Map 的属性

1 size 返回 Map 对象中的键值对数量。

const myMap = new Map();
myMap.set('name', '小徐');
console.log(myMap.size); // 1

2.2 Map 的操作方法

1. set(key, value) 添加key与value，并返回 Map 对象。

const myMap = new Map();
myMap.set('name', '小徐');

console.log(myMap); // { 'name' => '小徐' }
// 一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉

2. get(key) 查找指定key关联的值，若不存在，则返回 undefined。

const myMap = new Map();
myMap.set('name', '小徐');

console.log(myMap.get('name')); // 小徐
console.log(myMap.get('name1')); // undefined

3. delete(key) 移除指定key关联的键值对。

const myMap = new Map();
myMap.set('name', '小徐');
console.log(myMap); // { 'name' => '小徐' }

// 如果键值对存在并成功被移除，返回 true，否则返回 false。
const del1 = myMap.delete('name')
console.log(del1); // true

const del2 = myMap.delete('name1')
console.log(del2); // false

console.log(myMap); // {}

4. has(Key) 判断指定key关联的值是否存在，返回一个布尔值。

const myMap = new Map();
myMap.set('name', '小徐');

console.log(myMap.has('name')); // true
console.log(myMap.has('name1')); // false

5. clear() 移除 Map 对象中所有的键值对。即清空为空对象

myMap.clear();
console.log(myMap); // {}

6. keys() 返回一个新的迭代对象，其中包含 Map 对象中所有的键，并以插入 Map 对象的顺序排列。

const myMap = new Map();
myMap.set('name', '小徐');
myMap.set('age', '18');

console.log(myMap); // { 'name' => '小徐', 'age' => '18' }
console.log(myMap.keys()); // { 'name', 'age' }

7. valyes() 返回一个新的迭代对象，其中包含 Map 对象中所有的键，并以插入 Map 对象的顺序排列。

const myMap = new Map();
myMap.set('name', '小徐');
myMap.set('age', '18');

console.log(myMap); // { 'name' => '小徐', 'age' => '18' }
console.log(myMap.values()); // { '小徐', '18' }

8. entries() 返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列。

const myMap = new Map();
myMap.set('name', '小徐');
myMap.set('age', '18');

console.log(myMap); // { 'name' => '小徐', 'age' => '18' }
console.log(myMap.entries()); // { [ 'name', '小徐' ], [ 'age', '18' ] }

2.3 Map 的遍历方法

Map 可以使用 for...of 循环来实现迭代：

const myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');

for (const [key, value] of myMap) {
    
    
  console.log(`${
      
      key} = ${
      
      value}`);
}
// 0 = zero
// 1 = one

for (const key of myMap.keys()) {
    
    
  console.log(key);
}
// 0
// 1

for (const value of myMap.values()) {
    
    
  console.log(value);
}
// zero
// one

for (const [key, value] of myMap.entries()) {
    
    
  console.log(`${
      
      key} = ${
      
      value}`);
}
// 0 = zero
// 1 = one

Map 也可以通过forEach方法迭代：

myMap.forEach((value, key) => {
    
    
  console.log(`${
      
      key} = ${
      
      value}`);
});
// 0 = zero
// 1 = one

2.4 Map 与数组的关系

const kvArray = [['key1', 'value1'], ['key2', 'value2']];

// 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);

console.log(myMap); // { 'key1' => 'value1', 'key2' => 'value2' }
console.log(myMap.get('key1')); // "value1"

// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组

// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);

// 或者在键或者值的迭代器上使用 Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

3 总结

（1）Set 对象类似于数组，成员的值都是唯一的，常用于数组去重等。Set 没有 value 只有key，value 就是 key，key 是不允许重复的。

（2）Map 对象是键值对集合，和JSON对象类似，但是 key 不仅仅可以是字符串，还可以是其他类型的值。Map 中的键也是不允许重复。

（3）Map 的键是不能修改的，但是键对应的值是可以修改的；Set 不能通过迭代器来改变 Set 的值，因为 Set 的值就是键。

（4）Map 和 Set 数据结构是ES6语法，最大优点就是运行时间少大大提高了性能。