数组空位问题
数组空位是什么,它是数组内某个元素没有值,这种现象称为空位现象,之前我们使用Array()去构造一个数组时,如果只传入一个参数,就会出现空位现象
let arr = Array(3) console.log(arr) // [ , , ,] 复制代码
针对数组空位问题,我将从判断空位与跳过空位两个角度来给读者诠释数组空位
判断空位
我们可以使用in运算符来判断数组某个位置是否存在空位
let arr = Array(3) console.log(0 in arr) // false 复制代码
如上所示,使用in运算符,如上,判断索引为0的位置是否为空位,遇到数组空位会返回false
但是需要注意的是所谓的空位是没有任何值的,所以undefined不是空位,下面来判断一下。
let arr = [undefined] console.log(0 in arr) // true 复制代码
验证了undefined所在的位置也不是空位
跳过空位问题
数组的一些方法会跳过数组的空位抛弃这个值,也有的方法会跳过空位保留这个值,还有的方法是将空位视为undefined视为空字符串,我们下面来看看这三种情况对应的一些方法
跳过空位不保留值
跳过空位不保留值的方法有:forEach(),filter(),every(),some(),分别举例来看看跳过不保留的效果
forEach
[ , 1 , 2].forEach((x,i) => { console.log(i) }) // 1 2 复制代码
filter
[ , 1 , 2].filter((x,i) => { return x > 0 }) // [1, 2] 复制代码
some与every我不再举例介绍,其都会跳过空位并且不保留值,下面我们来看看跳过空位保留值的几种方法
跳过空位保留值
跳过空位保留值的方法有:map
[ , 1 , 2].map((x) => { return x > 0 }) // [空, true, true] 复制代码
遍历过后仍然保留空值
视为undefined即空字符串
ES5中将空位视为undefined的有:join(),toString()
[,'a','b',undefined,null].join("@") // '@a@b@@' 复制代码
解释一下打印的结果:为什么是'@a@b@@',因为join()是通过参数拼接数组内元素形成字符串的方法,而join()是会将空位视为undefined,而undefined与null会被视为空字符串,所以其拼接的形式就为:''+'@'+'a'+'@'+'b'+'@'+''+'@'+''得到'@a@b@@'
再拿toString()举例
[,'a','b',undefined,null].toString() // ',a,b,,' 复制代码
同理toString()将空位视为undefined,而undefined与null会被视为空字符串结果得到',a,b,,'
而在ES6中规定就比较明确了,统一将新增的方法对空位处理为undefined,比如;Array.from(),for of,copyWithin,扩展运算符等等,下面我以Array.form()与扩展运算符举例
Array.from(['a',,'c']) // ['a', undefined, 'c'] [...['a',,'c']] // ['a', undefined, 'c'] 复制代码
很明确地看到两种方法将空位被处理成了undefined
\