• 前端forEach在Array、map、set中的使用,weakset,weakmap


    数组:

    var s = ['a','b','c'];

    s.forEach(function(ele,index,array){

    console.log(ele);

    });

    Map:

    var map = new Map([[1:'a'],[2:'b'],[3:'c']]);

    map.forEach(function(value,key,map){

    console.log(value);

    });

    set:

    var set = new Set(['a','b','c']);

    set.forEach(function(ele,ele2,array){

    console.log(ele);

    });

    只获取特定的值:

    var s = ['a','b','c'];

    s.forEach(function(ele){

    console.log(ele)

    });

    Set实例的属性和方法

    Set结构的实例有以下属性。

    • Set.prototype.constructor:构造函数,默认就是Set函数。
    • Set.prototype.size:返回Set实例的成员总数。

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

    • add(value):添加某个值,返回Set结构本身。
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    • has(value):返回一个布尔值,表示该值是否为Set的成员。
    • clear():清除所有成员,没有返回值。
    • Array.from方法可以将Set结构转为数组。

      遍历操作

      Set结构的实例有四个遍历方法,可以用于遍历成员。

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

      需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用Set保存一个回调函数列表,调用时就能保证按照添加顺序调用。

    • Map实例的属性和方法


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

      • keys():返回键名的遍历器。
      • values():返回键值的遍历器。
      • entries():返回所有成员的遍历器。
      • forEach():遍历Map的所有成员。

      需要特别注意的是,Map的遍历顺序就是插入顺序。

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

      let 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方法、filter方法,可以实现Map的遍历和过滤(Map本身没有mapfilter方法)。

      let map0 = new Map()
        .set(1, 'a')
        .set(2, 'b')
        .set(3, 'c');
      
      let map1 = new Map(
        [...map0].filter(([k, v]) => k < 3)
      );
      // 产生Map结构 {1 => 'a', 2 => 'b'}
      
      let map2 = new Map(
        [...map0].map(([k, v]) => [k * 2, '_' + v])
          );
      // 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}
      

        

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

      (1)Map转为数组

      前面已经提过,Map转为数组最方便的方法,就是使用扩展运算符(...)。

      let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
      [...myMap]
      // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
      

        

      2)数组转为Map

      将数组转入Map构造函数,就可以转为Map。

      new Map([[true, 7], [{foo: 3}, ['abc']]])
      // Map {true => 7, Object {foo: 3} => ['abc']}
      

        

      (3)Map转为对象

      如果所有Map的键都是字符串,它可以转为对象。

      function strMapToObj(strMap) {
        let obj = Object.create(null);
        for (let [k,v] of strMap) {
          obj[k] = v;
        }
        return obj;
      }
      
      let myMap = new Map().set('yes', true).set('no', false);
      strMapToObj(myMap)
      // { yes: true, no: false }
      

        (4)对象转为Map

      function objToStrMap(obj) {
        let strMap = new Map();
        for (let k of Object.keys(obj)) {
          strMap.set(k, obj[k]);
        }
        return strMap;
      }
      
      objToStrMap({yes: true, no: false})
      // [ [ 'yes', true ], [ 'no', false ] ]
      

        

      (5)Map转为JSON

      Map转为JSON要区分两种情况。一种情况是,Map的键名都是字符串,这时可以选择转为对象JSON。

      function strMapToJson(strMap) {
        return JSON.stringify(strMapToObj(strMap));
      }
      
      let myMap = new Map().set('yes', true).set('no', false);
      strMapToJson(myMap)
      // '{"yes":true,"no":false}'
      

        

    • 另一种情况是,Map的键名有非字符串,这时可以选择转为数组JSON。

      function mapToArrayJson(map) {
        return JSON.stringify([...map]);
      }
      
      let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
      mapToArrayJson(myMap)
      // '[[true,7],[{"foo":3},["abc"]]]'
      

        

      (6)JSON转为Map

      JSON转为Map,正常情况下,所有键名都是字符串。

      function jsonToStrMap(jsonStr) {
        return objToStrMap(JSON.parse(jsonStr));
      }
      
      jsonToStrMap('{"yes":true,"no":false}')
      // Map {'yes' => true, 'no' => false}
      

        

      但是,有一种特殊情况,整个JSON就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为Map。这往往是数组转为JSON的逆操作。

      function jsonToMap(jsonStr) {
        return new Map(JSON.parse(jsonStr));
      }
      
      jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
      // Map {true => 7, Object {foo: 3} => ['abc']}
      

        

      WeakSet

      WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。

      首先,WeakSet的成员只能是对象,而不能是其他类型的值。

      其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。这个特点意味着,无法引用WeakSet的成员,因此WeakSet是不可遍历的。


      WeakMap 

      WeakMap结构与Map结构基本类似,唯一的区别是它只接受对象作为键名(null除外),不接受其他类型的值作为键名,而且键名所指向的对象,不计入垃圾回收机制。

  • 相关阅读:
    Django + uWSGI + Nginx 实现生产环境部署
    面试题(一)
    Python基础之路
    Tornado之实例和扩展
    Scrapy源码研究前戏
    算法之基本概念
    RedHat6.2系统安装ipvsadm+keepalived
    oracle11G 同时支持IPV4和IPV6配置
    redhat6.5 安装oracle11G
    python解析字体反爬
  • 原文地址:https://www.cnblogs.com/detanx/p/forEach.html
Copyright © 2020-2023  润新知