В этом руководстве показано, как использовать метод 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).
Вставка элементов
Вы можете вставить один или несколько элементов в массив, передав три или более аргумента методу 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"]
На следующем рисунке показан вызов метода выше.
Вы можете вставить более одного элемента, передав четвертый аргумент, пятый аргумент и т. д. методу 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"]
На следующем рисунке показан вышеприведенный вызов метода.
Вы можете заменить один элемент несколькими элементами, передав больше аргументов в метод splice() следующим образом:
languages.splice(2,1,'C#','Swift','Go');
Оператор удаляет один элемент из второго элемента, т. е. Java, и вставляет три новых элемента в массив languages. Результат следующий.
console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]
В этом руководстве вы узнали, как использовать метод splice() массива JavaScript для удаления существующих элементов, вставки новых элементов и замены элементов в массиве.