Метод массива splice() и примеры в JavaScript

В этом руководстве показано, как использовать метод Array splice() в JavaScript для удаления существующих элементов, вставки новых элементов и замены элементов в массиве.

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

Удаление элементов

Чтобы удалить элементы массива, передайте два аргумента в метод splice() следующим образом:

Array.splice(position,num);

position указывает позицию первого удаляемого элемента, а аргумент num определяет количество удаляемых элементов.

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

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

Предположим, у вас есть массив scores, содержащий пять чисел от 1 до 5.

let scores = [1, 2, 3, 4, 5];

Следующий оператор удаляет три элемента массива scores, начиная с первого элемента.

let deletedScores = scores.splice(0, 3);

Массив scores теперь содержит два элемента.

console.log(scores);
 //  [4, 5]

И массив deletedScores содержит три элемента.

console.log(deletedScores);
 // [1, 2, 3]

На следующем рисунке показан вышеприведенный вызов метода scores.splice(0,3).

Пример удаления с JavaScript Array Splice

Вставка элементов

Вы можете вставить один или несколько элементов в массив, передав три или более аргумента методу splice() со вторым аргументом, равным нулю.

Синтаксис:

Array.splice(position,0,new_element_1,new_element_2,...);

В этом синтаксисе:

  • position указывает начальную позицию в массиве, в которую будут вставлены новые элементы.
  • Второй аргумент равен нулю(0), что указывает методу splice() не удалять элементы массива.
  • Третий аргумент, четвертый аргумент и так далее — это новые элементы, которые вставляются в массив.

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

Предположим, что у вас есть массив colors с тремя строками.

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

Следующий оператор вставляет один элемент после второго элемента.

colors.splice(2, 0, 'purple');

Массив colors теперь имеет четыре элемента с новым элементом, вставленным во вторую позицию.

console.log(colors);
 // ["red", "green", "purple", "blue"]

На следующем рисунке показан вызов метода выше.

Пример вставки элементов с JavaScript Array Splice

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

colors.splice(1, 0, 'yellow', 'pink');
console.log(colors); 
// ["red", "yellow", "pink", "green", "purple", "blue"]

Замена элементов с splice()

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

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

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

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

let languages = ['C', 'C++', 'Java', 'JavaScript'];

Следующий оператор заменяет второй элемент новым.

languages.splice(1, 1, 'Python');

Массив languages теперь по-прежнему содержит четыре элемента с новым вторым аргументом 'Python' вместо 'C++'.

console.log(languages); 
// ["C", "Python", "Java", "JavaScript"]

На следующем рисунке показан вышеприведенный вызов метода.

Пример замены элементов с JavaScript Array Splice

Вы можете заменить один элемент несколькими элементами, передав больше аргументов в метод splice() следующим образом:

languages.splice(2,1,'C#','Swift','Go');

Оператор удаляет один элемент из второго элемента, т. е. Java, и вставляет три новых элемента в массив languages. Результат следующий.

console.log(languages);
 // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]

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

Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript