英文 | https://www.javascripttutorial.net/

譯文 | 楊小愛(ài)

那么，在今天的教程中，我們將一起來(lái)學(xué)習(xí)JavaScript Array length屬性以及如何正確處理它。

JavaScript 數(shù)組長(zhǎng)度屬性究竟是什么

1) 、密集數(shù)組

let colors = ['red', 'green', 'blue'];console.log(colors.length); // 3

在此示例中，該length屬性返回三個(gè)，這與colors數(shù)組中的元素?cái)?shù)相同。

下面的代碼向colors數(shù)組中添加了一個(gè)元素：

colors.push('yellow');console.log(colors.length); // 4

現(xiàn)在，數(shù)組的length屬性colors是4。

當(dāng)您清空colors數(shù)組時(shí)，其長(zhǎng)度為0：

colors = [];console.log(colors.length); // 0

2) 稀疏數(shù)組

稀疏數(shù)組是其元素沒(méi)有從零開(kāi)始的連續(xù)索引的數(shù)組。

例如，[10,, 20, 30]是一個(gè)稀疏數(shù)組，因?yàn)槠湓氐乃饕秊?0、2 和 3。

在稀疏數(shù)組中，length 屬性并不表示元素的實(shí)際數(shù)量。這是一個(gè)大于最高索引的數(shù)字。例如：

let numbers = [10, , 20, 30];console.log(numbers.length); // 4

在此示例中，numbers數(shù)組中的元素?cái)?shù)為 三個(gè)：10、20 和 30。最高索引為 3。因此，該length屬性返回4。

下面的代碼在索引 10 處向 numbers 數(shù)組添加一個(gè)元素：

numbers[10] = 100;console.log(numbers.length); // 11

在此示例中，該length屬性返回 11。

修改 JavaScript 數(shù)組長(zhǎng)度屬性

JavaScript 允許您更改數(shù)組length屬性的值。通過(guò)更改長(zhǎng)度的值，您可以從數(shù)組中刪除元素或使數(shù)組稀疏。

1) 清空數(shù)組

如果將長(zhǎng)度設(shè)置為零，則數(shù)組將為空：

const fruits = ['Apple', 'Orange', 'Strawberry'];fruits.length = 0;
console.log(fruits); // []

2) 刪除元素

如果將數(shù)組的length屬性設(shè)置為小于最高索引的值，則刪除索引大于或等于新長(zhǎng)度的所有元素。

以下示例將 Fruits 數(shù)組的 length 屬性更改為 2，從而從數(shù)組中刪除第三個(gè)元素：

const fruits = ['Apple', 'Orange', 'Strawberry'];fruits.length = 2;
console.log(fruits); // [ 'Apple', 'Orange' ]

3) 使數(shù)組稀疏

如果將數(shù)組的length屬性設(shè)置為高于最高索引的值，則該數(shù)組將是空閑的。例如：

const fruits = ['Apple', 'Orange', 'Strawberry'];fruits.length = 5;
console.log(fruits); // [ 'Apple', 'Orange', 'Strawberry', <2 empty items> ]

總結(jié)

• 數(shù)組的length屬性是一個(gè)無(wú)符號(hào)的 32 位整數(shù)，它在數(shù)字上總是大于數(shù)組的最高索引。

• length返回密集數(shù)組具有的元素?cái)?shù)。

• 對(duì)于備用數(shù)組，length不反映數(shù)組中實(shí)際元素的數(shù)量。

• 修改length屬性可以從數(shù)組中刪除元素或使數(shù)組備用。

如果您還想學(xué)習(xí)前面第五章字符串的內(nèi)容，請(qǐng)點(diǎn)擊下文鏈接進(jìn)行學(xué)習(xí)。

【JavaScript 教程】第五章 字符串11— includes()：檢查字符串是否包含子字符串

【JavaScript 教程】第五章 字符串10— slice()：提取字符串的一部分

【JavaScript 教程】第五章 字符串09— substring()：從字符串中提取子字符串

【JavaScript 教程】第五章 字符串08— lastIndexOf()：查找字符串中子字符串最后一次出現(xiàn)的索引

【JavaScript 教程】第五章 字符串07— indexOf()：獲取字符串中子字符串第一次出現(xiàn)的索引

【JavaScript 教程】第五章 字符串06— split()：將字符串拆分為子字符串?dāng)?shù)組

【JavaScript 教程】第五章 字符串05— concat()：將多個(gè)字符串連接成一個(gè)新字符串

【JavaScript 教程】第五章 字符串04— padStart() 和 padEnd()

【JavaScript 教程】第五章 字符串03— trim()、trimStart() 和 trimEnd()

【JavaScript 教程】第五章 字符串02— 字符串類(lèi)型

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)