Некоторое время я изо всех сил пытался полностью понять различия между for…in и for…of. Если вы нашли это через Google или dev.to, я могу с уверенностью предположить, что вам, вероятно, интересно то же самое. for…in и for…of являются альтернативой цикла for, с которым мы все знакомы. Однако for…in и for…of используются в разных случаях, в зависимости от того, что вы ищете, а цикл for, который, как мы знаем, можно использовать практически в любой ситуации.

Сначала мы рассмотрим примеры / использования, а затем разберем каждый из них.

Примеры / Использование

👉🏻 for

const arr = [1, 2, 3, 4, 5]
function printArr(arr) {
 for (let i = 0; i < arr.length; i++) {
 console.log(arr[i]);
 }
}
console.log(printArr(arr));
// 1
// 2
// 3
// 4
// 5

👉🏻 for…in

const obj = { a: 1, b: 2, c: 3 }
function printObj(obj) {
 for (let prop in obj) {
 console.log(`prop: ${prop}`)
 console.log(`obj[prop]: ${obj[prop]}`)
 }
}
console.log(printObj(obj));
// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3
```

👉🏻 for…of

const arrOf = [1, 2, 3, 4, 5]
function printArrOf(arr) {
 for (let ele of arr) {
 console.log(ele);
 }
}
console.log(printArrOf(arrOf));
// 1
// 2
// 3
// 4
// 5

Теперь вы увидели, как они используются, давайте разберем их по порядку!

Наш дорогой лучший друг, Заявление "for"

Этот базовый цикл for можно использовать в любое время, когда нам нужна итерация в чем-либо.

Базовый синтаксис

for ([initialization]; [condition]; [final-expression]) {
 statement
}

Итерация обычно происходит внутри block (также известного как {}). Мы бы поместили несколько операторов внутри блока для выполнения цикла. Вы можете использовать break, continue и т. Д., Чтобы продолжить или прервать цикл for в зависимости от условий.

Пример с break

for (let i = 0;; i++) {
 console.log(i);
 if (i > 5) break;
}
// Expected Output: 
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// Explanation: The loop breaks when i is larger than 5.

✨ Краткое примечание: все выражения в круглых скобках необязательны.

Пример с continue

for (let i = 0; i < 10; i++) {
 if (i === 7) continue;
 else console.log(i);
}
// Expected Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 8
// 9
// Explanation: if i is equal to 7, we will skip that i and move on to the next index.

`for… in`, главный герой №1

for…in цикл перебирает все перечислимые свойства объекта.

Если вы не знаете, что такое перечислимое, я постараюсь объяснить, что это такое. В принципе, вы можете думать, что перечислимое свойство - это key пары "ключ-значение" в объекте. Это также будет отображаться в методе Object.keys(). Итак, если мы посмотрим на наш пример из раздела выше…

const obj = { a: 1, b: 2, c: 3 }
function printObj(obj) {
 for (let prop in obj) {
 console.log(`prop: ${prop}`)
 console.log(`obj[prop]: ${obj[prop]}`)
 }
}
console.log(printObj(obj));
// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

prop - это key в паре "ключ-значение", и это наши перечислимые свойства. Если у вас есть базовые представления о том, как получить значение объекта, мы обрабатываем ключ как индекс в массиве и помещаем его в квадратные скобки 👉🏻 obj[prop], как это.

const obj = { 
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
}
for (const property in obj) {
 console.log(property);
}
// Expected Output:
// name
// age
// role

Пока что все наши примеры находятся в объекте или {} (поскольку массив также является объектом), не рекомендуется / хорошая практика использовать for…in для итерации по массиву, где важен порядок индекса.

Да, индексы массива также являются перечислимыми свойствами, но в целочисленном формате. Он ведет себя совершенно непредсказуемо, если мы используем for…in для итерации массива. Не гарантируется, что элементы повторяются в определенном порядке. Кроме того, если вы хотите расширить массив, присвоив ему индекс, превышающий текущий размер массива, он может не отражать правильный индекс. Следовательно, for…of, forEach или for цикл с числовым индексом - лучший метод для итерации массива. Ознакомьтесь с примерами, показанными в этой статье ниже 👇🏻

Дополнительная литература:

`for… of`, главный герой №2

А вот и наш второй главный герой, for…of. Если вы не знаете, for…of впервые появился в ES6. for…of стал полезным методом итерации для многих разработчиков JavaScript. for…of может перебирать любые итерируемые объекты. Вы называете это, String, Array, Object…

Строка

const name = “Megan”;
for (const alphabet of name) {
 console.log(alphabet);
}
// Expected Output:
// M
// e
// g
// a
// n

Массив (скопировано из раздела "Пример")

const arrOf = [1, 2, 3, 4, 5]
function printArrOf(arr) {
 for (let ele of arr) {
 console.log(ele);
 }
}
// Expected Output:
// 1
// 2
// 3
// 4
// 5

Объект (с помощью Object.entries())

const obj = {
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
};
for (const [key, value] of Object.entries(obj)) {
 console.log(key, value);
 console.log(`${key}: ${value}`);
}
// Expected Output:
// name Megan
// name: Megan
// age do the Math
// age: do the Math
// role front-end developer
// role: front-end developer
// Explanation: the [key, value] is a destructure of the result from Object.entries.

🐧 Примечание на боковой панели 🐧
Object.entries() возвращает массив собственных перечислимых свойств объекта со строковыми ключами.

const obj = {
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
};
Object.entries(obj)
// [
// [ ‘name’, ‘Megan’ ],
// [ ‘age’, ‘do the Math’ ],
// [ ‘role’, ‘front-end developer’ ]
// ]

Дополнительная литература:

Когда мы должны использовать какой? 😯

Цель этого раздела - поставить эти два for оператора «бок о бок», чтобы мы могли провести сравнение.

Вот простой способ запомнить это:
⭐️ Используйте for…in при итерации перечислимых пар свойств объекта со строковым ключом. Вы знаете { blah1: blah blah, blah2: blah blah blah }. НО НЕ ARRAY !! Помните, что все, что он записывается, будет похоже на регистрацию индекса массива, но только строки, поэтому, если вы хотите регистрировать / возвращать значение, обязательно напечатайте его с obj[key].
⭐️ Используйте for…of при переборе повторяемых объектов: String, Array и т. д.

Дополнительная литература:

В следующий раз, когда вы будете работать над чем-то, что требует итераций, или просто выполняете свою обычную практику Leetcode, или даже ЛУЧШЕ ... на технических собеседованиях, продемонстрируйте свои недавно полученные знания с помощью for…of и for…in.

И последнее, но не менее важное ... Удачного кодирования!

Здравствуйте, мои средние читатели! Эта статья изначально размещена на dev.to (прямая ссылка на статью), так как в настоящее время я более активен на этой платформе. Я публикую здесь тот же контент, потому что хотел бы привлечь больше аудитории. Если вам нравится то, что вы читаете, подписывайтесь на меня на dev.to (мой профиль)!