zoukankan      html  css  js  c++  java
  • 数组迭代方法

    常用的数组迭代方法,很多人第一想到的就是for循环,比如需要迭代出下面数组peoples年龄(age)大于30的人名(name)。

     1 var peoples = [ { 
     2     name: 'Agraj', 
     3     gender:'M', 
     4     age: 29, 
     5     address: { 
     6         city: 'Delhi', pincode: '110064' 
     7     } 
     8 }, { 
     9     name: 'Mark', 
    10     gender:'M', 
    11     age: 35, 
    12     address: { 
    13         city: 'West Bengal', pincode: '220013' 
    14     } 
    15 }, { 
    16     name: 'Lance', 
    17     gender:'M', 
    18     age: 39, 
    19     address: { 
    20         city: 'Chandigarh', 
    21         pincode: '201201' 
    22     } 
    23 }, { 
    24     name: 'Vikas', 
    25     gender:'M', 
    26     age: 21, 
    27     address: { 
    28         city: 'Noida', pincode: '201301' 
    29     } 
    30 }, { 
    31     name: 'Kanika', 
    32     gender:'F', 
    33     age: 21, 
    34     address: { 
    35         city: 'Noida', 
    36         pincode: '201301' 
    37     } 
    38 }]; 
    39 for (var i = 0; i < peoples.length; i++ ) { 
    40     if (peoples[i].age > 30) { 
    41         console.log(peoples[i].name + ':' + peoples[i].age); 
    42     } 
    43 }

    其实ES5为数组定义了五个迭代方法:

    • forEach():没有返回值,只是针对每个数组项调用指定的函数(callbackfn)
    • every(): 测试数组的所有元素是否都符合指定函数的条件,只要有有一个元素不符合,返回的都会是false
    • some(): 和every()方法类似,不同的是,some()方法在调用指定的函数callbackfn指定的条件符合就会返回true,不符合则返回false
    • filter(): 每个数组项调用指定的函数,条件为true的将返到一个新数组中
    • map(): 每个数组项调用指定的函数,返回每次函数调用的结果组成一个新数组

    在这5个数组中,前三个不会生成新的数组,而后两个会生成一个新的数组。

    1、forEach

    语法:array.forEach(function(currentValue, index, arr), thisValue)

    1 peoples.forEach(function (item,index,arr) { 
    2     if (item.age > 30) { 
    3         console.log(item.name + ':' + item.age); 
    4     } 
    5 });

    也可以将名字重组放在一个新的数组中:

    1 var names = []; 
    2  peoples.forEach(function (people, index) { 
    3     names.push(people.name); 
    4 }); 
    5 console.log(names); // ["Agraj", "Mark", "Lance", "Vikas", "Kanika"]

    2、every

    还是上面开头的数组,如果每一位的年龄都大于或等于30,就会返回“都大于或等于30岁了”,反之返回“不是所有人都大于30岁了”。

    语法:array.every(function(currentValue,index,arr), thisValue)

    function bigAge(ele,index,arr){ 
        return (ele.age >= 30); 
    } 
    var isBigPeople = peoples.every(bigAge); 
    if (isBigPeople) { 
        console.log('都大于或等于30岁了'); 
    } else { 
        console.log('不是所有人都大于30岁了'); 
    }

    3、some

    只要数组中年龄age有一个大于或等于30,就会返回“有部分人还是年纪大了”,反之返回“你们都还很年轻”:

    语法:array.some(function(currentValue,index,arr),thisValue)

    1 function OldAge(ele,index,array){ 
    2     return (ele.age >= 30); 
    3 } 
    4 var isOldPeople = peoples.some(OldAge); 
    5 if (isOldPeople) { 
    6     console.log('有部分人还是年纪大了'); 
    7 } else { 
    8     console.log('你们都还年轻'); 
    9 }
    4、map
    map()
    方法返回一个由原数组中的每个元素调用一个指定函数callbackfn后的返回值组成的新数组。如果符合callbackfn会返回符合条件的一个值,将所有返回的值再创建一个新数组。
    1 var usersDb = peoples.map(function (user, index) {
    2     user.id = index + 1; 
    3     return user; 
    4 }); 
    5 console.table(usersDb);

    5、filter

    filter() 方法使用指定的函数callbackfn测试所有元素,并创建一个包含所有通过测试的元素的新数组。

    var guys = peoples.filter(function (user) { 
        return user.gender === 'M'; 
    }); 
    console.table(guys); 

  • 相关阅读:
    查看 FormData 中已存在的值
    dedecms 后台可以上传mp4,但无法选择
    dedecms 文章根据 权重排序
    js 单行注释
    dedecms给图片加水印覆盖整张图片
    Nginx服务器 配置 https
    dedecms 后台 菜单点击后打开的慢
    用 PHP文件引入css样式
    TFT、LCD、OLED、LPTS、CRT等显示屏的区别
    ORCAD中的一些操作小技巧
  • 原文地址:https://www.cnblogs.com/xiaoli52qd/p/7399781.html
Copyright © 2011-2022 走看看