Vue 学习随笔系列十五 -- 数组遍历方法

数组遍历方法

---

1. for 循环

for…if… 条件判断循环
for…in… 遍历对象的索引
for…of… 遍历对象的元素

// for...if...
const arr = [11, 12, 13, 14]
for(let i = 0; i < arr.length; i++) {console.log(111, arr[i])
}// for...in...
for( let i in arr) {console.log(222, arr[i])
}// for...of...
for(let i of arr) {console.log(333, i)
}

2. forEach (不会修改数组本身)

无返回值
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 14]
arr.forEach(( item, index, array ) => {console.log( item, index, array)
})

3. map (不修改数组本身)

返回一个新的数组
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 14]
let data = arr.map( (item, index, array) => {console.log( item, index, array)return item * 2
})
console.log("data==", data)

4. some(不修改数组本身）

遍历每一个元素，有任何一个元素满足条件，则返回true， 没有元素满足条件，则返回 false
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 14]let flag = arr.some( (item, index, array) => {console.log( item, index, array)return item == 13})
console.log("flag==", flag)

5. every(不修改数组本身）

遍历每一个元素，每一个元素都满足条件，则返回true， 有任一元素不满足条件，则返回 false
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 14]
let flag = arr.every( (item, index, array) => {console.log( item, index, array)return item == 13
})
console.log("flag==", flag)

6. filter(不修改数组本身)

返回数组中满足条件的元素，遍历整个数组，返回一个新数组
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [{name: "xiaoming",age: 18},{name: "xiaoli",age: 20},{name: "xiaoming",age: 25}
]
let temp = arr.filter( (item, index, array) => {console.log( item, index, array)return item.name === 'xiaoming'
})
console.log("temp== ", temp, temp[0].age)

7. find(不修改数组本身)

返回数组中满足条件的第一个元素，不会遍历整个数组
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.find( (item, index, array) => {console.log( item, index, array)return item == 13
})
console.log("temp== ", temp )

8. findIndex

返回符合条件的第一个元素的索引值，如果有满足条件的值，返回满足条件的第一个值的索引，如果没有满足条件的值，返回 -1
回调函数有三个参数
callBack(item, inde, arr) ,item – 当前元素， index – 当前元素索引， arr – 原数组

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findIndex( (item, index, array) => {console.log( item, index, array)return item == 13
})
console.log("temp== ", temp )

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findIndex( (item, index, array) => {console.log( item, index, array)return item == 15
})
console.log("temp== ", temp )

拓展

findLastIndex 从右往左遍历数组，找到第一个满足条件的值，返回其索引，如果没有满足条件的值，返回-1

const arr = [11, 12, 13, 13, 14, 13, 14]
let temp = arr.findLastIndex( (item, index, array) => {console.log( item, index, array)return item == 13
})
console.log("temp== ", temp )

9. reduce(累加)

array.reduce(callback, initValue)
array.reduce((prev, cur, index, arr) => {retutn ****
}, initValue)

回调函数有四个值：
prev：上一次累加的返回值，或给定的初始值
cur：数组中正在处理的当前元素
index：当前元素的索引值
arr ：原数组
如果没有提供初始值，则从数组的第一个元素开始
注意：
空数组 未给初始值 执行reduce操作，会报错，
空数组 给定初始值 执行reduce操作，不会报错

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {console.log( prev , cur, index, arr )return prev + cur;
})
console.log("sum== ", sum )

拓展

给定累加初始值

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {console.log( prev , cur, index, arr )return prev + cur;
}, 10)
console.log("sum== ", sum )

reduce 对象属性求和

const arr = [{aub: "语文",score: 90},{sub: "数学",score: 95},{sub: "英语",score: 89}
]
let sum = arr.reduce( (prev , cur) => {return cur.score + prev
}, 0)
console.log("sum== ", sum )

reduce 求乘积

const arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce( (prev , cur, index, arr) => {console.log( prev , cur, index, arr )return prev * cur;})console.log("sum== ", sum )

reduce 计算元素出现次数
注意： 必须给定一个空数组作为初始值

const arr = ['xiaoming', 'xiaoli', 'alice', 'xiaoming', 'xiaoli', 'xiaoming', 'jonh']
let sum = arr.reduce( (prev , cur) => {if(cur in prev ) {prev[cur] ++} else {prev[cur] = 1}return prev
}, {})
console.log("sum== ", sum )

reduce 数组去重
注意： 必须给定一个空数组作为初始值

const arr = ['xiaoming', 'xiaoli', 'alice', 'xiaoming', 'xiaoli', 'xiaoming', 'jonh']
let sum = arr.reduce( (prev , cur) => {if(!prev.includes(cur)) {return prev.concat(cur)} else {return prev}
}, [])
console.log("sum== ", sum )