[🧙‍♂️ MajScript # 01] Три силы массива в Javascript.

В этой статье мы находимся в мире MajScript, разработчики - это волшебники (называемые MajScript), которые пишут некоторые заклинания (коды) на свитках, чтобы активировать магию. Многие MajScript присоединяются к лиге разработчиков, которые собирают лучший MajScript в мире для выполнения клиентских миссий!

Привет, добро пожаловать в тренировочные джунгли, если вы здесь, чтобы получить больше силы и присоединиться к лиге разработчиков, чтобы начать несколько миссий! Прежде всего, вам нужно будет улучшить свои навыки, раз уж вы здесь, я постараюсь выучить вам некоторые базовые заклинания!

Здесь я беру шесть карт, у каждой карты свой номер, от 1 до 6, покажите мне свои навыки и дайте мне только четные карты.

Что будешь использовать? … forEach?

Хорошо, давай покажем мне:

const cards = [ 1, 2, 3, 4, 5, 6 ]
const evenCards = []
// I’m asking you to filter the array with only even number
cards.forEach(currentNumber => {
    // If even number
    if (currentNumber % 2 === 0) {
        evenCards.push(currentNumber)
    }
})
evenCards // [ 2, 4, 6 ]

💡 В интервью, если люди просят вас найти более быстрый способ узнать, является ли число четным или нечетным, используйте не по модулю, а бинарный оператор, поскольку `currentNumber & 1` равно` currentNumber% 2 === 0`, бинарный оператор быстрее, чем по модулю, так как это бинарная операция!

Хорошо, у вас получилось, но есть две вещи, которые не в этом отношении:

1) Вам нужно вставить значение в другой массив, поскольку forEach НЕ возвращает какое-либо значение, поскольку forEach похож на цикл for!

2) Если другой кодировщик просматривает ваш код, он должен понимать контекст, а с forEach разработчику не совсем ясно, что вы хотите отфильтровать значение непосредственно в другой массив.

Вам удается обработать мой запрос, но вам нужно знать больше вариантов, forEach хорош, но не в такой ситуации ...

forEach можно использовать для другого контекста изменения значения в итерированном массиве, например, для отображения списка пользователю:

const myArray = [ 1, 2, 3 ]
myArray.forEach(currentNumber => {
    console.log(currentNumber) // 1, 2, 3
})

Разрешите представить первое первое заклинание, я имею в виду Фильтр!

1) Фильтр прототипа заклинания:

Фильтр принимает один аргумент, например forEach, это обратный вызов (это просто простая функция) и возвращаемый массив с отфильтрованным значением .

array.filter (обратный вызов)

Аргумент:

• обратный вызов принимает t три аргумента: текущий элемент, индекс и массив повторяются.

Возврат:

• массив с отфильтрованным значением

⚠️ Не забывайте возвращать логическое значение на каждой итерации!

Как использовать:

На каждой итерации вы должны возвращать истину или ложь, если оператор return имеет значение false, текущий элемент будет удален из возвращенного массива.

Когда использовать:

Если вы хотите отфильтровать значение из массива, в зависимости от вашего состояния.

Я покажу вам решение с фильтром:

const cards = [ 1, 2, 3, 4, 5, 6 ]
// Filter the array with only even number
const evenCards = cards.filter(currentNumber => {
    // If even number
    const isEvenNumber = currentNumber % 2 === 0
    return isEvenNumber
}) 
evenCards // [ 2, 4, 6 ]

Это заклинание такое потрясающее! Вы можете легко отфильтровать значение в массиве

Теперь мы знаем, как фильтровать, но пришло время узнать, как преобразовать!

Итак, как вы можете видеть на этих картах, каждая карта имеет свой тип (Spade ♠, Heart ♥, Diamond ♦, Clubs ♣), как вы можете преобразовать все карты в Heart ♥?

Хм… Я вижу, что ты будешь использовать forEach? Опять таки? Нет !!

Посмотрим еще одно заклинание ...

2) Заклинание прототипа карты:

Карта принимает один аргумент, например forEach и filter, это обратный вызов (это просто простая функция) и возвращаемый массив с преобразованным значение.

map.filter (обратный вызов)

Аргумент:

• обратный вызов принимает три аргумента: текущий элемент, индекс и повторяемый массив.

Возврат:

• массив с преобразованным значением

⚠️ Не забывайте возвращать преобразованный элемент на каждой итерации!

Как использовать:

На каждой итерации вы должны возвращать преобразованный элемент.

Когда использовать:

Если вы хотите преобразовать значение из массива. Вы также можете преобразовать объект в значение (после этого мы увидим).

const cards = [
    { type: “spade”, number: 1 },
    { type: “heart”, number: 2 },
    { type: “diamond”, number: 3 },
    { type: “spade”, number: 4 },
    { type: “diamond”, number: 5 },
    { type: “clubs”, number: 6 },
]
// Let’s transform all types into heart type
const cardsWithOnlyHeart = cards
.map(card => {
    if (card.type !== “heart”) {
        card.type = “heart”
    }
    return card
})
cardsWithOnlyHeart
// [
//     { type: “heart”, number: 1 },
//     { type: “heart”, number: 2 },
//     { type: “heart”, number: 3 },
//     { type: “heart”, number: 4 },
//     { type: “heart”, number: 5 },
//     { type: “heart”, number: 6 },
// ]

Как видите, магия javascript позволяет нам использовать разные заклинания для создания разных вещей!

Важно знать! Вы можете связать свои заклинания! Удивительно, нет? давай увидим это !

Вы можете попытаться дать мне все числа из ромбовидного шрифта?

const cards = [
    { type: “spade”, number: 1 },
    { type: “heart”, number: 2 },
    { type: “diamond”, number: 3 },
    { type: “spade”, number: 4 },
    { type: “diamond”, number: 5 },
    { type: “clubs”, number: 6 },
]
// Let’s give me all number from diamond type
const numberFromDiamondCard = cards
// First filter card that are not diamond type
.filter(card => {
    const isDiamondType = card.type === “diamond”
    return isDiamondType
})
// Then transform diamond card object into number
.map(diamondCard => {
    return diamondCard.number
}) 
numberFromDiamondCard
// [ 3, 5 ]

Когда вы связываете функцию, параметры второй связанной функции являются результатом первой цепочки!

Очень хорошо ! твоя магия потрясающая! У вас большой потенциал, вы можете связать все заклинания массива прототипов!

Для разработчика, который будет просматривать ваши волшебные свитки, это действительно ясно, он знает напрямую, что вы хотите отфильтровать и преобразовать массив в другой массив.

3) Уменьшить заклинание прототипа:

Чтобы быть ясным с вами, я не понимаю непосредственно заклинание уменьшения, когда выучу его, но, наконец, я нашел хорошее объяснение, поэтому, когда вы хотите получить одно значение из массива, используйте уменьшить!

Аргументы:

Функция Reduce принимает * два аргумента * в отличие от forEach / filter / map, а именно:

• обратный вызов: принимает четыре аргумента: аккумулятор, текущий элемент, индекс и повторяемый массив.
• начальное значение аккумулятора (возврат значения уменьшением).

Возврат:

• аккумулятор

⚠️ Не забывайте возвращать аккумулятор на каждой итерации!

Как использовать:

На каждой итерации вы должны возвращать аккумулятор.

Когда использовать:

Если вы хотите получить одно значение из массива.

Вы должны быстро понять это заклинание.

Я просуммирую все достоинства моих карт!

const cards = [ 1, 2, 3, 4, 5, 6 ]
const INITIAL_VALUE = 0
// Let’s have the sum of these cards
const sumOfCards = cards
.reduce((accumulator, currentCard) => {
    return accumulator += currentCard
}, INITIAL_VALUE)
sumOfCards // 21

Примечание. Аккумулятор может быть объектом.

Поздравляем, вы овладеваете силой triforce, используете эту функцию в специальном контексте и улучшаете свой код!

Поскольку вы очень быстро научитесь, я дам вам несколько советов, это еще два заклинания, очень полезно.

4) Некоторые и все прототипы заклинаний:

Узнал не так давно, но эти заклинания очень полезны! Вы должны использовать как можно больше, но только в одном контексте!

Вы хотите знать, соответствует ли ваш массив условию? Используйте немного или каждые в зависимости от условия.

Некоторые

Если вы хотите узнать, ваш массив содержит хотя бы одну сердечную карточку, используйте some, он выполнит итерацию вашего массива и вернет истину или ложь в зависимости от на условии.

Например:

const cards = [
    { type: “spade”, number: 1 },
    { type: “heart”, number: 2 },
    { type: “diamond”, number: 3 },
    { type: “spade”, number: 4 },
    { type: “diamond”, number: 5 },
    { type: “clubs”, number: 6 },
]
const isCardsHasAtLeastOneHeart = cards.some(card => {
    return card.type === “heart”
})
isCardsHasAtLeastOneHeart // true

Когда использовать:

Используйте его, если вы хотите увидеть, соответствует ли ваш массив в зависимости от условия, если вы действительно хотите знать, когда его использовать, задайте вам этот вопрос:

Нужно ли мне использовать функцию поиска и проверять, не определено ли значение, но не использовать это значение?

const myArray = [ 1, 2, 4, 8 ]
const eight = myArray.find(item => item === 8)
if (!!eight) {
    // do logic and don't use eight variable
}
< === >
const myArray = [ 1, 2, 4, 8 ]
const hasEightInArray = myArray.some(item => item === 8)
if (!!hasEightInArray) {
    // do logic
}

Каждые

Похоже, что некоторые, но every вернет true, если все элементы в массиве соблюдают условие!

• Если одно условие не выполнено, каждое вернет false!

Вместо некоторых, которые возвращают true, если хотя бы один элемент в массиве соблюдает условие!

• Если все проходят условие, некоторые вернут false!

Используйте правильное заклинание в зависимости от контекста!

5) Краткий обзор своего путешествия

Заклинания:

• forEach = ›Используйте это, если вы не хотите изменять значение в этом или получать массив из этого.
• filter = ›Используйте, если вы хотите отфильтровать значение из массива в зависимости от вашего условия.
• map = ›Используйте его, когда вам нужно преобразовать значение из массива.
• reduce = ›Используйте, если вы хотите получить одно значение из массива.
• some = ›Используйте его, чтобы проверить, соответствует ли массив вашему условию для хотя бы элемента.
• every = ›Используйте его, чтобы проверить, соответствует ли массив вашему условию для всех элементов.

Примечание. Для real, foreach, filter, map и reduce примите еще один аргумент, это this контекст, но я не объяснял его в этой статье.

Надеюсь, вам понравятся статьи такого рода, не стесняйтесь оставлять свои отзывы или любые предложения в комментариях!

Моя цель - написать новую статью, связанную с этой историей!

Следуй за мной на:

Twitter: https://twitter.com/MajScript

Instagram: https://www.instagram.com/majscript/

Github: https://github.com/MajScript