ES6 中 Map 和 Set 数据结构

Map

为什么要引入Map?

传统的对象的键只能用字符串，局限性比较大，所以引入了Map

Map介绍

Map类似于对象，也是键值对的集合，但是键的范围不限于字符串，

各种类型(包括对象)的值都可以作为键，

Object 结构提供了 “字符串——值”

Map 结构提供了"值——值"

创建一个Map对象

 const m = new Map();

新建Map实例时，就可以指定键值
案例：Map构造函数接受数组作为参数

const m1 = new Map([
    ["name",'张三'],
    ["age",12]
])

事实上，不仅仅是数组但是需要注意任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构

const m2 = new Map([
 	[{"name":'张三'},{"age":12}]
])

实例的属性和方法：

1. Map.size属性:返回Map结构的成员总数

2. Map.set():

   1. set(key,value)
   2. set方法设置键名key对应的键值为value
   3. 如果key已经有值，则键值会被更新，否则就新生成该键。
   4. 如果set第二个参数没有传默认为undefined

3. Map.get(): get(key) 获取某个value值

4. Map.has(): has(key)判断是否有没有那个键

5. Map.delete():delete(key) 删除所指定的键

6. Map.clear(): clear(key) 清除所有成员，没有返回值

Map中key

1. 键为字符串

m.set("a","b")
console.log(m.get('a'));//b

​ 2. 键为对象

const obj = {
    name:'map',
    age:12
 }
m.set(obj,1)
console.log(m.get(obj));//1

​ 2.1 键为空对象

m.set({},2)
console.log(m.get({}));//undefined

​ 2.2 键为Object

m.set(Object,2)
console.log(m.get(Object));//{function Object() { [native code] } => 2}

​ 3. 键为数组

const arr = [12,32,45];
m.set(arr,3)
console.log(m.get())//3

​ 3.1 键为空数组

m.set([],3)
console.log(m.get([]))//undefined

​ 3.2 键为Array

m.set(Array,3)
console.log(m.get(Array))//{function Array() { [native code] } => 3}

遍历方法

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

• Map.prototype.keys()：返回键名的遍历器。

for(let key of m.keys()){
    console.log(key)
 }

• Map.prototype.values()：返回键值的遍历器。

for(let value of m.values()){
   console.log(value)
 }

• Map.prototype.entries()：返回所有成员的遍历器。

for(let i of m.entries()){
 	console.log(i)
}

或者

 for(let [key,value] of m.entries()){
    console.log(key,value)
 }

• Map.prototype.forEach()：遍历 Map 的所有成员。

for(let [key,value] of m){
   console.log(key,value)
 }

将Map结构转换成数组结构，比较快的方法是使用扩展运算符[…]

console.log([...m.keys()]);
console.log([...m.values()]);
console.log([...m.entries()]);
console.log([...m]);

转换成数组，这样就可以使用数组的方法，filter过滤 、 map遍历

const mp =new Map()
.set(1,"a")
.set(2,"b")
.set(3,"c")
//filter过滤
console.log([...mp].filter(([key,value]) =>  key<2));//0: (2) [1, 'a']
//map遍历
console.log([...mp].map(([key,value]) =>  [key,value]));
//0: (2) [1, 'a']
//1: (2) [2, 'b']
//2: (2) [3, 'c']
      
      

与其他数据结构的相互转换

1. Map转换为数组

方法1：将Map结构转换成数组结构，比较快的方法是使用扩展运算符[…]

console.log([...m]);

方法2：Array.from()

console.log(Array.from(m))

1. 数组转换为Map

将数组传入Map构造函数，就可以转换成Map

const m1 = new Map([
    ["name",'张三'],
    ["age",12]
])
//Map(2)
//[[Entries]]
/0: {"name" => "张三"}
1: {"age" => 12}

set

Set新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值

const s = new Set();
    [2,3,4,5,1,2,2].forEach(x => s.add(x))
    for(let i of s){
      console.log(i)
    }
const set = new Set([1,2,3,4,5,2])//是一个中括号，不要和Map弄混了
console.log(set);//1,2,3,4,5

实例的属性和方法

• Set.size属性:返回Set实例的成员总数
• Set.add(vlaue)：添加某个值，返回Set结构本身
• Set.delete(value):删除某个值，返回Set结构本身
• Set.has(value):返回一个布尔值，表示该值是否为Set的成员
• Set.clear()：清除所有成员，没有返回值

let se = new Set();
se.add(12).add(2).add(2);
console.log(se);//12,2        2添加了两次但是会自动去重

遍历方法

• Set.prototype.keys()：返回键名的遍历器
• Set.prototype.values()：返回键值的遍历器
• Set.prototype.entries()：返回键值对的遍历器
• Set.prototype.forEach()：使用回调函数遍历每个成员

let set1 = new Set(['one','two','three']);
//Set.keys()
for(let item of set1.keys()){
	console.log(item);  //one two three
 }
//Set.values
for(let item of set1.values()){
	console.log(item);  //one two three
}

由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

Set.entries()

 for(let item of set1.entries()){
        console.log(item);//['one', 'one']
                          //['two', 'two']
                          //['three', 'three']
      }

Set.forEach()

set1.forEach((value,key) => console.log(value,key))
      //one one
      //two two
      //three three

Set结构的键名就是键值，两者就是同一个值，因此第一个参数和第二个参数永远一样

扩展运算符也可以用于Set结构

let set = new Set([12,14,15,16,12])
console.log([...set]);//[12, 14, 15, 16]

• 数组的map和filter方法也可以间接用于Set
• Set实现并集，交集，差集

//并集，使用扩展运算符
let set1 = new Set([1,2,3,4])
let set2 = new Set([2,4,6,8])
console.log([...set1,...set2]);

//交集
console.log([...set1].filter(item => set2.has(item)));//2,4

//差集
console.log([...set1].filter(item => !set2.has(item)));//1,3

• 改变Set结构有两种方法

  • Array.from()方法

 let set = new Set([1, 2, 3]);
 set = new Set(Array.from(set, val => val * 2));
 console.log(set);//2,4,6

• ​ 利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构

let set = new Set([1, 2, 3]);
set = new Set([...set].map(set val => val * 2));
console.log(set);//2,4,6

​

补充遍历数组的用法：

1. map()方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

array.map(function(currentValue,index,arr), thisValue)

• function(),必选。函数，数组中的每个元素都会执行这个函数
  函数参数:

  • currentValue 必选。当前元素的值
  • index 可选。当前元素的索引值
  • arr 可选。当前元素属于的数组对象

• thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

• 返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

2. filter()方法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue)

• function(),必选。函数，数组中的每个元素都会执行这个函数
  函数参数:

  • currentValue 必选。当前元素的值
  • index 可选。当前元素的索引值
  • arr 可选。当前元素属于的数组对象

• thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

• 返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

map()和filter()方法两者的返回值不一样

3. from()方法

Array.from(object, mapFunction, thisValue)

• object 必选。要转换为数组的对象
• mapFunction 可选。数组中每个元素要调用的函数
• thisValue 可选。映射函数(mapFunction)中的this对象