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

1. Array.prototype.concat():

Метод concat()позволяет объединить два или более массивов, включая сопоставленные массивы. Он возвращает новый массив, состоящий из элементов исходного массива и добавленных массивов.

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = mappedArray.concat(4, 5);
console.log(newArray); // Output: [2, 4, 6, 4, 5]

2. Оператор распространения (…):

Оператор распространения — это краткий способ добавления элементов в массив. Он разворачивает итерируемый объект (например, другой массив) на отдельные элементы.

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = [...mappedArray, 4, 5];
console.log(newArray); // Output: [2, 4, 6, 4, 5]

3. Array.prototype.push():

Метод push()добавляет один или несколько элементов в конец массива. Он изменяет исходный массив и возвращает новую длину массива.

const mappedArray = [1, 2, 3].map((num) => num * 2);
mappedArray.push(4, 5);
console.log(mappedArray); // Output: [2, 4, 6, 4, 5]

4. Array.prototype.unshift():

Метод unshift()добавляет один или несколько элементов в начало массива. Он изменяет исходный массив и возвращает новую длину массива.

const mappedArray = [1, 2, 3].map((num) => num * 2);
mappedArray.unshift(4, 5);
console.log(mappedArray); // Output: [4, 5, 2, 4, 6]

5. Array.prototype.splice():

Метод splice() — это универсальный способ добавления, удаления и замены элементов в массиве. Он изменяет исходный массив и возвращает массив, содержащий удаленные элементы.

const mappedArray = [1, 2, 3].map((num) => num * 2);
mappedArray.splice(1, 0, 4, 5);
console.log(mappedArray); // Output: [2, 4, 5, 4, 6]

6. Array.prototype.concat() с оператором распространения:

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

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = [].concat(...mappedArray, 4, 5);
console.log(newArray); // Output: [2, 4, 6, 4, 5]

7. Array.from():

Метод Array.from()создает новый массив из итерируемого объекта или отображаемого массива. Это позволяет добавлять дополнительные элементы в процессе создания.

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = Array.from(mappedArray, (item) => item + 1);
console.log(newArray); // Output: [3, 5, 7]

8. Array.prototype.concat() с новым массивом:

Вы можете создать новый массив с дополнительными элементами и использовать метод concat(), чтобы объединить его с сопоставленным массивом.

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = [4, 5].concat(mappedArray);
console.log(newArray); // Output: [4, 5, 2, 4, 6]

9. Array.prototype.map():

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

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = mappedArray.map((item) => item + 1);
console.log(newArray); // Output: [3, 5, 7]

10. Оператор расширения с помощью Array.prototype.map():

Объедините оператор распространения с методом map(), чтобы создать новый массив с дополнительными элементами на основе элементов отображаемого массива.

const mappedArray = [1, 2, 3].map((num) => num * 2);
const newArray = [...mappedArray.map((item) => item + 1)];
console.log(newArray); // Output: [3, 5, 7]

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

Не забудьте выбрать подходящий метод в зависимости от ваших конкретных требований и стиля кодирования. Приятного кодирования!