Для хранения наборов значений в JavaScript существует специальный тип данных, называемый массив (array). Массивы имеют встроенные свойства и методы, с помощью которых можно удалять, добавлять и сортировать элементы, а так же проводить иные манипуляции. Хорошее знание методов массивов в JavaScript, несомненно, повышает профессиональный уровень веб-разработчика.

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

Содержание

Внимание. В данной статье для функций применяется упрощенный синтаксис. Например:

// Вместо традиционной записи
myAwesomeArray.some(test => {
  if (test === "d") {
    return test
  }
})
// мы будем использовать сокращения
myAwesomeArray.some(test => test === "d")

some()

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

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
// результат : true

reduce()

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

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
// результат: 120

every()

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

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d")
// результат: false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a")
// результат: true

map()

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

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
// результат:
// 25
// 16
// 9
// 4
// 1

flat()

Этот метод создает новый массив, который содержит элементы вложенных массивов, то есть повышает уровень вложенности массивов, которые в свою очередь являются элементами массива (по умолчанию только на один уровень).

const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat()
// результат: [1, 2, 3, 4, 5]

filter()

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

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]
myAwesomeArray.filter(element => element.name === "Mass")
// результат:
// 0:{id: 3, name: "Mass"},
// 1:{id: 4, name: "Mass"}

forEach()

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

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]
myAwesomeArray.forEach(element => console.log(element.name))
// результат:
// john
// Ali
// Mass

findindex()

Этот метод получает функцию в качестве параметра и применяет ее к массиву, возвращая индекс элемента, соответствующего условиям функции - аргумента, или -1, если ни один элемент не соответствует необходимым условиям.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]
myAwesomeArray.findIndex(element => element.id === 3)
// результат: 2
myAwesomeArray.findIndex(element => element.id === 7)
// результат: -1

find()

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

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]
myAwesomeArray.find(element => element.id === 3)
// результат: {id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7)
// результат: undefined

sort()

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

const myAwesomeArray = [5, 4, 3, 2, 1]
// Сортируем от меньшего значения к большему
myAwesomeArray.sort((a, b) => a - b)
// результат: [1, 2, 3, 4, 5]
// Сортируем от большего значения к меньшему
myAwesomeArray.sort((a, b) => b - a)
// результат: [5, 4, 3, 2, 1]

concat()

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

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
// результат: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

fill()

Этот метод заполняет одним значением определенные элементы массива: от начального индекса до конечного. По умолчанию новым значением заполняются все элементы массива.

const myAwesomeArray = [1, 2, 3, 4, 5]
// Первый (обязательный) аргумент (0) - новое значение элемента массива
// Второй (необязательный) аргумент (1) - начальный индекс
// Третий (необязательный) аргумент (3) - конечный индекс, при заполнение не включается в группу элементов с новым значением
myAwesomeArray.fill(0, 1, 3)
// результат: [1, 0, 0, 4, 5]

includes()

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

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
// результат: true
myAwesomeArray.includes(8)
// результат: false

reverce()

Этот метод разворачивает массив: первый элемент становится последним, а последний - первым.

const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
// результат: ['a', 'b', 'c', 'd', 'e']

flatMap()

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

const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10)
// результат: [10, 20, 30, 40, 50]
// With .flat() and .map()
myAwesomeArray.flat().map(arr => arr * 10)
// результат: [10, 20, 30, 40, 50]

Спасибо за внимание.