细说JS数组遍历的一些细节及实现
1. 数组空位问题
数组空位是什么，它是数组内某个元素没有任何值，这种现象称为空位现象，我们在使用Array()去构造一个数组时，如果只传入一个参数，数组里面的元素项就会出现空位现象，它其实是没有任何元素的，下面是几个会创建空位的典型例子：
let arr = Array(5) // <5 empty items> let res = arr.map(e => e + 1) // <5 empty items> let a = [,,]; // <2 empty items>
ES5 中的数组方法包括：map、filter、forEach、reduce，还有 for ... in 等语法，这些方法执行的时候遇到空位，会直接跳过。
// ES5 及以前，不会处理空位
const a = Array(5);
console.log(a) // [ <5 empty items> ]
console.log(a.map(_ => 1)) // 无效，[ <5 empty items> ]
// console.log(a.reduce((p, c)=> p+c)) // 报错
console.log(a.filter(x => true)) // []
a.forEach(e => {
console.log(e);
}) // 无任何输出
console.log(a+'') // ,,,,
console.log(a.indexOf(undefined)) // -1
console.log(a.lastIndexOf(undefined)) // -1
for (let k in a) {
console.log(k) // 无任何输出
}ES5中将空位视为undefined的有：join()，toString()
[,'a','b',undefined,null].join("@") // '@a@b@@'
[,'a','b',undefined,null].toString() // ',a,b,,'ES6，一些操作会将数组空位视为undefined来处理。比如下面的一些操作
console.log([...a]) // [ undefined x 5 ]
console.log(Array.from(a)) // [ undefined x 5 ]
console.log(a.includes(undefined)) // true
console.log(a.find(x => x === undefined)) // undefined
console.log(a.findIndex(x => x === undefined)) // 0
// for of 循环取值
for (let k of a) {
console.log(k) // 输出5个undefined
}1.1 空位判断
我们可以使用in运算符来判断数组某个位置是否存在空位
let arr = Array(3) console.log(0 in arr) // false
如上述所示，使用in运算符，判断索引为0的位置是否为空位，遇到数组空位会返回false
这里需要注意的是所谓的空位是没有任何值的，undefined、null它们都不属于空位，下面来判断一下。
let arr = [undefined, null]; console.log(0 in arr) // true console.log(1 in arr) // true
验证了undefined、null所在的位置它不是空位
1.2 刚列举了数组的一些操作会对空位进行跳过，但其实，它们在处理上也还是存在一些差异的
比如：forEach、filter、some与every等在遇到空位时，会直接跳过它，不会保留它的值， 而map则会保留空位
我们来看下例子：
[,1,2].forEach((x,i) => { console.log(i); }) // 这里只会输出1 2
[,1,2].filter((x,i) => { return x > 0; }) // 这里也只会输出[1, 2]
[,1,2].map((x) => { return x > 0; }) // 这里会输出[空, true, true]，它保留了空位其余的可以自行测试看看结果
2. 是否修改原数组
请看以下代码，遍历过程中，试图修改遍历的每一项。
const arr = [1, 2, 3]
let res = arr.filter(item => {
item++
return item >= 3
})
console.log(arr) // [ 1, 2, 3 ]
console.log(res) // [ 2, 3 ]filter 里的 item 自增了，所以最后有两项符合过滤规则，但是原数组并没有变。这说明这里的 item 只是原数组项的一个值拷贝，数组遍历是按值传递的。
再看一段代码，这次我们遍历引用数据类型的数组。
const brr = [
{count: 1},
{count: 1},
{count: 1}
]
const res2 = brr.map(item => {
item.count++
return item.count
})
console.log(brr) // [ { count: 2 }, { count: 2 }, { count: 2 } ]
console.log(res2) // [ 2, 2, 2 ]这里的修改改变了原数组，那之前说的按值传递有问题？其实还没问题的，数组函数方法说到底也是一个函数，JS 的函数总是按值传递的：
基本数据类型（包含变量、函数参数等）存储在栈（stack）中，传递参数会复制一份值
引用数据类型的引用（指针）存储在栈中，指向的值存储在堆（heap）中，传递参数会复制一份对象的引用地址，复制的引用地址和原引用地址指向堆中同一个对象（因此修改参数，也修改了原对象）
3. 附一下数组遍历的几种方法
3.1 索引访问
const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}3.2 for ... of
const arr = [1, 2, 3]
for (let e of arr) {
console.log(e)
}3.3 forEach
注意：return 和 break 无法中断遍历。
- return 可以跳过本次遍历，但剩余元素仍然会继续遍历下去。
- break 只能中断 for 和 while 循环，forEach 函数中使用会报错
const arr = [1, 2, 3]
arr.forEach((e, i, a) => {
console.log(e)
})3.4 for ... in
`for ... in` 是用来遍历对象（plain object）的，也可以用来遍历数组，但不建议。
const arr = [1, 2, 3]
for (let i in arr) {
console.log(arr[i])
}3.5 map、filter、reduce
这三类都是为了对数组进行一个操作，然后得到目标结果的数组方法，从功能和语义上来讲，和 forEach 有区别的，不建议混用，尤其是 map 和 forEach。但是也能对数组进行遍历，详细可参考MDN。
到此这篇关于细说JS数组遍历的一些细节及实现的文章就介绍到这了,更多相关JS数组遍历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript字符和ASCII实现互相转换,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了JavaScript 语句之常用 for 循环，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
这篇文章主要为大家介绍了前端音频可视化Web Audio实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要介绍了详解webpack介绍&安装&常用命令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要是对js中的Array操作进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
下面小编就为大家带来一篇js eval函数使用,js对象和字符串互转实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了基于JS实现快速读取TXT文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了常见JS验证脚本,结合实例形式汇总分析了JavaScript用于验证的系统自带函数与自定义函数,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JavaScript判断是否为数字的多种方法小结,本文给大家分享三种方法,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
在本文为大家介绍下把字符串转化为对象：把文本转化为对象、把文本转化为数组，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论