Есть несколько минут? Отлично, давайте рассмотрим 27 распространенных методов массивов, нотаций и операторов в JavaScript.

Предстоит еще многое повторить, так что вот самое быстрое определение массива, которое я могу найти. Массив — это структура данных, которая может содержать несколько элементов под одним именем переменной, например. мой массив = [1, 2, 3]). В JavaScript массивы «изменяемы», то есть их можно изменять напрямую, не создавая новый. По мере того, как мы будем рассматривать каждый метод, я сообщу вам, мутирует ли он исходный массив или нет (т. е. деструктивный или недеструктивный). Давайте приступим!

Создайте новый массив с литеральной записью или методом конструктора

Если вы попросите большинство разработчиков JavaScript создать массив, они, вероятно, напечатают что-то вроде этого:

let myArray = ['a', 'b', 'c']

Это называется «буквальная запись». Другой способ сделать то же самое — «конструктор массива»:

let myArray2 = new Array('d', 'e', 'f')

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

Преобразуйте что-то еще в массив с помощью .split() или Array.from()

Зачем создавать новый массив, если можно обновить старую строку или коллекцию?

Используйте .split(), чтобы разбить строку на части и вернуть массив. Аргумент — это символ (символы), которые вы хотите разделить, пробел “ ” в этом примере.

let arrayFromString = "Charles Philip Arthur George".split(" ")
arrayFromString == ['Charles', 'Philip', 'Arthur', 'George']

Используйте Array.from(), чтобы превратить подобный массиву объект (такой как Set или DOM-список узлов ) в настоящий массив.

let mySet = new Set('z')
let myArray = Array.from(mySet)
myArray == ['z']

Восемь способов узнать, что находится в массиве

Ищете что-то?

let newArray = [1, 2, 2, 2, 3]

Давайте поищем в приведенном выше массиве следующими методами:

newArray[0]
=> 1 //returns whatever is at the index in the [] brackets
newArray.at(-1)
=> 3 //Similar to using the square brackets, but it lets you pass in a negative number to get the last element
newArray.find( x => x > 1)
=> 2 //returns the first element that meets the condition
newArray.includes(2)
=> true // tells you whether that value is in the array
newArray.every( x => x > 1)
=> false // tells you whether each and every element in the array meets the condition
newArray.indexOf(2)
=> 1 // returns the index of the first element that equals the value you pass in
newArray.findIndex( x => x > 1)
=> 1 // returns the index just like indexOf(), but you can pass in a callback if you’re search for something that meets a certain condition, rather than a specific value.
newArray.length
=> 5 // tells you how many items are in the array. This is a property, not a method, so don’t use parentheses

Добавить что-то или удалить что-то из массива с помощью push(), pop(), shift() и unshift()

Все методы push(), pop(), shift() и unshift() изменяют массив, добавляя или удаляя элемент.

let newArray = [0]
newArray.push(1) // add something to the end
newArray == [0, 1]
newArray.unshift(2) // add something to the beginning
newArray == [2, 0, 1]
let popped = newArray.pop() // take the last value off the end
popped == 1
newArray ==  [2, 0]
let shifted = newArray.shift() //take 1st value off the beginning
shifted == 2
newArray == [0]

Объедините два массива вместе с помощью concat() или оператора расширения …

let arr = [1,2,3]

Используйте метод concat(), если вы не хотите, чтобы исходный массив изменялся.

let combined = arr.concat(['a','b','c'])
combined == [1, 2, 3, 'a', 'b', 'c']
arr == [1, 2, 3] //original has not changed

Вы также можете нажать() на содержимое другого массива. Используйте оператор расширения … для извлечения содержимого из этого массива, чтобы не получить вложенные массивы.

arr.push(...['x','y','z'])
arr = [1, 2, 3, 'x', 'y', 'z'] // this mutates the original

Измените порядок с помощью sort() и reverse()

let a = [1,4,3,5,2]

Метод sort() сортирует элементы массива на месте и возвращает массив.

a.sort()
a == [1, 2, 3, 4, 5] //original has been changed

Метод reverse() меняет местами элементы массива и возвращает массив

a.reverse()
a == [5, 4, 3, 2, 1] // original has been changed

Возьмите кусок массива с помощью Slice() или Splice()

Они сбивают с толку, потому что звучат одинаково. Оба метода возвращают часть массива в виде нового массива. Одно отличие состоит в том, что slice() получает элементы неразрушающим образом, а splice() удаляет элементы деструктивно. Другим основным отличием являются аргументы, как показано в примерах:

Кусочек()

let myArray = [1, 2, 3, 4, 5]
let sliced = myArray.slice(3,4) //from index 3 up to index 4
sliced == [4] // the removed item
myArray == [1, 2, 3, 4, 5] // original has not been changed

Сращивание ()

let myArray2 = [1, 2, 3, 4, 5]
let spliced = myArray2.splice(3,1) // at index 3 remove 1 item
spliced == [4] // the removed item
myArray2 == [1, 2, 3, 5] // items are gone from the original

Вы также можете использовать splice() для добавления или замены элементов в массиве. Передайте новое дополнение в качестве третьего аргумента.

let array = [10, 20, 30]
array.splice(0,1,'ten') // At index 0 remove 1 item and insert ‘ten’
array == ['ten', 20, 30]
array.splice(1, 0, 15) // At index 1 remove 0 items and insert 15
array == ['ten', 15, 20, 30]

Упростите жизнь с помощью map(), filter() и reduce().

Вы не столкнетесь с этими популярными методами при работе со старым унаследованным кодом. Они были частью основной версии JavaScript под названием ECMAScript 6 или ES6, вышедшей в 2015 году.

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

let array = [1,2,3,2,1]

map() возвращает новый массив каждого элемента, обработанного обратным вызовом

let mapped = array.map( x => x * 10)
mapped ==  [10, 20, 30, 20, 10] 
array = [1, 2, 3, 2, 1] // original has not changed

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

let mapped2 = array.map((x,i) => i)
mapped2 == [0, 1, 2, 3, 4]

filter() возвращает массив всех элементов, удовлетворяющих условию

let filtered = array.filter( x => x > 1)
filtered == [2, 3, 2] 
array == [1, 2, 3, 2, 1] // original has not changed

reduce() выполняет операцию над каждым элементом и возвращает конечный результат

let reduced = array.reduce( (current,next) => current + next)
reduced == 9 
array == [1, 2, 3, 2, 1] // original has not changed

Сделайте что-нибудь еще с каждым элементом в массиве, используя forEach()

Метод forEach() — это еще один метод ES6. Это как классический цикл for, но гораздо короче.

array1 = [ 5, 10, 15, 20]
array1.forEach(x => console.log(x))
5
10
15
20

Обратите внимание, что forEach() запускает указанную вами функцию, но фактически ничего не возвращает. Это также неразрушающе.

До свидания, массив

let myArray = ['b','y','e']

Теперь, когда мы сделали все, что нужно, с нашими массивами, давайте превратим один в строку. метод join() объединяет все элементы массива в строку, помещая переданный вами аргумент между элементами. В данном примере это ничего.

let myString = myArray.join('')
myString == 'bye'

Итак, у вас есть это. Мы использовали всевозможные методы для создания, поиска и изменения массивов и, наконец, взяли массив и превратили его в строку.

О, подожди. На самом деле он не ушел, потому что этот метод неразрушающий.

myArray == ['b', 'y', 'e']