如何使用forEach()在二维数组中选择对象的属性

Question

我正试图根据对象的属性更改单击时div的背景颜色，但我一直纠结于如何检查每个对象的属性。

共有5x5 25个对象的二维阵列：

let tab = [[object{bombe: false}, object{bombe: false}, object{bombe: 
true}, object{bombe: false}, object{bombe: true}], [object{bombe: 
false}, ...

函数创建一个HTML表，并为每个div设置一个带有2个数字的ID：

function afficher() {
for (let i = 0; i < 5; ++i) {
for (let j = 0; j < 5; ++j) {
let element = document.createElement("div");
element.innerHTML = "&nbsp;";
element.id = `${i}${j}`;
document.body.appendChild(element);
}
document.write("<br>");
}
}

添加一个函数，根据"bombe"属性将类添加到div：

let cellules = document.querySelectorAll("div");
cellules.forEach(c => c.addEventListener("click", jeu));
function jeu() {
if (this.id.bombe) {
this.setAttribute("class", "red");
cellules.forEach(c => c.removeEventListener("click", jeu));
} else {
this.setAttribute("class", "grey");
}
}

我知道这个代码会显示true或false，但这只适用于一个对象…：

let x = tab[0][0].bombe
console.log(x);

我可以用forEach做这个吗？

Answer 1

如果我答对了你的问题，你希望基于存储在变量中的颜色映射将某些样式应用于div的2d数组。如果不使用jQuery，我将采用懒惰的方式：操作innerHTML而不是DOM对象，并一次呈现所有内容(在一个函数内(。你可能会在下面找到一个例子：

var matrix = [[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:true}],
[{attr:true}, {attr:false}, {attr:false}, {attr:true}, {attr:true}],
[{attr:false}, {attr:true}, {attr:true}, {attr:false}, {attr:false}],
[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:false}],
[{attr:true}, {attr:true}, {attr:false}, {attr:true}, {attr:false}]]
var renderer = (arg) => {
	arg.forEach((row,rownum) => {
		document.querySelector('#box').innerHTML += '<div class="row" rownum="'+rownum+'">';
		row.forEach((cell,cellnum) => {
			let conditionalClass = cell.attr ? 'grey' : 'red';
			document.querySelector('[rownum="'+rownum+'"]').innerHTML += '<div class="cell '+conditionalClass+'" cellnum="'+cellnum+'">'
		});
		document.querySelector('#box').innerHTML += '</div>';
	});
};
renderer(matrix);

.row {
height: 30px;
}
.cell {
width: 30px;
height: 100%;
float: left;
}
.red {
background-color: red;
}
.grey {
background-color: grey;
}

<div id="box"></div>

Answer 2

您可以使用以下内容

function afficher(tab) {
tab.forEach( (row, i) => {
row.forEach( (obj, j) => {
let element = document.createElement("div");
element.innerHTML = " ";
element.id = `${i}${j}`;
document.body.appendChild(element);
});
document.write("<br>");
});
}

注意，使用afficher时，必须将tab作为参数传递