Я всегда был медленным учеником, я не тороплюсь с вещами, как на самом деле ... Мне просто трудно быстро понять новые концепции, и я хотел бы думать, что я не одинок. Одной из самых сложных вещей для меня, когда я начал учиться, было манипулирование DOM, я не шучу, я был близок к тому, чтобы отказаться от самого программирования, когда мне пришлось изучать DOM. Я был убежден, что веб-разработка не для меня. Следующий момент, когда я ни на что не годен, наступил с методами массивов высокого порядка в JavaScript. Я просто бросил их, потому что они выглядели такими сложными, я потратил добрый час на чтение старой доброй документации MDN, но я просто не мог понять их.
Я понимаю, почему в большинстве учебных пособий, объясняющих эти концепции, используется сложный жаргон, вероятно, потому, что к тому времени, когда вы доберетесь до этих методов, вы уже хорошо разбираетесь в технических аспектах JavaScript, но для некоторых людей (таких как я, хахаха :__) это просто рождает страх и заставляет вас чувствовать, что вы не смогли пройти этот «этап новичка».
Потратив некоторое время на изучение этих методов, я обнаружил, что использую их очень часто, и я не буду лгать, мне нравятся эти методы, и я чувствую, что многие люди пугаются их из-за того, насколько сложными они выглядят, что печально :/ потому что они могут быть чрезвычайно полезно. Итак, вот простое объяснение метода карты и фильтра.
Метод карты
Это мой любимый из всех методов, и он работает с очень простым подходом к изменению вещей в массиве. Каждый раз, когда мы передаем нашей функции карты массив, она выполняет определенную операцию над каждым элементом массива, а затем возвращает новый, улучшенный и модифицированный массив. Метод карты принимает другую функцию, которая определяет, какие изменения необходимо внести в элементы массива. Если это звучит пугающе, вот наглядная демонстрация.
const myAmazingArray = ['1','3','5','7']; function MultiplyByTwo(number){ return number*2; }; const myNewAmazingArray = myAmazingArray.map(MultiplyByTwo);
Здесь мы используем функцию карты, чтобы умножить все элементы массива на два.
Метод фильтра
Думайте о методе фильтра как о сите, но вместо наших старых и скучных сит это программируемое сито, которое может регулировать свою функцию фильтрации в зависимости от условий, которые ему предоставляются. Допустим, вы смешали молоко и хлопья вместе, вы смешали фрут-петли и рисовые чипсы, и теперь вам не хочется есть рисовые чипсы, поэтому вы решаете отфильтровать их, вы достаете свое удивительное программируемое сито и программируете его только на отфильтруйте рисовые чипсы.
Таким образом, связывая это с исходной идеей метода, метод filter принимает массив, выполняет функцию, чтобы проверить, следует ли фильтровать определенный элемент массива (например, сито, проверяющее, является ли хлопья петлей froot или хрустящим рисом). ), а затем возвращает новый отфильтрованный массив.
Его синтаксис аналогичен методу Map. Этот метод работает с массивом и принимает такую функцию:
const FrootLoopAndRiceCrispyMilk = ['froot loops','rice crispies','rice crispies','froot loops'] function programmableSieve(cereal){ // telling my sieve to only look for froot loops return cereal==='froot loops' } const filteredCereal = FrootLoopAndRiceCrispyMilk.filter(programmableSieve);
Здесь я сначала объявляю массив, а затем отфильтровываю рисовые чипсы, потому что мне нужны только циклы froot, поэтому метод filter делает свое дело и возвращает отфильтрованный массив.
Надеюсь, вы лучше разобрались в этих двух методах, скоро я расскажу о них больше. Если у вас есть какие-либо предложения, оставьте их ниже.
Увидимся в следующий раз!