【JavaScript 教程】第六章 数组02— Array Length:如何有效地使用数...

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

译文 | 杨小爱

那么，在今天的教程中，我们将一起来学习JavaScript Array length属性以及如何正确处理它。

JavaScript 数组长度属性究竟是什么

1) 、密集数组

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

在此示例中，该length属性返回三个，这与colors数组中的元素数相同。

下面的代码向colors数组中添加了一个元素：

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

现在，数组的length属性colors是4。

当您清空colors数组时，其长度为0：

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

2) 稀疏数组

稀疏数组是其元素没有从零开始的连续索引的数组。

例如，[10,, 20, 30]是一个稀疏数组，因为其元素的索引为 0、2 和 3。

在稀疏数组中，length 属性并不表示元素的实际数量。这是一个大于最高索引的数字。例如：

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

在此示例中，numbers数组中的元素数为 三个：10、20 和 30。最高索引为 3。因此，该length属性返回4。

下面的代码在索引 10 处向 numbers 数组添加一个元素：

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

在此示例中，该length属性返回 11。

修改 JavaScript 数组长度属性

JavaScript 允许您更改数组length属性的值。通过更改长度的值，您可以从数组中删除元素或使数组稀疏。

1) 清空数组

如果将长度设置为零，则数组将为空：

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

2) 删除元素

如果将数组的length属性设置为小于最高索引的值，则删除索引大于或等于新长度的所有元素。

以下示例将 Fruits 数组的 length 属性更改为 2，从而从数组中删除第三个元素：

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

3) 使数组稀疏

如果将数组的length属性设置为高于最高索引的值，则该数组将是空闲的。例如：

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

总结

• 数组的length属性是一个无符号的 32 位整数，它在数字上总是大于数组的最高索引。

• length返回密集数组具有的元素数。

• 对于备用数组，length不反映数组中实际元素的数量。

• 修改length属性可以从数组中删除元素或使数组备用。

如果您还想学习前面第五章字符串的内容，请点击下文链接进行学习。

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

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

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

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

【JavaScript 教程】第五章 字符串07— indexOf()：获取字符串中子字符串第一次出现的索引

【JavaScript 教程】第五章 字符串06— split()：将字符串拆分为子字符串数组

【JavaScript 教程】第五章 字符串05— concat()：将多个字符串连接成一个新字符串

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

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

【JavaScript 教程】第五章 字符串02— 字符串类型

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

学习更多技能

请点击下方公众号