• js 数组遍历


    map、filter、forEach、every、some

    http://www.runoob.com/jsref/jsref-obj-array.html

    1、在字符串中使用 map

    在一个String上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

    var map = Array.prototype.map
    var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
    // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
    

    2、JavaScript中 map 函数和 filter 的区别

    • filter 检测数值元素,并返回符合条件所有元素的数组。(对原数组的过滤)
    • map 通过指定函数处理数组的每个元素,并返回处理后的数组。(对原数组的加工)
    var arr = [1, 2, 3, 4];
    var newArr = arr.filter(function(item) { 
            if (item % 2 !== 0) {
                return item;
            } 
    });
    console.log(newArr); //[1, 3]
    console.log(arr); //[1, 2, 3, 4]
    
    var newArr = arr.map(function(item) {
            if (item % 2 !== 0) {
                return item;
            } 
    });
    console.log(newArr);//[1, undefined, 3, undefined]
    
    var arr = [1, 2, 3, 4];
    var newArr = arr.map(function(item) {
            return item * 2;
    });
    console.log(newArr);//[2, 4, 6, 8]
    console.log(arr);//[1, 2, 3, 4]
    

    3、易犯错误

    通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。
    但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误

    // 下面的语句返回什么呢:
    ["1", "2", "3"].map(parseInt);
    // 你可能觉的会是[1, 2, 3]
    // 但实际的结果是 [1, NaN, NaN]
    
    // 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
    // map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
    // 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
    /*
    //应该使用如下的用户函数returnInt
    
    function returnInt(element){
      return parseInt(element,10);
    }
    
    ["1", "2", "3"].map(returnInt);
    // 返回[1,2,3]
    */
    

    forEach 无法跳出循环,可使用 Array.everyArray.some

    [1,2,3].some(function(i) {
        if(i == 2) return true;
        console.log(i);
    });
    

    4、NodeList不是数组

    inStorageDateArr.some is not a function
    
    verifyBillingDate: function() {
      var billingDateValue=new Date(document.querySelector("#billingDate").value);
      var inStorageDateArr=document.querySelectorAll(".inStorageDate");
      billingDateMore=inStorageDateArr.some(function(currentValue,index){
          return $.dateDiff("d",new Date(currentValue),billingDateValue)>=0
      });
    }
    
    // 用for循环
    var inStorageDateList=document.querySelectorAll(".inStorageDate");
    for(var i = 0; i < inStorageDateList.length; i++){
        inStorageDateList[i].style.border="1px solid #f30";
    }
    

    for in 和 for of

    for in (es5)遍历的是数组的索引(即键名)
    for of (es6)遍历的是数组元素值

    for in适合遍历对象,但是Array也是对象

    Array是数组,也是Dictionary,也是Stack
    
    var dict=new Array();//作为Dictionary使用
     
    dict['我']='wo';
     
    dict['爱']='ai';
     
    dict['你']='ni';
     
    alert(dict['我']); //通过键值调用
     
    alert(dict.爱); //像调用属性一样调用(动态语言的特性)
     
     
    for(var k in dict){ //js中的遍历
     alert(k);  //'我','爱','你'-->打印出的是key
    }
     
    for(var k of dict){ //js中的遍历
     alert(k);  //'wo','ai','ni'-->打印出的是value
    }
     
    var arr = [1,2,3,4,5];//Array的简化创建方式
     
    var arr = {"irving":21,"cloud":20};//字典风格的创建方式
    
  • 相关阅读:
    软件实施工程师是一个什么样的工作?他的具体工作内容是什么?发展前景怎样?
    做金融(基金、证券)方面的软件实施工程师有没有发展前途?职业发展空间如何。
    做软件实施工程师的一点建议
    系统实施工程师主要工作职则
    软件实施工程师
    UE编辑器编译和运行java设置
    猜数字
    猜数字
    Problem G
    Problem G
  • 原文地址:https://www.cnblogs.com/papi/p/7115817.html
Copyright © 2020-2023  润新知