携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

数组空位问题

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

JS中不可忽视的数组空位问题