Javascript проход по массиву. JQuery - Перебор массива, объекта и элементов. Определите, пуст ли объект

Note: In order to display the content of an array in the console, you can use console.table() which will print a formatted version of the array. The following example illustrates another way of doing so, using forEach() .

The following code logs a line for each element in an array:

Function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } // Notice that index 2 is skipped since there is no item at // that position in the array. .forEach(logArrayElements); // logs: // a = 2 // a = 5 // a = 9

Using thisArg

The following (contrived) example updates an object"s properties from each entry in the array:

Function Counter() { this.sum = 0; this.count = 0; } Counter.prototype.add = function(array) { array.forEach(function(entry) { this.sum += entry; ++this.count; }, this); // ^---- Note }; const obj = new Counter(); obj.add(); obj.count; // 3 obj.sum; // 16

Since the thisArg parameter (this) is provided to forEach() , it is passed to callback each time it"s invoked, for use as its this value.

An object copy function

The following code creates a copy of a given object. There are different ways to create a copy of an object; the following is just one way and is presented to explain how Array.prototype.forEach() works by using ECMAScript 5 Object.* meta property functions.

Function copy(obj) { const copy = Object.create(Object.getPrototypeOf(obj)); const propNames = Object.getOwnPropertyNames(obj); propNames.forEach(function(name) { const desc = Object.getOwnPropertyDescriptor(obj, name); Object.defineProperty(copy, name, desc); }); return copy; } const obj1 = { a: 1, b: 2 }; const obj2 = copy(obj1); // obj2 looks like obj1 now

If the array is modified during iteration, other elements might be skipped.

The following example logs "one", "two", "four". When the entry containing the value "two" is reached, the first entry of the whole array is shifted off, which results in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped. forEach() does not make a copy of the array before iterating.

Var words = ["one", "two", "three", "four"]; words.forEach(function(word) { console.log(word); if (word === "two") { words.shift(); } }); // one // two // four

Flatten an array

The following example is only here for learning purpose. If you want to flatten an array using built-in methods you can use Array.prototype.flat() (expected to be part of ES2019 and already implemented in some browsers).

/** * Flattens passed array in one dimensional array * * @params {array} arr * @returns {array} */ function flatten(arr) { const result = arr.forEach((i) => { if (Array.isArray(i)) { result.push(...flatten(i)) } else { result.push(i) } }) return result } // Usage const problem = , 8, 9]] flatten(problem) //

Specifications

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

• Перевод

• I. Перебор настоящих массивов
  1. Метод forEach и родственные методы
  2. Цикл for
  3. Правильное использование цикла for...in
  4. Цикл for...of (неявное использование итератора)
  5. Явное использование итератора
• 1. Использование способов перебора настоящих массивов
  2. Преобразование в настоящий массив
  3. Замечание по объектам среды исполнения

I. Перебор настоящих массивов

1. метод Array.prototype.forEach ;
2. классический цикл for ;
3. «правильно» построенный цикл for...in .

1. цикл for...of (неявное использование итератора);
2. явное использование итератора.

1. Метод forEach и родственные методы

Пример использования:
var a = ["a", "b", "c"]; a.forEach(function(entry) { console.log(entry); });
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

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

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

ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:

• every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
• some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
• filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
• map - создает новый массив, состоящий из значений возращаемых колбеком.
• reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
• reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.

2. Цикл for

Var a = ["a", "b", "c"]; var index; for (index = 0; index < a.length; ++index) { console.log(a); }
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index < len; ++index) { console.log(a); }
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) { console.log(a); }
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for...in

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

// a - разреженный массив var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294) { console.log(a); } }
В данном примере на каждой итерации цикла выполняется две проверки:

1. то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
2. то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .

Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции:

Function arrayHasOwnIndex(array, key) { return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294; }
Тогда тело цикла из примера значительно сократится:

For (key in a) { if (arrayHasOwnIndex(a, key)) { console.log(a); } }
Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:

For (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a); } }

4. Цикл for...of (неявное использование итератора)

Итератор - это реализуемый объектом протокол, который определяет стандартный способ получения последовательности значений (конечной или бесконечной).
Итератор - это объект, в котором определен метод next() - функция без аргументов, возвращающая объект с двумя свойствами:

1. done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
2. value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .

Пример использования for...of:

Var val; var a = ["a", "b", "c"]; for (val of a) { console.log(val); }
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива.

5. Явное использование итератора

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) { console.log(entry.value); }
В данном примере метод Array.prototype.entries возвращает итератор, который используется для вывода значений массива. На каждой итерации entry.value содержит массив вида [ключ, значение] .

II. Перебор массивоподобных объектов

1. Использование способов перебора настоящих массивов

Конструкции for и for...in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.

ForEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply .

Например, если вы хотите применить forEach к свойству childNodes объекта Node , то это делается так:

Array.prototype.forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:

// (Предполагается, что весь код ниже находится в одной области видимости) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.

2. Преобразование в настоящий массив

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update : Как было отмечено в комментариях

Здравствуйте! Продолжаем изучать методы массивов и в этом уроке рассмотрим методы для перебора массива. Эти методы позволяют пройтись по массиву и выполнить определенные действия над его элементами. Да забыл сказать все эти методы не поддерживаются в IE 8. Хотя так уж это сейчас важно что они не поддерживаются этим браузером, но все же если хотите поддержку IE8, то ES5-shim вам в помощь. А мы будем продолжать

Метод forEach

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

Var mas = ["Банан", "Авокадо", "Морковь"]; mas.forEach(function(item, i, mas) { alert(i + ": " + item + " (массив:" + mas + ")"); });

Здесь в примере в метод forEach передается функция в которой указывается 3 параметра:

item — элемент массива

i — номер элемента массива

mas — массив, который обрабатывается.

Данный метод можно использовать вместо цикла for для перебора массива.

Метод filter

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

Немного запутанно, поэтому рассмотрим на примере.

Var mas = ; var positiveNum = mas.filter(function(num) { return num > 0; }); document.write(positiveNum); // 1,4,3

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

Метод map

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

Var mas = ; var newMas = mas.map(function(item) { return item*item; }); // получили массив с квадратами alert(newMas); // 1,4,9

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

Методы every/some

Данные методы проверяют присутствует ли элемент в массиве. Делают они это через функцию, которая им передается в качестве параметра, то есть если эта функция вернет true тогда и сам метод вернет true. Причем метод every требует чтобы каждый элемент соответствовал условию функции, а метод some, чтобы хотя бы один соответствовал. И как всегда вот вам пример.

Var mas = ; function isPositiv(num) { return num > 0; } if(mas.every(isPositiv)) { document.write("Массив содержит только положительные числа"); } else{ document.write("В массиве есть хотя бы одно отрицательное число "); } if(mas.some(isPositiv)) { document.write("В массиве есть хотя бы одно положительное число"); } else { document.write("В массиве нет положительных чисел"); }

Рассмотрим пример у нас есть массив с положительными и отрицательными числами и нам надо проверить его на наличие хотя бы одного отрицательного числа. Для этого используем методы every и some. Создаем функцию, которая будет возвращать положительные числа и затем ее передаем в метод every поскольку данный метод возвращает логический результат, то и используется он в условных операторах . Метод every в нашем примере вернет false потому что в массиве есть отрицательные числа, а вот метод some вернет true, потому что в массиве есть хотя бы одно положительное число.

reduce/reduceRight

Если вам нужно перебрать массив – вы можете использовать использовать forEach, for или for..of.

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

Методы arr.reduce и arr.reduceRight похожи на методы выше, но они чуточку сложнее. Они используются для вычисления какого-нибудь одного значения на основе всего массива.

Синтаксис:

Let value = arr.reduce(function(previousValue, item, index, array) { // ... }, );

Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.

Аргументы:

• previousValue – результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial),
• item – очередной элемент массива,
• index – его индекс,
• array – сам массив.

При вызове функции результат её вызова на предыдущем элементе массива передаётся как первый аргумент.

Звучит сложновато, но всё становится проще, если думать о первом аргументе как «аккумулирующем» результат предыдущих вызовов функции. По окончании он становится результатом reduce.

Этот метод проще всего понять как всегда на примере.

Тут мы получим сумму всех элементов массива всего одной строкой:

Let arr = ; let result = arr.reduce((sum, current) => sum + current, 0); alert(result); // 15

Здесь мы использовали наиболее распространённый вариант reduce, который использует только 2 аргумента.

Давайте детальнее разберём, как он работает.

1. При первом запуске sum равен initial (последний аргумент reduce), то есть 0, а current – первый элемент массива, равнй 1. Таким образом, результат функции равен 1.
2. При втором запуске sum = 1, и к нему мы добавляем второй элемент массива (2).
3. При третьем запуске sum = 3, к которому мы добавляем следующий элемент, и так далее…

Поток вычислений получается такой:

В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:

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

Мы также можем опустить начальное значение:

Let arr = ; // убрано начальное значение (нет 0 в конце) let result = arr.reduce((sum, current) => sum + current); alert(result); // 15

Результат – точно такой же! Это потому, что при отсутствии initial в качестве 1-го значения берётся первый элемент массива, а перебор стартует со второго.

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

Но такое использование требует крайней осторожности. Если массив пуст, то вызов reduce без начального значения выдаст ошибку.

Вот пример:

Let arr = ; // Error: Reduce of empty array with no initial value // если бы существовало начальное значение, reduce вернул бы его для пустого массива. arr.reduce((sum, current) => sum + current);

Итоги

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

• forEach – для перебора массива в цикле.
• filter – для осуществления фильтрации массива. Возвращает новый отфильтрованный массив
• every/some – для проверки массива на предмет присутствия отдельных элементов.
• map – для преобразования массива в массив. Возвращает исходный преобразованный массив.
• reduce/reduceRight — вычисляет одно значение из всего массива, вызывая функцию для каждого элемента и передавая промежуточный результат между вызовами. Можно использовать для подсчета суммы элементов массива.

Задания

Получите новый массив

Пусть дан массив var mas = [«HTML», «CSS», «JavaScript», «Pascal»] вам надо с помощью метода map получить новый массив который будет содержать длины каждого элемента исходного массива.

Отфильтруйте массив

Есть массив var mas = вам надо, используя метод filter получить массив, который содержит только положительные числа.

Проверить массив

Есть массив var mas = вам надо проверить есть ли в массиве отрицательные числа и вывести результат на экран.

Ну и в заключении небольшое видео по методам для перебора массива в цикле.