Я знаю, що таке for... inцикл (він повторюється над ключем), але вперше почув про for... ofце (він повторює значення).

Я плутаю for... ofпетлю. Я не отримав adject. Це код нижче:

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it is does not log "3", "5", "7", "hello"
}

Що я отримав - це for... ofповторює значення властивостей. Тоді чому він не входить (не повертається) "3", "5", "7", "hello"замість "3", "5", "7"? але for... inцикл повторюється над кожною клавішею ( "0", "1", "2", "foo"). Тут for... inцикл також перебирає fooключ. Але for... ofне повторює вартість fooмайна, тобто "hello". Чому це так?

Коротка історія:

Тут я консольний for... ofконтур. Він повинен увійти, "3", "5", "7","hello"але тут він реєструється "3", "5", "7". Чому?

Приклад посилання

for in петлі над перелічуваними іменами властивостей об'єкта.

for of(новий у ES6) використовує ітератор, що відповідає специфіці об'єкта і на значення, згенеровані цим.

У вашому прикладі ітератор масиву дає усі значення в масиві (ігноруючи властивості неіндексу).

Я знаходжу повну відповідь за адресою: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Хоча це і для сценарію типу, це теж саме для javascript)

І те, for..ofі for..inзаяви повторюють списки; значення, повторені на, хоч і відрізняються, for..inповертає список ключів на ітераційному об'єкті, тоді якfor..of повертає список значень числових властивостей об'єкта, який повторюється.

Ось приклад, який демонструє цю відмінність:

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

Інша відмінність полягає в тому, що для..in працює над будь-яким об'єктом; він служить способом огляду властивостей цього об’єкта. for..ofз іншого боку, в основному цікавляться значеннями ітерабельних об'єктів. Вбудовані об'єкти, такі як Map і Set implement Symbol.iteratorProperties, що дозволяють отримати доступ до збережених значень.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

Для ... у циклі

Цикл for ... in циклічно покращує слабкі місця циклу for, усуваючи логіку підрахунку та умови виходу.

Приклад:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Але вам все ж доведеться вирішити питання використання індексу для доступу до значень масиву, і це смердить; це майже робить його більш заплутаним, ніж раніше.

Крім того, цикл for ... in може привести вас до великих проблем, коли вам потрібно додати додатковий метод до масиву (або іншого об’єкта). Оскільки для ... у циклі циклу над усіма переліченими властивостями, це означає, що якщо ви додасте якісь додаткові властивості до прототипу масиву, то ці властивості також з’являться у циклі.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Друкує:

0

1

2

3

4

5

6

7

8

9

function () {for (нехай i = 0; i <this.length; i ++) {this [i] = this [i] .toFixed (2); }}

Ось чому для ... у циклі відмовляються, коли перебирають масиви.

ПРИМІТКА : Цикл forEach - це ще один тип циклу в JavaScript. Однак forEach()насправді це метод масиву, тому його можна використовувати виключно з масивами. Також немає способу зупинити або розірвати цикл forEach. Якщо вам потрібен такий тип поведінки в циклі, вам доведеться використовувати базовий цикл.

Для ... петлі

Цикл for ... of циклу використовується для циклічного перегляду будь-яких типів даних, які є ітерабельними.

Приклад:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Друкує:

0

1

2

3

4

5

6

7

8

9

Це робить для ... циклу найбільш стислий варіант усіх циклів for.

Але зачекай, є ще більше! Цикл "..." також має деякі додаткові переваги, які виправляють слабкі сторони циклів "за" і "...".

Ви можете будь-коли зупинити або зламати цикл для ... циклу.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Друкує:

1

3

5

7

9

І вам не доведеться турбуватися про додавання нових властивостей до об’єктів. Цикл for ... of цикл буде перетворювати лише на значення в об'єкті.

Різниця for..inіfor..of :

І те, for..inі for..ofце циклічні конструкції, які використовуються для перетворення структур даних. Різниця полягає лише в тому, що вони повторюють:

1. for..inповторює всі перелічені ключові властивості об'єкта
2. for..ofперебирає значення в якості ітератора об'єкта. Прикладами ітерабельних об'єктів є масиви, рядки та NodeLists.

Приклад:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

У цьому прикладі ми можемо спостерігати, що for..inцикл перебирається над ключами об'єкта, який є об’єктом масиву в цьому прикладі. Клавіші 0, 1, 2, які відповідають елементам масиву, які ми додали та addedProp. Ось так arrвиглядає об’єкт масиву в хромованих розробниках:

Ви бачите, що наш for..inцикл не робить нічого більше, ніж просто повторювати ці значення.

for..ofПетля в нашому прикладі перебирає значення структури даних. Значення в цьому конкретному прикладі є 'el1', 'el2', 'el3'. Значення, до яких повертається ітерабельна структура даних, for..ofзалежать від типу об'єкта, який можна повторити. Наприклад, масив поверне значення всіх елементів масиву, тоді як рядок повертає кожен окремий символ рядка.

for...inЗаява перебирає перелічуваних властивості об'єкта, в довільному порядку. Перелічувані властивості - це ті властивості, чий внутрішній прапор [[Enumerable]] встановлений на true, отже, якщо в ланцюзі прототипу є якесь перелічене властивість,for...in цикл також буде повторюватись і для цих.

for...ofЗаява перебирає дані, ітерація об'єкт визначає бути ітерації.

Приклад:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

Як і раніше, ви можете пропустити додавання hasOwnPropertyв for...ofциклі.

Заява for-in повторює перелічені властивості об'єкта у довільному порядку.

Цикл буде повторювати всі перелічені властивості самого об'єкта та ті, які об'єкт успадковує від прототипу його конструктора

Ви можете думати про це як "за" в основному ітерацію і перелічити всі ключі.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

Існує кілька вже визначених типів даних, що дозволяє нам легко перебирати їх, наприклад, масив, карта, рядкові об'єкти

Звичайний для ітераторів над ітератором та у відповідь надає нам ключі в порядку вставки, як показано нижче в прикладі.

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

Тепер, якщо ми спробуємо те ж саме з для for , то у відповідь він надає нам значення, а не ключі. напр

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

Отже, дивлячись на обох ітераторів, ми можемо легко розрізнити різницю обох.

Примітка: - Для роботи лише з Symbol.iterator

Отже, якщо ми спробуємо перебрати звичайний об'єкт, то це дасть нам помилку, наприклад,

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

Кімната не піддається

Тепер для повторення нам потрібно визначити ES6 Symbol.iterator, наприклад

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

Це різниця між For в та For of . Сподіваємось, що це може усунути різницю.

Ще одна відмінність між цими петлями, про які ніхто раніше не згадував:

Зруйнованість for...inзастаріла. Використовуйте for...ofзамість цього.

Джерело

Отже, якщо ми хочемо використовувати деструктуризацію в циклі, для отримання індексу та значення кожного елемента масиву , нам слід використовувати for...ofцикл методом Arrayentries() :

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

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

Використовуючи, Object.entriesви переконайтеся, що пройти всі властивості:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

Подивіться багато хороших відповідей, але я вирішу покласти свої 5 центів, щоб мати гарний приклад:

Для в циклі

ітерає над усіма численними реквізитами

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

Для петлі

повторює всі ітерабельні значення

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

Коли я вперше почав вивчати цикл « в» і «цикл» , я також плутався з моїм результатом, але за допомогою декількох досліджень та розуміння ви можете думати про окремий цикл таким чином:

1. для ... у циклі повертає індекси окремої властивості та не впливає на значення властивості , вона циклічно повертаєта повертає інформацію про властивість, а не значення . Напр

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

Вищевказаний код просто створює об’єкт, який називається профіль , і ми будемо використовувати його для обох наших прикладів , тому не плутайтеся, коли ви бачите на прикладі об'єкт профілю , просто знайте, що він створений.

Тож тепер давайте скористаємося циклом для ... у циклі нижче

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Тепер причиною виведення є те, що у нас в об'єкті профілю є чотири (4) властивості, а індексація, як ми всі знаємо, починається з 0 ... n , тому ми отримуємо індекс властивостей 0,1,2,3, оскільки ми робота з циклом for..in .

2. для ... циклу * може повернути або властивість , значення або і те й інше. Давайте розглянемо, як. У javaScript ми не можемо перебирати об'єкти нормально, як на масивах, тому є кілька елементів, які ми можемо використати для доступу до будь-якого нашого вибору з об'єкта.

   • Object.keys ( object-name- go -here ) >>> Повертає ключі або властивості об’єкта.

   • Object.values ( object-name- go -here ) >>> Повертає значення об’єкта.

   • Object.entries ( ім'я-об'єкта-йде-сюди ) >>> Повернення обидва ці ключі і значення об'єкта.

Нижче наведено приклади їх використання, зверніть увагу на Object.entries () :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Коли ви використовуєте Object.entries () , ви повинні викликати дві записи на об'єкті, тобто ключі та значення. Ви можете зателефонувати обом із будь-якого запису. Приклад нижче.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Прокоментуйте розділ (и) з незрозумілими деталями.

for-inцикл

for-inцикл використовується для проходження численних властивостей колекції у довільному порядку . Колекція - це об'єкт типу контейнера, елементи якого можуть використовувати індекс або ключ.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-inцикл витягує всі перелічені властивості ( ключі ) колекції всі разом і повторює по одній. Перелічна властивість - це власність колекції, яка може з’являтися вfor-in циклі.

За замовчуванням всі властивості масиву та об’єкта з’являються у for-inциклі. Однак ми можемо використовувати метод Object.defineProperty для ручного налаштування властивостей колекції.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

У наведеному вище прикладі властивість dі myObjectта індекс3 з myArrayне з'являється в for-inциклі , тому що вони налаштовані зenumerable: false .

Проблем із for-inциклами небагато . У разі масивів, for-inцикл також вважатиме methodsдоданим у масиві за допомогоюmyArray.someMethod = f синтаксису, однак myArray.lengthзалишається 4.

The for-ofцикл

Це неправильне уявлення, яке for-ofциклічно повторює значення колекції. for-ofцикл перебирає надIterable об'єкт. Ітерабельний - це об'єкт, який має метод з ім'ям Symbol.iteratorбезпосередньо на ньому один на одному зі своїх прототипів.

Symbol.iteratorметод повинен повернути Ітератор . Ітератор - це об'єкт, який маєnext метод. Цей метод при виклику return valueіdone властивостями.

Коли ми повторюємо ітерабельний об'єкт за допомогою for-ofциклу, Symbol.iteratorметод буде викликаний, як тільки отримаємо об'єкт ітератора . Для кожної ітерації for-ofциклу, nextметод цього об'єкта ітератора буде викликатись, доки не doneповернеться next()викликом, повернеться помилковим. Значення, отримане for-ofциклом для кожної ітерації, якщо valueвластивість повертається next()викликом.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

The for-ofЦикл нового в ES6 і так є Iterable і ітеріруемий . Тип Arrayконструктора має Symbol.iteratorметод на своєму прототипі. ObjectКонструктор , до жаль , не має його , але Object.keys(), Object.values()і Object.entries()методи повертають ітератор ( ви можете використовувати , console.dir(obj)щоб перевірити методи прототипу ). Перевага for-ofциклу полягає в тому, що будь-який об’єкт може бути зробленим ітерабельним, навіть ваш власний Dogта Animalкласи.

Найпростіший спосіб зробити об'єкт ітерабельним - це впровадження Генератора ES6 замість користувацької ітераторської реалізації.

На відміну від цього for-in, for-ofцикл може чекати завершення завдання асинхронізації в кожній ітерації. Це досягається за допомогою awaitключового слова після документації на forтвердження .

Ще одна чудова річ у for-ofциклі - це підтримка Unicode. Відповідно до специфікацій ES6, рядки зберігаються з кодуванням UTF-16. Отже, кожен символ може приймати 16-bitабо 32-bit. Традиційно рядки зберігалися з кодуванням UCS-2, в якому є підтримка символів, які можна зберігати всередині16 bits лише .

Отже, String.lengthповертає кількість 16-bitблоків у рядку. Сучасні персонажі, як персонаж Emoji, приймають 32 біти. Отже, цей символ поверне length2. for-inцикл, ітераційний над 16-bitблоками, і поверне неправильний index. Однак for-ofцикл перебирає індивідуальний символ на основі специфікацій UTF-16.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Я знайшов таке пояснення з https://javascript.info/array дуже корисним:

Один з найдавніших способів циклізації елементів масиву - це індекси циклу:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Технічно, оскільки масиви є об'єктами, їх можна також використовувати для..in:

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

Цикл for..in повторює всі властивості, не тільки числові.

У браузері та в інших середовищах є так звані "схожі на масив" об'єкти, схожі на масиви. Тобто вони мають властивості довжини та індексів, але вони можуть мати й інші нечислові властивості та методи, які зазвичай нам не потрібні. Цикл for..in перелічить їх. Отже, якщо нам потрібно працювати з об’єктами, схожими на масив, то ці «зайві» властивості можуть стати проблемою.

Цикл for..in оптимізований для загальних об'єктів, а не масивів, і, таким чином, у 10-100 разів повільніше. Звичайно, це все ще дуже швидко. Прискорення може мати значення лише у вузьких місцях. Але все ж ми повинні усвідомлювати різницю.

Як правило, ми не повинні використовувати для..in для масивів.

Ось корисна мнемоніка для запам'ятовування різниці між for...inциклом та for...ofциклом.

"індекс в, об'єкт"

for...in Loop=> повторюється над індексом у масиві.

for...of Loop=> ітераціює над об'єктом об'єктів.