在元素属性中存储/提取整数数组[关闭]

Question

我正在尝试基于 JavaScript 中的 2d 网格构建游戏。

在嵌套的 for 循环中，我这样设置单元格的数据属性：

cell.setAttribute('data-pos',[i,j]);

在我的事件处理程序中，我得到如下数据：

let pos = event.target.getAttribute('data-pos');

当我尝试访问 pos 的元素时，发生了一些奇怪的事情。

对于具有data-pos 或[1, 3] 的单元格，

当我使用console.log:时得到以下值

pos[0] = 1
pos[1] = ,
pos[2] = 3

不知何故，逗号被视为数组元素。

这是为什么以及如何正确地将 i 和 j 的值传递给事件处理程序？

Answer 1

正如@ggorlen 在 cmets 中指出的那样，cell.setAttribute('data-pos',[i,j]) 行将'1,3' 的字符串 值分配给您的data-pos 属性（因为它的值不能是数组）。

如果这对您来说没问题，您可以通过以下方式将数据重新放入数组中：

let pos = event.target.getAttribute('data-pos').split(',')

如果您希望将数据传递给 DOM 并在单击时将其取回并避免解析字符串化值，您可以引入 2 个data-* 属性，例如data-pos-i/data-pos-j：

const cells = ((i,j) => Array.from(
                {length:i*j},
                (_,k) => ({id:k, i:k%j, j:0|(k/j)%i}))
              )(5,3),
      matrix = (flatArr => 
                  flatArr.reduce((r,{id,i,j},k) => 
                    (r[i]=(r[i]||[]), r[i][j] = {id, i, j}, r), [])
               )(cells),
      tableHTML = (tableData => {
                    const rowsHTML = tableData
                                      .map(tableRow => 
                                          '<tr>'+tableRow.map(({id,i,j}) => `<td id=${id} data-pos-i="${i}" data-pos-j="${j}"></td>`).join('')+'</tr>')
                                      .join('')
                    return `<table>${rowsHTML}</table>`
                  })(matrix),
      mytable = document.getElementById('mytable')
      
mytable.innerHTML = tableHTML

mytable.addEventListener('click', ({target}) => {
  const cellData = {i:target.dataset.posI, j:target.dataset.posJ}
  console.log(cellData)
})

#mytable td {
  display: table-cell;
  width: 20px;
  height: 20px;
  background: grey;
  cursor: pointer;
}

#mytable td:hover {
  background: #fff;
}

<table id="mytable"></table>

但是，更好的方法是不要在状态和 DOM 之间来回反弹您的数据。

相反，您可以将单元格存储为一个平面对象数组，其中每个单元格对象都有i、j-坐标绑定到唯一的id（以及其他必要的数据），因此点击后您可以通过 id 查找任何绑定数据：

const cells = ((i,j) => Array.from(
                {length:i*j},
                (_,k) => ({id:k, i:k%j, j:0|(k/j)%i}))
              )(5,3),
      matrix = (flatArr => 
                  flatArr.reduce((r,{id,i,j},k) => 
                    (r[i]=(r[i]||[]), r[i][j] = id, r), [])
               )(cells),
      tableHTML = (tableData => {
                    const rowsHTML = tableData
                                      .map(tableRow => 
                                          '<tr>'+tableRow.map(cellData => `<td id=${cellData}></td>`).join('')+'</tr>')
                                      .join('')
                    return `<table>${rowsHTML}</table>`
                  })(matrix),
      mytable = document.getElementById('mytable')
      
mytable.innerHTML = tableHTML

mytable.addEventListener('click', ({target}) => {
  const cellData = cells.find(({id}) => id == target.id)
  console.log(cellData)
})

#mytable td {
  display: table-cell;
  width: 20px;
  height: 20px;
  background: grey;
  cursor: pointer;
}

#mytable td:hover {
  background: #fff;
}

<table id="mytable"></table>