15 методов работы с массивами в JavaScript, которые необходимо знать в 2020 году

Автор оригинала: Ibrahima Ndaw
  • Перевод
Перед вами перевод статьи, опубликованной на сайте dev.to. Автор: Ibrahima Ndaw.
Оригинал опубликован в авторском блоге.

Массив в JavaScript — это особая структура данных, которая используется для хранения различных элементов. С помощью встроенных в нее свойств и методов можно добавить, удалить, перебрать или обработать данные в соответствии со своими потребностями. Знание методов работы с массивами в JavaScript поднимет ваши профессиональные навыки в сфере разработки на новый уровень.

В этой статье мы рассмотрим 15 методов, которые помогут вам более эффективно работать с массивами в JavaScript.



Обратите внимание, что в основном мы будем упрощать функцию, которая передается в качестве параметра.

// Instead of using this way
myAwesomeArray.some(test => {
  if (test === "d") {
    return test
  }
})
// We'll use the shorter one
myAwesomeArray.some(test => test === "d")

1. some()


Этот метод проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции. Он вернет значение true, если хотя бы один элемент совпадет с проверяемой функцией, и значение false — если нет.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> Output : true

2. reduce()


Этот метод принимает функцию, которая имеет в качестве аргумента аккумулятор и значение. Он применяет функцию к аккумулятору и каждому значению массива, чтобы в результате вернуть только одно значение.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120

3. every()


Этот метод проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции. Он вернет значение true, если каждый элемент совпадет с проверяемой функцией, и значение false — если нет.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.every(test => test === "d")
//-------> Output : false

const myAwesomeArray2 = ["a", "a", "a", "a", "a"]

myAwesomeArray2.every(test => test === "a")
//-------> Output : true

4. map()


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

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> Output : 25
//                  16
//                  9
//                  4
//                  1

5. flat()


Этот метод принимает в качестве аргумента массив массивов и сглаживает вложенные массивы в массив верхнего уровня. Обратите внимание, что этот метод работает только для одного уровня.

const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
//-------> Output : [1, 2, 3, 4, 5]

6. filter()


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

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
//                  1:{id: 4, name: "Mass"}

7. forEach()


Этот метод применяет функцию к каждому элементу массива.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
//-------> Output : john
//                  Ali
//                  Mass

8. findIndex()


Этот метод принимает функцию в качестве параметра и в дальнейшем применяет ее к массиву. Он возвращает индекс найденного элемента, если элемент удовлетворяет условию проверяющей функции, переданной в качестве аргумента. Если не удовлетворяет, возвращается –1.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
//-------> Output : 2

myAwesomeArray.findIndex(element => element.id === 7)
//-------> Output : -1

9. find()


Этот метод принимает функцию в качестве аргумента и в дальнейшем применяет ее к массиву. Он возвращает значение элемента, найденного в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае оно возвращается со значением undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
//-------> Output : {id: 3, name: "Mass"}

myAwesomeArray.find(element => element.id === 7)
//-------> Output : undefined

10. sort()


Этот метод принимает функцию в качестве параметра. Он сортирует элементы массива и возвращает их.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//-------> Output : [1, 2, 3, 4, 5]

// Sort from largest to smallest
myAwesomeArray.sort((a, b) => b - a)
//-------> Output : [5, 4, 3, 2, 1]

11. concat()


Этот метод объединяет два или более массива/значения и возвращает новый массив.

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

12. fill()


Этот метод заполняет все элементы массива одинаковым значением, от начального индекса (по умолчанию 0) до конечного индекса (по умолчанию array.length).

const myAwesomeArray = [1, 2, 3, 4, 5]

// The first argument (0) is the value
// The second argument (1) is the starting index
// The third argument (3) is the ending index
myAwesomeArray.fill(0, 1, 3)
//-------> Output : [1, 0, 0, 4, 5]

13. includes()


Этот метод возвращает значение true, если массив содержит определенный элемент, и значение false — если нет.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
//-------> Output : true

myAwesomeArray.includes(8)
//-------> Output : false

14. reverse()


Этот метод меняет порядок следования элементов в массиве на обратный. Первый элемент становится последним, а последний — первым.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']

15. flatMap()


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

const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]

// With .flat() and .map()
myAwesomeArray.flat().map(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]
  • –14
  • 5,7k
  • 8
Plarium
67,84
Разработчик мобильных и браузерных игр
Поделиться публикацией

Комментарии 8

    +8

    https://m.habr.com/en/company/plarium/blog/483958/


    Прямо в рекомендациях к этой статье есть ваша же (!) статья с этой же темой, только другим оформлением от прошлого года. Это не считая сотни других статей, которые так же являются перепечаткой документации. В 2021 году будет такая же статья?

      +1
      Обязательно. Ещё и с картинками.
      +3

      За исключением пары методов, это ES5, что надо было знать в 2011, максимум — 2012. Только .includes() пришёл в ES2015 и .flatMap() в ES2019. Обо всём это много раз писалось везде, включая Хабр.

        0

        Includes пришел в ES 2016. Методы .fill и .findIndex из ES 2015.

        0
        Мне кажется, или в первом же примере ошибка?
          0
          Руководство по JavaScript, часть 5: массивы и циклы
          Что нужно знать о массивах JavaScript
          Полезные приёмы работы с массивами в JavaScript
          Полезные методы массивов и объектов в JavaScript
          Эффективное использование методов массивов в JavaScript

          И т.д. и т.п. И это только с хабра.
          Вам не надоело ещё?
          И ладно бы это какая-то сложная тема была.
          Но это самая тривиальная тема, которая только может быть.
          Можно же просто зайти на MDN и посмотреть что там у массива за методы есть.
            0
            1. flat()
              Этот метод принимает в качестве аргумента массив массивов и сглаживает вложенные массивы в массив верхнего уровня. Обратите внимание, что этот метод работает только для одного уровня.>

            На сколько я знаю, вложенность можно указывать. Видно вы сами даже доку не открывали. Все ради плюсов?

              0
              Плариум что игроки ругают( по той же спарте, например ) что программисты. Они отмалчиваются и продолжают валять. ЧТо статьи слабые, что игры одни выкачивалки денег.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое