数组迭代方法

Posted 2020-10-03 未知小未来

常用的数组迭代方法，很多人第一想到的就是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);