Если вы чем-то похожи на меня, иногда вам нужно что-то разобрать, чтобы действительно понять, как это работает. В начале моего пути к кодированию я изо всех сил пытался понять встроенные в JavaScript методы итератора массива и то, что именно делал каждый из них. Только когда я разобрал несколько из них и перестроил их с нуля, я полностью понял, как работает каждый из них. У меня была помощь в этом процессе, рекомендации, которые помогли мне понять, но многие из вас могут быть сами по себе. Я пишу этот блог, чтобы помочь тем, кто работает самостоятельно, глубже понять краеугольный камень JavaScript и, надеюсь, вдохновить других сделать то же самое.
Существует несколько вариантов встроенных методов итератора JavaScript. Методы, с которыми мне было труднее всего, были:
- .для каждого( )
- .карта( )
- .находить( )
- .фильтр()
- .уменьшать( )
Давайте углубимся в то, как работает каждый метод, и посмотрим, как они выглядят, созданные вручную.
для каждого
Описание : Этот метод вызывает функцию для каждого элемента массива.
Пример: Вызывает функцию для каждого элемента фруктов.
const fruits = ["apple", "orange", "cherry"]; fruits.forEach(myFunction);
Теперь давайте разберем его и построим сами как функцию:
const array = [1, 2, 3];
function myEach(array, callback) {
for (let i = 0; i < array; i++) {
callback (array[i]);
}
return array;
}
myEach(array);
карта
Описание : Этот метод создает новый массив путем однократного вызова функции для каждого элемента массива.
Пример: Умножьте все значения в массиве на 10.
const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)
function myFunction(num) {
return num * 10;
}
Наша разобранная версия:
const array = [1, 2, 3];
function myMap(array) {
const newArray = [];
for (let i = 0; i < array.length; i++) {
newArray.push(array[i]);
}
return newArray;
}
myMap(array);
найти
Описание: Этот метод возвращает значение первого элемента, прошедшего проверку.
Пример: Найти значение первого элемента со значением больше 18.
const ages = [3, 10, 18, 20];
function checkAge(age) {
return age > 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAge);
}
Сломанный:
const array = [1, 2, 3];
function myFind(array) {
for (let i = 0; i < array.length; i++) {
if(array[i]) {
return array[i];
}
}
}
myFind(array);
фильтр
Описание: Этот метод создает новый массив, заполненный элементами, прошедшими проверку, предоставленную функцией.
Пример: Возвратите массив всех значений в age[], которые равны 18 или старше.
const ages = [32, 33, 16, 40];
const result = ages.filter(checkAdult);
function checkAdult(age) {
return age >= 18;
}
Сломанный:
const array = [1, 2, 3];
function myFilter(array) {
let result = [];
for (let i = 0; i < array.length; i++) {
if(array[i] === true) {
result.push(array[i]);
}
}
return result;
}
myFilter(array);
уменьшить
Описание: Этот метод выполняет функцию редуктора для элемента массива. Этот метод возвращает одно значение: накопленный результат функции.
Пример: Округлите все числа и отобразите сумму.
const numbers = [15.5, 2.3, 1.1, 4.7];
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
function getSum(total, num) {
return total + Math.round(num);
}
Наша разобранная версия:
const array = [1, 2, 3];
function myReduce(array,acc) {
if(!acc) {
acc = array[0];
array = array.slice(1);
}
for (let i= 0; i < array.length; i++) {
acc = (acc,array[i],array);
}
return acc;
}
myReduce(array);
Если вы новичок в программировании и разбитые версии немного пугают, я нашел этот рисунок очень полезным для понимания некоторых встроенных методов итератора:
Вывод:
Чтобы лучше понять некоторые типы встроенных методов массива в JavaScript, мы изучили определения каждого метода, рассмотрели пример, а затем создали функциональность с нуля. Мы можем использовать это более глубокое понимание для создания лучшего и более мощного кода.
"Я либо найду способ, либо проложу его".
— Ганнибал Барка
Большое спасибо за чтение и удачного кодирования!
Ресурсы и дополнительная литература:
Для определений и примеров:
Для графики:
Чтобы проверить код:
