数组的遍历方法

1. for 循环

每次循环都从索引为0的开始，开销太大，因尽量少使用（但实际上使用的挺多的）

2. foreach循环

arr = [1,2,3,4,5]
arr.foreach(item, index, array) => {
   console.log(item) //1 2 3 4 5
}
//index是索引，array是数组[1,2,3,4,5]

缺点：不能用 return, break, continue

arr = [1,2,3,4,5]
arr.foreach(item, index, array) => {
   if(item === 1){
      //这里不能用break/continue/return
      break;//error
      continue; //error
      return; //error
   }
}

 

3. for ... in

for(var index in arr){
    console.log(index) //0 1 2 3 4
    console.log(index, arr[index])
}
注意哦，它循环返回的是索引
for in 把 arr当作一个对象来看，有属性
所以, for in 对应的是{ 0:1, 1:2, 2:3, 3:4, 4:5}

适用于对象，for in 对应的并不是数组

 

 

4. for ... of (es6, 推荐使用，能解决以上三个循环的缺陷)

for(var value of arr) {
     console.log(value) //[1,2,3,4,5]
}

 

for(var value of arr) {
     if(value === 1){
       break;
     }
}

可以响应 return, break, continue

------------------------------分界线--------------------------------

由此，我们来补充一下“伪数组”，什么是伪数组呢？

伪数组是 数据结构，具有 1）length属性； 2）按索引方式存储  的数据结构

比如：[0: 'aaa', 1: 'bbb', 2: 'ccc', length: 3] , 这就是一个伪数组

还有，arguments也是伪数组，你知道arguments是什么吗？

arguments: 用来获取不确定长度的参数个数，看下例：

function sum() {
            let num = 0
            console.log(arguments) //[0:1, 1:2, 2:3, 3:4, 4:5]

            Array.prototype.forEach.call(arguments, function(item) {
                num += item
            })
            return num
}
sum(1,2,3,4,5)

为了看的更明显，我截取了控制台的打印结果(arguments是长成这个样子的，并不是数组哦)：

想求sum累加和，需要用Array.prototype上用call改变arguments来实现

我们也可以用es6来写，比较简便，是这样子的：

Array.from(arguments).forEach(function(item) {
         num += item
})
return num

说到这里，再补充一点，es6“..."的用法

function add(...nums){
            let num = 0
            nums.forEach(function(item) {
                num += item
            })
}
add(1,2,3,4,5)

”..."这种写法叫 语法糖。糖，很甜；相对于它来讲，之前的写法太‘酸爽了'哈，所以叫语法糖，甜甜的，不酸爽（纯属个人方便理解哈）

上述估计大家都知道，那来点可能不知道的：思考一下，加一个base是什么意思呢？长这样“：

function add(base, ...nums){
            let num = 0
            nums.forEach(function(item) {
                num += item
            }) 
}

这里base指arguments的第一个参数，'...'代指初第一个以外剩余的参数

 

------------------------------分界线--------------------------------

 

5. filter

   filter, 过滤，对数组进行一个筛选操作。它提供一个回调函数，回调函数里的参数依次为 当前循环元素、该元素下标、数组本身，默认返回一个数组。

let arr = [1,2,3,4,5]
let arrNew = arr.filter((item, index) => {
    return item > 3
})
console.log(arr) // [1,2,3,4,5]
console.log(arrNew) // [4,5]

 

6. some, every

some方法和every的用法类似，提供一个回调函数，参数依次为处于 当前循环的元素、该元素下标、数组本身，三者均可选。

数组的每一个元素都会执行回调函数，当返回值全部为true时，every方法会返回true，只要有一个为false，every方法返回false。当有一个为true时，some方法返回true，当全部为false时，every方法返回false。

let arr = [1,2,3,4,5]
let arrSome = arr.some((item, index) => {
    return item > 3
})
let arrEvery = arr.every((item, index) => {
    return item > 3
})
 
console.log(arr) // [1,2,3,4,5]
console.log(arrSome) // true
console.log(arrEvery) // false

7. reduce

reduce方法有两个参数，第一个参数是一个回调函数（必须），第二个参数是初始值（可选）。回调函数有四个参数，依次为本轮循环的累计值、当前循环的元素（必须），该元素的下标（可选），数组本身（可选）。

reduce方法，会让数组的每一个元素都执行一次回调函数，并将上一次循环时回调函数的返回值作为下一次循环的初始值，最后将这个结果返回。

如果没有初始值，则reduce会将数组的第一个元素作为循环开始的初始值，第二个元素开始执行回调函数。

最常用、最简单的场景，是数组元素的累加、累乘。

let arr = [1,2,3,4,5]
let res = arr.reduce((total, item, index) => {
    return total + item
})
console.log(arr) // [1,2,3,4,5]
console.log(res) // 15

let arr = [1,2,3,4,5]
let res = arr.reduce((total, item, index) => {
    return total + item
}, 10)

console.log(res) // 25