zoukankan      html  css  js  c++  java
  • JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

    JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach。

      7、for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组,但是不推荐这样使用,

       for–in是用来循环带有字符串key的对象的方法)。

       缺点:只能获得对象的键名,不能直接获取键值。

       var obj = {a:1, b:2, c:3};
       for (var prop in obj) {
        console.log("obj." + prop + " = " + obj[prop]);
       }
       // print: "obj.a = 1" "obj.b = 2" "obj.c = 3"


      8、for of (在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。

       for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)

       等可迭代的数据结构等(不包括对象))。

       // 字符串
       let str = "hello";
       for (let s of str) {
        console.log(s); // h e l l o
       }


       // 遍历数组
       let list = [1, 2, 3, 4, 5];
       for (let e of list) {
        console.log(e);
       }
       // print: 1 2 3 4 5


       // 遍历对象
       obj = {a:1, b:2, c:3};
       for (let key of Object.keys(obj)) {
        console.log(key, obj[key]);
       }
       // print: a 1 b 2 c 3
       说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。

       一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

       // entries (entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。语法:array.entries()

       IE11 及其更早的浏览器版本不支持 entries 方法

       let arr = ['a', 'b', 'c'];
       for (let pair of arr.entries()) {
        console.log(pair);
       }
       // [0, 'a']
       // [1, 'b']
       // [2, 'c']

    补充:对forEach, map 的补充。它俩都可以传三个参数 value数组中的当前项,index当前项的索引,array原始数组。

    1. forEach 在对 item 进行修改的时候,如果 item 是原始类型的值,item 对应的 的内存地址实际并没有变化,进行操作的只是值。

    如果 item 是 引用类型的值,item 对应多的内存地址也没有变化,但是内存地址对应的值,已经重写了。

    2. map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的,只能通过生成新的数据来达到修改的目的,因此直接对数组元素对象属性进行操作的行为都是不可取的。这种思想其实有很多好处,最直接的就是避免了数据的隐式修改。

    以下代码为IE6-8 forEach,map的兼容写法:

     Array.prototype.myForEach = function myForEach(callback,context){  
            context = context || window;  
            if('forEach' in Array.prototype){
                this.forEach(callback,context); 
                return;  
            }
            //IE6-8下自己编写回调函数执行的逻辑  
            for(var i = 0,len = this.length; i < len;i++) {  
                callback && callback.call(context,this[i],i,this);  
            }  
        }   
        Array.prototype.myMap = function myMap(callback,context){  
            context = context || window;  
            if('map' in Array.prototype){
                return this.map(callback,context); 
            }
            //IE6-8下自己编写回调函数执行的逻辑  
            var newArr = [];
            for(var i = 0,len = this.length; i < len;i++) {  
                newArr.push(callback.call(context,this[i],i,this));  
            }  
            return newArr
        }   
        
        var eachArr1 = [1,2,3,4,5];
        eachArr1.myForEach(function(item,index,arr){
            arr[index] = item * 2
        })
        var eachArr2 = eachArr1.myMap(function(item,index){
            return item * 3;
        })
        console.log(eachArr1)
    
        console.log(eachArr2)

    ---------------------

    参考:https://www.cnblogs.com/shuiyi/p/5058524.html

     

  • 相关阅读:
    python中常用的模块二
    python中常用的模块一
    python类与类的关系
    python类的成员
    关于python的面向对象
    python内置函数2
    python内置函数
    python fileinput模块
    python生成器
    python 迭代器
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/10450015.html
Copyright © 2011-2022 走看看