JS数组内空值empty详解

552 阅读1分钟

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]

空值有什么影响?

空值的用处仅仅只是占用下标并帮助标识数组的长度,没有其他实际用处,所以某些数组方法会忽略空值,使用的时候需要注意。

忽略(跳过)空值的数组方法有:forEachmapfilterreducesomeevery

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

不忽略(跳过)空值的数组方法有:findfindIndexjointoStringtoLocaleStringentrieskeysvaluesArray.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