索引集合
原创索引集合
索引集合是按索引值排序的数据集合,主要包括数组和类数组结构。在JavaScript中,数组是由名称和索引引用的值构成的有序列表。例如,一个名为emp的数组可以包含按数字雇员编号索引的雇员姓名,其中emp[0]是0号员工,emp[1]是1号员工,以此类推。
JavaScript中没有明确的数组数据类型,但我们可以使用预定义的Array对象及其方法来处理数组。Array对象提供了多种操作数组的方法,如连接、反转和排序等。此外,Array对象还有一个用于确定数组长度的属性以及其他用于正则表达式的属性。
创建数组
在JavaScript中,有几种方式可以创建数组:
const arr1 = new Array(element0, element1, /* … ,*/ elementN);
const arr2 = Array(element0, element1, /* … ,*/ elementN);
const arr3 = [element0, element1, /* … ,*/ elementN];
其中,括号语法称为"数组字面量"或"数组初始化式",它比其他形式的数组创建更短,因此通常是首选。当指定元素值时,数组将用这些值初始化,数组的length属性被设置为参数的数量。
要创建一个长度不为0但没有元素的数组,可以使用以下任何一种方式:
const arr1 = new Array(arrayLength);
const arr2 = Array(arrayLength);
const arr3 = [];
arr3.length = arrayLength;
需要注意的是,arrayLength必须是一个Number,否则将会创建一个只包含单个元素的数组。此外,如果你希望用单个Number元素初始化数组,必须使用括号语法,因为当单个Number传递给Array()构造函数时,它会被解释为数组长度而非单个元素。
引用数组元素
数组元素可以通过索引来引用。假设你定义了以下数组:
const myArray = ["Wind", "Rain", "Fire"];
你可以将数组的第一个元素引用为myArray[0],将数组的第二个元素引用为myArray[1],以此类推。元素的索引从零开始。
需要注意的是,你也可以使用属性访问器来访问数组的其他属性,就像对象一样:
const arr = ["one", "two", "three"];
arr[2]; // three
arr["length"]; // 3
填充数组
你可以通过给数组元素赋值来填充数组:
const emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";
需要注意的是,如果你给数组运算符的是一个非整型数值,那么它将作为对象的属性创建,而不是数组的元素。你也可以在创建数组的时候直接填充它:
const myArray = new Array("Hello", myVar, 3.14159);
// 或
const myArray = ["Mango", "Apple", "Orange"];
理解length属性
在JavaScript中,length属性是特殊的,如果存在最后一个元素,则其值总是大于其索引的正整数。记住,JavaScript数组索引是基于0的,这意味着length属性将比最大的索引值大1:
const cats = [];
cats[30] = ["Dusty"];
console.log(cats.length); // 31
你也可以给length属性赋值。写一个小于数组元素数量的值将截断数组,写0会彻底清空数组:
const cats = ["Dusty", "Misty", "Twiggy"];
console.log(cats.length); // 3
cats.length = 2;
console.log(cats); // ['Dusty', 'Misty'] - Twiggy已经被移除了
cats.length = 0;
console.log(cats); // 输出[],猫名称的数组现在已经空了
cats.length = 3;
console.log(cats); // 输出[<3 empty items>]
遍历数组
遍历数组是常见的操作,最简单的方法是使用for循环:
const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
如果你确定数组中没有元素求值为false,可以使用更高效的方法:
const divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
/* 以某种方式处理div */
}
forEach()方法提供了遍历数组元素的另一种方式:
const colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
// red
// green
// blue
需要注意的是,在数组定义时省略的元素不会在forEach遍历时被列出,但是手动赋值为undefined的元素是会被列出的。由于JavaScript元素被保存为标准对象属性,因此不建议使用for...in循环遍历JavaScript数组,因为普通元素和所有可枚举属性都将被列出。
数组方法
Array对象提供了多种方法来操作数组:
- concat() - 连接两个或多个数组并返回一个新的数组
- join() - 将数组中的所有元素连接成一个字符串
- push() - 在数组末尾添加一个或多个元素,并返回数组操作后的length
- pop() - 从数组移出最后一个元素,并返回该元素
- shift() - 从数组移出第一个元素,并返回该元素
- unshift() - 在数组开头添加一个或多个元素,并返回数组的新长度
- slice() - 从数组提取一个片段,并作为一个新数组返回
- at() - 返回数组中指定索引处的元素,如果索引超出范围,则返回undefined
- splice() - 从数组移除一些元素,并(可选地)替换它们
- reverse() - 原地颠倒数组元素的顺序
- flat() - 返回一个新数组,所有子数组元素递归地连接到其中,直到指定的深度
- sort() - 对数组的元素进行适当的排序
此外,Array对象还提供了多种迭代方法:
- forEach() - 对数组中的每个元素执行回调
- map() - 返回由每个数组元素上执行回调的返回值所组成的新数组
- flatMap() - 先执行map(),再执行深度为1的flat()
- filter() - 返回一个新数组,其中包含回调返回true的元素
- find() - 返回回调返回true的第一个元素
- findLast() - 返回回调返回true的最后一个元素
- findIndex() - 返回回调返回true的第一个元素的索引
- findLastIndex() - 返回回调返回true的最后一个元素的索引
- every() - 如果回调对数组中的每一个元素都返回true,则返回true
- some() - 如果回调对数组中至少一个元素返回true,则返回true
- reduce() - 对数组中的每个值执行回调,目的是将列表中的元素减少到单个值
- reduceRight() - 类似于reduce(),但从最后一个元素开始
稀疏数组
数组可以包含"空槽",这与用值undefined填充的槽不一样。空槽可以通过以下方式之一创建:
// Array构造函数:
const a = Array(5); // [<5 empty items>]
// 数组字面量中的连续逗号:
const b = [1, 2, , , 5]; // [1, 2, <2 empty items>, 5]
// 直接给大于array.length的索引设置值以形成空槽:
const c = [1, 2];
c[4] = 5; // [1, 2, <2 empty items>, 5]
// 通过直接设置.length拉长一个数组:
const d = [1, 2];
d.length = 5; // [1, 2, <3 empty items>]
// 删除一个元素:
const e = [1, 2, 3, 4, 5];
delete e[2]; // [1, 2, <1 empty item>, 4, 5]
在某些操作中,空槽的行为就像它们被填入了undefined那样。但在其他方法,特别是数组迭代方法时,空槽是被跳过的。
多维数组
数组是可以嵌套的,这意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript数组的这个特性,可以创建多维数组。以下代码创建了一个二维数组:
const a = new Array(4);
for (i = 0; i < 4; i++) {
a[i] = new Array(4);
for (j = 0; j < 4; j++) {
a[i][j] = "[" + i + "," + j + "]";
}
}
这个例子创建的数组拥有以下行数据:
Row 0: [0,0] [0,1] [0,2] [0,3] Row 1: [1,0] [1,1] [1,2] [1,3] Row 2: [2,0] [2,1] [2,2] [2,3] Row 3: [3,0] [3,1] [3,2] [3,3]
使用数组存储其他属性
数组也可以像对象那样使用,以存储相关信息:
const arr = [1, 2, 3];
arr.property = "value";
console.log(arr.property); // "value"
例如,当一个数组作为字符串和正则表达式的匹配结果时,该数组将会返回相关匹配信息的属性和元素。
使用类数组对象
一些JavaScript对象,如document.getElementsByTagName()返回的NodeList或arguments等,有与数组相似的行为,但它们并不共享数组的所有方法。不能直接在类数组对象上调用数组方法,但可以通过Function.prototype.call()间接调用它们:
function printArguments() {
Array.prototype.forEach.call(arguments, (item) => {
console.log(item);
});
}
数组原型方法也可以用于字符串,因为它们以类似于数组的方式提供对其中字符的顺序访问:
Array.prototype.forEach.call("a string", (chr) => {
console.log(chr);
});
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。
开发学习网



