【JS】遍历数组的常用方法（举例版）

微信订阅号：Rabbit_svip

总结了几种常用的遍历方法。

只提供基础例子，高深用法请自己查文档。

微信订阅号：Rabbit_svip

for

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 输出: 1, 2, 3, 4, 5

当然，还有 while 循环，我懒得写。

forEach

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(item) {
  console.log(item);
})

// 输出: 1, 2, 3, 4, 5

forEach 函数里可以传3个参数，可以看【JS】数组forEach

值得注意的是，forEach 是不能使用 break 和 continue 的。

map

map 的使用方法和 forEach 类似，但 map 是有返回值的，可以返回一个新数组。

var arr = [1, 2, 3, 4, 5];

var doubleNumbers = arr.map(item => {
  return item * 2;
});

console.log(doubleNumbers);
// 输出: 2, 4, 6, 8, 10

every

every 能否继续遍历，取决于返回值，默认返回 false，所以默认只遍历第一个元素。如需全部遍历，可以把返回值设置成 true。

var arr = [1, 2, 3, 4, 5];

arr.every(function(item) {
  console.log(item);
  return true;
});

// 输出: 1, 2, 3, 4, 5

every 和 forEach 的使用方法很像，every 的出现解决了 forEach 中无法 break 和 continue 的问题。

var arr = [1, 2, 3, 4, 5];

// every break
arr.every(function(item) {
  if (item === 3) {
    return false;
  } else {
    console.log(item);
    return true;
  }
})

// 输出：1，2


// every continue
arr.every(function(item) {
  if (item !== 3) {
    console.log(item);
  }
  return true;
})

// 输出: 1, 2, 4, 5

some

some 的用法和 every 的用法几乎一样，不同点在于，every 遇到 true 才继续遍历，some 遇到 true 会停止遍历。

var arr = [1, 2, 3, 4, 5];

arr.some(function(item) {
  console.log(item)
  if (item === 3) {
    return true;
  }
})

// 输出: 1, 2, 3

for ... in ...

能遍历数组，但主要是为 object 设计的，所以用 for...in... 遍历数组会有瑕疵。

var arr = [1, 2, 3, 4, 5];

for (var key in arr) {
  // 这里的 key 是字符串
  console.log(arr[key])
}

// 输出: 1, 2, 3, 4, 5

瑕疵：往数组上挂一个属性，也会遍历出来

var arr = [1, 2, 3, 4, 5];

arr.a = 9;
for (var key in arr) {
  // 这里的 key 是字符串
  console.log(key, arr[key])
}

// 输出: 
// 0 1,
// 1 2,
// 2 3,
// 3 4,
// 4 5,
// a 9

for of

for of 能遍历一切能遍历的，比如字符串。

var arr = [1, 2, 3, 4, 5];
for (var item of arr) {
  console.log(item)
}

// 输出: 1, 2, 3, 4, 5

filter

filter 是一个过滤器，用法如下。

const arr = [1, 2, 3, 4, 5];

var result = arr.filter(function(item) {
  return item < 4;
})

console.log(result);

// 输出: [1, 2, 3]

find

find 用于找出第一个符合条件的数组成员，如果找不到则返回 undefined。

const arr = [1, 2, 3, 4, 5];

var result = arr.find(function(item) {
  return item === 2;
})

console.log(result);
// 输出: 2

reduce

reduce 主要作用是累加器。也能做一些重构数据结构的工作（当然，也有很多方法代替）。

var arr = [1, 2, 3, 4, 5]

/* 【累加器】 */
var sumVal = arr.reduce(function(sum, number) {
  return sum += number;
}, 0)

console.log(sumVal);

// 输出: 15

提取数据，并重组成一个新数组。

// 提取数组
var primariColors = [
  {color: 'red'},
  {color: 'yellow'},
  {color: 'green'}
]

var colors = primariColors.reduce(function(previous, primariColor) {
  previous.push(primariColor.color);
  return previous;
}, [])

console.log(colors);

// 输出: ["red", "yellow", "green"]