ES5中数组的遍历方式

for循环

let arr = [1,2,3]
let arr2 = [1,2,2,3,4]
for(let i = 0; i < arr.length; i++){
   console.log(arr[i])                             
}

forEach() 没有返回值，只是针对每个元素调用func,不支持break、continue

// array为数组本身
arr.forEach(function(ele,index,array){
    console.log(ele,index,array);
})

同for循环的区别？

for循环中使用break结束所有循环

for(let i = 0; i < arr.length; i++){
    if(arr[i] === 2){
        break
    }
    console.log(arr[i])                 // 1                         
}

在forEach不支持break关键字，使用break会报错

arr.forEach(function(ele,index,array){
    if(arr[i] === 2){
        break
    }
    console.log(ele,index,array);     // Unsyntactic break 
})

那么分别在for循环和forEach中使用continue?(continue结束本次循环，开始下次循环)

for(let i = 0; i < arr.length; i++){
    if(arr[i] === 2){
        continue
    }
    console.log(arr[i])               // 1,3                    
}

arr.forEach(function(ele,index,array){
    if(arr[i] === 2){
        continue
    }
    console.log(ele,index,array);    // syntactic continue
})

map() 返回新的数组，每个元素为调用func的结果

arr.map(function(value){
    console.log(value);              //1,2,3
})

map和forEach有什么差别？

map的返回值会形成新的数组，并不会改变原有数组的值

let result = arr.map(function(value){
        value +=1
        return value;
    })
console.log(arr,result);               // [1, 2, 3]  [2, 3, 4]

filter() 返回符合func条件的元素数组

filter对数组中的数据按照条件进行过滤、筛选

filter()会返回符合筛选条件的数据组成新的数组数据

filter()并不会改变原来数组的值

let result = arr.filter(function(value){
    return value === 2
})
console.log(arr,result)                // [1, 2, 3] [2]

some() 返回boolean，判断是否有元素符合func条件

arr.some(function(value){
    console.log(value);   // 1,2,3
})

some只要在数组中找到一个符号条件的元素就会返回true，否则就返回false

some()并不会改变原有数组的数据

let result = arr.some(function(value){
    return value === 2
})
console.log(arr,result);             // [1, 2, 3] true

every() 返回boolean，判断每个元素都符合func条件

判断每个元素都符合func条件，如果都全部符合就返回true，只要存在一个不符合就返回false

every()并不会改变原有数组的值

let result = arr.every(function(value){
    return value === 2
})
console.log(arr,result);             // [1, 2, 3] false

reduce() 接收一个函数作为累加器(常用)

reduce(function(prev,cur,index,array){},initValue)

第一个参数是一个函数,函数中的第一个参数是上一次调用回调时对应的返回值;第二个参数是当前正在处理的数组中的元素；第三个参数是当前正在处理的数组所在的索引；第四个参数是原数组

第二个参数是一个初始值

// 数组求和
let sum = arr.reduce(function(pre,cur,index,array){
    return pre + cur
})
console.log(sum,arr);              // 6  [1, 2, 3]

// 求数组最大值
let result = arr.reduce(function(pre,cur){
        return Math.max(pre,cur)
})
console.log(result);              // 3

// 数组去重
let arr2 = [1,2,2,3,4]

let res = arr2.reduce(function(prev,cur){
    prev.indexOf(cur) === -1 && prev.push(cur)
    return prev
},[])
console.log(res);              // [1, 2, 3, 4]

不应该使用for...in去遍历数组

使用for...in去遍历数组，同时也会遍历到添加到Array原型上的自定义属性,但是这个结果并不是我们想要的

Array.prototype.foo = function(){
    console.log('foo')
}
for(let index in arr){
    console.log(arr[index])
}

ES6中数组的遍历方式

find(): 返回第一个通过测试的元素

let result = arr2.find(function(value){
    return value === 2
})
console.log(arr2,result);   // [1,2,2,3,4] 2

findIndex(): 返回第一个通过测试的元素的索引

let result = arr2.findIndex(function(value){
    return value === 2
})
console.log(arr2,result);   // [1,2,2,3,4] 1

for of(常用)

for(let item of arr2){
    console.log(item)    // [1,2,2,3,4]
}

values()

// 只得到值
for(let item of arr2.values()){
    console.log(item)    // [1,2,2,3,4]
}

keys()


// 只获取到下标
for(let item of arr2.keys()){
    console.log(item)   0,1,2,3,4
}

entries()

// 既有索引又有值
for(let [index,item] of arr2.entries()){
    console.log(index +'==>' + item)
}

ES6 - 数组的遍历方式