номер способа выполнить итерации массива JavaScript

• , в то время как

• для цикла

• для...

• для... в

• forEach () метод

• карта () метод

let arr = [10, 20, 30];
let len = arr.length;

var i = 0;
while (value = arr[i++])
  console.log(value);

for (let i = 0; i < len; i++)
  console.log(arr[i]);

for (let i of arr)
  console.log(i);

for (let i in arr)
  console.log(arr[i]);

arr.forEach(item => console.log(item))

arr.map(item => console.log(item))

Вы можете использовать map , это метод функционального программирования, который также доступен в других такие языки, как Python и Haskell .

[1,2,3,4].map( function(item) {
     alert(item);
})

Общий синтаксис:

array.map(func)

Обычно func принимает один параметр, который является элементом массива. Но в случае JavaScript он может принимать второй параметр, который является индексом элемента, и третий параметр, который является самим массивом.

Возвращаемое значение array.map - это другой массив, поэтому вы можете использовать его так:

var x = [1,2,3,4].map( function(item) {return item * 10;});

И теперь x равен [10,20,30,40] .

Вам не нужно писать встроенную функцию. Это может быть отдельная функция.

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

, что было бы своего рода эквивалентом:

 for (item in my_list) {item_processor(item);}

За исключением того, что вы не получаете new_list .

У вас есть несколько вариантов:

1. Последовательный for цикл:

var myStringArray = ["Hello", "World"]; var arrayLength = myStringArray.length; for (var i = 0; i < arrayLength; i++) { console. log(myStringArray[i]); //Do something }

Плюсы

• Работает в любой среде
• Можно использовать break и continue операторы управления потоком

Минусы

• Слишком многословен
• Императивен
• Легко получить ошибки off-by-one (иногда их также называют ошибка столба забора)

2. Array.prototype.forEach

В спецификации ES5 появилось множество полезных методов работы с массивами, один из них, Array.prototype.forEach дает нам лаконичный способ итерации по массиву:

const array = ["один", "два", "три"] array. forEach(function (item, index) { console.log(item, index); });

На момент написания статьи спецификации ES5 было почти десять лет (декабрь 2009 года), и она была реализована почти всеми современными движками в настольных, серверных и мобильных средах, так что использовать их безопасно.

А с синтаксисом стрелочных функций ES6 все еще лаконичнее:

array.forEach(item => console.log(item));

Стрелочные функции также широко реализованы, если вы не планируете поддерживать древние платформы (например, IE11); вы также можете быть спокойны.

Плюсы

• Очень коротко и лаконично.
• Декларативный

Минусы

• Невозможно использовать break / continue

Обычно вы можете заменить необходимость break из императивных циклов, например, фильтруя элементы массива перед их итерацией:

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

Помните, что если вы итерируете массив чтобы построить из него другой массив, вы должны использовать map, я видел этот антипаттерн так много раз.

Антишаблон:

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

Правильный вариант использования map:

const numbers = [1,2,3,4,5]; const doubled = numbers.map(n => n * 2); console. log(doubled);

Также, если вы пытаетесь уменьшить массив до значения, например, хотите просуммировать массив чисел, вам следует использовать метод reduce.

Антишаблон:

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

Правильное использование reduce:

const numbers = [1,2,3,4,5]; const sum = numbers.reduce((total, n) => total + n, 0); console.log(sum);

3. ES6 for-of statement

Стандарт ES6 вводит понятие итерируемых объектов и определяет новую конструкцию для обхода данных - оператор for...of.

Этот оператор работает для любого типа итерируемых объектов, а также для генераторов (любой объект, имеющий свойство [Symbol.iterator] ).

Объекты массивов по определению являются встроенными итераторами в ES6, поэтому вы можете использовать этот оператор для них:

let colors = ['red', 'green', 'blue'];
for (const color of colors){
  console.log(color);
}

Плюсы

• Он может выполнять итерацию над большим количеством объектов.
• Можно использовать обычные операторы управления потоком (break / continue).
• Полезен для асинхронной последовательной итерации значений.

Против

• Если вы ориентируетесь на старые браузеры, то транспонированный вывод может вас удивить.

Не используйте for...in

@zipcodeman предлагает использовать оператор for...in, но для итерирующих массивов for-in следует избегать, этот оператор предназначен для перечисления свойств объекта.

Его не следует использовать для массивоподобных объектов, потому что:

• Порядок итерации не гарантирован; индексы массива могут быть посещены не в числовом порядке.
• Наследуемые свойства также перечисляются.

Второй момент - это может доставить вам много проблем, например, если вы расширите объект Array.prototype и включите туда метод, то это свойство также будет перечислено.

Например:

Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { console.log(array[i]); }

Приведенный выше код выведет в консольный лог "a", "b", "c" и "foo!".

Это будет особенно проблематично, если вы используете библиотеку, которая сильно зависит от дополнения нативных прототипов (например, MooTools).

Оператор for-in, как я уже говорил, служит для перечисления свойств объекта, например:

var obj = {"a": 1, "b": 2, "c": 3 }; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { // или if (Object.prototype.hasOwnProperty.call(obj,prop)) для безопасности... console.log("prop: " + prop + " value: " + obj[prop]) } }

В приведенном выше примере метод hasOwnProperty позволяет перечислить только собственные свойства, и все, только те свойства, которые физически есть у объекта, никаких унаследованных свойств.

Я бы рекомендовал вам прочитать следующую статью:

• Перечисление VS итерация

Opera, Safari, Firefox и Chrome теперь используют набор расширенных методов Array для оптимизации многих общих циклов.

Возможно, вам не понадобятся все они, но они могут быть очень полезны, или были бы, если бы все браузеры поддерживали их.

Mozilla Labs опубликовала алгоритмы, которые они используют и WebKit , так что вы можете добавить их самостоятельно.

filter возвращает массив элементов, удовлетворяющих некоторому условию или тесту.

every возвращает истину, если каждый член массива проходит проверку.

some возвращает истину, если какой-либо из них прошел проверку.

forEach запускает функцию для каждого члена массива и ничего не возвращает.

map похожа на forEach, но возвращает массив результатов операции для каждого элемента.

Все эти методы принимают функцию в качестве своего первого аргумента и имеют необязательный второй аргумент, который представляет собой объект, область действия которого вы хотите наложить на элементы массива, когда они проходят через функцию.

Игнорируйте это, пока оно вам не понадобится.

indexOf и lastIndexOf находят подходящую позицию первого или последнего элемента, которая точно соответствует его аргументу.

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

Можно или использовать arr.forEach(...):

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
   //Some code...
});

Или arr.map(...):

var arr = ["apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
   //Some code...
});

Или jQuery или для цикла пути ранее упоминаются.

Существует несколько способов цикличного выполнения через массив: Ваше среднее число for цикл

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]); // Should log 1 then 2 then 3 then 4
}

А while цикл:

const array = [1, 2, 3, 4];
let i = 0;
while (i < array.length) {
  console.log(array[i]); // Should log 1 then 2 then 3 then 4
  i++;
}

А forEach цикл:

const array = [1, 2, 3, 4];
array.forEach(value => {
  console.log(value); // Should log 1 then 2 then 3 then 4
});

причина я не использую .map, то, потому что .map главным образом используется для изменения значений массивов.