Если вы будете знать полезные методы массивов, это улучшит вашу способность решать проблемы.
Поэтому я решил сделать шпаргалку по методам массивов JavaScript, чтобы быстро пересмотреть методы массивов и всегда держать их в голове.
Эта шпаргалка включает 17 часто используемых методов массивов:
toString()join()concat()splice()slice()indexOf()lastIndexOf()forEach()map()filter()reduce()some()every()flat()find()findIndex()sort()
Видео
Я также превратил эту шпаргалку в видео. Если вы нашли это видео или шпаргалку полезными, вы можете сказать спасибо, подписавшись на мой канал 🙏.
Методы массивов являются общими
В JavaScript все массивы строятся из глобального класса Array. Все методы массивов хранятся в объекте Array.prototype.
Это означает, что методы массива разделяются между экземплярами массива через прототипное наследование.
Методы массива в JavaScript
Array.prototype.toString
Преобразует массив в строку значений массива, разделенных запятыми:
let names = ["Zoe", "Adam", "Dan"]
let strNames = names.toString() // Zoe,Adam,Dan
Array.prototype.join
Аналогично toString, но вы можете указать разделитель:
let names = ["Zoe", "Adam", "Dan"]
let strNames = names.join(" and ") // Zoe and Adam and Dan
Array.prototype.concat
Создает новый массив путем конкатенации существующих массивов:
let nums = [1, 2, 3]
let nums2 = [4, 5, 6]
let nums3 = [7, 8, 9]
let concatArr = nums.concat(nums2, nums3)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.prototype.splice
Метод splice() можно использовать для добавления новых элементов в массив:
let arr = ["Danny", "Joe"]
arr.splice(1, 0, "Alice", "Amy")
console.log(arr) // ['Danny', 'Alice', 'Amy', 'Joe']
Первый параметр (1) определяет индекс, с которого должны быть добавлены новые элементы (сращивание).
Второй параметр (0) определяет, сколько элементов должно быть удалено.
Остальные параметры (‘Alice’, ‘Amy’) определяют новые элементы, которые должны быть добавлены.
splice() возвращает массив с удаленными элементами:
let arr = ["Danny", "Joe"]
let spliced = arr.splice(1, 1, "Alice", "Amy") // ['Joe']
console.log(arr) // ['Danny', 'Alice', 'Amy']
Мы также можем удалять элементы без добавления новых:
let arr = ["Danny", "Joe", "Amy"]
let spliced = arr.splice(1, 1) // ['Joe']
console.log(arr) // ['Danny', 'Amy']
Поскольку splice() мутирует исходный массив, часто лучше сделать его копию перед сращиванием.
Array.prototype.slice
slice() вырезает часть массива и возвращает ее в новом массиве:
let arr = ["Danny", "Joe", "Amy"]
let slice = arr.slice(1) // ['Joe', 'Amy']
Выше мы вырезаем из элемента с индексом 1. slice() не изменяет исходный массив.
Мы можем указать начальный и конечный индекс для нарезки (до конечного индекса, но не включая его):
let arr = ["Danny", "Joe", "Amy"]
let slice = arr.slice(0, 2) // ['Danny', 'Joe']
Array.prototype.indexOf
Находит первый индекс, содержащий определенное значение (поиск слева направо):
let arr = ["Danny", "Joe", "Amy", "Joe"]
let index = arr.indexOf("Joe") // 1
Array.prototype.lastIndexOf
Найти последний индекс, содержащий определенное значение (поиск справа налево):
let arr = ["Danny", "Joe", "Amy", "Joe"]
let index = arr.lastIndexOf("Joe") // 3
Методы массивов более высокого порядка в JavaScript
Методы массивов Что такое функция высшего порядка?
Функция высшего порядка — это функция, которая принимает функции в качестве аргументов и/или возвращает функцию. Таким образом, функции высшего порядка — это функции, которые действуют на другие функции.
В JavaScript эти методы разделяются между экземплярами массивов через прототипное наследование от Array.prototype.
Array.prototype.forEach
Метод forEach — это, по сути, просто более короткий способ написать for(let i = 0; i < arr.length; i++) {...}.
Она перебирает заданный массив и вызывает заданную функцию обратного вызова для каждого элемента массива.
Функция обратного вызова, передаваемая функции forEach(), может принимать любой из трех аргументов:
- значение элемента
- индекс элемента
- сам массив
Пример:
let numbers = [1, 2, 3, 4]
numbers.forEach(n => console.log(n))
// 1
// 2
// 3
// 4
Лучше использовать map, если вы хотите возвращать новый массив с возвращаемым значением каждого запуска обратного вызова.
Array.prototype.map
Функция map принимает в качестве аргумента функцию обратного вызова и выполняет эту функцию на каждом элементе массива, над которым она работает. Каждое из возвращаемых значений функции обратного вызова отображается в новый массив. При этом исходный массив не изменяется.
Обратный вызов, передаваемый функции map(), может принимать любой из трех аргументов:
- значение элемента
- индекс элемента
- сам массив
Примеры:
let numbers = [1, 2, 3, 4]
// Double all numbers
let doubledNumbers = numbers.map(n => n * 2) // [2, 4, 6, 8]
// Only double numbers at odd indexes
let doubledOddIndexNumbers = numbers.map((n, i) => {
if (i % 2 === 1) return n * 2
else return n
}) // [1, 4, 3, 8]
Array.prototype.filter
Метод filter используется для отсеивания элементов массива, которые не прошли булеву проверку. В новый возвращаемый массив пропускаются только те элементы, которые прошли тест.
Обратный вызов, передаваемый функции filter(), может принимать любой из трех аргументов:
- значение элемента
- индекс элемента
- сам массив
Хорошим примером использования filter является строка поиска:
let articles = [
{ title: "PHP classes", author: "Danny Adams" },
{ title: "Python arrays", author: "Amy Sanders" },
{ title: "Arrays in PHP", author: "Danny Adams" },
]
// Lets say the user searches for all articles with PHP in the title
let PHPArticles = articles.filter(a => a.title.includes("PHP"))
// [
// { title: 'PHP classes', author: 'Danny Adams' },
// { title: 'Arrays in PHP', author: 'Danny Adams' },
// ];
Другой вариант использования — фильтрация по размеру:
let cities = [
{ name: "Stokington", rivers: 3 },
{ name: "Phillydelfia", rivers: 6 },
{ name: "New Ports", rivers: 2 },
]
let moreThanTwoRivers = cities.filter(c => c.rivers > 2)
// [
// { name: 'Stokington', rivers: 3 },
// { name: 'Phillydelfia', rivers: 6 },
// ];
Array.prototype.reduce
Метод reduce запускает функцию обратного вызова на каждом элементе массива и сокращает массив до одного значения.
Сама функция reduce принимает два аргумента:
- Функция обратного вызова
- начальное значение
reduce(callback, initialVal)
Функция обратного вызова, передаваемая в reduce, может принимать до четырех аргументов:
- общее значение или «аккумулятор»
- текущее значение элемента
- индекс текущего элемента
- сам массив
Пример:
let numbers = [1, 2, 3, 4]
let total = numbers.reduce((total, currentNum) => total + currentNum) // 10
В приведенном выше примере total изначально является первым значением в массиве (1), а currentNum — вторым (2).
Если мы хотим начать с другого значения, мы можем передать второй аргумент initialVal для уменьшения. Допустим, мы хотим найти общее число, начиная с 5:
let numbers = [1, 2, 3, 4]
let total = numbers.reduce((total, currentNum) => total + currentNum, 5) // 15
Выше, total теперь будет начинаться с 5, а currentNum будет первым элементом в массиве (1).
Еще один хороший пример использования reduce — поиск максимального или минимального значения в массиве:
let arr = [1, 2, 3]
let max = arr.reduce((a, b) => {
return Math.max(a, b)
}, -Infinity)
// 3
Array.prototype.some
Метод some проверяет, проходят ли некоторые значения массива тест. Он возвращает либо true, либо false.
Метод принимает 3 аргумента:
- Значение элемента
- индекс элемента
- Сам массив
Пример:
let numbers = [4, 6, 14, 16]
let isSomeGreaterThan6 = numbers.some(n => n > 6) // true
let isSomeLessThan4 = numbers.some(n => n < 4) // false
Array.prototype.every
every похож на метод some, но проверяет, проходит ли каждое значение в массиве определенный тест, а не только некоторые.
Пример:
let numbers = [4, 6, 14, 16]
let isEverythingGreaterThan6 = numbers.every(n => n > 6) // false
let isEverythingLessThan20 = numbers.some(n => n < 20) // true
Array.prototype.flat
Метод flat() создает новый массив со всеми элементами подмассива, конкатенированными в него рекурсивно до указанной глубины.
Пример:
let arr = [1, 2, 3, [1, 2], 4]
let flatArr = arr.flat() // [1, 2, 3, 1, 2, 4]
flat принимает один необязательный параметр depth. depth определяет, насколько глубоко должна быть сплющена вложенная структура массива. По умолчанию он равен 1.
Пример:
let arr = [1, 2, 3, [1, 2], [1, [1, 2]]]
let flatArr1 = arr.flat() // [1, 2, 3, 1, 2, 1, [1, 2]]
let flatArr2 = arr.flat(2) // [1, 2, 3, 1, 2, 1, 1, 2]
Array.prototype.find
Метод find возвращает первый элемент в массиве, который проходит определенный тест.
Обратный вызов, передаваемый методу find, принимает 3 аргумента:
- Значение элемента
- индекс элемента
- Сам массив
Пример
let stock = [
{ item: "ketchup", quantity: 32 },
{ item: "mayo", quantity: 9 },
{ item: "hot sauce", quantity: 12 },
]
let mayo = stock.find(s => s.item === "mayo")
// { item: 'mayo', quantity: 9 }
Array.prototype.findIndex
То же, что и find, но вместо значения возвращает индекс:
let stock = [
{ item: "ketchup", quantity: 32 },
{ item: "mayo", quantity: 9 },
{ item: "hot sauce", quantity: 12 },
]
let mayoIndex = stock.findIndex(s => s.item === "mayo")
// 1
Array.prototype.sort
sort располагает элементы массива в порядке возрастания. Это алгоритм сортировки «на месте» — это означает, что он изменяет исходный массив и возвращает его.
По умолчанию sort работает со строками:
let names = ["Zoe", "Adam", "Dan"]
names.sort()
console.log(names) // ['Adam', 'Dan', 'Zoe']
Для чисел нам нужно передать функцию обратного вызова сравнения:
let numbers = [3, 1, 7, 2]
numbers.sort((a, b) => a - b)
console.log(numbers) // [1, 2, 3, 7]
Изначально a равно 3, а b равно 1. Если a - b отрицательно, это означает, что b больше, и поэтому должно идти после a. Если положительно, то b должен идти перед a.
Спасибо за чтение!
Чтобы узнать больше от меня, вы можете:
- Следите за мной в Twitter.
- Подписаться на мой канал YouTube, где я планирую выкладывать больше видео по программированию в ближайшем будущем.
Будьте здоровы!