美文网首页
木易杨前端面试题第四题 set 和 map

木易杨前端面试题第四题 set 和 map

作者: 陆碌 | 来源:发表于2021-01-25 15:24 被阅读0次

    第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别?

    set

    1.set的定义 set是数组的小弟

    set是类似于数组的数据结构,里面的值唯一

    2.set的特点

    值唯一

    3.set的朋友

    [...set] 拓展运算符和 Array.from(set),可以帮set 变回成数组

    let set1= new Set([1,1,2,3,4])
    let arr1= [...set1]
    console.log(arr1);//[ 1, 2, 3, 4 ]
    
    let set2= new Set([1,1,2,3,4])
    let arr2 = [Array.from(set2)]
    console.log(arr2);//[ 1, 2, 3, 4 ]
    

    4.set的属性

    size

    5.set的方法

    add() delete() has() clear()

    6.set的add()

    • NaN算一个
    • object 算两个
    • "1" 和 1 算两个

    7.set 用途

    数组去重

    [...new Set(array)]
    

    字符串去重

    [...new Set('ababbc')].join('')
    

    并集(Union)、交集(Intersect)和差集(Difference)。

    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    
    // 并集  
    //a,b所有值,本质上还是去重
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    // 交集  
    //判断a中的值是否出现在b中  出现的就保留
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}
    
    // (a 相对于 b 的)差集
    // 判断a中的值是否出现在b中  出现的就删掉  得出 a中的唯一值
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {1}
    

    8set 循环

    for(let item of set) 即可


    WeakSet

    WeakSet只能存储对象 和 WeakSet 中的对象都是弱引用


    Map

    定义 map是对象的大哥

    • Map就是一个牛逼版本的object 他也是键值对的结构,但是他的键可以是任意值,不限定是字符串,object的键则必须是字符串

    从new开始去了解map

    let m =new map()

    给map赋值

    • set赋值
      const o = {p: 'Hello World'};
      m.set(o, 'content')
      m.get(o) // "content"
    • 数组赋值
      const map = new Map([
      ['name', '张三'],
      ['title', 'Author']
      ]);

    是一个大数组包着好几个小数组
    [ ['name', '张三'] , ['title', 'Author'] ]
    小数组分别对应了键和值

    给map继续赋值

    会覆盖掉前面的

    map取值

    如果key不存在会出现undefined

    map取值的注意点

    只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。
    const map = new Map();
    map.set(['a'], 555);
    map.get(['a']) // undefined
    两个对象引用的地址不一样,所以会报错,正确的写法如下
    const map1 = new Map();
    const arr1 = ["a"]
    map1.set(arr1, 555);
    var mresult1 = map1.get(arr1) // 555

    遍历map

    const 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);
    }
    // "F" "no"
    // "T" "yes"
    
    // 等同于使用map.entries()
    for (let [key, value] of map) {
      console.log(key, value);
    }
    // "F" "no"
    // "T" "yes"
    

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

    const 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 转为对象

    function strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k,v] of strMap) {
        obj[k] = v;
      }
      return obj;
    }
    
    

    对象转为 Map

    let obj = {"a":1, "b":2};
    let map = new Map(Object.entries(obj));
    

    map转json json转map

    相关文章

      网友评论

          本文标题:木易杨前端面试题第四题 set 和 map

          本文链接:https://www.haomeiwen.com/subject/ijaszktx.html