javascript中数组遍历的方法

1、for循环

返回值：无

最常用也是最简单的遍历方式，可以使用break或者continue终止，一个优化的方法是把length保存起来，避免重复获取，当数组长度很大时会体现出优化效果。

let arr = [1,2,3,4,5,6];
for(let i = 0, len = arr.length;i < len; i++){
    if(arr[i] > 4) {
      break;
    }
    console.log(arr[i]); 
    // 1
    // 2
    // 3
    // 4
}

tips：
break结束循环；
continue结束本次循环，意为其后代码不执行，但是循环继续。

2、for of循环

返回值：无

for of是es6新增的遍历数据的方式，它的原理是循环内部调用数据结构的Symbol.iterator方法，所以它可以遍历字符串、对象、Set和Map结构、数组以及类数组对象。当它遍历数组时，获取的是数组的值。它也可以使用break或者continue跳出循环。

let arr = [1, 2];
for(let value of arr){
  console.log(value);  // 1 2
}

知识点：阮一峰for of循环

3、forEach()

返回值：无

forEach()是ES5的方法，它对数组中的每一项运行给定的函数，没有返回值，本质上与使用for循环迭代数组一样。不能使用break或者continue跳出循环，return无效。

let arr = [1, 2];
const a = () => {
  arr.forEach((item, index, arr) => {
  /* item 数组每一项
     index 索引
     arr 数组本身
  */
    return item === 1
  });
}
console.log(a());  // undefined

4、map()

返回值：array

map()对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组，不改变原数组。

let arr = [1, 2];
const newArr = arr.map((item, index, arr) => {
  return item * 3
});
console.log(newArr);  // [3, 6]
console.log(arr); // [1, 2]

5、filter()

返回值：array

filter()对数组中的每一项运行给定的函数，返回该函数会返回true的项组成的数组，不改变原数组。如果函数每一项都返回false，那么filter()会返回空数组。

let arr = [1, 2];
const newArr = arr.filter((item, index, arr) => {
  return item > 1
});
console.log(newArr);  // [2]
console.log(arr); // [1, 2]

6、every()

返回值：boolean

every()对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.every((item, index, arr) => {
  return item > 4
});
console.log(value);  // false

7、some()

返回值：boolean

some()对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.some((item, index, arr) => {
  return item > 4
});
console.log(value);  // true

8、find()

返回值：any

find()找出符合条件的第一个数组成员并返回该成员。如果没有符合条件的成员则返回undefined。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.find((item, index, arr) => {
  return item % 2 === 0
});
console.log(value); // 2


const value1 = arr.find((item, index, arr) => {
  return item >10
});
console.log(value1); // undefined

9、findIndex()

返回值：number

findIndex()找出符合条件的第一个成员的位置，如果都不符合条件则返回-1。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.findIndex((item, index, arr) => {
  return item > 5
});
console.log(value); // 5



const value1 = arr.findIndex((item, index, arr) => {
  return item > 15
});
console.log(value1); // -1

10、reduce()和reduceRight()

返回值：any

这两个方法是ES5新增的归并方法，它们会迭代数组的所有项然后构建一个最终返回的值。reduce()从数组的第一项开始，逐个遍历到最后，而reduceRight()是从数组的最后一项开始，向前遍历到第一项。它们都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。它们不回改变原数组，在数组求和时非常有用。

传给它们的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.reduce((prev, cur, index, arr) => {
  return prev + cur
});
console.log(value);  // 55

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const value = arr.reduceRight((prev, cur, index, arr) => {
  return prev + cur
}, 10);
console.log(value);  // 65

11、keys()、values()、entries()

返回值：无

它们是ES6提供的新方法，均会返回遍历器对象，可以用for... of遍历，区别是keys()是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历。

let arr = [1, 2, 3];
for(let index of arr.keys()){
  console.log(index);  // 0 1 2
}

for(let value of arr.values()){
  console.log(value); // 1 2 3
}

for(let [index, item] of arr.entries()){
  console.log(index, item); // 0 1, 1 2, 2 3 
}

由此发现省略数组方法时，其实默认是调用values()，跟2中的for of结果一致。

知识点：阮一峰es6数组遍历

简易小demo

let arr = [{
  id: 1,
  name: 'hello',
  age: 20
}, {
  id: 2,
  name: 'hello world',
  age: 23
}, {
  id: 3,
  name: 'hello sakura',
  age: 27
}, 
5,
6,
7,
7];
const dArr = Array.from(new Set(arr));
const newArr = dArr.map((item, index,arr) => {
  if(item.age) {
    return item.age
  } else {
    return item * 3
  }
})
newArr.sort((a, b) => b - a)
console.log(newArr); // [ 27, 23, 21, 20, 18, 15 ]

简单的说

虽然网上关于数组遍历的文章铺天盖地，但是看得再多，始终是别人的，方法如此之多，光看是记不住的，唯有自己摸索才能记得更牢，所谓好记性不如烂笔头。本篇文章过于基础，不喜勿喷。

javascript中数组遍历的方法

悦读