Друзья, которые использовали подчеркивание, знают, что у него есть очень полный API, чтобы назвать обход массивов (наборов), и _.each () - один из них. Вот простой пример:
var arr = [1, 2, 3, 4, 5]; _. Каждый (arr, function (el) {console.log (el);});Приведенный выше код выведет 1, 2, 3, 4, 5 по очереди. Разве это не очень интересно? Вам даже не нужно писать для петли самостоятельно. Метод _. Давайте посмотрим на то, как _.each () реализован. Перед этим давайте посмотрим на API _.each (). _.each () обычно называется следующим образом:
_.
Он получает 3 параметра,
Первый - это массив, который необходимо пройти (на самом деле, это также возможно быть объектом, поэтому давайте обсудим это позже);
Вторым является его функция обратного вызова (эта функция обратного вызова может проходить в 3 параметрах, таких как: function (el, i, arr), которые являются текущим элементом, текущим индексом и исходным массивом соответственно);
Третий - это контекст, с которым должна быть связана функция обратного вызова, то есть указание этого значения функции обратного вызова FN.
Хорошо, потребности очень ясны, давайте начнем работать!
Давайте сначала реализуем самый простой _.each (), который не может изменить контекст этого, и получает два параметра. Код заключается в следующем:
var _ = {}; // Предположим, что это недостаточное количество // простейшая реализация _.each Method_.each = function (arr, fn) {for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr; // вернуть исходный массив}Как насчет этого? Разве это не очень просто? Просто используйте для цикла и продолжайте вызывать функцию обратного вызова. Это можно сделать всего за несколько строк кода. Я верю, что ни один из друзей не может это понять! Давайте проверим это, чтобы увидеть, работает ли это нормально:
var arr = [1, 2, 3, 4, 5]; _. Каждый (arr, function (el, i, arr) {console.log (el);});Откройте в браузере, и консоль увидит правильный вывод.
Такой простой код не имеет никакого значения вообще. Давайте посмотрим на более сложный пример. Например, у массива Arr есть собственность. Нам нужно суммировать все элементы массива и хранить их в сумме следующим образом:
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // атрибут SUM используется для хранения суммы Array Elements_.each (arr, function (el, i, arr) {this.sum += el;});В настоящее время это используется в функции обратного вызова. Если это не связано, это окно по умолчанию. Это не то, что мы хотим. Мы надеемся, что он связан с массивом. Вызов или применение может реализовать эту функцию, код выглядит следующим образом:
var _ = {}; // Предположим, это подчеркивание // Связывать, получить два параметра Fn и контекст // Связывать Fn с контекстом var bind = function (fn, context) {context = context || нулевой; возврат функции (el, i, arr) {fn.call (context, el, i, arr); }} // _. for (var i = 0; i <arr.length; i ++) {fn (arr [i], i, arr); } return arr;} // Тестовый пример: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // атрибут суммы используется для хранения суммы массива elements_. // 15ОК, этот _.Erece () уже достаточно мощный, чтобы итерация через массив обычно, и вы также можете указать это значение по желанию, чтобы изменить контекст функции обратного вызова. Однако, как мы упоминали ранее, _.each () Underscore также может пересекать объекты, и эта реализация не сложна. Просто судите, является ли первый параметр, который прошел объект или массив. Если это массив, итерация, как мы. В противном случае, если это объект, используйте объект для ... в петле. Если вы заинтересованы, вы можете попробовать это самостоятельно или проверить исходный код подчеркивания.
Примечание. Поскольку стандарт ES5, нативные массивы уже имеют такие методы обхода, как Array.Prototype.Foreach, Array.Prototype.Map и т. Д., И нативные могут использоваться в проекте.
Выше приведено полное описание углубленного анализа метода обхода массива JS (рекомендуется), введенного редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!