Массив Javascript должен знать методы

Мы все знаем, насколько популярен Javascript в современном мире. Все мы хоть раз в жизни использовали Javascript, будь то наш простой школьный проект на HTML, CSS и JS или такие технологии и фреймворки, как Node.js, React.js, Vue.js и т. д. Существует множество библиотек JS, которые мы можем использовать. кредитное плечо в соответствии с нашими потребностями. По сути, JS стал одним из языков, которые необходимо знать в текущем сценарии. (Ну, я так чувствую 😅…)

Теперь давайте перейдем непосредственно к цели статьи. Работая с JS, мы все знаем, как много мы используем массивы в JS. Будь то простой двух- или трехстрочный код или 100-строчный код, вероятность использования массивов всегда превышает 70%. Вот почему я считаю, что все разработчики JS должны быть хорошо знакомы с некоторыми методами JS Array, которые сделают их код более кратким и простым в реализации.

Методы, которые мы рассмотрим

1. фильтр
2. карта
3. для каждого
4. каждый
5. немного
6. включает
7. найти
8. уменьшать

Давайте углубимся в детали каждого метода: -

Вместо теоретических подробностей я объясню каждый метод примерами. Так будет понятнее.

1. фильтр

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода фильтрации:

const lessPrice= price.filter( item => item ≤ 500 )
console.log(lessPrice) 

Метод filter принимает одну функцию в качестве параметра. В этой конкретной функции мы будем передавать логическое условие.

Здесь мы передаем условие, согласно которому каждый элемент должен быть меньше или равен 500.

Вывод:

[ 100, 200, 300, 400 ]

2. карта

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода карты

const increasePrice=price.map( item => item + 100 )
console.log(increasePrice)

Метод map также принимает одну функцию в качестве параметра. С помощью метода map мы можем выполнить переданную функцию для каждого элемента массива.

Проще говоря, мы передали функцию, которая добавляет 100 к каждому элементу. Таким образом, к каждому элементу массива цен будет добавлено 100.

Вывод:

[ 200, 1100, 300, 400, 500 ]

3. для каждого

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода forEach

price.forEach( item => console.log(item )

Это довольно просто. Вместо традиционного цикла for… мы можем использовать forEach.

4. каждый

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Используя все методы

const greaterThan100 = price.every( item => item >= 100 )
const greaterThan300 = price.every( item => item >= 300 )
console.log(greaterThan100)
console.log(greaterThan300)

Каждый метод JS возвращает логическое значение, т. е. true или false. В качестве параметра принимает одну функцию.

Здесь первая функция проверяет, является ли каждый элемент в массиве большим или равным 100. (все элементы больше или равны 100)

Вторая функция проверяет, является ли каждый элемент в массиве больше или равным 300. (100, 200 меньше 300, поэтому не все элементы больше или равны 300)

По сути, все элементы массива должны удовлетворять заданному условию, чтобы быть истинными . Если нет, то ложь.

Вывод:

true
false

5. некоторые

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Используя какой-либо метод

const greaterThan400 = price.some( item => item >= 400 )
const greaterThan1500 = price.some( item => item >= 300 )
console.log(greaterThan400)
console.log(greaterThan1500)

Некоторые методы JS возвращают логическое значение, т. е. true или false. В качестве параметра принимает одну функцию.

В отличие от любого метода, где все элементы должны удовлетворять заданному условию, чтобы быть истинными , здесь в каком-то методе должен быть хотя бы один элемент, удовлетворяющий заданному условию, чтобы быть истинным.

Чтобы было понятнее, в первой функции элемент должен быть больше или равен 400. У нас есть 400, 1000, что удовлетворяет заданному условию. Таким образом, GreaterThan400 возвращает true.

Во второй функции все элементы должны быть больше 1500. У нас нет ни одного элемента, удовлетворяющего условию. Таким образом, GreaterThan1500 возвращает false.

Вывод:

true
false

6. включает

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода include

const hasPrice = price.includes( 300 )
const hasNotPrice = price.includes( 500 )
console.log(hasPrice)
console.log(hasNotPrice)

Как следует из названия, он проверяет, присутствует ли этот конкретный элемент в массиве или нет.

Возвращает true, если элемент присутствует, и возвращает false, если элемент отсутствует.

Вывод:

true
false

7. найти

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода поиска

const greaterThan300= price.find( item => item > 300 )
console.log( greaterThan300 )

Метод поиска JS принимает в качестве параметра одну функцию. Он возвращает первый элемент массива, удовлетворяющий заданному условию.

Чтобы было понятнее, мы видим, что функция имеет условие, что элемент должен быть больше 300, поэтому она находит первый элемент в массиве, который удовлетворяет заданному условию. У нас есть два элемента, которые удовлетворяют условию, т.е. 400 и 1000. Таким образом, наш метод поиска начинается с начала, т.е. 100, и проверяет, соответствует ли он условию. Как только он находит элемент с соответствующим условием, он останавливается и возвращает результат.

Методы поиска проверяют значение «100», соответствует ли оно условию. Он не соответствует, поэтому он переходит к следующему элементу, т.е. 1000. 1000 соответствует условию, поэтому он останавливает выполнение и возвращает 1000. Хотя у нас также есть 400, который соответствует условию, поскольку 1000 был найден ранее, он возвращается.

Вывод:

1000

8. уменьшить

Рассмотрите следующий массив:-

const price=[ 100, 1000, 200, 300, 400 ]

Использование метода сокращения

const endTotal= price.reduce(( total , item )=>{
return total+item
},0)
console.log( endTotal ) // 2000

Этот метод сокращения JS кажется довольно проблематичным. Но как только вы освоитесь с этим, я уверяю вас, что вы будете использовать его везде в своем коде JS.

Позвольте мне привести небольшой пример того, как вы обычно получаете сумму элементов массива в JS.

let total=0;
price.forEach( item => total += item )
console.log( total ) // 2000

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

метод сокращения будет иметь два параметра. Один - функция, а другой - начальное значение. Точно так же, как мы определили total=0 в приведенном выше коде, мы передадим 0 в качестве второго параметра в функции сокращения.

price.reduce ( ()=>{}, 0 )

Теперь давайте рассмотрим первый параметр, то есть функцию.

В функцию мы передадим два параметра (total, item). В нашем коде forEach мы передали total=0. Оттуда мы передали 0 в качестве второго параметра нашей функции сокращения. Итак, имя начального значения, которое мы передаем в функцию. По сути, мы объединяем каждую вещь из кода forEach в один метод, т.е.

Итак, теперь у нас есть

const endTotal= price.reduce(( total , item )=>{
return total+item
},0)

total — это имя аккумулятора.

item — это наш элемент в массиве.

0 – значение аккумулятора, т. е. общее

Короче говоря, метод уменьшения: -

1. принимает два параметра
2. первый параметр это функция
3. Второй параметр — это начальное значение, которое вы хотите установить.
4. Первый параметр, то есть функция, также имеет два параметра.
5. Один — имя аккумулятора/начального значения, второй — элемент массива.

Вывод

Все описанные методы действительно полезны и наверняка помогут писать чистый и лаконичный код. Вместо того, чтобы использовать интернет-терминологию и определения, я предложил собственное объяснение всех методов. Оставайтесь с нами для других статей JS. Надеюсь, вы найдете мое объяснение ясным и полезным.

Хорошего дня !!!