【JavaScript 教程】第六章 数组02— Array Length:如何有效地使用数组的长度属性
共 2456字,需浏览 5分钟
·
2022-01-02 03:28
英文 | 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 字符串
学习更多技能
请点击下方公众号