二维数组在 JavaScript 开发中是比较常见的数据结构,在本文将介绍如何使用 JavaScript 创建二维数组并对其进行操作,在JavaScript中常见的数组操作方法大概 10 个左右,可以参阅《JavaScript 数组操作必须熟练运用的10个方法》。
多维数组
JavaScript 本身不提供多维数组,但是,可以通过定义元素数组来创建多维数组,其中每个元素也是另一个数组,出于这个原因,可以说 JavaScript 多维数组是数组的数组,即嵌套数组。定义多维数组的最简单方法是使用数组字面量表示法。
要声明一个空的多维数组,可以使用与声明一维数组相同的语法,如下定义一个二维数组:
constmonths=[["一月",1],["二月",2],["三月",3],];
在数组 months
中,第一个维度表示中文月份,第二个维度显示对应的数字。要在控制台中显示这个二维数组,可以使用console.table()
方法清晰的展示其二维数组:
要访问多维数组的元素,首先使用方括号访问返回内部数组的外部数组元素;然后使用另一个方括号访问内部数组的元素。如下:
console.log(months[0][1]);//1
数组声明
根据上面的介绍,二维数组为 嵌套数组 ,理解了其原理就大概知道声明方式。
嵌套数据
在 JavaScript 中,二维数组只是一种嵌套数组,如下:
constarrayNumbers=[[1,2],[3,4],[5,6],];console.log(arrayNumbers[0][0]);console.log(arrayNumbers[0][1]);console.log(arrayNumbers[1][0]);console.log(arrayNumbers[1][1]);console.log(arrayNumbers);//[[1,2],[3,4],[5,6]]
创建空的二维数组
要创建一个空的二维数组,可以使用 Array.from
和 Array
构造函数。
constarrayNumbers=Array.from(Array(2),()=>newArray(4));console.log(arrayNumbers);
Array.from
方法允许从另一个数组创建一个数组,第一个参数是要从新数组派生的数组,第二个参数是一个函数,它将第一个数组中的值映射到想要的值。上面的代码将得到一个 2x4
的二维数组,此外,可以仅使用 Array
函数来创建一个二维数组。
constarrayNumbers=Array(2).fill().map(()=>Array(4));console.log(arrayNumbers);
通过调用 fill
方法来填充,这样,就可以在 map
回调中调用和返回数组来创建二维数组。
数组操作
二维数组为 嵌套数组 ,操作的方式结合一维数组的方法。
添加元素
可以使用诸如push()
和 splice()
之类的 Array
方法来操作多维数组的元素。例如,要在多维数组的末尾添加一个新元素,使用 push()
方法,如下所示:
months.push(["四月",4]);
要在数组中间插入一个元素,使用 splice()
方法,下面在数组的第二个位置插入一个元素:
months.splice(1,0,["一月后",1]);
移除元素
要从数组中删除元素,可以使用 pop()
或 splice()
方法。
例如,以下语句删除数组的最后一个元素:
months.pop();
同样,可以使用 pop()
方法从多维数组的内部数组中删除元素,如下:
months.forEach((month)=>{month.pop(2);});console.table(months);
迭代多维数组
要迭代多维数组,需要使用嵌套的 for
循环,如下例所示:
for(leti=0;i<months.length;i++){varinnerArrayLength=months[i].length;for(letj=0;j<innerArrayLength;j++){console.log("["+i+","+j+"]="+months[i][j]);}}
第一个循环遍历外部数组的元素,嵌套循环遍历内部数组的元素,上面的代码输出如下:
console.log(months[0][1]);//10
总结
可以通过嵌套数组字面量来创建 JavaScript 二维数组,也可以使用 Array
函数创建二维数组。在 JavaScript 中多维数组几乎可以作为一维数组工作,二维数组是具有共同名称的元素的集合,它们以行和列的形式组织为矩阵,二维数组是数组的数组。