es6 嵌套数组循环_JavaScript数组循环的几种写法，包含ES6

利用Javascript map(),reduce()和filter()数组方法可以帮助您编写更加声明性、流畅的风格代码。

而不是积累起来for循环和嵌套来处理列表和集合中的数据，您可以利用这些方法更好地将逻辑组织成功能的构建块，然后将它们链接起来以创建更可读和更易于理解的实现。

ES6还为我们提供了一些更好的数组方法，比如.find,.findIndex,.of和for..of循环！

数组循环

var officers = \[

{ id: 20, name: 'Captain Piett' },

{ id: 24, name: 'General Veers' },

{ id: 56, name: 'Admiral Ozzel' },

{ id: 88, name: 'Commander Jerjerrod' }

\];

// What you need

// \[20, 24, 56, 88\]

for循环

使用率最高，也是最基本的一种遍历方式

var officersIds = \[\];

for(var i=0,len=officers.length;i

officersIds.push(officers\[i\].id);

}

console.log(officersIds); // \[20,24,56,88\]

forEach循环

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

var officersIds = \[\];

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 = \[\];

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循环

可循环数组和对象，推荐用于遍历数组。

for...of提供了三个新方法：

key()是对键名的遍历；

value()是对键值的遍历；

entries()是对键值对的遍历；

let arr = \['科大讯飞', '政法BG', '前端开发'\];

for (let item of arr) {

console.log(item); // 科大讯飞 政法BG 前端开发

}

// 输出数组索引

for (let item of arr.keys()) {

console.log(item); // 0 1 2

}

// 输出内容和索引

for (let \[item, val\] of arr.entries()) {

console.log(item + ':' + val); // 0:科大讯飞 1：政法BG 2：前端开发

}

var officersIds = \[\];

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 + ':' + val);

}

map循环

map() 会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

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

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

var arr = \[

{name:'a',age:'18'},

{name:'b',age:'19'},

{name:'c',age:'20'}

\];

arr.map(function(item,index) {

if(item.name == 'b') {

console.log(index) // 1

}

})

数组加一

var officersIds = 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 = \[

{

id: 10,

name: "Poe Dameron",

years: 14,

},

{

id: 2,

name: "Temmin 'Snap' Wexley",

years: 30,

},

{

id: 41,

name: "Tallissan Lintra",

years: 16,

},

{

id: 99,

name: "Ello Asty",

years: 22,

}

\];

输出他们的年龄总数

var totalYears = peoples.reduce(function (total, people) {

console.log(total);

console.log(people);

return total + people.years;

}, 0);

// const totalYears = people.reduce((acc, people) => acc + people.years, 0);

console.log(totalYears); //30

求年龄最大的那个人

var oldest = peoples.reduce(function (oldest, people) {

return (oldest.years || 0) > people.years ? oldest : people;

}, {});

console.log(oldest); //{id: 2, name: "Temmin 'Snap' Wexley", years: 30}

console.log(oldest.years); //82

filter

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

array.filter(function(currentValue,index,arr){

}, thisValue)

演示

var designer = peoples.filter(function (people) {

return people.job === "designer";

});

组合使用

var totalScore = peoples

.filter(function (person) {

return person.isForceUser;

})

.map(function (choose) {

return choose.mathScore + choose.englishScore;

})

.reduce(function (total, score) {

return total + score;

}, 0);

Array.from()

var divs = document.querySelectorAll('div.pane');

var text = Array.from(divs, (d) => d.textContent);

console.log("div text:", text);

// Old, ES5 way to get array from arguments

function() {

var args = \[\].slice.call(arguments);

//...

}

// Using ES6 Array.from

function() {

var args = Array.from(arguments);

//..

}

var filled = Array.from(\[1,,2,,3\], (n) => n || 0);

console.log("filled:", filled);

// =\> \[1,0,2,0,3\]

加入微信群👆，每日分享全网好文章！