这是一个关于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数组提供了push 和splice 来添加一个元素到数组中。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
从多维数组中删除一个元素
可以使用pop 或splice 方法从一个数组中删除元素
元素可以从多维数组的主数组或内数组中删除
如果你想删除最后一个元素,使用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]]