数组遍历的常用方法:
1.forEach方法:
- 语法:数组.forEach(function(item,index,origin) { } )
- 作用:遍历数组
- 返回值:该方法永远没有返回值(undefined)
forEach方法:
<script>
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
arr.forEach(function (item, index, origin) {
console.log(item, index)//100 0 200 1 300 2 400...
})
</script>
注意事项:
(1)item:表示数组每一项所对应得值
(2)index:表示数组每一项的值所对应得下标
(3)origin:原始数组
(4)prev:表示初始值或者上一次的运行结果
- map方法:
- 语法:数组.map(function(item,index,origin) { } )
- 作用:映射数组
- 返回值:返回一个和原数组长度相同的数组,但是内部数据可以经过我们映射加工
- 映射加工:就是在函数内 以 return 的形式书写
map方法:
<script>
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
var newArr = arr.map(function (item) {
return item * 2
})
console.log('映射出来的数组: ', newArr) //200 400 600 800 1000 1200
</script>
- 面试题:数组常用的遍历方法中, 有一个forEach 和 一个 map, 这两个方法有什么区别?
1. forEach 的作用是用来遍历数组, 而 map 的作用是用来映射数组;
2. forEach 没有返回值, 而 map 是可以有返回值的;
- filter方法:
- 语法:数组.filter(function(item,index,origin){})
- 作用:过滤数组
- 返回值:返回一个新数组,内部存储的是原始数组过滤出来的部分内容
- 过滤条件:以 return 的形式书写;
filter方法:
<script>
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
var newArr = arr.filter(function (item, index, origin) {
return item > 350 // 过滤数组的内容, 只留下 item 大于 350 的成员
})
console.log("新的数组是:",newArr)//400 500 600
</script>
- find方法:
- 语法:数组.find(function(item,index,origin){})
- 作用:在数组内查找满足条件的第一项
- 返回值:找到的新成员,如果没有找到直接返回:undefined
- 查找条件:以 return 的形式书写
find方法:
<script>
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
var newArr = arr.find(function (item, index, origin) {
return item > 350 // 在数组中查找第一个符合条件的成员
})
console.log(newArr) //400
var newArr1 = arr.find(function (item, index, origin) {
return item > 35000 // 在数组中查找第一个符合条件的成员
})
console.log(newArr1) //undefined
</script>
- findIndex方法:
- 语法:数组.findIndex(function(item,index,origin){})
- 作用:在数组内查找满足条件的第一项的下标
- 返回值:返回已经找的数组所对应的下标,如果没有找到符合条件的直接返回值 -1;
- 查找条件:以 return 的形式书写
findIndex方法:
<script>
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
var newArr = arr.findIndex(function (item, index, origin) {
return item > 350 //在数组内查找第一个符合条件的成员所对应得下标
})
console.log(newArr) // 3
var newArr1 = arr.findIndex(function (item, index, origin) {
return item > 35000 //在数组内查找第一个符合条件的成员所对应得下标
})
console.log(newArr1) // -1
</script>
- some 方法:
- 语法:数组.some(function(item,index,origin){})
- 作用:判断数组内是否有一个满足条件
- 返回值: 布尔值 (true/false)
- 判断条件:以return的形式书写
some 方法:
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组: ', arr)
var bo1 = arr.some(function (item, index, origin) {
return item % 2 === 0 // 判断数组内是否有 一个 满足条件的
})
console.log(bo1) // true
</script>
- every方法:
- 语法:数组.every(function(item,index,origin){})
- 作用:判断数组内是否全部满足条件
- 返回值:布尔值 (true/false)
- 判断条件:以 return 的形式书写
every方法:
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组: ', arr)
var bo2 = arr.every(function (item, index, origin) {
return item % 2 === 0 // 判断数组内是否 全都满足条件
})
console.log(bo2) //false
</script>
- reduce方法:
- 语法:数组.reduce(function(prev,item,index,origin){}, init )
- 作用:用来实现叠加效果
- 返回值:最终叠加的结果
- 叠加条件: 以return的形式书写
注意事项:
1.prev第一次的值,如果传递了init那么就是init的值;如果没有传递init,那么就是数组[0]的值;
2.如果传递了init,循环执行 数组.length次;如果没有传递init,循环执行 数组.length-1次;
reduce方法:
(1) 传递 init 参数的执行结果:
<script>
var arr = [1, 2, 3]
console.log('原始数组: ', arr)
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
}, 22) //init 传递了参数 所以prev第一次的值是22
console.log(str) // 28
</script>
reduce方法:
(2)没有传递 init 参数的执行效果:
<script>
var arr1 = [100, 2, 3,4,5]
console.log('原始数组: ', arr)
var str = arr1.reduce(function (prev, item, index, origin) {
return prev + item
}) //init 没有传递参数,所以prev第一次执行的值是数组[0]上的值,而此时item所执行的值是数组[1]所对应得值
console.log(str) // 114
</script>
数组塌陷的原理和解决方法:
数组塌陷产生的现象:
当删除第一个数组元素之后，原数组的第二个数组元素会填补第一个数组元素的空缺位置，也就是说此时第二个元素的下标已经变成了0,然而第一次的循环遍历已经遍历过下标为0的数组元素了，于是原本下标为1的数组元素变成了漏网之鱼;
<script>
var arr = [0,1,2,3,4,5]
// 0 1 2 3 4 5
console.log("原始数组:",arr);
for(var i = 0; i<arr.length; i++){//数组发生塌陷
arr.splice(i,1);
}
console.log("删除后的数组:",arr);// arr = [1,3,5]
发生塌陷执行步骤简述:
/**
* 第一轮:
* i===0 arr.length=6 i<arr.length => 0<6 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字0 截取掉
* 截取后的数组: arr = [1,2,3,4,5]
* 对应得下标 // 0 1 2 3 4
* 数组的length === 5
* 第二轮:
* i===1 arr.length=5 i<arr.length => 1<5 条件成立开始运行
* arr.splice(i,1) -> (1,1) 把[1]位置上的数字截取掉了,也就是把 数字2 截取掉
* 截取后的数组: arr = [1,3,4,5]
* 对应得下标 // 0 1 2 3
* 数组的length === 4
* 第三轮:
* i===2 arr.length=4 i<arr.length => 2<4 条件成立开始运行
* arr.splice(i,1) -> (2,1) 把[2]位置上的数字截取掉了,也就是把 数字4 截取掉
* 截取后的数组: arr = [1,3,5]
* 对应得下标 // 0 1 2
* 数组的length === 3
* 第四轮:
* i===3 arr.length=3 i<arr.length => 3=3 条件不成立 结束运行
*/
</script>
```js
<script>
数组塌陷的解决方法1:
var arr = [0,1,2,3,4,5]
// 0 1 2 3 4 5
console.log("原始数组:",arr);
for(var i = 0; i<arr.length; i++){
arr.splice(i,1);
i--
}
console.log("删除后的数组:",arr);//[]
执行步骤简述:
/**
* 第一轮:
* i===0 arr.length=6 i<arr.length => 0<6 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字0 截取掉
* 截取后的数组: arr = [1,2,3,4,5]
* 对应得下标 // 0 1 2 3 4
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 5
*
* 第二轮:
* i===0 arr.length=5 i<arr.length => 0<5 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字1 截取掉
* 截取后的数组: arr = [2,3,4,5]
* 对应得下标 // 0 1 2 3
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 4
*
* 第三轮:
* i===0 arr.length=4 i<arr.length => 0<4 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字2 截取掉
* 截取后的数组: arr = [3,4,5]
* 对应得下标 // 0 1 2
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 3
*
* 第四轮:
* i===0 arr.length=3 i<arr.length => 0<3 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字3 截取掉
* 截取后的数组: arr = [4,5]
* 对应得下标 // 0 1
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 2
*
* 第五轮:
* i===0 arr.length=2 i<arr.length => 0<2 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字 4 截取掉
* 截取后的数组: arr = [5]
* 对应得下标 // 0
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 1
*
* 第六轮:
* i===0 arr.length=1 i<arr.length => 0<1 条件成立开始运行
* arr.splice(i,1) -> (0,1) 把[0]位置上的数字截取掉了,也就是把 数字 5 截取掉
* 截取后的数组: arr = []
* 对应得下标 //
* 此时 i-- ==> i= -1
* 最后 i++ ==> i= 0
* 数组的length === 0
*
* 第七轮:
* i===0 arr.length=0 i<arr.length => 0<0 条件不成立
* */
</script>
<script>
数组塌陷的解决方法二:
var arr = [1, 2, 3, 4];
// 0 1 2 3
for (var i = arr.length - 1; i >= 0; i--) {
arr.splice(i, 1);
}
console.log(arr);//[]
执行步骤简述:
/**
* 第一次执行:
* i = arr.length - 1 ==> i=3 i>=0 条件成立 开始执行代码
* arr.splice(i, 1); ==> (3,1) 此时把数组[3] 位置上的 4 截取掉
* 截取后的数组:arr = [1, 2, 3]
* 0 1 2
* 此时length ==> 3
* i-- 此时i = 2
*
* 第二次执行:
* i = arr.length - 1 ==> i=1 i>=0 条件成立 开始执行代码
* arr.splice(i, 1); ==> (1,1) 此时把数组[1] 位置上的 2 截取掉
* 截取后的数组:arr = [1, 3]
* 0 1
* 此时length ==> 2
* i-- 此时i = 1
*
* 第三次执行:
* i = arr.length - 1 ==> i=0 i=0>=0 条件成立 开始执行代码
* arr.splice(i, 1); ==> (0,1) 此时把数组[0] 位置上的 1 截取掉
* 截取后的数组:arr = [3]
* 0
* 此时length ==> 1
* i-- 此时i = 0
*
* 第四次执行:
* i = arr.length - 1 ==> i=0 i=0>=0 条件成立 开始执行代码
* arr.splice(i, 1); ==> (0,1) 此时把数组[0] 位置上的 3 截取掉
* 截取后的数组:arr = []
* 此时length ==> 0
* i-- 此时i = -1
*
* 第五次执行:
* i = arr.length - 1 ==> i=-1 条件现在不成立成立 代码结束执行
*/
</script>
