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

2019-6-28 hubo Web前端

利用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中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)
//code from http://caibaojian.com/for-loop.html
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: 5

网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved