Tại sao hai javascript 2d mảng này hoạt động khác nhau?

Question

Trong chức năng của tôi, tôi đã xác định hai mảng, đầu tiên (array1), có độ dài được khởi tạo trước. Tôi đã thêm mảng thứ hai (array2) chỉ để thử nghiệm bởi vì tôi nghĩ rằng đầu tiên là hành xử kỳ lạ.

Mã của tôi:

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

 
    document.getElementById("output").innerHTML = JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><hr/>"; 
 

 

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

 
    document.getElementById("output").innerHTML += JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><hr/>"; 
 

 
}

<button onclick="test();">Press to test</button> 
 

 
<br/><br/> 
 
<div id="output"></div>

Trong for vòng lặp, tôi cố gắng để thay đổi giá trị đầu tiên của các kích thước thứ hai. Nó sẽ xuất ra [[0, undefined, undefined], [1, undefined, undefined], [2, undefined, undefined]], giống như mảng thứ hai.

Câu hỏi của tôi là: tại sao điều này lại xảy ra? Và, làm thế nào tôi có thể tạo một mảng được khởi tạo trước với độ dài n trong cả hai chiều, hoạt động giống như mảng thứ hai?

Answer 1

Vì Array.fill

Phương pháp fill() lấp đầy tất cả các yếu tố của một mảng từ một chỉ số đầu đến một chỉ số cuối với một giá trị tĩnh.

mất giá trị tĩnh và lấp đầy mảng bằng giá trị đó. Vì vậy, bạn nhận được trong mọi yếu tố của array1 cùng một mảng của điền.

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

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

 
    document.getElementById("output").innerHTML = array1 + " (array 1) <br/>" + array2 + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i>"; 
 
    console.log(array1); 
 
    console.log(array2); 
 
}

<button onclick="test();">Press to test</button><br/><br/> 
 
<div id="output"></div>

Để có được một độc lập đầy mảng, bạn có thể sử dụng Array.from và ánh xạ một mảng mới với giá trị ánh xạ.

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; }

Answer 2

Đó là bởi vì trong trường hợp array1 nó chứa ba mảng, nhưng cả ba đều trỏ đến biến tham chiếu tương tự, đã được đánh giá khi new Array(n) được thực hiện:

var array1 = new Array(n).fill(new Array(n)); 

Vì vậy, khi for vòng lặp chạy trên array1 nó đang thiết lập giá trị của cùng một tham chiếu mảng, trong trường hợp của array2 ba mảng đó là các biến tham chiếu khác nhau.

Đây là phiên bản được sửa đổi một chút của đoạn mã của bạn. Lưu ý các mục nhập vào bảng điều khiển khi giá trị của phần tử array1 đang được thay đổi. Trong trường hợp array1 tất cả ba mảng con đang thay đổi, trong trường hợp của array2 mảng được tham chiếu trong vòng lặp sử dụng chỉ mục i là chỉ có một thay đổi.

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

 
    document.getElementById("output").innerHTML = JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i><hr/>"; 
 

 

 
    for (i = 0; i < n; i++) { 
 
    array1[i][0] = i; 
 
    array2[i][0] = i; 
 
    console.log("Array 1: " + JSON.stringify(array1)); 
 
    console.log("Array 2: " + JSON.stringify(array2)); 
 
    } 
 

 
    document.getElementById("output").innerHTML += JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i><hr/>"; 
 

 
}

<button onclick="test();">Press to test</button> 
 

 
<br/><br/> 
 
<div id="output"></div>