1. 首页
  2. web前端

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<len; 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]
文章目录

原创文章,作者:小克

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=833

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(1条)

  • aike 2019年12月6日 18:06

    感谢楼主分享。

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code