奇怪的Array.prototype.length

先說結論

根據使用場景,length不一定代表數組的長度。實際上,length是指大於數組中最後一個元素的索引的32位無符號整數。

稠密數組(Dense Array) vs 稀疏數組(Sparse Array)

稠密數組是指一個數組的元素由0開始連續索引。

1
2
const denseArray = ["A", "B", "C"];
// A, B, C連續索引於0, 1, 2

顯然而見,稀疏數組就是一個不連續索引的數組

1
2
const sparseArray = ["A", , "C", "D"];
// A, C, D 分散地索引於0, 2, 3

甚麼時候length是指元素個數

當數組是稠密數組時,length是指元素個數。

1
2
3
4
5
6
7
8
const fruits = ['orange', 'apple', 'banana']; // fruits 是稠密數組
fruits.length // 3,正確的元素個數

fruits.push('mango');
fruits.length // 4,增加了一個元素

var empty = [];
empty.length // 0,空數組

甚麼時候是最後一個索引+1

當數組是稀疏數組,length等於最後一個索引加一,但不代表元素個數。

1
2
3
4
5
6
const animals = ['cat', 'dog', , 'monkey']; // animals 是稀疏數組
animals.length // 4,最後一個索引加一,但元素只有三個

var words = ['hello'];
words[6] = 'welcome'; // 這時最後的索引變成了6
words.length // 7

修改length

JavaScript允許修改length屬性,可以刪除元素或令數組變成稀疏。

1
2
3
4
const numbers = [1, 3, 5, 7, 8];

numbers.length = 3; // 修改length
console.log(numbers) // [1, 3, 5] 7和8都被刪除了

當把length設置為大於元素個數時,會令數組變成稀疏。

1
2
3
4
5
var osTypes = ['OS X', 'Linux', 'Windows'];

osTypes.length = 5; // index 4和5的元素為undefined, osTypes是稀疏

console.log(osTypes) // ['OS X', 'Linux', 'Windows', , , ]
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×