Методы массивов JavaScript

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

map()
Перебирает каждый элемент массива, позволяя выполнить функцию. Она возвращает новый массив, не изменяя массив, по которому идет итерация.

const movies = ['pulp fiction','star wars','harry potter','lord of the rings']

const capitalizedMovies = movies.map(movie => {
   return movie[0].toUpperCase() + movie.slice(1)
})

console.log(capitalizedMovies)

Вход в полноэкранный режим Выход из полноэкранного режима

Возвращает:

'Pulp fiction', 'Star wars', 'Harry potter', 'Lord of the rings'

Войти в полноэкранный режим Выйти из полноэкранного режима

Выше мы выделили заглавными буквами первую букву названия каждого фильма в массиве, хранящемся в capitalizedMovies. capitalizedMovies — это новый массив, содержащий названия фильмов с заглавными буквами. Это означает, что наш исходный массив movies остается прежним и неизменным.

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

const numbers = [10, 20, 30, 40]
let total = 0

numbers.forEach(num=> {
   console.log(num)
   total += num
})

console.log(`Total: ${total}`)

Вход в полноэкранный режим Выйти из полноэкранного режима

Возвращает:

10
20
30
40
Total: 100
Войти в полноэкранный режим Выйти из полноэкранного режима

фильтр()
Перебирает каждый элемент массива. Создается новый массив элементов, когда итератор возвращает true.

const colors = ['blue', 'yellow', 'red', 'green', 'purple', 'pink', 'brown', 'orange', 'aqua', 'peach']

const longColorNames = colors.filter(color=> color.length >= 6)
console.log(longColorNames)

Войти в полноэкранный режим Выйти из полноэкранного режима

Возвращает:

['yellow', 'green', 'purple', 'brown', 'orange', 'peach']
Войти в полноэкранный режим Выйти из полноэкранного режима

Выше, синий, красный, розовый и аква не имеют длины 6 или больше, поэтому они возвращают false. Поэтому они не отображаются в longColorNames.

findIndex()
Работает с массивом, и если элемент в массиве подходит под критерии, возвращает индекс элемента.


const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.findIndex(d => d.breed.startsWith('german'))

console.log(findGS)

Вход в полноэкранный режим Выйти из полноэкранного режима

Возвращает:

2
Войти в полноэкранный режим Выйти из полноэкранного режима

Выше, Софи (индекс 2) и Мэри (индекс 5) соответствуют параметрам пород собак, начинающихся с «немецкой». Но обратите внимание, findIndex возвращает только первый найденный результат, который имеет индекс 2.

find()
Эта функция работает с массивом и возвращает только первый найденный элемент, удовлетворяющий заданным критериям. Если ни один из элементов не соответствует критериям, возвращается значение undefined.

const dogs = [
     { name: 'Fletcher', breed: 'pitbull'},
     { name: 'Emmie', breed: 'hound'},
     { name: 'Sophie', breed: 'german shepherd'},
     { name: 'Daisy', breed: 'cocker spaniel'},
     { name: 'Cooper', breed: 'bulldog'},
     { name: 'Mary', breed: 'german shepherd'},
     { name: 'Mike', breed: 'brussels griffon'},
]

const findGS = dogs.find(d => d.breed.startsWith('german'))

console.log(findGS)

Вход в полноэкранный режим Выйти из полноэкранного режима

Возвращает:

 { name: 'Sophie', breed: 'german shepherd'}
Войти в полноэкранный режим Выйти из полноэкранного режима

Выше видно, что возвращается целый объект, а не индекс, возвращаемый из indexOf().

Оцените статью
Procodings.ru
Добавить комментарий