数组空位问题
数组空位是什么,它是数组内某个元素没有值,这种现象称为空位现象,之前我们使用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
\