Question

我无法找到直截了当的答案。如何在不使用幻数的情况下引用元素的各个部分？

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

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

Answer 1

我在使用Google表格API处理电子表格之前遇到过这个问题。你可以这么做：

const AGE_COL = 1;
const SEX_COL = 2;

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

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

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;

但是，你应该避免在全局范围内使用常量。相反，您应该创建一个对象来保存（范围）这些值。这样，您就可以将数据转换为可通过键访问的对象。

＆＃13;

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));

＆＃13;

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

＆＃13;

你可以设计一个这样的功能。

＆＃13;

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;
  }, {})
}

＆＃13;

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

＆＃13;

Answer 3

你可以deconstruct将表行排入变量而不使用索引

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以为age和sex创建空数组并将其填入循环中。

引用数组时避免使用幻数

3 个答案: