Методы массивов в JS с примерами

что такое массив в javascript

Пара квадратных скобок [] представляет собой массив в JavaScript. Все элементы разделяются запятыми(,).

В JavaScript массивы могут быть коллекцией элементов любого типа. Это означает, что вы можете создать массив с элементами типа String, Boolean, Number, Objects и даже другие массивы.

Вот пример массива с четырьмя элементами: типа Number, Boolean, String и Object.

const mixedTypedArray = [100, true, 'Hello', {}];

Положение элемента в массиве называется его индексом. В JavaScript индекс массива начинается с 0 и увеличивается на единицу с каждым элементом.

Так, например, в приведенном выше массиве элемент 100 находится под индексом 0, true — под индексом 1, ‘Hello’ — под индексом 2 и так далее.

Количество элементов в массиве определяет его длину. Например, длина приведенного выше массива равна четырем.

Как создать массив в JavaScript

В JavaScript можно создать массив несколькими способами. Наиболее распространенным способом является присвоение значения массива переменной.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

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

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');

Как получить элементы из массива

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

const element = array[index];

Когда вы получаете доступ к элементам с помощью индекса, как показано ниже:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'

Вы можете использовать длину массива для перехода назад и доступа к элементам.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'

Вы также можете пройтись по массиву с помощью обычного цикла for или forEach или любого другого цикла.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i<salad.length; i++) {
  console.log(`Element at index ${i} is ${salad[i]}`);
}

Как добавлять элементы в массив

Используйте метод push для вставки элемента в массив. Метод push добавляет элемент в конец массива

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');

Теперь массив салата имеет вид:

[«🍅», «🍄», «🥦», «🥒», «🌽», «🥕», «🥑», «🥜»]

если вы хотите добавить элемент в начало массива, вам нужно использовать метод unshift()

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');

Теперь массив салата имеет вид:

[«🥜», «🍅», «🍄», «🥦», «🥒», «🌽», «🥕», «🥑»]

Как удалить элементы из массива

Самый простой способ удалить один элемент из массива — использовать метод pop(). Каждый раз, когда вы вызываете метод pop(), он удаляет элемент из конца массива.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Используйте метод shift() для удаления элемента из начала массива

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.shift(); // 🍅

console.log(salad); // ['🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Как копировать и клонировать массив

Вы можете копировать и клонировать массив в новый массив с помощью метода slice().
Обратите внимание, что метод slice не изменяет исходный массив, а создает новую неглубокую копию исходного массива.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const saladCopy = salad.slice();

console.log(saladCopy); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']

salad === saladCopy; // returns false

Как определить, является ли значение массивом

Определить, является ли значение массивом, можно с помощью метода Array.isArray(value). Этот метод возвращает true, если переданное значение является массивом.

Деструктуризация массива в JavaScript

У нас появился новый синтаксис для извлечения нескольких свойств из массива.

Вот пример:

let [tomato, mushroom, carrot] = ['🍅', '🍄', '🥕'];

console.log(tomato, mushroom, carrot); // Output, 🍅 🍄 🥕

Чтобы сделать то же самое без деструктуризации, это будет выглядеть следующим образом:

let vegetables = ['🍅', '🍄', '🥕'];
let tomato = vegetables[0];
let mushroom= vegetables[1];
let carrot= vegetables[2];

Как присвоить переменной значение по умолчанию

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

let [tomato , mushroom = '🍄'] = ['🍅'];
console.log(tomato); // '🍅'
console.log(mushroom ); // '🍄'

Как пропустить значение в массиве

В приведенном ниже примере мы пропускаем элемент mushroom. Обратите внимание на пробел в объявлении переменной в левой части выражения.

let [tomato, , carrot] = ['🍅', '🍄', '🥕'];

console.log(tomato); // '🍅'
console.log(carrot); // '🥕'

Деструктуризация вложенных массивов

В javascript массивы могут быть вложенными. Это означает, что массив может содержать другой массив в качестве элемента.

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

let fruits = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Как бы вы получили доступ к ‘🥕’ из приведенного выше массива? Опять же, вы можете сделать это без деструктуризации, например, так:

const veg = fruits[4]; // returns the array ['🍅', '🍄', '🥕']
const carrot = veg[2]; // returns '🥕'

В качестве альтернативы можно использовать следующий синтаксис:

fruits[4][2]; // returns '🥕'

Вы также можете получить доступ к нему, используя синтаксис деструктуризации, как показано ниже:

let [,,,,[,,carrot]] = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Как использовать синтаксис деструктуризации и параметр rest

Начиная с ES6, мы можем использовать … (три последовательные точки) в качестве синтаксиса распространения и параметр rest в деструктуризации массива.

Для параметра rest, … появляется в левой части синтаксиса деструктуризации.

Для синтаксиса распространения … появляется в правой части синтаксиса деструктуризации.

Как использовать параметр rest в JS

Мы можем отобразить левые элементы массива в новый массив.
Параметр rest должен быть последней переменной в деструктуризации
синтаксис

В примере ниже мы отобразили первые два элемента массива на переменные tomato и mushroom. Остальные элементы отображаются на переменную rest с помощью ….. Переменная rest — это новый массив, содержащий оставшиеся элементы.

const [tomato, mushroom, ...rest] = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

console.log(tomato); // '🍅'
console.log(mushroom); // '🍄'
console.log(rest); // ["🥦", "🥒", "🌽", "🥕", "🥑"]

Как использовать оператор Spread в JS

С помощью оператора spread мы можем создать клон/копию существующего массива следующим образом:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

const saladCloned = [...salad];
console.log(saladCloned); // ["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

salad === saladCloned // false

Как поменять значения местами с помощью деструктуризации

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

let first = '😔';
let second = '🙂';
[first, second] = [second, first];

console.log(first);  // '🙂'
console.log(second); // '😔'

Слияние массивов

Мы можем объединить два массива и создать новый массив со всеми элементами из обоих массивов. возьмем два массива

const emotion = ['🙂', '😔'];
const veggies = ['🥦', '🥒', '🌽', '🥕'];

Теперь объединим их и создадим новый массив.

const emotionalVeggies = [...emotion, ...veggies];
console.log(emotionalVeggies); // ["🙂", "😔", "🥦", "🥒", "🌽", "🥕"]

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

Мы рассмотрели несколько методов и свойств массивов

1. push() — Вставить элемент в конец массива
2. unshift() — Вставить элемент в начало массива.
3. pop() — Удалить элемент из конца массива.
4. shift() — Удалить элемент из начала массива.
5. slice() — Создать неглубокую копию массива.
6. Array.isArray() — Определить, является ли значение массивом.
7. length — Определить размер массива.

Метод массива concat()

Метод concat() объединяет один или несколько массивов и возвращает объединенный массив. Это неизменяемый метод.

Давайте объединим два массива.

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]

Используя метод concat(), мы можем объединить более двух массивов. Мы можем объединить любое количество массивов, используя этот синтаксис.

array.concat(arr1, arr2,..,..,..,arrN);

Метод объединения массивов join()

Метод join() объединяет все элементы массива с помощью разделителя и возвращает строку.

const emotions = ['🙂', '😍', '🙄', '😟'];

const joined = emotions.join();
console.log(joined); // "🙂,😍,🙄,😟"

Вы можете передать разделитель по своему выбору для объединения элементов

const joined = emotions.join('<=>');
console.log(joined); // "🙂<=>😍<=>🙄<=>😟"

Вызов метода join() для пустого массива возвращает пустую строку:

[].join() // returns ""

Метод заполнения массива fill()

Метод fill заполняет массив статическим значением. Вы можете
изменить все элементы на статическое значение или изменить несколько выбранных элементов.Метод fill изменяет исходный массив

const colors = ['red', 'blue', 'green'];

colors.fill('pink');
console.log(colors); // ["pink", "pink", "pink"]

Вот пример, в котором мы изменяем только два последних элемента массива с помощью метода fill():

const colors = ['red', 'blue', 'green'];

colors.fill('pink', 1,3); // ["red", "pink", "pink"]

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

Метод массива indexOf()

Вам может понадобиться узнать позицию индекса элемента в массиве. Для этого можно использовать метод indexOf().
Он возвращает индекс первого вхождения элемента в массив. Если элемент не найден, метод indexOf() возвращает -1.

const names = ['tom', 'alex', 'bob', 'john'];

names.indexOf('alex'); // returns 1
names.indexOf('rob'); // returns -1

Существует еще один метод lastIndexOf(), который помогает найти индекс последнего вхождения элемента в массив. Как и indexOf(), lastIndexOf() также возвращает -1, если элемент не найден.

const names = ['tom', 'alex', 'bob', 'tom'];

names.indexOf('tom'); // returns 0
names.lastIndexOf('tom'); // returns 3

Метод массива reverse()

Метод reverse() меняет местами позиции элементов в массиве так, что последний элемент попадает в первую позицию, а первый — в последнюю.

const names = ['tom', 'alex', 'bob'];

names.reverse(); // returns ["bob", "alex", "tom"]

Метод сортировки массива sort()

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

const names = ['tom', 'alex', 'bob'];

names.sort(); // returns ["alex", "bob", "tom"]

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

Давайте возьмем массив чисел и отсортируем их в порядке возрастания и убывания с помощью функции компаратора:

const numbers = [23, 5, 100, 56, 9, 13, 37, 10, 1]
numbers.sort();

Теперь отсортированный массив имеет вид [1, 10, 100, 13, 23, 37, 5, 56, 9]. Это не тот результат, которого мы ожидаем. Но это происходит потому, что метод sort() по умолчанию преобразует элементы в строку, а затем сравнивает их на основе значений кодовых единиц UTF-16.

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

function ascendingComp(a, b){
  return (a-b);
}

Теперь передайте это в метод sort():

numbers.sort(ascendingComp); // retruns [1, 5, 9, 10, 13, 23, 37, 56, 100]

/* 

We could also code it like,

numbers.sort(function(a, b) {
  return (a-b);
});

Or, with the arrow function,

numbers.sort((a, b) => (a-b));

*/

Метод массива splice()

Метод splice() помогает добавлять, обновлять и удалять элементы в массиве.

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

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

В примере ниже мы добавляем элемент jack с индексом 1, не удаляя ни одного элемента.

const names = ['tom', 'alex', 'bob'];

names.splice(1, 0, 'jack');

console.log(names); // ["tom", "jack", "alex", "bob"]

Взгляните на следующий пример. Здесь мы удаляем один элемент с индексом 2 (3-й элемент) и добавляем новый элемент jack. Метод splice() возвращает массив с удаленным элементом, bob.

const names = ['tom', 'alex', 'bob'];

const deleted = names.splice(2, 1, 'jack');

console.log(deleted); // ["bob"]
console.log(names); // ["tom", "alex", "jack"]

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

Это очень полезные методы для итерации по массиву и выполнения вычислений, принятия решений, фильтрации и т.д.

let students = [
   {
      'id': 001,
      'f_name': 'Alex',
      'l_name': 'B',
      'gender': 'M',
      'married': false,
      'age': 22,
      'paid': 250,  
      'courses': ['JavaScript', 'React']
   },
   {
      'id': 002,
      'f_name': 'Ibrahim',
      'l_name': 'M',
      'gender': 'M',
      'married': true,
      'age': 32,
      'paid': 150,  
      'courses': ['JavaScript', 'PWA']
   },
   {
      'id': 003,
      'f_name': 'Rubi',
      'l_name': 'S',
      'gender': 'F',
      'married': false,
      'age': 27,
      'paid': 350,  
      'courses': ['Blogging', 'React', 'UX']
   },
   {
      'id': 004,
      'f_name': 'Zack',
      'l_name': 'F',
      'gender': 'M',
      'married': true,
      'age': 36,
      'paid': 250,  
      'courses': ['Git', 'React', 'Branding']
   } 
];

Метод массива filter()

Метод filter() создает новый массив со всеми элементами, которые удовлетворяют условию, указанному в функции. Давайте найдем студента женского пола. Поэтому условие фильтра должно быть таким, чтобы пол был равен ‘F’.

const femaleStudents = students.filter((element, index) => {
  return element.gender === 'F';
})

console.log(femaleStudents);

Все верно. Студентка с именем Rubi — единственная студентка, которую мы получили на данный момент, и мы вернем это.

Метод массива map()

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

const fullNames = students.map((element, index) => {
  return {'fullName': element['f_name'] + ' ' + element['l_name']}
});

console.log(fullNames);

Здесь мы видим новый массив со свойствами fullName, который вычисляется с помощью свойств f_name и l_name каждого объекта студента.

Метод массива some()

Метод some() возвращает булево значение (true/false) на основе хотя бы одного элемента в массиве, передающего условие в функции. Давайте посмотрим, есть ли среди студентов люди моложе 30 лет.

let hasStudentBelow30 = students.some((element, index) => {
  return element.age < 30;
});

console.log(hasStudentBelow30); // true

Метод массива find()

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

У массивов есть еще один связанный метод, findIndex(), который возвращает индекс элемента, найденного с помощью метода find(). Если ни один элемент не удовлетворяет условию, метод findIndex() возвращает -1.

В примере ниже мы передаем методу find() функцию, которая проверяет возраст каждого студента. При выполнении условия возвращается соответствующий студент.

const student = students.find((element, index) => {
  return element.age < 30;
});

console.log(student);

Метод массива every()

Метод every() определяет, удовлетворяет ли каждый элемент массива условию, переданному в функции. Давайте выясним, все ли студенты подписались хотя бы на два курса.

const atLeastTwoCourses = students.every((elements, index) => {
  return elements.courses.length >= 2;
});

console.log(atLeastTwoCourses); // true