javascript中的多维数组|数组示例

543 阅读4分钟

这是一个关于javascript多维数组的简短教程,并附有实例。 在这个教程中,你将学到以下内容

  • 例子
  • 在多维数组中添加一个元素的开始、中间、结束点
  • 删除一个多维数组的开始、中间、结束元素
  • 迭代多维数组
  • 打印和显示数组的数组
  • 多维数组示例
  • 一维和二维数组

Javascript没有内置的多维数组synax。但是你可以创建一个数组,其中每个数组元素都是一个数组的值。

多维数组可以是2乘2的矩阵,也可以是2乘3的阵列。

如何在javascript中创建一个一维数组

在这个数组中,每个元素都是单一的,元素是字符串或数字或对象。

我们可以用数组字面的语法来创建一个一维的数组。

let numbers=[1,2,3,4]
let names=["one","two","three"]

如何在Javascript中创建一个多维数组?

多维数组可以通过两种方式创建

一种方式,在这种方式中,直接用数组字面语法创建数组,定义每个元素是一个2个元素的数组。

let matrix=[    ["one",1],
    ["two",2],
    ["three",3],
]

第二种方法,定义单独的数组,将数组添加到主数组对象中,这就是多维数组。

let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]

如何访问一个多维数组的元素?

让我们声明一个数组的数组

可以使用带方括号的索引来访问元素

第一个索引指向第一个内部数组 第二个索引指向一个内部数组的各个元素

let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]
console.log(numbers) // prints entire object
let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]
console.log(numbers[0]) //[1,2,3]
console.log(numbers[0][0]) //1
console.log(numbers[1]) //[10,20,30]
console.log(numbers[1][0]) //10
console.log(numbers[2]) // [100,200,300]
console.log(numbers[2][0])  //100

打印多维数组

在javascript中,console.log用于打印任何对象

如果你使用console.log(多维数组),你会得到如下的输出结果

(3) [(3) [1,2,3],
(3) [10,20,30],
(3) [100,200,300]]

在控制台中调试和读取数值是非常困难的

你可以使用控制台表格方法对象来显示漂亮的表格格式

 -----------------------
|(index)|   0   |   1   | 1   |
|   0   |   1   |   2   | 3   |
|   1   |   10  |   20  | 30  |
|   2   |   100 |   200 | 300 |
 -----------------------

你也可以使用JSON stringify ,来打印一个数组的阵列

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]

为多维数组添加一个元素

Javascript数组提供了pushsplice添加一个元素到数组中。push将一个元素添加到数组的末尾 这里是push的一个例子

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.push([121,123])
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300],[121,123]]

splice 方法在给定索引的任何位置添加元素。在下面的例子中,元素被添加到索引=0的第三个元素。

console.log(JSON.stringify(numbers)) 
numbers.splice(2,0,[121,123])
console.log(JSON.stringify(numbers)) 

用for循环遍历多维数组

在javascript中,我们有多种方法来迭代数组。

像普通的数组一样,我们可以使用for循环来迭代数组的每个元素。

对于多维数组,我们可以使用javascript中的嵌套for循环

for(var i = 0; i < numbers.length; i++) {
    var number = numbers[i];
    for(var j = 0; j < number.length; j++) {
        console.log("[" + i + "][" + j + "] = " + number[j]);
    }
}

输出:

[0][0] = 1
[0][1] = 2
[0][2] = 3
[1][0] = 10
[1][1] = 20
[1][2] = 30
[2][0] = 100
[2][1] = 200
[2][2] = 300

在ES6中引入了forEach,用来遍历可枚举的属性。

下面是一些步骤

  • 使用 forEach 迭代多维数组
  • 检查每个元素
  • 如果元素是一个数组,继续使用foreach进行迭代
  • 如果元素不是一个数组,则打印该元素
numbers.forEach(function each(element) {
  if (Array.isArray(element)) {
    element.forEach(each);
  } else {
    console.log(element);
  }
});

输出

1
2
3
10
20
30
100
200
300

从多维数组中删除一个元素

可以使用popsplice 方法从一个数组中删除元素

元素可以从多维数组的主数组或内数组中删除

如果你想删除最后一个元素,使用pop 方法,如下图所示

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.pop();
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30]]

使用shift方法从数组的开始位置移除一个元素 :

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.shift()
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]

要从数组的中间位置移除一个元素,使用splice 方法 在下面的例子中,移除第二个内部数组的元素

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.splice(2,1);
console.log(JSON.stringify(numbers)) //[[1,2,3],[10,20,30]]