Для цикла, для в, для и для каждого! Ага, они братья? Родители и дети? Или другой….
Для циклов обычные форматы выглядят следующим образом:
for (пусть i = 0; i ‹ 5; i++) {
text += «Число равно « + i + «‹br›»;
Его символ имеет важный индекс i, который имеет область действия от 0 — some.length, затем i++. Это традиционный способ выражения цикла for. Он работает в массиве, но не в объекте, потому что объект не индексируется, как массив.
For in и For of — это более новые типы циклов по сравнению с циклом for.
В w3schools есть определения For in и For of.
- for/in — циклически перебирает свойства объекта
- for/of — циклически перебирает значения итерируемого объекта
Увидели сходство и разницу между for in и for of?
Хорошо, давайте читать построчно. for in is перебирает свойства объекта. Ключевые слова, которые мы получаем, — это «цикл», «свойства» и «объект». Итак, мы знаем, что in служит для объекта, а не для массива. ! И он получает свойства объектов, а не значения.
А для оф? Для получения значений объекта до завершения всех значений объекта. Так что это ценность, а не свойство.
Теперь for in и for of получаются из объекта , а не из массива. For in относится к свойствам, а for of — к значениям.
Смутиться? Еще нет!
forEach() — это метод свойства. В MDN определение forEach:
“forEach() вызывает предоставленную функцию обратного вызова один раз для каждого элемента в массиве в порядке возрастания. Он не вызывается для свойств индекса, которые были удалены или не инициализированы. (Для разреженных массивов см. пример ниже.)”
Мы получаем вывод для forEach(), который заключается в обратном вызове функции, которая обращается ко всем элементам массива.
Давайте используем случай, чтобы продемонстрировать концепцию:
const array = [‘a’, ‘b’, ‘c’];
array.forEach(getElement);// вы также можете использовать стрелочную функцию
функция getElement(e,i) {
console.log(e,i);
}
Итак, мы получаем:
a 0
b 1
c 2
По умолчанию первым параметром forEach является текущее значение, а вторым параметром forEach является индекс.
Работает ли forEach в объекте? Ответ положительный. Вот еще один случай из MDN:
пусть obj = {0: ‘a’, 1: ‘b’, 2: ‘c’ };
Object.getOwnPropertyNames(obj).forEach(
функция(val, idx, массив){
console.log(val + ‘-›’ + obj[val]);
}
);
И проверьте результаты:
0->a
1->b
2->c
Мы можем получить свойства объекта и их значение с помощью Object.getOwnPropertyNames(). Аналогичным является Object.key для цикла for in.
Таким образом, резюме должно сказать:
для циклов -› массив
for in -› свойство объекта
for of -›значение объекта
forEach-›массив или объект (используя Object.getOwnPropertyNames())
Еще не закончено!
Что бы вы хотели закодировать в этом случае? Вот наш последний случай.
Предположим, у меня есть куча ‹p›‹/p› в HTML. Теперь я хочу применить эти команды ‹p› с другим цветовым стилем. Итак, мы создаем две переменные:
const allPs = document.querySelectorAll(‘p’);
const fontSize= ['xx-маленький', 'x-маленький', 'маленький', 'большой', 'х-большой'];
Какие типы циклов for вы хотели бы использовать? Вы можете приостановить чтение здесь и перейти к написанию этого сейчас…
Поскольку const allPs — это набор объектов, или мы можем назвать его NodeList, а colors — это массив. Итак, какие циклы for мы должны использовать?
Объекты имеют ключи и их значение. Массив имеет свой индекс. Этот случай объединяет эти два вместе. В этом случае нужно применить массив к объекту? или объект в массив?
Мы сказали, что allPs — это NodeList, который представляет собой массивоподобный список (коллекцию) объектов. Таким образом, мы можем иметь индекс и в NodeList. Поэтому индекс можно было использовать как для всех лисов, так и для цветов. Мы можем использовать обычные циклы for и forEach для этого кода. И for in и for of допустили бы ошибки. (Вы можете ответить мне, какую ошибку получить.)
Обычный цикл for будет таким:
функция all(элемент, массив){
for(пусть i = 0; i ‹ element.length; i++){
пусть p= элемент[i];
p.style.fontSize = массив[i];
console.log(p);
}
}
Коды forEach должны выглядеть так:
allPs.forEach(все);
функция all(p, i){
let fontSize = fontSize[i];
p.style.fontSize = размер шрифта;
console.log(p);
}
Хорошо, теперь мы заканчиваем изучение циклов for. Вы можете оставить комментарии или лучшие способы внизу.
