1.数组循环

  1. var officers = [
  3.     { id: 20, name: 'Captain' },
  5.     { id: 24, name: 'General' },
  7.     { id: 56, name: 'Admiral' },
  9.     { id: 88, name: 'Commander' }
  11. ];

2.for循环

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

  1. var officersIds = [];
  3. for(var i=0,len=officers.length;i<len; i++){
  5.     officersIds.push(officers[i].id);
  7. }
  9. console.log(officersIds); // [20,24,56,88]

3.forEach循环

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

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

4.for in循环

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

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

5.for of循环

可循环数组和对象，推荐用于遍历数组。
for…of提供了三个新方法：
key()是对键名的遍历；
value()是对键值的遍历；
entries()是对键值对的遍历；

  1. let arr = ['科大讯飞', '政法BG', '前端开发'];
  3. for (let item of arr) {  
  5.   console.log(item); //  科大讯飞  政法BG  前端开发
  7. }
  9. // 输出数组索引
  11. for (let item of arr.keys()) {  
  13.   console.log(item);  // 0 1 2
  15. }
  17. // 输出内容和索引
  19. for (let [item, val] of arr.entries()) {  
  21.   console.log(item + ':' + val); //  0:科大讯飞  1：政法BG  2：前端开发
  23. }
  25. var officersIds = [];
  27. for (var item of officers) {
  29.     console.log(item); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}
  31.     officersIds.push(item.id);
  33. }
  35. console.log(officersIds); // [20,24,56,88]
  37. // 输出数组索引
  39. for(var item of officers.keys()){
  41.     console.log(item); // 0 1 2 3
  43. }
  45. // 输出内容和索引
  47. for (let [item, val] of officers.entries()) {
  49.     console.log(item) // 0 1 2 3 输出数组索引
  51.     console.log(val);//{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}
  53.     console.log(item + ':' + val);
  55. }

6.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

    }

})

7.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://www.cnblogs.com/lufeibin/p/12080194.html