JS中的数组空位和undefined

假设我们有下面代码

let arr = Array(5).map(item => {
  return item = 4
}
console.log(arr)

我们预期输出的是[4,4,4,4], 然而输出的是[undefined, undefined, undefined, undefined]

那么好吧, 我们console.log(Array(5)) 试试结果, 结果是[undefined, undefined, undefined, undefined]

那么, 按上面的情况来看,我们对[undefined, undefined, undefined, undefined]使用上面的map方法, 是不是应该也得到相同的结果呢?

let arr = [undefined,undefined,undefined,undefined,undefined].map(item => {
  return item = 4
})
console.log(arr)

然后结果竟然是[4,4,4,4]!!!, 这就尼玛有点坑了。

为什么会出现上面这种现象呢, 这就要引入一个概念 --- 数组空位

所谓数组空位, 就是数组的某个位置没有值, 如下面的几种方式, 都会产生数组空位, 用map() forEach() filter()等方法遍历数组时, 当遇到数组空位, 方法都会跳过此位置, 直接遍历下一个位置.

// 产生5个数组空位的数组
let arr1 = Array(5)

//同上
let arr2 = [,,,,,]

//产生10个数组空位的数组
let arr3 = []
arr3.length = 10

//数组a[3]-a[9]都是数组空位
let arr4 = [1,2,3]
arr4[10] = 5

//数组arr[2]产生数组空位
let arr5 = [1,2,3,4,5]
delete arr[2]

我们再用in操作来测试一下数组空位

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

上面代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。

宗上所述, 给数组某一项的值传为undefined, 仅表示数组该项的值为空, 因为undefined本身也是一种类型的值, 本质上等同于我们给数组传了一个undefined值, 也就说, 当我们给数组的某个位置传入undefined, 并不会产生数组空位, 所以跟数组空位得到的结果不同。

但是浏览器有一个坑, 当我们console.log()一个数组时, 数组空位会显示undefined, 这样就很容易让我们和给数组传undefined值混淆, 必须下面这种情况

console.log([undefined, undefined, undefined, undefined]) // 输出显示[undefined, undefined, undefined, undefined]

console.log(Array(4)) //输出还是显示[undefined, undefined, undefined, undefined]

上面的代码中, 无论我们输出数组空位还是undefined, 最终浏览器显示的都是undefined, 所以才造成了上面的坑。

ES6中的数组空位

我们在上面讲了, ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
比如:
forEach() , filter() , every() 和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach 方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter 方法
['a',,'b'].filter(x => true) // ['a','b']
// every 方法
[,'a'].every(x => x==='a') // true
// some 方法
[,'a'].some(x => x !== 'a') // false
// map 方法
[,'a'].map(x => 1) // [,1]
// join 方法
['x',,undefined,null].join('!') // "x!!!"
// toString 方法
['x',,undefined,null].toString() // "x,,,"

ES6 新增的数组方法则是会将数组空位转换为undefined。

Array.from和展开运算符（...）方法会将数组的空位，转为undefined，

Array.from([1,,2])
// [ 1, undefined, 2 ]


[...[1,,2]]
// [ 1, undefined, 2]

copyWithin()会连空位一起拷贝。

[1,,,2].copyWithin(2,0) // [1,,,2]

fill()会将空位视为正常的数组位置。

Array(3).fill(1) // [1,1,1]

for...of循环也会遍历空位。

let arr = [, ,]
for (let i of arr) {
console.log(1);
}
// 1
// 1

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0

从上面的各种例子我们可以看到, 不同的数组方法, 对数组空位的处理非常的不统一, 因此为了避免采坑, 我们在编程时, 需要避免出现数组空位。