假设我们有下面代码
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
从上面的各种例子我们可以看到, 不同的数组方法, 对数组空位的处理非常的不统一, 因此为了避免采坑, 我们在编程时, 需要避免出现数组空位。
网友评论