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

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

В JavaScript массивы создаются с помощью квадратных скобок [], а значения разделяются запятыми. Например, чтобы создать массив дней, вы можете сделать следующее:

const daysOfTheWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

Ссылаясь на daysOfTheWeek, мы можем получить доступ к нашему набору связанных данных. Что, если мы хотим получить доступ к определенному дню?

Индексы массива

Элементы в массиве перечислены в определенном порядке, и доступ к ним можно получить, используя их индекс. Первое значение в массиве имеет индекс 0, второе имеет индекс 1 и так далее. Вы можете использовать индекс для чтения или обновления значения элемента в массиве. Например:

Пример: чтение элемента по заданному индексу

console.log(daysOfTheWeek[0]); 
// Output: Mon

Пример: обновление элемента по заданному индексу

daysOfTheWeek[2] = "Another day";
console.log(daysOfTheWeek); 
// Output: ["Mon", "Tue", "Another day", "Thu", "Fri", "Sat", "Sun"];

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

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

1. Разрушающие методы массива:

Деструктивные методы массива изменяют исходный массив напрямую, изменяя его длину или содержимое. Они не создают новый массив, а вместо этого изменяют существующий массив. Некоторые примеры методов деструктивного массива:

  • push(): добавляет один или несколько элементов в конец массива.
const arrayOfNumbers = [1, 2, 3];
arrayOfNumbers.push(4);
console.log(arrayOfNumbers);
// Output: [1, 2, 3, 4];
  • pop(): удаляет последний элемент массива.
const arrayOfNumbers = [1, 2, 3, 4];
arrayOfNumbers.pop();
console.log(arrayOfNumbers);
// Output: [1, 2, 3];
  • unshift(): добавляет один или несколько элементов в начало массива.
const arrayOfNumbers = [1, 2, 3];
arrayOfNumbers.unshift(0);
console.log(arrayOfNumbers);
// Output: [0, 1, 2, 3];
  • shift(): удаляет первый элемент массива.
const arrayOfNumbers = [0, 1, 2, 3];
arrayOfNumbers.shift();
console.log(arrayOfNumbers);
// Output: [1, 2, 3];
  • splice(): добавляет или удаляет элементы из массива по указанному индексу.
const arrayOfNumbers = [0, 1, 2, 3, 4, 5];
arrayOfNumbers.splice(3);
console.log(arrayOfNumbers);
// Output: [0, 1, 2];

// If only given one argument (the array index of 3 in this example), 
// splice will remove a portion of the array beginning at the provided 
// index and continuing to the end of the array
const arrayOfNumbers = [0, 1, 2, 3, 4, 5, 6];
arrayOfNumbers.splice(2, 3);
console.log(arrayOfNumbers);
// Output: [0, 1, 5, 6];

// If given two arguments, the first is the index to begin splicing 
// (so, 2 in this case), and the second dictates how many elements we 
// want to remove from the array (3 elements in this case).

2. Методы неразрушающего массива:

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

  • slice(): возвращает новый массив, содержащий часть исходного массива.
const arrayOfNumbers = [0, 1, 2, 3, 4, 5];
const newArrayOfNumbers = arrayOfNumbers.slice(3);
console.log(newArrayOfNumbers);
// Output: [3, 4, 5];

// If only given one argument (the array index of 3 in this example), 
// slice will remove a portion of the array beginning at the provided 
// index and continuing to the end of the array
const arrayOfNumbers = [0, 1, 2, 3, 4, 5];
const newArrayOfNumbers = arrayOfNumbers.slice(1, 3);
console.log(newArrayOfNumbers);
// Output: [1, 2];

// If given two arguments, the first is the index to begin slicing (so, 
// 1 in this case), and the second is the index before which it should end.
  • concat(): объединяет два или более массивов и возвращает новый массив.
const array1 = [1, 2]; 
const array2 = [3, 4]; 
const array3 = array1.concat(array2); 
console.log(array3);
// Output: [1, 2, 3, 4]
  • Оператор расширения (…): добавляет один или несколько новых элементов до или после элементов исходного массива.
const arrayOfNumbers = [0, 1, 2, 3];
const newArrayOfNumbers = [...arrayOfNumbers, 4, 5]
console.log(newArrayOfNumbers);
// Output: [0, 1, 2, 3, 4, 5]
const arrayOfNumbers = [2, 3, 4, 5];
const newArrayOfNumbers = [0, 1, ...arrayOfNumbers]
console.log(newArrayOfNumbers);
// Output: [0, 1, 2, 3, 4, 5]

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

Заключение

Это всего лишь несколько примеров из множества методов, доступных для работы с массивами в JavaScript. Используя эти методы массива, вы можете эффективно и легко выполнять сложные операции с массивами.