引用数组时避免幻数

Question

我找不到一个直接的答案。如何在不使用幻数的情况下引用元素的各个部分？

在这种情况下，我试图将来自 HTML table 的一行中的几个单元格的值放入变量中：

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

Answer 1

完成此操作的最简单方法是获取数据字段的索引。请注意，如果您的字段不存在，您可能会得到一个超出范围的索引。

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 2

您可以 deconstruct 将 table 行放入变量中而不使用索引

[...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 创建空数组并在循环中填充它们..

Answer 3

我以前在使用 Google Sheets API 操作电子表格时遇到过这个问题。你可以这样做：

const AGE_COL = 1;
const SEX_COL = 2;

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

对于简单的代码，这是有效的，并且是相当自我记录的。但是，您可能需要处理几种不同类型的 table "structure"。我的解决方案是：

const FIELDS = {
    PERSON: {
        AGE: 1,
        SEX: 2
    }
}

const age = personRow.cells[FIELDS.PERSON.AGE].innerText;
const sex = personRow.cells[FIELDS.PERSON.SEX].innerText;

我发现它更具可读性和更容易扩展。

引用数组时避免幻数

Avoid magic number when referencing an array

javascript

magic-numbers

node.js