Um objeto Array representa uma coleção de elementos. Ele ajuda a manter um grande conjunto de dados para evitar a confusão de várias variáveis, classificando-as. Se o usuário deseja aplicar qualquer método e propriedade adicionais ao objeto Array, não precisa aplicar essa nova propriedade/método um a um a cada elemento. Em vez disso, isso pode ser feito de forma eficaz usando o JavaScript Array “ protótipo ” construtor. Esse construtor ajuda a aplicar os novos métodos e propriedades ao objeto Array desejado.
Este guia explica o uso do construtor “protótipo” Array em JavaScript.
Como usar o construtor “protótipo” do array em JavaScript?
A Matriz “ protótipo ” é usado para adicionar novos métodos e propriedades a um objeto Array com a ajuda da função JavaScript. Aplica a propriedade construída para todos os valores da matriz, como seu nome e valor por padrão.
Sintaxe
Array.prototype.name = valor
Na sintaxe acima, “ nome ” especifica a propriedade recém-adicionada com seu “ valor ” que se aplica a todo o objeto Array.
Vamos usar a propriedade acima definida de forma prática com a ajuda de sua sintaxe.
Código HTML
Primeiro, dê uma olhada no código HTML indicado:
< p > O 'protótipo' construtor ajuda em a adição dos novos métodos / propriedades para o Array dado ( ) objeto. p >< botão ao clicar = 'jsFunc()' > Obtenha o comprimento de cada string botão >
< p eu ia = 'amostra' > p >
< p eu ia = 'para' > p >
Nas linhas de código acima:
- O ' ” especifica a declaração do parágrafo.
- O '
” incorpora um botão com um evento “onclick” para invocar a função especificada “jsFunc ()” ao clicar no botão. - Os últimos dois ' ” adicionam parágrafos vazios com seus IDs atribuídos “sample” e “para”, respectivamente.
Observação: Este código HTML é seguido em todos os exemplos fornecidos neste guia.
Exemplo 1: Aplicando o Construtor “protótipo” para Contar o Comprimento do Objeto Array Adicionando um Novo Método
Este exemplo utiliza o construtor “prototype” para contar o comprimento de cada string dentro de um objeto Array com a ajuda de um método recém-adicionado.
Código JavaScript
Siga o código JavaScript fornecido:
< roteiro >Array.prototype.stringLength = função ( ) {
para ( onde t = 0 ; t < este.comprimento; t++ ) {
esse [ t ] = isso [ t ] .comprimento;
}
} ;
função jsFunc ( ) {
var str = [ 'HTML' , 'CSS' , 'JavaScript' ] ;
document.getElementById ( 'amostra' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'para' ) .innerHTML = str;
}
roteiro >
Nas linhas de código acima:
- Aplique a sintaxe básica do Array “ protótipo ” construtor que adiciona um novo método “ stringLength ” definindo uma função.
- Em seguida, na definição da função, o “ para ” é iterado sobre todos os índices de um objeto Array para encontrar seu comprimento usando a propriedade “length”.
- Depois disso, o “ jsFunc() ” define um objeto Array armazenado na variável “str”.
- Então o ' document.getElementById () ” acessa o primeiro parágrafo vazio por meio de seu id “sample” para exibir o objeto Array “str”.
- Por fim, associe o objeto Array “str” ao objeto “ stringComprimento() ” para contar o comprimento da string de cada índice de matriz e, em seguida, anexá-lo ao próximo parágrafo vazio cujo id é “para”.
Saída
Aqui, a saída mostra o comprimento de cada string do objeto Array de destino com a ajuda do método “stringLength()” recém-adicionado por meio do construtor “prototype” Array.
Exemplo 2: Aplicando o construtor “prototype” para criar um novo método “myUcase” e aplicá-lo a um objeto Array
Este exemplo utiliza o construtor “prototype” para criar um novo método “myUcase” e aplicá-lo ao objeto Array de destino.
Código JavaScript
Vamos passar pelo código JavaScript abaixo indicado:
< roteiro >Array.prototype.myUcase = função ( ) {
para ( deixar t = 0 ; t < este.comprimento; t++ ) {
esse [ t ] = isso [ t ] .toUpperCase ( ) ;
}
} ;
função jsFunc ( ) {
const arrObj = [ 'html' , 'css' , 'JavaScript' , 'Reagir' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'amostra' ) .innerHTML = arrObj;
}
roteiro >
Aqui, o construtor “protótipo” cria um novo método chamado “ myUcase ” que usa o “ Maiúsculas ” na definição da função para converter cada string do objeto Array em “UpperCase”. Na última função, o método personalizado também é invocado no Array.
Saída
Como visto, cada string de um objeto Array é capitalizada após um clique de botão devido ao método “myUcase()” aplicado.
Conclusão
Para usar o Array “ protótipo ” em JavaScript, associe o novo método/propriedade a ele. Ele especifica uma função que define as funcionalidades para outra função de maneira personalizada conforme os requisitos. Este guia explicou brevemente o uso do construtor “protótipo” Array em JavaScript.