引用数组时避免魔术号码

Question

我找不到简单的答案。如何在不使用魔法数字的情况下参考元素的一部分？

在这种情况下，我试图将从HTML表的几个单元的值放在变量中：

：

const age = personRow.cells[1].innerText;
const sex = personRow.cells[2].innerText;

Answer 1

在使用Google Shees API操纵电子表格时，我之前遇到了这个问题。您可以做：

const AGE_COL = 1;
const SEX_COL = 2;
const age = personRow.cells[AGE_COL].innerText;
const sex = personRow.cells[SEX_COL].innerText;

对于简单的代码，这起作用，并且是相当自我记录的。但是，您可能需要处理几种不同类型的表"结构"。我对此的解决方案是：

const FIELDS = {
    PERSON: {
        AGE: 1,
        SEX: 2
    }
}
const age = personRow.cells[FIELDS.PERSON.AGE].innerText;
const sex = personRow.cells[FIELDS.PERSON.SEX].innerText;

我发现这更容易读取，更容易扩展。

Answer 2

实现此目的的最简单方法是获取数据字段的索引。请注意，如果您的字段不存在，则可以从范围中获得索引。

const FIELDS = [ 'age', 'sex' ]; // Defined in data header?
const age = personRow.cells[FIELDS.indexOf('age')].innerText;
const sex = personRow.cells[FIELDS.indexOf('sex')].innerText;

---

但是，您应该避免在全球范围中使用常数。相反，您应该创建一个对象以保持(范围(这些值。这样，您可以将数据转换为可通过键访问的对象。

const FIELDS = [ 'age', 'sex' ];
var personRow = { 'cells' : [ 21, 'male' ] };
var data = {};
for (var i = 0; i < personRow.cells.length; i++) {
  var field = FIELDS[i];
  data[field] = personRow.cells[i];
}
console.log(JSON.stringify(data, null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

---

您可以设计这样的功能。

var personRow = { 'cells' : [ 21, 'male' ] };
var data = dataArrayToObject(personRow.cells, [ 'age', 'sex' ]);
console.log(JSON.stringify(data, null, 2));
/**
 * Returns an object from the data array. If no fields are specified,
 * the index of value will be used as the key.
 *
 * @param {object[]} data An array of values to assign to the given fields.
 * @param {string[]} fields The iterable, object keys.
 * @return Returns an array of key-value pairs specified by the indexed fields.
 */
function dataArrayToObject(data, fields) {
  fields = fields || [];
  return data.reduce((obj, val, i) => {
    obj[i < fields.length ? fields[i] : i] = val;
    return obj;
  }, {})
}

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 3

您可以在不使用索引

的情况下将表行分解为变量

[...document.querySelector('#myTable').rows].forEach(row => {
  const [age, sex] = [...row.cells]
  console.log(age.innerText, sex.innerText)
});

<table id="myTable">
  <tr>
    <td>25</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>23</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>28</td>
    <td>Female</td>
  </tr>
</table>

您可以为age和sex创建空数组