В этом сообщении блога предполагается, что вы знакомы с тем, что такое массив в JavaScript, и как перебирать массив с помощью базового цикла for и цикла for…of.
Я сослался на веб-документы MDN и учебную программу учебного лагеря по разработке программного обеспечения Flatiron School для получения информации, содержащейся в этом сообщении в блоге. Чтобы узнать больше о массивах и их итерации, перейдите к документации MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array.
Знакомство с методами итерации массива
Что-то интересное, о чем я недавно узнал, — это разные методы итерации массива и их различное влияние на массив, к которому они вызываются. Пять основных методов итерации массива:
Массив.прототип.карта()
Массив.прототип.найти()
Массив.прототип.фильтр()
Массив.прототип.уменьшить()
Массив.prototype.forEach()
Метод Map()
Метод map() (Array.prototype.map()) я считаю наиболее забавным, поскольку с его помощью можно сделать довольно много.
Метод map() вызывается для массива. Он привязывается либо к самому массиву, либо к имени переменной, которой присваивается массив. Метод map() принимает функцию обратного вызова в качестве аргумента. Функция обратного вызова может быть либо анонимной функцией, либо ссылкой на именованную функцию. Обратный вызов также будет принимать параметры. Обычно первым параметром обратного вызова будет текущий элемент массива, по которому выполняется итерация.
Карта, связанная с массивом:
[1, 2, 3, 4].map(element => console.log(element)); //output: 1 2 3 4
Сопоставление с переменной, назначенной массиву:
const myArray = [1, 2, 3, 4]; myArray.map(element => console.log(element)); //output: 1 2 3 4
Затем Map() возьмет каждый элемент данного массива и каким-то образом изменит его, используя функцию обратного вызова. Новый измененный элемент присваивается новому массиву той же длины, что и исходный массив. Затем метод map() возвращает этот новый массив, заполненный измененными элементами. Метод map() не изменяет исходный массив, для которого он вызывается.
Этот метод полезен, если вы хотите выполнить вычисление для каждого элемента, например умножить на два.
const myArray = [1, 2, 3, 4]; let mapping = myArray.map(element => element * 2); console.log(mapping); // output: [2, 4, 6, 8] (Each element in the array is multiplied by 2) console.log(myArray); // output: [1, 2, 3, 4] (Original array is unchanged)
Его также можно использовать для более сложных задач, таких как получение массива, где каждый элемент представляет собой еще один вложенный массив с именами и фамилиями людей, составляющими элементы. Использование метода map() для преобразования каждого вложенного массива в объект упростит доступ к информации о каждом человеке и упростит чтение информации.
const myNestedArray = [["Larry", "Mo"], ["Cindy", "Jane"], ["Beth", "Smith"]];
const nestedMapping = myNestedArray.map(element => {
const obj = {
firstName: element[0],
LastName: element[1],
};
return obj
});
console.log(nestedMapping);
// output [
// { firstName: 'Larry', LastName: 'Mo' },
// { firstName: 'Cindy', LastName: 'Jane' },
// { firstName: 'Beth', LastName: 'Smith' }
// ] (it is now easier to reference each person in the array)
console.log(myNestedArray)
// output [ [ 'Larry', 'Mo' ], [ 'Cindy', 'Jane' ], [ 'Beth', 'Smith' ] ] (The original array remains unchanged)
Метод Find()
Метод find() — это еще один широко используемый метод итерации массива.
Array.prototype.find() вызывается для массива или имени переменной, присвоенного массиву аналогично map(). Ему также передается функция обратного вызова в качестве аргумента. Однако метод find() будет перебирать заданный массив, передавать каждый элемент функции обратного вызова по одному и проверять, проходит ли какой-либо из элементов тест, заданный функцией обратного вызова. Первый переданный элемент вернет «истинное» значение, и этот элемент будет тем, что возвращает метод find().
const myArrayFind = [2, 4, 6, 8]; const finding = myArrayFind.find(element => element > 5); console.log(finding); // output: 6 (the first value that passed the test) console.log(myArrayFind); // output: [ 2, 4, 6, 8 ] (The original array is unchanged)
Метод find() возвращает только одно значение вместо целого нового массива, такого как map(). Возвращаемый элемент также не изменяется. Если ни один из элементов в данном массиве не пройдет проверку в функции обратного вызова, то find() вернет значение «undefined». Важно отметить, что метод find вернет только первый элемент, прошедший проверку. Как только элемент возвращает «истинное» значение, find() выходит из цикла и прекращает проверку элементов. Если какие-либо другие элементы соответствуют требованиям тестирования, они не будут возвращены.
Метод Filter()
Если вы хотите запустить тест на массиве и вернуть все пройденные элементы, вы должны использовать Array.prototype.filter().
Метод filter() привязывается к массиву и передает функцию обратного вызова в качестве аргумента. Функция обратного вызова возьмет каждый элемент из переданного массива и проверит его, чтобы увидеть, соответствует ли он заданным критериям. Элемент считается пройденным, если он возвращает «истинное» значение после выполнения функции обратного вызова.
const myArrayFilter = [1, 2, 3, 4, 5, 6]; const filtering= myArrayFilter.filter(element => element % 3 === 0 ); console.log(filtering); // output: [ 3, 6 ] (Both 3 and 6 are divisible by 3, so they both pass the test) console.log(myArrayFilter); // output: [ 1, 2, 3, 4, 5, 6 ] (Original array is remains unchanged)
Filter() создаст неглубокую копию исходного массива и будет использовать ее для хранения каждого элемента, прошедшего проверку. Эта копия массива будет содержать только переданные элементы из исходного массива. Новый массив может иметь ту же длину, что и исходный массив, только если все элементы проходят проверку, но обычно он будет короче, чем массив, для которого была вызвана функция filter(). Как только метод filter() пройдет весь исходный массив, он вернет массив копии, содержащий переданные элементы. Метод filter() не изменяет исходный массив. Если ни один элемент из исходного массива не пройдет, filter() вернет пустой массив.
Метод сокращения()
Метод Array.prototype.reduce() вызывается для массива, как и описанные выше методы. Он также принимает функцию обратного вызова в качестве параметра. Функция обратного вызова для reduce() принимает два параметра: текущий элемент и параметр, называемый аккумулятором. Метод reduce() принимает каждый элемент и передает его функции обратного вызова, функция обратного вызова затем сравнивает его с предыдущим значением в массиве и уменьшает два значения до одного. Затем уменьшенное значение сохраняется в параметре-аккумуляторе, который передается функции обратного вызова.
const myArrayReduce = [1, 2, 3, 4]; const reducing = myArrayReduce.reduce((accumulator, element) => accumulator + element, 0); console.log(reducing); // output: 10 (All elements in the original array add up to 10) console.log(myArrayReduce); // output: [ 1, 2, 3, 4 ] (Original array is unchanged)
Метод reduce() сохраняет это новое уменьшенное значение, а затем сравнивает с ним следующий элемент в исходном массиве. Затем уменьшенное значение и следующий элемент также уменьшаются до одного значения. Этот цикл продолжается до тех пор, пока в исходном массиве не останется элементов.
Что важно отметить в методе reduce(), так это то, что он не сразу сравнивает элементы с 0-м и 1-м индексами. Поскольку метод reduce() сравнивает текущий элемент массива с предыдущим элементом, при индексе 0 нет предыдущего элемента для сравнения. Reduce не будет запускать элемент с индексом 0 через обратный вызов, а вместо этого начнет с элемента с индексом 1.
Метод reduce() также может принимать необязательный второй аргумент, который может устанавливать начальное значение. Если аргумент начального значения предоставлен, метод reduce() начнет с индекса 0 и будет использовать начальное значение в качестве значения для сравнения. Возвращаемое значение метода reduce() является результатом сравнения каждого элемента. Это будет только одно значение. Кроме того, метод reduce() не изменит исходный массив.
Метод ForEach()
Метод Array.prototype.forEach() отличается от других методов итерации массива. Он общий, что означает, что он не имеет определенной цели или результата. Возвращаемое значение всегда «не определено», поэтому вам придется явно возвращать значение из функции обратного вызова. Поскольку он является общим, результат метода forEach() зависит от функции обратного вызова, переданной ему в качестве аргумента. Он не мутирует исходный массив, для которого он вызывается. Поскольку forEach() является универсальным, рекомендуется не использовать его, если вы не можете достичь своей цели с помощью любого из других методов итерации массива. Это также не выразительно, поэтому другим разработчикам, которые могут читать ваш код, может быть неясно, чего вы пытаетесь достичь.
const myArrayEach = [1, 2, 3, 4]; const forEasching = myArrayEach.forEach(element => console.log(element)); // output: 1 2 3 4 (forEach is loggin each element in the original array to the console) console.log(myArrayEach); // output: [ 1, 2, 3, 4 ] (original array is unchanged)
Заключительные мысли
Методы итерации массива — отличный инструмент для работы с массивами. Большинство методов более выразительны, чем цикл for или for…of. Это означает, что разработчикам будет легче понять, чего вы пытаетесь достичь, когда они просматривают ваш код, а удобочитаемость является важной частью написания хорошего кода.
Существует больше методов итерации массива, чем только эти пять, но пять, о которых говорится в этом посте, — это методы, о которых большинство людей узнают в первую очередь при изучении веб-разработки.
