为什么这两个javascript 2d阵列的行为有所不同?

前端之家收集整理的这篇文章主要介绍了为什么这两个javascript 2d阵列的行为有所不同?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在我的函数中,我定义了两个数组,第一个(array1),具有预初始化的长度.我添加了第二个数组(array2)仅用于测试,因为我认为第一个表现很奇怪.

我的代码

function test(n = 3) {
  array1 = new Array(n).fill(new Array(n));
  array2 = [
    [undefined,undefined,undefined],[undefined,undefined]
  ];

  document.getElementById("output").innerHTML = JSON.stringify(array1) + " (array 1) 

在for循环中,我尝试更改第二个维度的第一个值.它应该输出[[0,[1,[2,undefined]],就像第二个数组一样.

我的问题是:为什么会这样?而且,如何在两个维度上创建一个长度为n的预初始化数组,其行为类似于第二个数组?

最佳答案
因为Array.fill

The fill() method fills all the elements of an array from a start index to an end index with a static value.

获取静态值并使用它填充数组.因此,您可以在array1的每个元素中获得相同的填充数组.

function test(n = 3) {
    var array1 = new Array(n).fill(new Array(n)),array2 = [[undefined,i;

    for (i = 0; i < n; i++) {
        array1[i][0] = i;
        array2[i][0] = i;
    }

    document.getElementById("output").innerHTML = array1 + " (array 1) 

要获得独立的填充数组,可以使用Array.from并使用映射值映射新数组.

var array = Array.from({ length: 3 },_ => Array.from({ length: 3 },_ => 4));

array[0][0] = 0;
console.log(array);
.as-console-wrapper { max-height: 100% !important; top: 0; }

猜你在找的JavaScript相关文章