Почему for...of является жемчужиной в JS

внешний интерфейс JavaScript
Почему for...of является жемчужиной в JS

Что делает новую функцию языка программирования великолепной? Это когда функция может быть объединена с несколькими другими функциями.

ES2015представлен в версииfor...ofЭто касается заявлений.

for...ofВы можете перебирать массивы, массивоподобные объекты и любой итерируемый объект (maps,sets,DOM集合),и,for...ofПриговор по-прежнему очень короткий.

В этой статье я продемонстрируюfor...ofСпособность.

1. Итерация массива

for...ofНаиболее распространенное приложение — перебор элементов массива. Цикл может эффективно завершить итерацию без необходимости использования дополнительных переменных для хранения индекса.

Например:

const products = ['oranges', 'apples'];

for (const product of products) {
  console.log(product);
}
// 'oranges'
// 'apples'

for...ofПереберитеproductsкаждого предмета. Элементы итератора назначаются переменнымproduct.

метод массиваentries()Индекс, который можно использовать для доступа к элементу итерации. Метод возвращает пару на каждой итерации[index，item].

Деструктуризация на местеfor...ofЕще одна важная особенность , которую мы подробно опишем в следующем разделе.

1.1 Деструктуризация на месте

Во-первых, давайте посмотрим наfor...ofСинтаксис цикла:

for (LeftHandSideExpression of Expression) {
  // statements
}

LeftHandSideExpressionВыражения можно заменить содержимым левой части любого выражения присваивания.

В предыдущем примереLeftHandSideExpressionэто объявление переменнойconst product, даже деконструкцияconst [index，product].

следовательно,for...ofСинтаксис поддерживает деструктурирование для реализации итерируемых элементов.

Давайте пройдемся по массиву объектов, извлекаяnameАтрибуты:

const persons = [
  { name: 'John Smith' },
  { name: 'Jane Doe' }
];

for (const { name } of persons) {
  console.log(name);
}
// 'John Smith'
// 'Jane Doe'

const { name } of personsповторение циклаpersonsмассив объектов, и на месте будетpersonОбъекты деконструируются.

2. Массивная итерация

for...ofМожет использоваться для перебора массивоподобных объектов.argumentsЭто специальная переменная в теле функции, содержащая все параметры функции, представляющая собой классический массивоподобный объект.

Напишем функцию суммированияsum(num1, num2, ..., numN):

function sum() {
  let sum = 0;
  for (const number of arguments) {
    sum += number;
  }
  return sum;
}

sum(1, 2, 3); // => 6

В каждой итерацииfor...ofцикл по массиву классовargumentsдля каждого числа и вычислить сумму.

3. Быстро понять итерации

Что такое итерируемый объект? это поддерживаетсяИтерируемый протоколОбъект.

Мы можем видетьSymbol.iteratorметод, чтобы определить, является ли часть данных итерируемой. Например, в следующем примере показано, что массивы являются итерируемыми:

const array = [1, 2, 3];
const iterator1 = array[Symbol.iterator]();
iterator1.next(); // => { value: 1, done: false }

Если вы хотите узнать больше, вы всегда можете прочитать меняпредыдущая статья.

for...ofПринимает итерируемый объект. Это здорово, потому что теперь вы можете повторятьstring, массив, подобный массиву,set,map, продолжая наслаждатьсяfor...ofпростоты.

4. Итерация строки

JavaScriptбазовый типstringявляется итерируемым. Таким образом, легко перебирать символы строки.

const message = 'hello';

for (const character of message) {
  console.log(character);
}
// 'h'
// 'e'
// 'l'
// 'l'
// 'o'

messageявляется строкой. Поскольку строки являются итерируемыми, поэтомуfor...ofПереберитеmessage.

5. Сопоставьте и установите итерацию

Map— это специальный объект, который связывает ключи со значениями. ключи могут быть любого примитивного типа (обычноstring, но может бытьnumberЖдать).

К счастью,Mapтакже является итерируемым (перебор пар ключ/значение) иfor...ofЛегко перебирать все пары ключ/значение.

Посмотрите вместе:

const names = new Map();
names.set(1, 'one');
names.set(2, 'two');

for (const [number, name] of names) {
  console.log(number, name);
}
// logs 1, 'one'
// logs 2, 'two'

for (const [number, name] of names)повторятьnamesпара ключ-значение.

В каждом цикле итератор возвращает массив[key，value]и использоватьconst [number，name]Немедленно деструктурируйте пару массивов.

можно пройти таким же образомSetПредметы:

const colors = new Set(['white', 'blue', 'red', 'white']);

for (let color of colors) {
  console.log(color);
}
// 'white'
// 'blue'
// 'red'

6. Перебор простых объектов JavaScript

Попытка перебрать свойства/значения простых объектов JS — это всегда боль. Раньше я обычно использовалObject.keys()чтобы получить ключ объекта, затем используйтеforEachдля перебора массива ключей. [Переводчик: Это не мое мнение, я предпочитаю использоватьfor...inОбход объектов, но нужно обратить вниманиеfor...inпобочные эффекты

const person = {
  name: 'John Smith',
  job: 'agent'
};

Object.keys(person).forEach(prop => {
  console.log(prop, person[prop]);
});
// 'name', 'John Smith'
// 'job', 'agent'

новыйObject.entries()функция сfor...ofЭто хороший выбор для использования комбинации:

const person = {
  name: 'John Smith',
  job: 'agent'
};

for (const [prop, value] of Object.entries(person)) {
  console.log(prop, value);
}
// 'name', 'John Smith'
// 'job', 'agent'

Object.entries(person)Возвращает массив кортежей с ключами и значениями:[[''name'，'John Smith']，['job'，'agent']]. Затем используйтеfor...ofПрокрутите массив и деструктурируйте каждый кортеж какconst [prop，value].

7. Пройдитесь по коллекции DOM

ты наверное знаешьHTMLCollectionудручающий. В основном потому, чтоHTMLCollectionявляется массивоподобным объектом (не обычным массивом), поэтому мы не можем использовать методы массива.

Например, каждыйDOMэлементальchildrenсвойстваHTMLCollection. к счастьюfor...ofМожет перебирать массивоподобные объекты, поэтому мы можем легко перебиратьchildren:

const children = document.body.children;

for (const child of children) {
  console.log(child); // logs each child of <body>
}

также,for...ofповторяемыйNodeListКоллекция (повторяемая). Например, функцияdocument.querySelectorAll(query)вернутьNodeList:

const allImages = document.querySelectorAll('img');

for (const image of allImages) {
  console.log(image); // log each image in the document
}

Если вы хотите пройтиDOMразличные виды наборов в , тоfor...ofЗаявления — хороший выбор.

8. Производительность

При переборе больших массивовfor...ofможет быть медленнее, чем классический подход:

const a = [/* big array */];
for (let i = 0; i < a.length; i++) {
  console.log(a[i]);
}

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

9. Резюме

зачем говоритьfor...ofявляется драгоценным камнем, потому что:

  • это лаконично
  • Он принимает итераторы, включая массивы, строки,Set,Map, коллекция ДОМ
  • Он принимает массивоподобные объекты
  • Итеративные элементы могут быть деструктурированы на месте.

Каков ваш предпочтительный способ перебора элементов массива?

Наконец:

Оригинальный адрес:Рисовое путешествие avlutin.com/JavaScript-…

Комментарии: Перевод ужасный, лучше машинного перевода. Ха-ха-ха-ха.

掘金使用

Категории