Оригинальная статья, впервые опубликованная наfe2x.ccДля перепечатки, пожалуйста, отметьте оригинального автора и прикрепите оригинальную ссылку
предисловие
С момента разработки JavaScript было разработано множество методов обхода массива. Различные методы обхода работают быстрее. В этих сценариях используются разные методы циклов. Будут сравниваться следующие:
Различные методы обхода массива
forутверждение
Код:
var arr = [1,2,4,6]
for(var i = 0, len = arr.length; i < len; i++){
console.log(arr[i])
}
Это стандарт для цикла и самый традиционный оператор. Строки также поддерживаются. Определите переменную i как индекс для отслеживания местоположения доступа. len — это длина массива, и условие состоит в том, что я не может превышать len.
forEachутверждение
forEachМетод выполняет предоставленную функцию CALLBACK один раз для каждого элемента массива. forEach — это метод массива, который можно использовать для применения функции к каждому элементу массива.forEachВыполнение callback-функции для каждого элемента массива можно использовать только для массивов.Перебор массива заставляет каждый элемент массива выполнять одно действие.Те элементы, которые были удалены (методом удаления и т.п.) или неинициализированы, будут пропущены ( но не те элементы, значение которых не определено) (например, в разреженных массивах); в отличие от map() или reduce(), он всегда возвращает неопределенное значение и не может быть объединен в цепочку. Типичный вариант использования — выполнение побочных эффектов в конце цепочки.
Код:
var arr = [1,5,8,9]
arr.forEach(function(item) {
console.log(item);
})
for-inутверждение
обычно используютfor-inдля обхода свойств объекта, но свойства требуютenumerable, можно прочитать.for-inЦикл проходит только по перечислимым свойствам. Обычно он используется для обхода объектов, включая имена нецелочисленных типов и унаследованных свойств в цепочке прототипов. Объекты, созданные с помощью встроенных конструкторов, таких как Array и Object, наследуют неперечисляемые свойства от Object.prototype и String.prototype и не могут быть пройдены.
Код:
var obj = {
name: 'test',
color: 'red',
day: 'sunday',
number: 5
}
for (var key in obj) {
console.log(obj[key])
}
for-ofЗаявление (ES 6)
for-ofОператор создает итерационный цикл по итерируемым объектам (включая Array, Map, Set, String, TypedArray, объекты arguments и т. д.), вызывает настраиваемый крючок итерации и выполняет оператор для значения каждого отдельного свойства. Пока это итерируемый объект, вы можете передатьfor-ofповторять.
Код:
var arr = [{name:'bb'},5,'test']
for (item of arr) {
console.log(item)
}
for-ofа такжеfor-inразница
for-inОператор перебирает перечисляемые свойства объекта в исходном порядке вставки.for-inОн будет проходить через свойства объекта цепочки наследования, поэтому это займет больше времени.
for-ofОператор просто перебирает данные итерируемого объекта.
Другой метод петли
mapметод (не изменяет исходный массив)
mapМетод будет вызывать функцию обратного вызова один раз для каждого элемента в исходном массиве по порядку. Возвращаемые значения (включая undefined) после каждого выполнения обратного вызова объединяются для формирования нового массива. Функция обратного вызова будет вызываться только для индексов, у которых есть значение; индексы, которым никогда не присваивалось значение или которые не удалялись с помощью удаления, не будут вызываться. Пусть массив сгенерирует новый массив с помощью некоторого вычисления и сопоставит его с новым массивом,
Код:
var arr = [1,2,3]
var firearr = arr.map(current => current * 5)
reduceметод
Пусть предыдущий и следующий элементы в массиве выполняют какие-то вычисления и накапливают окончательное значение,
Код:
var wallets = [4,7.8,3]
var totalMoney = wallets.reduce( function (countedMoney, wallet) {
return countedMoney + wallet.money;
}, 0)
filterметод (не изменяет исходный массив)
filterВызывает функцию обратного вызова один раз для каждого элемента в массиве и создает новый массив со всеми элементами, для которых обратный вызов возвращает значение true или эквивалентное ему значение. Обратный вызов будет вызываться только для индексов, которые были назначены, и не будет вызываться для индексов, которые были удалены или никогда не назначались. Элементы, не прошедшие тест обратного вызова, пропускаются и не включаются в новый массив. Отфильтруйте подходящие элементы в отфильтрованном массиве, чтобы сформировать новый массив.
Код:
var arr = [2,3,4,5,6]
var morearr = arr.filter(function (number) {
return number > 3
})
everyметод
Каждый метод выполняет функцию обратного вызова один раз для каждого элемента в массиве, пока не найдет элемент, который заставляет обратный вызов возвращать значение false (представляющее значение, преобразуемое в логическое значение false ). Если такой элемент будет найден, метод Every немедленно вернет false. В противном случае обратный вызов возвращает true для каждого элемента, и каждый возвращает true. Проверьте, соответствует ли каждый элемент в массиве условиям.Если каждый элемент соответствует условиям, он вернет true, в противном случае он вернет false, что немного похоже на обход массива и выполнение обратного вызова. Будет вызываться только для тех индексов, которым уже присвоено значение. Не вызывается для индексов, которые удалены или которым никогда не присваивалось значение.
Код:
var arr = [1,2,3,4,5]
var result = arr.every(function (item, index) {
return item > 0
})
someметод
some выполняет функцию обратного вызова один раз для каждого элемента в массиве, пока не найдет такой, при котором обратный вызов возвращает «истинное» значение (то есть значение, которое можно преобразовать в логическое значение true ). Если такое значение будет найдено, некоторые сразу вернут true. В противном случае некоторые возвращают false. обратный вызов будет вызываться только для индексов, которые «имеют значение», а не для индексов, которые удалены или которым никогда не присваивалось значение. Проверьте, есть ли в массиве определенные условия символа элемента, если есть один элемент, верните true, в противном случае верните false, что немного похоже на обход массива или операции.
Код:
var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
return item > 3
})
Сравните скорость перемещения
Для сравнения здесь я использовалjsPerfПлатформапровести тестирование.
Сравнение циклов JavaScript
Я создал два массива для сравнения, почему такая разница, ведь разные типы массивов имеют разные форматы адресов, хранящиеся в памяти javascript, и редактор будет рассчитывать исходя из типа и длины элементов массива при обходе, например, если Массив заполнен числовыми классами, и цикл будет быстрее, чем массив, содержащий смешанный тип числа, строки и объекта, поэтому создаются два массива, один полностью неопределенный массив, а другой представляет собой массив смешанного типа.
// 一个是空数组
var nullarr = new Array(10000) // [undefined,undefined,...undefined]
// 另一个带不同类型的数据的数组
var dataarr = []
for(var i = 0; i < 10000; i++){
if (i % 2 ===0) {
dataarr[i] = i.toString()
} else {
dataarr[i = i
}
}
dataarr // [1,'2',3...,10000]
После теста я обнаружил, что это немного странно.По-прежнему медленнее извлекать пустой массив напрямую, чем массив данных.Почему это странно?Чтобы сравнить согласованность цикла, я выбираю только массив с данными в этомdataarrпровести тестирование.
Тогда давайте сравнимfor for len forEach for-in for-of map filterскорость цикла
можно увидетьforЦикл является самым быстрым, самым старым циклом и наиболее оптимизированным, за ним следуетfor-ofЭто цикл, добавленный в es6, и им очень легко пользоваться.for-inМы можем сделать сортировку по скорости
for>for-of>forEach>filter>map>for-in
Очевидно, что при работе с большими объемами циклических данных по-прежнему необходимо использовать древниеforЭффективность петли лучшая, но она не бесполезна.for-in, На самом деле, во многих случаях это зависит от реальной сцены,for-inБольше используется при обходе свойств объекта,for-inВ процессе обхода также проходится цепочка наследования, поэтому она относительно медленная, напримерmapСкорость невелика, но обработка очень проста в использовании в Es6 для реализации функции массива, и легко намекнуть на создание нового массива.Или, например, использоватьIteratorСвойства также в порядке, поэтому у каждого цикла есть место для его использования.
everyа такжеsomeНе совсем метод манипулирования массивом
everyа такжеsomeВсе они являются методами, которые напрямую возвращают логический тип всего массива.everyбыстрее, чемsomeНамного быстрее.
галантерейные товары
Диаграмма, показывающая методы массива JavaScript
наконец
Наконец, я считаю, что будут некоторые различия между различными ядрами браузера.Заинтересованные друзья могут протестировать его.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение блогеру.
прилагается к тестуадрес