Сравнение методов обхода массива JavaScript
Введение
На данный момент JavaScript разработал множество методов обхода цикла массива. В этих сценариях используются различные методы цикла. Сегодня их будут сравнивать.
для заявления
код:
var arr = [1,2,4,6]
for(var i = 0, len = arr.length; i < len; i++){
console.log(arr[i])
}
Это стандарт для цикла и самый традиционный оператор. Также поддерживаются строки. Определите переменную i в качестве индекса для отслеживания местоположения доступа. len — это длина массива, а условие состоит в том, что i не может превышать len.
оператор forEach
forEach выполняет предоставленную функцию CALLBACK один раз для каждого элемента массива. forEach — это метод массива, который можно использовать для применения функции к каждому элементу массива. forEach выполняет функцию обратного вызова для каждого элемента массива только для массивов. Перемещайтесь по массиву, чтобы каждый элемент массива выполнял одно действие. Элементы, которые были удалены (с помощью метода удаления и т. д.) или неинициализированные, будут пропущены (но не те, значение которых не определено) (например, в разреженных массивах) выше); в отличие от map() или reduce(), он всегда возвращает неопределенное значение и не может быть объединен в цепочку. Типичный вариант использования — выполнение побочных эффектов в конце цепочки.
код:
var arr = [1,5,8,9]
arr.forEach(function(item) {
console.log(item);
})
for-in заявление
Как правило, for-in используется для обхода свойств объекта, но свойства должны быть перечисляемыми, прежде чем их можно будет прочитать.
Цикл for-in loop перебирает только перечисляемые свойства. Обычно он используется для обхода объектов, включая имена нецелочисленных типов, а также могут быть пройдены унаследованные свойства в цепочке прототипов.
код:
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- просто перебирает данные итерируемого объекта.
Сравните скорость перемещения
Я использовал jsPerf для сравнения.
Я создал два массива для сравнения, разные типы массивов имеют разные форматы адресов, хранящиеся в памяти javascript, и редактор будет вычислять на основе типа и длины элементов массива при обходе, например, если массив заполнен числами, и это будет быстрее, чем массив, содержащий смешанный тип числа, строки и объекта, поэтому создаются два массива, один полностью неопределенный массив, а другой представляет собой массив смешанного типа.
// an empty array
var nullarr = new Array(10000) // [undefined,undefined,…undefined]
// different type in array
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
Видно, что скорость цикла for является самой быстрой, самой старой и наиболее оптимизированной, за ней следует цикл for-of, который является новым циклом в es6. Он очень прост в использовании, а самый медленный — для входа. Мы можем сортировать по скорости
for > for-of > forEach > filter > for-in
Это, очевидно, лучшая эффективность использования древнего цикла for при работе с большим объемом данных цикла, но это не означает, что высказываниеfor-in не используется. На самом деле, во многих случаях, в соответствии с реальной сценой, for-in больше используется для обхода свойств объекта, for-in также будет проходить по цепочке наследования во время процесса обхода, поэтому это является причиной того, что он относительно медленный, например, карта медленная по производительности, но обработка очень проста в использовании в ES6 для реализации функции массива, и легко намекнуть на создание новых массивов. Или, например, использование свойства итератора тоже допустимо, поэтому в каждом цикле есть место для его использования.
Окончательно
Спасибо, что прочитали. С нетерпениемс нетерпением жду ваших подписчиков и новых статей высокого качества.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
