JavaScript数组循环的几种写法，包含ES6

利用Javascript map(),reduce()和filter()数组方法可以帮助您编写更加声明性、流畅的风格代码。
而不是积累起来for循环和嵌套来处理列表和集合中的数据&＃xff0c;您可以利用这些方法更好地将逻辑组织成功能的构建块&＃xff0c;然后将它们链接起来以创建更可读和更易于理解的实现。
ES6还为我们提供了一些更好的数组方法&＃xff0c;比如.find,.findIndex,.of和for…of循环&＃xff01;

数组循环

var officers &＃61; [{ id: 20, name: &＃39;Captain Piett&＃39; },{ id: 24, name: &＃39;General Veers&＃39; },{ id: 56, name: &＃39;Admiral Ozzel&＃39; },{ id: 88, name: &＃39;Commander Jerjerrod&＃39; }
];
// What you need
// [20, 24, 56, 88]


for循环

使用率最高&＃xff0c;也是最基本的一种遍历方式

var officersIds &＃61; [];
for(var i&＃61;0,len&＃61;officers.length;i}
console.log(officersIds); // [20,24,56,88]


forEach循环

forEach中传入要执行的回调函数&＃xff0c;函数有三个参数。第一个参数为数组元素(必选)&＃xff0c;第二个参数为数组元素索引值(可选)&＃xff0c;第三个参数为数组本身(可选)

var officersIds &＃61; [];
officers.forEach(function (officer,index,array) {console.log(index); //0,1,2,3,console.log(officer); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officer.id);
});
console.log(officersIds); //[20,24,56,88]


for in循环

for…in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历JSON

var officersIds &＃61; [];
for(var key in officers){console.log(key); // 0 1 2 3 返回数组索引console.log(officers[key]); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(officers[key].id);
}
console.log(officersIds); //[20,24,56,88]


for of循环

可循环数组和对象&＃xff0c;推荐用于遍历数组。

for…of提供了三个新方法&＃xff1a;

key()是对键名的遍历&＃xff1b;
value()是对键值的遍历&＃xff1b;
entries()是对键值对的遍历&＃xff1b;

let arr &＃61; [&＃39;科大&＃39;, &＃39;政法&＃39;, &＃39;开发&＃39;];
for (let item of arr) { console.log(item); // 科大 政法 开发
}
// 输出数组索引
for (let item of arr.keys()) { console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) { console.log(item &＃43; &＃39;:&＃39; &＃43; val); // 0:科大 1&＃xff1a;政法 2&＃xff1a;开发
}


var officersIds &＃61; [];
for (var item of officers) {console.log(item); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}officersIds.push(item.id);
}
console.log(officersIds); // [20,24,56,88]
// 输出数组索引
for(var item of officers.keys()){console.log(item); // 0 1 2 3
}
// 输出内容和索引
for (let [item, val] of officers.entries()) {console.log(item) // 0 1 2 3 输出数组索引console.log(val);//{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}console.log(item &＃43; &＃39;:&＃39; &＃43; val);
}


map循环

map() 会返回一个新数组&＃xff0c;数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

map 不修改调用它的原数组本身。

map()中传入要执行的回调函数&＃xff0c;函数有三个参数。第一个参数为数组元素(必选)&＃xff0c;第二个参数为数组元素索引值(可选)&＃xff0c;第三个参数为数组本身(可选)

var arr &＃61; [{name:&＃39;a&＃39;,age:&＃39;18&＃39;},{name:&＃39;b&＃39;,age:&＃39;19&＃39;},{name:&＃39;c&＃39;,age:&＃39;20&＃39;}
];
arr.map(function(item,index) {if(item.name &＃61;&＃61; &＃39;b&＃39;) {console.log(index) // 1}
})


数组加一

var officersIds &＃61; officers.map(function (officer) {return officer.id
});
console.log(officersIds); //[20,24,56,88]


reduce

array.reduce(function callback(accumulator, currentValue, currentIndex, array){}[, initialValue])

var peoples &＃61; [{id: 10,name: "Poe Dameron",years: 14,},{id: 2,name: "Temmin &＃39;Snap&＃39; Wexley",years: 30,},{id: 41,name: "Tallissan Lintra",years: 16,},{id: 99,name: "Ello Asty",years: 22,}
];


输出他们的年龄总数

var totalYears &＃61; peoples.reduce(function (total, people) {console.log(total);console.log(people);return total &＃43; people.years;
}, 0);
// const totalYears &＃61; people.reduce((acc, people) &＃61;> acc &＃43; people.years, 0);
console.log(totalYears); //30


求年龄最大的那个人

var oldest &＃61; peoples.reduce(function (oldest, people) {return (oldest.years || 0) > people.years ? oldest : people;
}, {});
console.log(oldest); //{id: 2, name: "Temmin &＃39;Snap&＃39; Wexley", years: 30}
console.log(oldest.years); //82


filter

filter() 方法创建一个新的数组&＃xff0c;新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr){}, thisValue)演示var designer &＃61; peoples.filter(function (people) {return people.job &＃61;&＃61;&＃61; "designer";
});


组合使用

var totalScore &＃61; peoples.filter(function (person) {return person.isForceUser;}).map(function (choose) {return choose.mathScore &＃43; choose.englishScore;}).reduce(function (total, score) {return total &＃43; score;}, 0);


Array.from()

var divs &＃61; document.querySelectorAll(&＃39;div.pane&＃39;);
var text &＃61; Array.from(divs, (d) &＃61;> d.textContent);
console.log("div text:", text);
// Old, ES5 way to get array from arguments
function() { var args &＃61; [].slice.call(arguments);//...
}// Using ES6 Array.from
function() { var args &＃61; Array.from(arguments);//..
}
var filled &＃61; Array.from([1,,2,,3], (n) &＃61;> n || 0);
console.log("filled:", filled);
// &＃61;> [1,0,2,0,3]


参考 http://caibaojian.com/

供参考&＃xff01;