Избегайте магического числа при обращении к массиву - PullRequest
Новая
       45

Избегайте магического числа при обращении к массиву

0 голосов
/ 24 апреля 2018

Я не могу найти прямой ответ на это. Как я могу ссылаться на части элемента без использования магических чисел?

В этом случае я пытаюсь поместить значения нескольких ячеек строки из таблицы HTML в переменные: 

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

Ответы [ 3 ]

0 голосов
/ 24 апреля 2018

вы можете деконструировать строку таблицы в переменные без использования индексов 

[...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 и заполнить их в цикле ..

0 голосов
/ 24 апреля 2018

Раньше у меня была эта проблема при использовании API Google Sheets для работы с электронными таблицами.Вы можете просто сделать: 

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;

Я считаю, что это еще более читабельно и его легче расширять.

0 голосов
/ 24 апреля 2018

Самый простой способ сделать это - получить индекс поля данных. Имейте в виду, что вы можете получить индекс вне границ, если ваши поля не существуют. 

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; }
...