ES6 map和set的运用及作用

set

Set的用法 

特点：只有属性值，成员值唯一（不重复） 

用途：可以转换成数组，进行去重、取交集、并集、差集等操作； 

• set.add()

// 通过set.add()添加
const set = new Set()
set.add(1)
set.add("haha")
set.add([2, 3, 4])
console.log(set)    //{ 1, 'haha', [ 2, 3, 4 ] }

•  set的初始化以及长度

// Set可以直接传入数组作为初始值
const set = new Set([1, 2])
set.add(3)
console.log(set)  //{ 1, 2, 3 }
// 可以通过set.size访问set的长度
console.log(set.size)  //3

• set.delete()

//删除
const set = new Set([1, 2])
set.add(3)
set.delete(1)
console.log(set);   //{ 2,3 }

• set.has()

//判断是否有这个值
const set = new Set([1, 2, 3])
console.log(set.has(3));  //true
console.log(set.has(4));  //fase

• set转化为数组 

const set = new Set([1, 2])
// 1.扩展运算符
console.log([...set])  //[ 1, 2 ]
// 2.Array.from()
console.log(Array.from(set));  //[ 1, 2 ]

Set的作用

• 数组去重

 注意：引用类型除外;NaN也可以去重

const arr=[1,2,2,3,5,4];
let newArr = new Set(arr);
console.log(newArr); //[1,2,3,5,4]

const arr1= [1, {}, {}, 3]
console.log([...new Set(arr1)])  //[ 1, {}, {}, 3 ]
//如果要对对象去重，可以将对象序列化为字符串，然后使用set结构去重，最后再反序列化为对象。
const arr = [
   {
     name: 'haha',
     age: 12
   },
   {
     name: 'haha',
     age: 12
   },
   {
     name: 'haha',
     age: 12
   }
 ];
 // 序列化去重
 const noRepeat = [...new Set(arr.map(item => JSON.stringify(item)))];
 // 反序列化
 const newArr = noRepeat.map(item => JSON.parse(item));
 console.log(newArr);   // [ { name: 'haha', age: 12 } ]


// 对 NaN 和 undefined 类型去重也是有效的，
// 是因为 NaN 和 undefined 都可以被存储在Set中， 
// NaN 之间被视为相同的值（尽管在js中： NaN !== NaN ）。
const arr2 = [1, NaN, NaN, 3]
console.log([...new Set(arr2)])  //[ 1, NaN, 3 ]

•  数组求并集

const a = [1,2,3];
const b = [1,4,8];
let c = new Set([...a,...b]);
console.log(c); //[1,2,3,4,8]

• Array 与 Set 相互转换

var myArray = ["value1", "value2", "value3"];
// 用Set构造器将Array转换为Set
var mySet = new Set(myArray);
mySet.has("value1"); // returns true

// 用...(扩展运算符)操作符将Set转换为Array
console.log([...mySet]); // 与myArray完全一致

•  字符串转成 Set

var  text = "yuan";
var stringSet = new Set(text);
console.log(sringSet); // Set(4) {"y", "u", "a", "n"}
stringSet.size; //

Map

特点：key对应value，key和value唯一，任何值都可以当属性；
用途：可以让对象当属性，储存，去重等；

Map的用法

• Map两种创建方式

const map = new Map()
map.set('小明', 12)
map.set(true, 1)
map.set(123, '啦啦')
console.log(map)  //{ '小明' => 12, true => 1, 123 => '啦啦' }

//二维数组
const map1 = new Map([['小明', 12], [true, 1], [123, '啦啦']])
console.log(map1)  //{ '小明' => 12, true => 1, 123 => '啦啦' }

• map.has()

const map = new Map([['小明', 12], [true, 1], [123, '啦啦']])
console.log(map.has(123))  //true
console.log(map.has(444))  //false

• map.get()和map.delete()

//获取键值
const map = new Map([['小明', 12], [true, 1], [123, '啦啦']])
console.log(map.get(123))  //啦啦
console.log(map.get(444))  //undefined

map.delete("123")
console.log(map)   //{ '小明' => 12, true => 1, 123 => '啦啦' }

Map的作用

• Map 与 数组之间的相互转换

// Map 转数组
var myMap = new Map();
myMap.set("bar", "foo");
myMap.set(1, "bar");
[...myMap]; //  [ ["bar", "foo"], [1, "bar"] ]

// 数组转Map
const arr = new Map( [ ["bar", "foo"], [1, "bar"] ]);
console.log(arr);  // Map {"bar" => "foo", 1 => "bar"}

• Map 与对象相互转换

// Map 转对象
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
 const myMap = new Map();
myMap.set("bar", "foo")
.set(1, "ooo");

strMapToObj(myMap ); // Object {1: "ooo", bar: "foo"}

// 对象转 Map
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToStrMap({1: "ooo", bar: "foo"}); // Map {"1" => "ooo", "bar" => "foo"}

• Map 与 JSON 相互转换

// Map 转 JSON
// Map 的键名为字符串
function strMapToJson(jsonStr) {
  return JSON.stringify(strMapToObj(jsonStr));
}
const myMap = new Map();
myMap.set("bar", "foo")
.set(1, "ooo");
strMapToJson(myMap); // "{"1":"ooo","bar":"foo"}"

// Map 的键名为非字符串
function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}
mapToArrayJson(myMap); // "[["bar","foo"],[1,"ooo"]]"

// Json 转 Map
// 正常情况下所有键名都为字符串
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap("{"1":"ooo","bar":"foo"}"); // Map {"1" => "ooo", "bar" => "foo"}

// 整个JSON 是数组
function jsonToMap(jsronStr) {
  return new Map(JSON.parse(jsronStr)); 
}
jsonToMap([["bar","foo"],[1,"ooo"]]); // Map {"1" => "ooo", "bar" => "foo"}