JavaScript ES6 циклы: for...in и for...of
Традиционный for цикл в JavaScript - теперь в прошлом! Встречайте новые циклы for..of и for…in, которые дают нам очень ясный и короткий синтаксис для последовательного прохода по всем типам итерируемых и перечисляемых значений, таких как строки, массивы и объектные литералы. Поэтому, данная статья будет неким подобием шпаргалки, к которой можно обращаться, чтобы освежить в памяти новые функции JavaScript!
for…of
Используйте данный цикл for…of для итерации по значениям в итерируемых типах, например массиве:
let animals = ['кошка', 'собака', 'лев', 'тигр'];
let names = ['Гертруда', 'Генри', 'Мэлвин', 'Билли'];
for(let animal of animals)
{
// Случайное имя для кошки
let nameIdx = Math.floor(Math.random() * names.length);
console.log(`${names[nameIdx]}- ${animal}`);
}
Возможнрый результат
// Генри - собака
// Мэлвин - лев
// Генри - собака
// Билли - тигр
Строки также являются итерируемыми типами, поэтому вы можете использовать JavaScript цикл for…of для строк:
let str = 'abcde';
for (let char of str)
{
console.log(char.toUpperCase().repeat(3));
}
// AAA
// BBB
// ...
Вы также можете перебирать карты (map), наборы (set), генераторы (generator), коллекции узлов DOM и объект arguments, доступный внутри каждой JavaScript функций.
for…in
Используйте этот цикл для то, чтобы перебирать свойства объекта (ключи объекта) в JavaScript:
let oldCar = {
make: 'Tesla',
model: 'S',
year: '2014'
};
for (let key in oldCar)
{
console.log(`${key} --> ${oldCar[key]}`);
}
// make --> Tesla
// model --> S
Вы также можете использовать for…in для итерации по индексам перебираемого объекта, например массива или строки:
let str = 'Turn the page';
for (let index in str)
{
console.log(`Индекс ${str[index]}: ${index}`);
}
Результат:
// Индекс T: 0
// Индекс u: 1
На этом все. Ну а, если вы совсем плохо разбираетесь в языке JavaScript, предлагаю вам ознакомится с моим видеокурсом "JavaScript, jQuery и Ajax с Нуля до Гуру"
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.