1-3 数组的遍历方法
项目中想要将数据重组为我们想要的格式,经常用到的对数组的遍历方法有哪些呢?我们来列举一下:
let arr = [1, 2, 3]
for(let i = 0; i< arr.length; i++){
console.log(arr[i]) // 1 2 3
}
forEach
arr.forEach(function(item, index){
console.log(item, index) // 1 2 3
})
在for 循环里还有两个常用的关键字,叫做 break 和 continue,下面我们来对比一下 在 for 循环跟forEach 的区别
- break 指的是结束循环
- continue 是结束本次循环,开始下次循环
for(let i = 0; i< arr.length; i++){
if (arr[i] == 2){
// break
// continue
}
console.log('break' + arr[i]) // 1
console.log('continue' + arr[i]) // 1 3
}
arr.forEach(function(item, index){
if (arr[index] == 2){
// break
// continue
}
console.log('break' + index) // 报错
consol.log('continue' + index) // 报错
})
- 我们可以看到 forEach 在循环的过程中是无法跳出循环的,因为它不支持 break,也不支持 continue
map
map跟forEach又有什么区别呢? 下面我们来举例看一下:
let result = arr.map(function(value){
value += 1
return value
})
console.log(arr, result) // [1, 2, 3] [4, 5, 6]
- forEach 只是一个简单的循环
- map 会遍历数组里面的每一个元素,根据回调操作形成一个新的数组,并不会改变原有的数组的值
filter
arr.filter(function(value){
console.log(value)
})
// filter 返回了一个新的数组,新数组是经过我们筛选的元素
let result = arr.filter(function(value){
return value == 2
})
console.log(arr, result) // [1, 2, 3] 2
// filter 会找到一个符合结果的数据,形成一个新的数组
some
- 遍历数组中是否有复合条件的一些元素,返回的是 boolean 类型的值
let result = arr.some(function(value){
return value == 2
})
console.log(arr, result) // \[1, 2, 3] true
every
- every 是检测当前数组的每一个是否都符合当前的判断条件,全部符合才会返回true,其中一个不符合条件就会返回 false
let result = arr.every(function(value){
return value == 2
})
console.log(arr, result) // [1, 2, 3] false
reduce
- prev 表示上次调用时候的返回值,第一次返回的对应的是初始值
- cur 表示当前正在处理的元素
- index 是当前正在处理的索引
- array 是当前数组
let sum = arr.reduce(function(prev, cur, index, array){
return prev + cur // 输出当前数组的和
}, 0)
console.log(sum) // 6
let max = arr.reduce(function(prev, cur){
return Math.max(prev, cur) // 输出当前数组最大的值
}, 0)
console.log(max) // 3
// 数组去重
let arr = [1, 2, 3, 2, 1, 4]
let res = arr.reduce(function(prev, cur){
prev.indexOf(cur) == -1 && prev.push(cur)
return prev
}, [])
console.log(res) // 1, 2, 3, 4
for in
Array.prototype.foo = function(){
console.log('foo')
}
for (let index in arr){
console.log(index, arr[index])
}
- for in 在遍历数组的时候是有问题的,不应该在数组当中去使用
ES6中数组的遍历方式
find
// 返回的是第一个通过测试的元素
let res = arr.find(function(value){
return value == 2
})
console.log(res) // 2
findIndex
// 返回的是第一个元素的索引
let res = arr.findIndex(function(value){
return value == 2
})
console.log(res) // 1
for of
for(let item of arr){
console.log(item) // 1 2 3
}
for(let item of arr.values()){
console.log(item) // 1 2 3
}
for(let item of arr.keys()){
console.log(item) // 0 1 2
}
// 既有内容也有下标
for(let item of arr.entries()){
console.log(item) // 0 1 1 2 2 3
}
以上我们总结了在ES5 还有 ES6 里面,数组的遍历方式,每一种遍历方式各自有各自的特点,我们应该在每次遍历的时候选择最合适的一种方式去循环遍历我们的数组
转载自:https://juejin.cn/post/7236295065852035131