Здравствуйте! Продолжаем изучать методы массивов и в этом уроке рассмотрим методы для перебора массива. Эти методы позволяют пройтись по массиву и выполнить определенные действия над его элементами. Да забыл сказать все эти методы не поддерживаются в 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 аргумента.
Давайте детальнее разберём, как он работает.
- При первом запуске sum равен initial (последний аргумент reduce), то есть 0, а current – первый элемент массива, равнй 1. Таким образом, результат функции равен 1.
- При втором запуске sum = 1, и к нему мы добавляем второй элемент массива (2).
- При третьем запуске sum = 3, к которому мы добавляем следующий элемент, и так далее…
Поток вычислений получается такой:
В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:
| sum | current | result | |
|---|---|---|---|
| первый вызов | 1 | 1 | |
| второй вызов | 1 | 2 | 3 |
| третий вызов | 3 | 3 | 6 |
| четвёртый вызов | 6 | 4 | 10 |
| пятый вызов | 10 | 5 | 15 |
Здесь отчётливо видно, как результат предыдущего вызова передаётся в первый аргумент следующего.
Мы также можем опустить начальное значение:
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 = вам надо проверить есть ли в массиве отрицательные числа и вывести результат на экран.
Ну и в заключении небольшое видео по методам для перебора массива в цикле.
Это работает так:
// REQUIRES ECMASCRIPT 2015+ var s, myStringArray = ["Hello", "World"]; for (s of myStringArray) { // ... do something with s ... }
Или, что еще лучше, поскольку ECMAScript 2015 также предоставляет переменные в области блока с помощью let и const:
// REQUIRES ECMASCRIPT 2015+ const myStringArray = ["Hello", "World"]; for (const s of myStringArray) { // ... do something with s ... } // s is no longer defined here
Примечание о разреженных массивах: массив в JavaScript может фактически не хранить столько элементов, сколько указано в его length ; это сообщаемое число просто на единицу больше, чем самый высокий индекс, при котором хранится значение. Если массив содержит меньше элементов, чем указано в его длине, он называется разреженным. Например, вполне законно иметь массив с элементами только по индексам 3, 12 и 247; length такого массива указана как 248, хотя на самом деле он хранит только 3 значения. Если вы попытаетесь получить доступ к элементу по любому другому индексу, у массива появится undefined значение. Поэтому, когда вы хотите "перебрать" массив, у вас есть вопрос, на который нужно ответить: хотите ли вы перебрать весь диапазон, указанный его длиной, и обработать undefined для любых пропущенных элементов, или вы хотите обработать только элементы на самом деле подарок? Существует множество приложений для обоих подходов; это зависит только от того, для чего вы используете массив.
Если вы перебираете массив с помощью for .. of , тело цикла выполняется по length , а переменная управления циклом устанавливается undefined для любых элементов, которые на самом деле отсутствуют в массиве. В зависимости от деталей вашего кода "делать что-то", такое поведение может быть тем, что вы хотите, но если это не то, что вы хотите, вам следует использовать другой подход.
Конечно, некоторые разработчики не имеют иного выбора, кроме как использовать другой подход в любом случае, потому что по какой - то причине они ориентации версию JavaScript, который еще не поддерживается for ... of .
Пока ваша реализация JavaScript совместима с предыдущей версией спецификации ECMAScript (которая, например, исключает версии Internet Explorer до 9), вы можете использовать метод итератора Array#forEach вместо цикла. В этом случае вы передаете функцию, которая будет вызываться для каждого элемента в массиве:
Var myStringArray = [ "Hello", "World" ]; myStringArray.forEach(function(s) { // ... do something with s ... });
В отличие от for ... of , .forEach вызывает функцию только для элементов, которые на самом деле содержат значения. Если передать наш гипотетический массив с тремя элементами и длиной 248, он будет вызывать функцию только три раза, а не 248 раз. Он также различает отсутствующие элементы и элементы, которые на самом деле установлены как undefined ; для последнего он по-прежнему будет вызывать функцию, передавая в качестве аргумента undefined значение. Если это, как вы хотите обрабатывать разреженные массивы, .forEach может быть путь, даже если ваш переводчик поддерживает for ... of .
Последний вариант, который работает во всех версиях JavaScript, - это явный цикл подсчета . Вы просто считаете от 0 до единицы меньше длины и используете счетчик в качестве индекса. Основной цикл выглядит так:
Одним из преимуществ этого подхода является то, что вы можете выбирать, как обрабатывать разреженные массивы; Приведенный выше код будет запускать тело цикла по полной length с s установленным на undefined для любых отсутствующих элементов, как for .. of . Если вместо этого вы хотите обрабатывать только реально существующие элементы разреженного массива, такие как.forEach , вы можете добавить in индекс простую проверку: Var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i Присвоение значения длины локальной переменной (в отличие от включения полного выражения myStringArray.length в условие цикла) может существенно myStringArray.length на производительность, поскольку оно пропускает поиск свойств каждый раз до конца; при использовании Rhino на моей машине ускорение составляет 43%. Вы можете увидеть, что кэширование длины выполняется в предложении инициализации цикла, например так: Var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i Упомянутый другими синтаксис for ... in используется для циклического обхода свойств объекта; так как массив в JavaScript - это просто объект с числовыми именами свойств (и автоматически обновляемым свойством length), вы можете теоретически зациклить массив с ним. Но проблема заключается в том, что он не ограничивается числовыми значениями свойств (помните, что даже методы на самом деле являются просто свойствами, значение которых является замыканием), и при этом не гарантируется, что они будут повторяться в числовом порядке. Следовательно, синтаксис for ... in не должен использоваться для циклического перемещения по массивам. The forEach()
method executes a provided function once for each array element. The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. forEach() calls a provided callback function once for each element in an array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized (i.e. on sparse arrays, ). callback is invoked with three arguments: If a thisArg parameter is provided to forEach() , it will be used as callback"s this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function . The range of elements processed by forEach() is set before the first invocation of callback . Elements which are appended to the array after the call to forEach() begins will not be visited by callback . If existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time forEach() visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using shift()) during the iteration, later elements will be skipped - see example below . forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain. forEach() does not mutate the array on which it is called (although callback , if invoked, may do so). There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool. Early termination may be accomplished with: Array methods: every() , some() , find() , and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required. 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
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. 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
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
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) //
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 На данный момент есть три способа перебора элементов настоящего массива: Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа: Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach . Пример использования: Var a = ["a", "b", "c"];
a.forEach(function(entry) {
console.log(entry);
});
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются. К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов. Если вас беспокоят возможные затраты на вызов колбека для каждого элемента, не волнуйтесь и прочитайте это . forEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними: Старый добрый 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 подобные игры с оптимизацией обычно ничего не значат. Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл 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);
}
}
В данном примере на каждой итерации цикла выполняется две проверки: Конечно, такие проверки отнимут лишнее время при выполнении цикла. Но в случае разреженного массива этот способ более эффективен, чем цикл for , поскольку в этом случае перебираются только те элементы, которые явно определены в массиве. Так, в примере выше будет выполнено всего 3 итерации (для индексов 0, 10 и 10000) - против 10001 в цикле for . Чтобы не писать такой громоздкий код проверок каждый раз, когда требуется перебор массива, можно оформить его в виде отдельной функции: 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);
}
}
ES6, пока все еще пребывающий в статусе черновика , должен ввести в JavaScript итераторы. Итератор
- это реализуемый объектом протокол, который определяет стандартный способ получения последовательности значений (конечной или бесконечной). Многие встроенные объекты, в т.ч. настоящие массивы, имеют итераторы по умолчанию. Простейший способ применения итератора в настоящих массивах - использовать новую конструкцию for...of . Пример использования for...of: Var val;
var a = ["a", "b", "c"];
for (val of a) {
console.log(val);
}
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива. Итераторы можно также использовать и явно, правда, в этом случае код становится значительно сложнее, по сравнению с циклом for...of . Выглядит это примерно так: Var a = ["a", "b", "c"];
var entry;
while (!(entry = a.next()).done) {
console.log(entry.value);
}
Кроме настоящих массивов, в JavaScript встречаются также массивоподобные объекты
. С настоящими массивами их роднит то, что они имеют свойство length и свойства с именами в виде чисел, соответствующие элементам массива. В качестве примеров можно назвать DOM коллекции NodeList и псевдомассив arguments , доступный внутри любой функции/метода. Как минимум большинство, если не все, способы перебора настоящих массивов могут быть применены для перебора массивоподобных объектов. Конструкции 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
});
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов. Есть также еще один, очень простой, способ перебора массивоподобного объекта: преобразовать его в настоящий массив и использовать любой из рассмотренных выше способов перебора настоящих массивов. Для преобразования можно использовать универсальный метод Array.prototype.slice , который может быть применен к любому массивоподобному объекту. Делается это очень просто, как показано в примере ниже: Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код: Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Если вы применяете методы Array.prototype к объектам среды исполнения (таких как DOM коллекции), то вы должны иметь в виду, что правильная работа этих методов не гарантирована во всех средах исполнения (в т.ч. в браузерах). Это зависит от поведения конкретного объекта в конкретной среде исполнения, если точнее, от того, как в этом объекте реализована абстрактная операция HasProperty . Проблема в том, что сам стандарт ES5 допускает возможность неправильного поведения объекта по отношению к этой операции (см. §8.6.2). Поэтому важно тестировать работу методов Array.prototype в каждой среде исполнения (браузере), в которой планируется использование вашего приложения. 22
ответа
После выполнения этого теста с большинством современных браузеров... В настоящее время
самая быстрая форма цикла (и, на мой взгляд, наиболее синтаксически очевидная). стандарт для цикла с кэшированием по длине For (var i = 0, len = myArray.length; i < len; i++) {
}
Я бы сказал, что это определенно случай, когда я приветствую разработчиков движка JavaScript. Время выполнения должно быть оптимизировано для ясности
, а не для удобства.
По состоянию на июнь 2016 года
, несколько тестов в последнем Chrome (71% рынка браузеров в мае 2016 года и увеличение): Я считаю, что этот поток слишком стар, и программисты считают, что им нужно кэшировать длину, или использовать обратные пересечения с уменьшением, чтобы добиться большей производительности, написания кода, который является менее разборчивым и более подверженным ошибкам, чем простой простой для цикла. Поэтому я рекомендую: Если ваше приложение повторяет множество элементов или ваш код цикла находится внутри функции, которая используется часто, прямой цикл является ответом: For (var i = 0; i < arr.length; i++) {
// Do stuff with arr[i] or i
} Если ваше приложение действительно не перебирает множество элементов или вам просто нужно делать небольшие итерации здесь и там, использование стандартного обратного вызова forEach или любой подобной функции из выбранной вами библиотеки JS может быть более понятным и менее подвержен ошибкам, поскольку область переменных индекса закрыта, и вам не нужно использовать скобки, напрямую обращающиеся к значению массива: Arr.forEach(function(value, index) {
// Do stuff with value or index
}); Если вам действительно нужно помять несколько миллисекунд, итерации по миллиардам строк, и длина массива не изменится в процессе, вы можете подумать о кешировании длины в цикле for. Хотя я думаю, что в наши дни это действительно не нужно: For (var i = 0, len = arr.length; i < len; i++) {
// Do stuff with arr[i]
}
Это просто 2018, так что обновление может быть хорошим... И я действительно должен не согласиться с принятым ответом
. Это зависит от разных браузеров. некоторые делают forEach быстрее, некоторые for-loop , а некоторые while тестируют все методы http://jsben.ch/mW36e Arr.forEach(a => {
// ...
}
и так как вы можете увидеть множество циклов for(a = 0;...) например, for(a = 0;...) то стоит упомянуть, что без переменных "var" будет определяться глобально, и это может существенно повлиять на скорость, поэтому она будет медленной. var arr = arr = new Array(11111111).fill(255);
var benches =
[ [ "empty", () => < l; a++);
}]
, ["for-loop", () => {
for(var a = 0, l = arr.length; a < l; ++a)
var b = arr[a] + 1;
}]
, ["for-loop++", () => {
for(var a = 0, l = arr.length; a < l; a++)
var b = arr[a] + 1;
}]
, ["for-loop - arr.length", () => {
for(var a = 0; a < arr.length; ++a)
var b = arr[a] + 1;
}]
, ["reverse for-loop", () => {
for(var a = arr.length - 1; a >= 0; --a)
var b = arr[a] + 1;
}]
,["while-loop", () => {
var a = 0, l = arr.length;
while(a < l) {
var b = arr[a] + 1;
++a;
}
}]
, ["reverse-do-while-loop", () => {
var a = arr.length - 1; // CAREFUL
do {
var b = arr[a] + 1;
} while(a--);
}]
, ["forEach", () => {
arr.forEach(a => {
var b = a + 1;
});
}]
, ["for..in (only 3.3%)", () => {
var ar = arr.slice(0,arr.length/33);
for(const a in ar) {
var b = a + 1;
}
}]
, ["Duff device", () => {
var i = 0;
var r = arr.length % 8;
var n = (arr.length - r) / 8;
if (r > 0) do {
var b = arr + 1;
}
while (--r);
if (n > 0) do {
var b = arr[i] + 1;
var c = arr + 1;
var d = arr + 1;
var e = arr + 1;
var f = arr + 1;
var g = arr + 1;
var h = arr + 1;
var k = arr + 1;
i = --n >>> 3;
}
while (n);
}]
, ["Duff device negative", () => {
var r = arr.length % 8;
var n = (arr.length-r) / 8; ///Math.floor(arr.length / 8);
var i = arr.length ; // -1;
while(r){
var b = arr[--i] + 1;
--r;
}
while(n){
var b = arr[i] + 1;
var c = arr + 1;
var d = arr + 1;
var e = arr + 1;
var f = arr + 1;
var g = arr + 1;
var h = arr + 1;
var j = arr + 1;
i = --n >>> 3;
}
}]];
function bench(title, f) {
var t0 = performance.now();
var res = f();
return performance.now() - t0; // console.log("${title} took ${t1-t0} msec");
}
var globalVarTime = bench("for-loop without "var"", () => {
// Here if you forget to put "var" so variables"ll be global
for(a = 0, l = arr.length; a < l; ++a)
var b = arr[a] + 1;
});
var times = benches.map(function(a) {
arr = new Array(11111111).fill(255);
return
}).sort((a,b) => a-b);
var max = times;
times = times.map(a => {a = (a/max)*100; return a; });
var template = (title, time, n) =>
"
2014 While назад
Подумайте логично. Посмотрите на это
For(var index = 0 , length = array.length ; index < length ; index++) {
//do stuff
}
Теперь скажите мне, почему это должно быть быстрее, чем:
Var length = array.length;
while(--length) { //or length--
//do stuff
}
Я был полностью сбит с толку, когда Chrome 28 показал, что цикл for работает быстрее, чем время.
Это должно быть как-то вроде "Ну, каждый использует цикл for, пусть фокусируется на этом, когда
для хром ". Но теперь, в 2014 году, цикл while возвращается на хром. он в 2 раза быстрее, в других/старых браузерах он всегда был быстрее. В последнее время я сделал несколько новых тестов. Теперь в реальном мире envoirement эти короткие коды ничего не стоят, и jsperf не может фактически правильно выполнить цикл while, потому что ему нужно воссоздать array.length, что также требует времени. НЕ МОЖЕТ получить фактическую скорость цикла while на jsperf.
вам нужно создать свою собственную функцию и проверить, что с помощью window.performance.now() И да... нет никакого способа, чтобы цикл while был быстрее. Реальная проблема - это фактическое манипулирование/время воспроизведения/ время рисования или, тем не менее, вы хотите называть его. Например, у меня есть сцена canvas, где мне нужно вычислить координаты и коллизии... это делается между 10-200 MicroSeconds (не миллисекундами). он фактически принимает различные миллисекунды, чтобы сделать все. Так же, как в DOM. В некоторых случаях существует еще один суперэффективный способ использования loop ... например, для копирования/клонирования массива For(var i = array.length ;
i > 0 ;
arrayCopy[ --i ] = array[ i ] // doing stuff);
Обратите внимание на настройку параметров: Сказано, что это подтверждает, что машины, такие как
писал, что я думал, чтобы сделать его немного короче и удалить некоторые бесполезные вещи и написал этот, используя тот же стиль: For(var i = array.length ;
i-- ;
arrayCopy[ i ] = array[ i ] // doing stuff);
Даже если это короче, похоже, что использование i еще раз замедляет все.
Это на 1/5 медленнее предыдущего цикла for и While . Примечание:
; очень важно после того, как для looo без {} Даже если я только что сказал вам, что jsperf - это не лучший способ протестировать скрипты. Я добавил здесь 2 цикла. И вот еще один ответ о производительности в javascript Этот ответ должен показать исполнительные способы написания javascript. Поэтому, если вы не можете прочитать это, спросите, и вы получите ответ или прочитаете книгу о javascript http://www.ecma-international.org/ecma-262/5.1/
Последняя ревизия теста, которую я подготовил (путем повторного использования более старого), показывает одну вещь. Длина кэширования не так важна, но это не вредит.
Каждый первый запуск теста, связанного выше (на недавно открывшейся вкладке), дает наилучшие результаты для последних 4 фрагментов (3-й, 5-й, 7-й и 10-й в диаграммах) в Chrome, Opera и Firefox на моем 64-битном Debian Squeeze (мое настольное оборудование). Последующие прогоны дают совсем другой результат. Выводы по производительности просты: В настоящее время (2011.10) ниже шаблон выглядит как самый быстрый. For (var i = 0, len = arr.length; i !== len; i++) {
...
}
Помните, что кэширование arr.length здесь не имеет решающего значения, поэтому вы можете просто протестировать i !== arr.length , и производительность не снизится, но вы получите более короткий код. PS: Я знаю, что в фрагменте с shift() его результат можно использовать вместо доступа к 0-му элементу, но я почему-то упускал из виду, что после повторного использования предыдущей ревизии (которая имела неправильное значение во время циклов), а позже я не хотел теряют уже полученные результаты.
"Лучший", как в чистом исполнении? или производительность И
? Чистая производительность "наилучшая" - это то, что использует кеш и префиксный оператор ++ (мои данные: http://jsperf.com/caching-array-length/189) For (var i = 0, len = myArray.length; i < len; ++i) {
// blah blah
}
Я бы сказал, что цикл без кэша - лучший баланс времени выполнения и времени чтения программиста. Каждый программист, начинающийся с C/С++/Java, не будет тратить мс, чтобы прочитать этот For(var i=0; i < arr.length; i++){
// blah blah
}
** кешируйте длину массива внутри цикла, некоторые секунды времени будут ускользать. Зависит от элементов в массиве, если в массиве есть больше элементов, существует большая разница относительно Ms времени * SArr; //Array;
for(var i = 0 ; i SArr; //Array;
for(var i = 0,len = sArr.length ; i < len ; i++) {
callArray(sArr[i]); //function call
}
***end: 1.354ms***
Это год 2017
. Я сделал несколько тестов. Похоже, метод while является самым быстрым в Chrome. Похоже, что левый декремент (--i) намного быстрее остальных (++i , i-- , i++) в Firefox. Этот подход является постом в среднем. Но он выполняет итерацию массива в обратном порядке. Let i = array.length;
while (--i >= 0) {
doSomething(array[i]);
}
Если приоритетный порядок важен, используйте этот подход. Let ii = array.length;
let i = 0;
while (i < ii) {
doSomething(array[i]);
++i;
}
Я всегда пишу в первом стиле. Даже если компилятор достаточно умен, чтобы оптимизировать его для массивов, но все же он умный, если мы используем DOMNodeList здесь или какой-то сложный объект с рассчитанной длиной? Я знаю, что вопрос о массивах, но я считаю хорошей практикой писать все ваши петли в одном стиле.
Var arr = ; // The array
var i = 0;
while (i < arr.length) {
// Do something with arr[i]
i++;
}
i ++ быстрее, чем ++ i, --i и я -Syntax
arr .forEach(callback(currentValue [, index [, array]]) [, thisArg ]);
Parameters
callback
Function to execute on each element, taking three arguments:
currentValue
The current element being processed in the array.
index Optional
The index of the current element being processed in the array.
array Optional
The array forEach() was called upon.
thisArg Optional
Value to use as this when executing callback .
Return value
Description
Examples
No operation for uninitialized values (sparse arrays)
const arraySparse = ;
let numCallbackRuns = 0;
arraySparse.forEach(function(element){
console.log(element);
numCallbackRuns++;
});
console.log("numCallbackRuns: ", numCallbackRuns);
// 1
// 3
// 7
// numCallbackRuns: 3
// comment: as you can see the missing value between 3 and 7 didn"t invoke callback function.
Converting a for loop to forEach
const items = ["item1", "item2", "item3"];
const copy = ;
// before
for (let i=0; iUsing thisArg
An object copy function
If the array is modified during iteration, other elements might be skipped.
Flatten an array
Specifications
Specification
Status
Comment
ECMAScript Latest Draft (ECMA-262)
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of "Array.prototype.forEach" in that specification.
Standard
ECMAScript 5.1 (ECMA-262)
The definition of "Array.prototype.forEach" in that specification.
Standard
Initial definition. Implemented in JavaScript 1.6.
Browser compatibility
Desktop
Mobile
Server
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
Node.js
forEach
Chrome
Full support
Yes
Edge
Full support
12
Firefox
Full support
1.5
IE
Full support
9
Opera
Full support
Yes
Safari
Full support
Yes
WebView Android
Full support
Yes
Chrome Android
Full support
Yes
Firefox Android
Full support
4
Opera Android
Full support
Yes
Safari iOS
Full support
Yes
Samsung Internet Android
Full support
Yes
nodejs
Full support
Yes
I. Перебор настоящих массивов
1. Метод forEach и родственные методы
2. Цикл for
3. Правильное использование цикла for...in
4. Цикл for...of (неявное использование итератора)
Объект имеет итератор, если в нем определен метод next() - функция без аргументов, возвращающая объект с двумя свойствами:5. Явное использование итератора
II. Перебор массивоподобных объектов
1. Использование способов перебора настоящих массивов
2. Преобразование в настоящий массив
3. Замечание по объектам среды исполнения
for-loop without "var" ${globalVarTime} msec.";
var $container = document.getElementById("container");
$container.innerHTML = strRes;
body { color:#fff; background:#333; font-family:helvetica; }
body > div > div { clear:both }
body > div > div > span {
float:left;
width:43%;
margin:3px 0;
text-align:right;
}
body > div > div > span:nth-child(2) {
text-align:left;
background:darkorange;
animation:showup .37s .111s;
-webkit-animation:showup .37s .111s;
}
@keyframes showup { from { width:0; } }
@-webkit-keyframes showup { from { width:0; } }
Загрузка...
