ES6 Set和Map的那点事

Posted sunxiaopei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 Set和Map的那点事相关的知识,希望对你有一定的参考价值。

Set 

1.Set特点

类数组 新增数据结构 是构造函数 成员值唯一  注重独一无二的特征 

2.Set实例的常用方法

    console.log(‘------------Set操作方法------------‘);
    let set1 = new Set([1, 2, 3, 3]).add(42).add(68).add({ a: 2 }).add({ a: 2 }).add(NaN).add(NaN);
    console.log( "set1",set1)//Set(8) {1, 2, 3, 42, 68, …} "set1"
    set1.delete(1);
    console.log("set1",set1) //Set(7) {2, 3, 42, 68, {…}, …} "set1"
    console.log(set1.has(2)); //true
    set1.clear()
    console.log(set1) //Set(0) {}
    //总结:1.Set类数组 数据单一化 NaN认为相同  add里面复杂数据类型 则认为不同

console.log(‘--------Set遍历方法-------------‘) let set1M = new Set([1, 2, 2, 2,]); console.log(set1M.values()) //SetIterator {1, 2} console.log(set1M.keys()); //SetIterator {1, 2} console.log(set1M.entries()) //SetIterator {1 => 1, 2 => 2} set1M.forEach(value => console.log(value)) // 1 2 //总结:Set的values和keys方法 返回的值一样 返回一个遍历器接口 可以调用for of //调用forEach 无返回值

3.Set的几个经典面试题

1.实现数组去重 和Set的交集,并集,差集

    console.log(‘-------Set的应用1---------------‘);
    //数组去重
    console.log([...new Set([1, 2, 2,])]) // [1, 2]
    console.log(Array.from(new Set([1, 2, 2])))// [1, 2]

    let set11Arr = new Set([1, 2, 3])
    let set12Arr = new Set([2, 3, 4])
    //交集 
    let jiao = new Set([...set11Arr].filter(x => set12Arr.has(x)));
    console.log("jiao", jiao) //Set(2) {2, 3}
    //并集 
    console.log(new Set([...set11Arr, ...set12Arr])) //Set(4) {1, 2, 3, 4}
    //差集
    let cha = new Set([...set11Arr].filter(x => !set12Arr.has(x)));
    console.log("cha", cha) // Set(1) {1} 

2.给定一个整数无序数组和变量 sum,如果存在数组中任意两项和使等于 sum 的值,则返回true。否则, 返回false。例如,数组[3, 5, 1, 4]和 sum = 9,函数应该返回true,因为4 + 5 = 9。

  //常规版本
    const findSum = (arr, val) => {
        let searchValues = new Set();
        searchValues.add(val - arr[0]);
        for (let i = 1, length = arr.length; i < length; i++) {
            let searchVal = val - arr[i];
            if (searchValues.has(arr[i])) {
                return true;
            } else {
                searchValues.add(searchVal);
            }
        };
        return false;
    };


    //简洁的版本:
    const findSum = (arr, sum) =>
        arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));

    let findS = findSum([3, 5, 1, 4], 9)
    console.log(findS) //true

 

Map

1.Map的特点 

类对象 相当于对对象的扩展 原来对象键值只能位字符串 Map结构的键进行了扩展

2.Map实例的常用方法

    console.log("------------Map操作方法------------------")
    let map1 = new Map([["a", 1], ["b", 2]]).set("c", 3).set("a", 5) //set方法有值更新 没值替换
    console.log("map1", map1) //Map(3) {"a" => 5, "b" => 2, "c" => 3}
    console.log(map1.get("a")) //5
    console.log(map1.has("a")) //true
    map1.delete("a")
    console.log("map1", map1) //Map(2) {"b" => 2, "c" => 3}
    map1.clear()
    console.log("map1", map1) //Map(0) {}
    console.log("------------Map遍历方法------------------")
    let MapM = new Map([["a", 1], ["b", 2]])
    console.log(MapM.values()) //MapIterator {1, 2}
    console.log(MapM.keys())   //MapIterator {"a", "b"}
    console.log(MapM.entries()) //MapIterator {"a" => 1, "b" => 2}
    MapM.forEach(x => console.log(x)) //1 2
    //总结:Map的values和keys,entries方法 返回一个遍历起接口可以调用for of
    //调用forEach 无返回值 

3.Map的几个经典面试题 

1.如何把Map转为数组

console.log([...new Map([["a", 1], [‘b‘, 2]])]) //[["a", 1], [‘b‘, 2]]

 

 

 

以上是关于ES6 Set和Map的那点事的主要内容,如果未能解决你的问题,请参考以下文章

[转]UIView 和 CALayer的那点事

winform和WPF的那点事~

python与中文的那点事

Ajax的那点事

设计和UML的那点事

关于JavaScript的作用域你应该了解的那点事!