Javascript: Đẩy vào một mảng 3d trống

Question

Tôi tạo một mảng 3D 3x3x1 trống

[
  [[],[],[]],
  [[],[],[]],
  [[],[],[]]
]

Bây giờ, phần tử ở vị trí arr[1][1]là [], Vì vậy, Nếu tôi thực thi arr[1][1].push(1)nó sẽ chèn 1vào vị tríarr[1][1]

Có 2 phương pháp để tạo mảng 3x3x1 trống trong JS, Đây là mã,

var arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)

I E. Thông qua phím tắt và một cách thủ công khác, cả hai arr1và arr2phải giống hệt nhau, nên là đầu ra, Nhưng đầu ra như sau,

[[[], [], []], [[1], [1], [1]], [[], [], []]]

[[[], [], []], [[], [1], []], [[], [], []]]

Tại sao mảng đầu tiên lại cho đầu ra như vậy? Không phải là cả hai giống hệt nhau?

Tôi muốn đầu ra có dạng thứ 2, Nếu đây là cách sai để tạo mảng 3x3x1 trống, vui lòng đề xuất một phương pháp sao cho nó cho đầu ra mong đợi.

Answer 1

Sử dụng thêm một bản đồ lồng nhau. Tôi nghĩ rằng filllệnh gọi đó sẽ điền vào đầu tiên mapvới cùng một mảng trong mỗi chiều thứ 2 thay vì một kích thước duy nhất, có nghĩa là chiều thứ 2 tất cả đều tham chiếu đến cùng một mảng.

Các tài liệu từ fillchẵn lưu ý rằng tài liệu valuesẽ giống hệt nhau:

Giá trị để điền vào mảng. (Lưu ý rằng tất cả các phần tử trong mảng sẽ là giá trị chính xác này.)

Ngoài ra (mảng là một đối tượng):

Nếu tham số đầu tiên là một đối tượng, mỗi vị trí trong mảng sẽ tham chiếu đến đối tượng đó.

const arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
const arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
const arr3 = [...new Array(3)].map(() => [...new Array(3)].map(() => []));

arr1[1][1].push(1);
arr2[1][1].push(1);
arr3[1][1].push(1);

console.log(JSON.stringify(arr1)); // [[[],[],[]],[[1],[1],[1]],[[],[],[]]]
console.log(JSON.stringify(arr2)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]
console.log(JSON.stringify(arr3)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]

Nói cách khác:

const expandedArr1 = [...new Array(3)].map(() => {
  /*
   * From MDN fill documentation:
   * Value to fill the array with. (Note all elements in the array will be this exact value.)
   */
  return [...new Array(3)].fill([]); // Every element will get this exact value (reference)
});

// They are the same reference:
console.log(expandedArr1[1][1] === expandedArr1[1][2]);

Answer 2

Lý do điều này xảy ra là vì phương thức điền vào điền vào "giá trị chính xác" trong cả ba.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill Xem Lưu ý trong Mô tả giá trị tham số.

var arr1 = [...new Array(3)].map(e => [...new Array(3)].map(e=>[])); // Note that i have used a map with a function returning an array([]) instead of your fill method
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)