数组循环遍历方法

预计阅读时间: 小于 1 分钟

初始化数组

代码示例
1var arr = [
2	{
3		id: 1,
4		name: "zhangsan"
5	},
6	{
7		id: 2,
8		name: "lisi"
9	},
10	{
11		id: 3,
12		name: "xiaoming"
13	},
14	{
15		id: 4,
16		name: "huasheng"
17	}
18];

1、for 循环

代码示例
1var arr1 = [];
2for (var i = 0, len = arr.length; i < len; i++) {
3	arr1.push(arr[i].id);
4}
5console.log(arr1); // [1, 2, 3, 4]

2、forEach 循环

代码示例
1var arr2 = [];
2/**
3 * item:数组元素(必选)
4 * index:数组元素索引值(可选)
5 * array:参数本身(可选)
6 **/
7arr.forEach(function (item, index, array) {
8	console.log(item);
9	console.log(index); // 0,1,2,3,4
10	arr2.push(item.id);
11});
12console.log(arr2); // [1, 2, 3, 4]

3、for...in 循环

代码示例
1/* for...in循环可用于遍历对象和数组,推荐用于遍历对象 */
2var arr3 = [];
3for (var key in arr) {
4	console.log(key); // 0,1,2,3
5	arr3.push(arr[key].name);
6}
7console.log(arr3); // ["zhangsan", "lisi", "xiaoming", "huasheng"]

4、for...of 循环

代码示例
1/**
2 * for...of循环
3 * 可用于遍历数组和对象,推荐遍历数组
4 * key():对键名的遍历
5 * value():对键值的遍历
6 * entries():对键值对的遍历
7 */
8let arr4 = ["iOS", "Android", "Linux"];
9// 遍历数组元素
10for (let item of arr4) {
11	console.log(item); // iOS,Android,Linux
12}
13// 遍历数组索引
14for (let item of arr4.keys()) {
15	console.log(item); // 0,1,2
16}
17// 遍历数组索引和值
18for (let [index, item] of arr4.entries()) {
19	console.log(index + ":" + item); // 0:iOS,1:Android,2:Linux
20}

5、map 循环

代码示例
1/**
2 * map循环
3 * 会返回一个新的数组,数组中的元素为原数组元素调用函数处理后的值
4 * 该方法会按照原数组元素顺序依次处理元素
5 * 该方法不会修改调用它的原始数组本身
6 * 该方法回调函数可接收三个参数,参数一:数组元素,参数二(可选):数组元素索引值,参数三(可选):数组本身
7 * */
8arr.map(function (item, index, array) {
9	console.log(index + ":" + item.name);
10});
11
12var arr5 = arr.map(function (item) {
13	return item.name;
14});
15console.log(arr5); // ["zhangsan", "lisi", "xiaoming", "huasheng"]

6、reduce()方法

代码示例
1var arr6 = [
2	{
3		id: 10,
4		name: "小明",
5		age: 20
6	},
7	{
8		id: 21,
9		name: "小康",
10		age: 24
11	},
12	{
13		id: 16,
14		name: "小凯",
15		age: 20
16	}
17];
18
19/* array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
20 * total(必需):初始值or计算结束后返回的值
21 * currentValue(必需):当前元素
22 * currentIndex(可选):当前元素的索引
23 * arr(可选):当前元素所属的数组对象
24 * initialValue(可选):传递给函数的初始值
25 */
26
27// 求年龄总和
28var totalAge = arr6.reduce(function (total, item) {
29	return total + item.age;
30}, 0);
31console.log(totalAge);
32
33// 求年龄最大的那个人
34var ageMax = arr6.reduce(function (item, people) {
35	return (item.age || 0) > people.age ? item : people;
36}, {});
37console.info(ageMax);
38console.log(ageMax.age);

7、filter()方法

代码示例
1/* filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 */
2let arr7 = [
3	{
4		id: 1,
5		num: 101
6	},
7	{
8		id: 3,
9		num: 201
10	},
11	{
12		id: 2,
13		num: 10
14	}
15];
16
17/* 参数一:数组元素
18 * 参数二:数组元素索引
19 * 参数三:原数组对象
20 *  */
21
22// 组合使用
23var totalScore = arr6
24	.filter(function (item) {
25		return item.name;
26	})
27	.map(function (choose) {
28		return choose.age;
29	})
30	.reduce(function (total, age) {
31		return total + age;
32	}, 0);
33console.log(totalScore);

8、Array.from()方法

代码示例
1let arrTest = [1, 7, "", 6, 8, ""];
2let arr8 = Array.from(arrTest, n => n || 0);
3console.log(arr8); // [1,7,0,6,8,0]