JS数组内的空值empty是怎么来的?
当你通过数组构造函数创建数组、扩展数组长度、delete操作删除数组元素、创建稀疏数组的时候,JS会为未赋值的元素分配一个空值empty(以下简称空值),表示未赋值元素。例如:
// 通过数组构造函数创建数组
var a = new Array(3);
console.log(a); // [empty × 3]
// 扩展数组长度
var b = [1,2,3];
b.length = 5;
console.log(b); // [1, 2, 3, empty × 2]
// delete操作删除数组元素
var c = [1,2,3];
delete c[1];
console.log(c); // [1, empty, 3]
// 创建稀疏数组
var d = [];
d[1] = 10;
console.log(d); // [empty, 10]
空值有什么影响?
空值的用处仅仅只是占用下标并帮助标识数组的长度,没有其他实际用处,所以某些数组方法会忽略空值,使用的时候需要注意。
忽略(跳过)空值的数组方法有:forEach、map、filter、reduce、some、every。
const a = [1];
a[2] = 5;
console.log(a); // [1, empty, 5]
a.map((item,i) => console.log(item)); // 1, 5
a.forEach((item,i) => console.log(item)); // 1, 5
a.filter((item,i) => console.log(item)); // 1, 5
a.reduce((prev,now) => console.log(now), 0); // 1, 5
a.some((item,i) => {
console.log(item);
return false;
}); // 1, 5
a.every((item,i) => {
console.log(item);
return true;
}); // 1, 5
不忽略(跳过)空值的数组方法有:find、findIndex、join、toString、toLocaleString、entries、keys、values、Array.from、扩展运算符(...),这些方法处理空值的行为会稍微有点区别:
const a = [1];
a[2] = 5;
console.log(b); // [1, empty, 5]
// 处理成undefined
b.find((item,i) => console.log(item)); // 1, undefined, 5
b.findIndex((item,i) => console.log(item)); // 1, undefined, 5
for (let value of b.entries()) {
console.log(value)
} // [0, 1], [1, undefined], [2, 5]
for (let value of b.values()) {
console.log(value)
} // 1, undefined, 5
console.log(Array.from(b)); // [1, undefined, 5]
console.log([...b]); // [1, undefined, 5]
// 处理成空字符
b.join(','); // 1,,5
b.toString() // 1,,5
b.toLocaleString() // 1,,5
// 不处理
for (let index of b.keys()) {
console.log(index)
} // 0, 1, 2