JavaScript для… in vs for

Як ви вважаєте, чи є велика різниця в ... в і для петель? Який тип «за» ви віддаєте перевагу і чому?

Скажімо, у нас є масив асоціативних масивів:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Тож ми можемо повторити:

for (var i = 0; i < myArray.length; i++)

І:

for (var i in myArray)

Я не бачу великої різниці. Чи є якісь проблеми з продуктивністю?

Вибір має ґрунтуватися на тому, яка ідіома найкраще зрозуміла.

Масив ітератується за допомогою:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

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

for (var key in o)
  //do stuff with o[key]

Якщо у вас немає причин руйнування землі, дотримуйтесь встановленої схеми використання.

Дуглас Крокфорд рекомендує в JavaScript: Хороші частини (стор. 24), щоб не використовувати for inоператор.

Якщо ви використовуєте for inдля перегляду імен властивостей об'єкта, результати не впорядковані. Гірше: ви можете отримати несподівані результати; вона включає членів, успадкованих від прототипу ланцюга та назву методів.

Все, крім властивостей, можна відфільтрувати .hasOwnProperty. Цей зразок коду робить те, що ви, мабуть, спочатку хотіли:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

Користувачі FYI - jQuery

each(callback)Метод jQuery використовує for( ; ; )цикл за замовчуванням і використовуватиме for( in ) лише якщо довжина undefined.

Тому я б сказав, що при використанні цієї функції безпечно припустити правильний порядок.

Приклад :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

Мінус використання цього полягає в тому, що якщо ви виконуєте певну логіку інтерфейсу, ваші функції будуть менш переносими для інших фреймворків. Ця each()функція, ймовірно, найкраще зарезервована для використання з селекторами jQuery, і for( ; ; )може бути доцільно в іншому випадку.

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

Наприклад:

for (var i = myArray.length-1; i >= 0; i--)

у деяких браузерах майже вдвічі швидший, ніж:

for (var i = 0; i < myArray.length; i++)

Однак, якщо ваші масиви НЕ ВЕЛИЧЕЗНІ або ви постійно цикли їх, всі досить швидко. Я серйозно сумніваюся, що циклічність масиву є вузьким місцем у вашому проекті (або будь-якому іншому проекті з цього питання)

Зауважте, що нативний метод Array.forEach зараз широко підтримується .

Оновлена ​​відповідь для поточної версії 2012 року для всіх основних браузерів - Chrome, Firefox, IE9, Safari та Opera підтримує вроджений масив ES5.forEach.

Якщо у вас немає певних причин підтримувати IE8 на власному рівні (маючи на увазі, ES5-shim або Chrome кадр може бути наданий цим користувачам, що забезпечить належне середовище JS), то чистіше просто використовувати відповідний синтаксис мови:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

Повна документація для array.forEach () знаходиться в MDN.

Два не однакові, коли масив розріджений.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Використовуючи forEach для пропуску прототипу ланцюга

Просто швидке доповнення до відповіді @ nailer вище , використовуючи forEach за допомогою Object.keys, ви можете уникнути повторення прототипу по ланцюжку без використання hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

По-друге, я вважаю, що ви повинні вибрати метод ітерації відповідно до своїх потреб. Я хотів би запропонувати вам на самому ділі не коли - або прохідний виходець Arrayз for inструктурою. Це набагато повільніше і , як зазначав Чейз Сейберт в даний момент тому, не сумісний з рамкою прототипу.

Існує чудовий орієнтир щодо різних стилів циклу, який ви абсолютно повинні ознайомитись, якщо працюєте з JavaScript . Не робіть ранніх оптимізацій, але вам слід тримати ці речі десь на потилиці.

Я використовував би for inдля отримання всіх властивостей об'єкта, що особливо корисно при налагодженні ваших сценаріїв. Наприклад, мені подобається, щоб ця лінія була зручною, коли я досліджував незнайомий об’єкт:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Він скидає вміст цілого об'єкта (разом із органами методів) до мого журналу Firebug. Дуже зручно.

ось щось я зробив.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

ось як би ви його використовували, це
буде працювати над масивами та об'єктами (наприклад, список елементів HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Я щойно зробив це, тому я відкритий для пропозицій :)

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

Використовуйте foreach, якщо ви просто хочете поточний предмет.

Використовуйте для, якщо вам потрібен індексатор для порівняльних порівнянь. (Тобто, як це порівнюється з попереднім / наступним пунктом?)

Я ніколи не помічав різниці у виконанні. Я б зачекав, поки не виникне проблема з виступом, перш ніж переживати про це.

З допомогою for (var i в myArray) ви також можете переходити на об'єкти, я буду містити ім'я ключа, і ви можете отримати доступ до властивості через myArray [i] . Крім того, будь-які методи, які ви додали до об'єкта, також будуть включені в цикл, тобто якщо ви використовуєте будь-який зовнішній фреймворк, наприклад jQuery або прототип, або якщо ви додаєте методи до об'єктів прототипів безпосередньо, в один момент я вкажу на ці методи.

Стережись!

Якщо у вас є кілька тегів сценарію, і ви шукаєте інформацію, наприклад, в атрибутах тегів, вам потрібно використовувати властивість .length з циклом for, оскільки це не простий масив, а об’єкт HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Якщо ви використовуєте оператор foreach для (var i у вашому списку), він поверне властивості та методи HTMLCollection у більшості браузерів!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Навіть якщо getElementsByTagName повинен повернути NodeList, більшість браузерів повертає HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

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

http://www.prototypejs.org/api/array

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

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

Якщо ви дійсно хочете пришвидшити свій код, що з цим?

for( var i=0,j=null; j=array[i++]; foo(j) );

якось мати логіку в той час як для оператора, і це менш зайве. Також у firefox є Array.forEach та Array.filter

Коротший і найкращий код відповідно до jsperf

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Використовуйте цикл Array (). ForEach, щоб скористатися паралелізмом

for (;;) є для масивів : [20,55,33]

для..in - для об'єктів : {x: 20, y: 55: z: 33}

Будь обережний!!! Я використовую Chrome 22.0 в Mac OS, і у мене виникають проблеми з кожним синтаксисом.

Я не знаю, чи це проблема з браузером, проблема JavaScript або якась помилка в коді, але це ДУЖЕ дивно. Поза предметом він прекрасно працює.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

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

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Ви можете скористатися фор-ін за допомогою if(myArray.hasOwnProperty(i)). Тим не менш, при ітерації над масивами я завжди вважаю за краще уникати цього і просто використовувати оператор for (;;).

Хоча вони обоє дуже схожі, є незначна різниця:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

у цьому випадку вихід:

СТАНДАРТ ДО LOOP:

АРЕЙ [0] = A

АРЕЙ [1] = В

АРЕЙ [2] = С

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

при цьому вихідний результат:

ЗАПУСК:

АРЕЙ [1] = В

АРЕЙ [2] = С

АРЕЙ [10] = D

АРЕЙ [ABC] = 123

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