Resumo : Este tutorial mostra como usar o splice()método JavaScript Array para excluir elementos existentes, inserir novos elementos e substituir elementos em um array.
O tipo JavaScript Array fornece um método muito poderoso splice()que permite inserir novos elementos no meio de um array. Além disso, você também pode usar este método para excluir e substituir elementos existentes.
Excluindo elementos usando o método splice() do JavaScript Array
Para excluir elementos de um array, você passa dois argumentos para o splice()método da seguinte forma:
Array.splice(position,num);Linguagem de código: JavaScript ( javascript )O positionespecifica a posição do primeiro item a ser excluído e o numargumento determina o número de elementos a serem excluídos.
O splice()método altera o array original e retorna um array que contém os elementos excluídos.
Vamos dar uma olhada no exemplo a seguir.
Suponha que você tenha uma matriz scoresque contém cinco números de 1 a 5.
let scores = [1, 2, 3, 4, 5];Linguagem de código: JavaScript ( javascript )A instrução a seguir exclui três elementos do scoresarray começando no primeiro elemento.
let deletedScores = scores.splice(0, 3);Linguagem de código: JavaScript ( javascript )A scoresmatriz agora contém dois elementos.
console.log(scores); // [4, 5]Linguagem de código: JavaScript ( javascript )E a deletedScoresmatriz contém três elementos.
console.log(deletedScores); // [1, 2, 3]Linguagem de código: JavaScript ( javascript )A figura a seguir ilustra a scores.splice(0,3)chamada do método acima.
Inserindo elementos usando o método JavaScript Array splice()
Você pode inserir um ou mais elementos em um array passando três ou mais argumentos para o splice()método com o segundo argumento igual a zero.
Considere a seguinte sintaxe.
Array.splice(position,0,new_element_1,new_element_2,...);Linguagem de código: JavaScript ( javascript )Nesta sintaxe:
- Especifica
positiona posição inicial no array em que os novos elementos serão inseridos. - O segundo argumento é zero (0), que instrui o
splice()método a não excluir nenhum elemento do array. - O terceiro argumento, o quarto argumento e assim por diante são os novos elementos inseridos na matriz.
Observe que o splice()método altera o array original. Além disso, o splice() método não remove nenhum elemento, portanto, retorna um array vazio. Por exemplo:
Supondo que você tenha um array nomeado colorscom três strings:
let colors = ['red', 'green', 'blue'];Linguagem de código: JavaScript ( javascript )A instrução a seguir insere um elemento após o segundo elemento.
colors.splice(2, 0, 'purple');Linguagem de código: JavaScript ( javascript )A colorsmatriz agora possui quatro elementos com o novo elemento inserido na segunda posição.
console.log(colors); // ["red", "green", "purple", "blue"]Linguagem de código: JavaScript ( javascript )A figura a seguir demonstra a chamada do método acima.
Você pode inserir mais de um elemento passando o quarto argumento, o quinto argumento e assim por diante para o splice()método como no exemplo a seguir.
colors.splice(1, 0, 'yellow', 'pink');
console.log(colors);
// ["red", "yellow", "pink", "green", "purple", "blue"]Linguagem de código: JavaScript ( javascript )Substituindo elementos usando o método JavaScript Array splice()
O splice()método permite inserir novos elementos em um array enquanto exclui elementos existentes simultaneamente.
Para fazer isso, você passa pelo menos três argumentos, sendo o segundo que especifica o número de itens a serem excluídos e o terceiro que indica os elementos a serem inseridos.
Observe que o número de elementos a serem excluídos não precisa ser igual ao número de elementos a serem inseridos.
Suponha que você tenha uma matriz de linguagens de programação com quatro elementos, como segue:
let languages = ['C', 'C++', 'Java', 'JavaScript'];Linguagem de código: JavaScript ( javascript )A instrução a seguir substitui o segundo elemento por um novo.
languages.splice(1, 1, 'Python');Linguagem de código: JavaScript ( javascript )A languagesmatriz agora ainda tem quatro elementos com o novo segundo argumento em 'Python'vez de 'C++'.
console.log(languages);
// ["C", "Python", "Java", "JavaScript"]Linguagem de código: JavaScript ( javascript )A figura a seguir ilustra a chamada do método acima.
Você pode substituir um elemento por vários elementos passando mais argumentos para o splice()método da seguinte maneira:
languages.splice(2,1,'C#','Swift','Go');Linguagem de código: JavaScript ( javascript )A instrução exclui um elemento do segundo elemento, ou seja, Javae insere três novos elementos no languagesarray. O resultado é o seguinte.
console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]Linguagem de código: JavaScript ( javascript )Neste tutorial, você aprendeu como usar o splice()método JavaScript Array para excluir elementos existentes, inserir novos elementos e substituir elementos em um array.
