前端基础知识与常见面试题(八)

JS之set
set是一种数据结构，成员的值是唯一的，是一个构造函数
创建set对象：
var set1=new Set();
console.log(set1.size);//0
当有相同元素时只保留一个(自动去重)：
var set=new Set([1,2,3,1,[],[],new String(),new String(),'2']);
console.log(set);//{1, 2, 3, Array(0), Array(0),'','2' }
console.log(set.size);//8
方法： 
添加元素，返回的是set对象 ，可以链式添加：
set1.add(12).add('hello').add(12).add(3).add(4).add(5);
//自动去掉多余的12
console.log(set1);// {12, 'hello', 3, 4, 5}
console.log(set1.size);//5
删除指定元素，返回布尔值：
console.log(set1.delete(12));//true
console.log(set1);//{'hello', 3, 4, 5}
判断set是否有指定元素，返回布尔值：
console.log(set1.has(5));//true
清空整个set对象：
set1.clear();
console.log(set1);//Set(0) {size: 0}
遍历set对象的所有key：
 for(let key of set1.keys()){
            console.log(key);
        }
遍历所有value：
  for(let value of set1.values()){
            console.log(value);
        }
遍历所有key和value：
 for(let [key,value] of set1.entries()){
            console.log([key,value]);
        }
应用：
数组去重：
  // Array.from将set结构转换为数组
  function dedupe(arr){
        return Array.from(new Set(arr));
  }
  console.log(dedupe([1,2,3,4,5,2,4,2,4,7,2,7]));// [1, 2, 3, 4, 5, 7]
法二：
   let arr=[1,2,3,4,5,2,4,2,4,7,2,7];
   let result=[...new Set(arr)];
   console.log(result);//[1, 2, 3, 4, 5, 7]
——————————————————————————
JS中的map
使用new关键字和Map构造函数可以创建一个空映射：
const m=new Map();
如果想在创建的同时初始化实例，可以给Map构造函数传入一个可以迭代的对象，需要包含键/值对数组。可迭代对象的每个键/值对都会按照迭代顺序插入到新映射实例中：
//使用嵌套数组初始化映射

const m1=new Map([["key1","val1"],["key2","val2"],["key3","val3"]]);

alert(m1.size);  //3

//使用自定义迭代器初始化映射
const m2=new Map(
   [Symbol.iterator]:function*(){
        yield ["key1","val1"];
        yield ["key2","val2"];
        yield ["key3","val3"];    
}}        
);
alert(m2.size):       //3

//映射期待的键/值对，无论是否提供
const m3=new Map([[]]);
alert(m3.has(undefined));   //true
alert(m3.get(undefiend));   //undefiend
初始化之后，可以使用set（）方法再添加键/值对。另外，可以使用get（）和has（）进行查询，可以通过size属性获取映射中的键/值对的数量，还可以使用delete（）和clear（）删除值。
const m=new Map();

alert(m.has("firstName"));   //false
alert(m.get("firstName"));   //undefined
alert(m.size);                     //0

m.set("firstName","Matt").set("lastName","Frisble");

alert(m.has("firstName"));   //true
alert(m.get("firstName"));    //Matt
alert(m.size);                      //2

m.delete("firstName")        //只删除这一个键

alert(m.has("firstName"));    //false
alert(m.has("lastName"));     //true
alert(m.size)                       //1

m.clear();        //清除这个映射实例中的所有键/值对

alert(m.has("firstName"));       //false
alert(m.has("lastName"));         //false
alert(m.size);                        //0
set()方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明：
const m=new Map().set("key1","val1");

m.set("key2","val2").set("key3","val3");
alert(m,size);       //3
与Object只能使用数值、字符串或者符号不同，Map可以使用JS数据类型作为键。Map内部使用SameValueZero比较操作（ES内部规范内部定义，语言中不能使用），基本上相当于使用严格对象相等的标准来检查键的匹配性。与Object类似，映射的值没有限制的。
const m=new Map();
const functionKey=function(){};
const symbolKey=Symbol();
const objectKey=new Object();

m.set(functionKey,"functionValue");
m.set(symbolKey,"symbolValue");
m.set(objectKey,"objectValue");

alert(m.get(functionKey));         //functionValue
alert(m.get(symbolKey));         //symbolValue
alert(m.get(objectKey));          //objectValue

//SameValueZero比较意味着独立不冲突
alert(m.get(objectKey));   //undefined
与严格相等一样，在映射中用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时，仍然保持不变。
const m=new Map();
const objKey={},
         objVal={},
         arrKey=[],
         arrVal=[];

m.set(objKey,objVal);
m.set(arrKey,arrVal);

objKey.foo="foo";
objVal.bar="bar";
arrKey.push("foo");
arrVal.push("bar");

console.log(m.get(objKey));     //{bar:"bar"}
console.log(m.get(arrKey));     //["bar"]
SameValueZero比较也可能导致意想不到的冲突
const m=new Map();
const a=0/"",   //NAN
        b=0/"",   //NAN
        pz=+0,
        nz=-0;

alert(a===b);   //false
alert(pz===nz);  //true

m.set(a,"foo");
m.set(pz,"bar");

alert(m.get(b));    //foo
alert(m.get(nz));   //bar
三、顺序与迭代
与Object类型的一个主要差异是，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。

映射实例可以提供一个迭代器，能以插入顺序生成[key,value]形式的数据。可以通过entries（）方法（或者Symbol.iterator属性，它引用entries（））取得这个迭代器
因为entries（）是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组
如果不使用迭代器，而是使用回调方式，则可以调用映射的forEach（）方法并传入回调，依次迭代每个键/值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部this的值：
keys()和values()分别返回以插入顺序生成键和值的迭代器：
键和值在迭代器遍历时是可以修改的，但映射内部的引用则无法修改。当然，这并不妨碍修改作为键或值的对象内部的属性，因为这样并不影响它们在映射
const m1=new Map([["key1","val1"]]);

//作为键的字符串原始值是不能修改的
for (let key of m1.keys()){
  key="newKey";
  alert(key);                        // newKeyt
  alert(m1.get("key1"));      //vall
  alert(m1.get("newKey"));      //undefined
}    

const keyObj={id:1};

const m=new Map([[keyObj,"vall"]]);

//修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值

for (let key of m.keys())
{
  key.id="newKey";
  alert(key);                     //{id:"newKey"}
  alert(m.get(keyObj));     //val
}    

alert(keyObj);                    //{id:"newKey"}