ES6 – Set 与 Map

Set

ES6中提供了Set数据容器,这是一个能够存储无重复值的有序列表

基本用法

通过new Set()可以创建Set,然后通过add方法能够向Set中添加数据项:

const s = new Set();

[2, 3, 5, 4, 5, 2, 2,'5'].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4 '5'     
复制代码

特点

  • 成员的值都是唯一的,没有重复的值

  • 向Set加入值的时候,不会发生类型转换,所以5和”5″是两个不同的值。

操作方法

  • add() 向Set中添加数据项

  • has() 检查某个值是否存在于Set中

  • delete() 从Set中删除某个值

  • clear() 从Set中删除所有值

let set = new Set([1,2,3,3,3,3]);
set.add(4); // 1 2 3 4
console.log(set)
console.log(set.size);//4
console.log(set.has(5)); //false

set.delete(1);

console.log(set.has(1)); //false
console.log(set.size); //3

set.clear();
console.log(set.size); //0
复制代码

遍历方法

Set结构的实例有四个遍历方法,可以用于遍历成员。

  • keys() :返回键名的遍历器

  • values() :返回键值的遍历器

  • entries() :返回键值对的遍历器

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

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

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

let set2 = new Set([1, 2, 3]);
set2.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
复制代码

Set 对象作用

数组去重

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
复制代码

并集(Union)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
复制代码

交集(Intersect)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
复制代码

差集(Difference)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
复制代码

Map

ES6中提供了Map数据结构,能够存放键值对,其中,键的去重是通过Object.is()方法进行比较,键的数据类型可以是基本类型数据也可以是对象,而值也可以是任意类型数据。

基本用法

通过new Map()可以创建Map,然后通过set()方法能够向Map中添加数据项:

 let map = new Map();
 map.set('title','hello world');
 map.set('year','2018');
 
 console.log(map.size); //2
复制代码

Map 初始化

//使用数组来创建Map
let map = new Map([['title','hello world'],['year','2018']]);
console.log(map.has('title')); //true
console.log(map.has('year')); //true
console.log(map.size); //2
复制代码

操作方法

  • set() : 给Map添加键值对

  • get(): 从Map中提取值

  • has(): 检查某个数据项是否存在于Map中

  • delete(): 从Map中删除一个数据项

  • clear(): 删除Map中所有的数据项

 let map = new Map();
 map.set('title','hello world');
 map.set('year','2018');
 
 console.log(map.get('title')); // hello world
 console.log(map.has('year')); //true
 map.delete('title');
 console.log(map.has('title')); //false
 map.clear();
 console.log(map.size); //0
复制代码

遍历方法

Map原生提供三个遍历器生成函数和一个遍历方法。

  • keys():返回键名的遍历器。

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

  • entries():返回所有成员的遍历器。

  • forEach():遍历Map的所有成员。

需要特别注意的是,Map的遍历顺序就是插入顺序。

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

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

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

 map.forEach((value,key,ownerMap)=>{
      console.log(key, value);
 });
 // "F" "no"
// "T" "yes"
复制代码

扩展运算符(…)

Map结构转为数组结构,比较快速的方法是结合使用扩展运算符(…)。

let 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']]
复制代码

Map的遍历和过滤

结合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身没有map和filter方法)。

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

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

let map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享