Envio de matriz JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o push()método JavaScript Array para adicionar um ou mais elementos ao final de um array.

Introdução ao método JavaScript Array push()

O Array.prototype.push()método adiciona um ou mais elementos ao final de um array e retorna o comprimento do novo array.

O seguinte mostra a sintaxe do push()método:

push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);

O push()método retorna o novo valor da lengthpropriedade do objeto array no qual você chama o método.

Exemplos de métodos JavaScript Array push()

Vejamos alguns exemplos de uso do push()método.

1) Usando o array push() para anexar um elemento a um array

O exemplo a seguir adiciona o número 40ao final da numbersmatriz:

let numbers = [10, 20, 30];

const length = numbers.push(40);

console.log(length);
console.log(numbers);
Linguagem de código:  JavaScript  ( javascript )

Saída:

4
[ 10, 20, 30, 40 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Como funciona.

Primeiro, defina a numbersmatriz que possui três números:

let numbers = [10, 20, 30];Linguagem de código:  JavaScript  ( javascript )

Segundo, adicione o número 40ao final do numbersarray usando o push()método e atribua o valor de retorno à lengthvariável:

const length = numbers.push(40);Linguagem de código:  JavaScript  ( javascript )

Terceiro, produza a lengthvariável e o numbersarray:

console.log(length);
console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

A imagem a seguir ilustra como o exemplo funciona:

2) Usando o array push() para adicionar vários elementos ao final de um array

O exemplo a seguir mostra como usar o push()método para adicionar vários elementos ao final de uma matriz:

let numbers = [10, 20, 30];

const length = numbers.push(40, 50);

console.log(length);
console.log(numbers);Linguagem de código:  JavaScript  ( javascript )

Saída:

5
[ 10, 20, 30, 40, 50 ]Linguagem de código:  JSON/JSON com comentários  ( json )

A imagem a seguir ilustra como funciona:

3) Usando push() para anexar elementos de um array a outro array

Suponha que você tenha duas matrizes colorse cmyk:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];Linguagem de código:  JavaScript  ( javascript )

E você deseja anexar os elementos de cmykao colorsarray.

Para fazer isso, você pode usar um for...ofloop que itera sobre os elementos do cmyk array e usar o push()método para anexar cada elemento ao colorsarray assim:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

for (const color of cmyk) {
  colors.push(color);
}

console.log(colors);Linguagem de código:  JavaScript  ( javascript )

Saída:

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']Linguagem de código:  JSON/JSON com comentários  ( json )

A partir do ES6, você pode usar o operador spread ( ...) para espalhar os elementos do cmykarray e enviá-los para o colorsarray ao mesmo tempo, assim:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

colors.push(...cmyk);

console.log(colors);
Linguagem de código:  JavaScript  ( javascript )

Usando o método JavaScript Array push() com objetos semelhantes a array

O Array.prototype.push()método foi projetado para ser genérico propositalmente. Portanto, você pode chamar o push()método com call()ou apply()nos objetos semelhantes a array.

Nos bastidores, o push() método usa a length propriedade para determinar a posição de inserção dos elementos. Se o push()método não puder converter a length propriedade em um número, ele será usado 0como valor para o índice.

Veja o exemplo a seguir:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};
greetings.append('Howdy');
greetings.append('Bonjour');

console.log(greetings);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
  '0': 'Hi',
  '1': 'Hello',
  '2': 'Howdy',
  '3': 'Bonjour',
  length: 4,
  add: [Function: add]
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina o greetingsobjeto que possui três propriedades 1, 2e lengthum método append():

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};Linguagem de código:  JavaScript  ( javascript )

O append()método chama o push()método de um objeto array para anexar ao messageobjeto greetings.

Segundo, chame append()o método do greetingsobjeto:

greetings.append('Howdy');
greetings.append('Bonjour');Linguagem de código:  JavaScript  ( javascript )

Em cada chamada, push()usa a lengthpropriedade do greetingsobjeto para determinar a posição onde anexa o novo elemento e aumenta a lengthpropriedade em um.

Como resultado, o greetingsobjeto possui mais dois elementos no índice 2e 3. E a lengthpropriedade está 4atrás das ligações.

Terceiro, envie o greetingsobjeto para o console:

console.log(greetings);Linguagem de código:  JavaScript  ( javascript )

Para permitir que o método append() aceite várias mensagens, você pode modificar o método assim:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append() {
    [].push.call(this, ...arguments);
  },
};
greetings.append('Howdy', 'Bonjour');

console.log(greetings);
Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, remova o parâmetro message do método anexar.

Segundo, espalhe os elementos do argumentsobjeto e empurre-os para o greetingsobjeto.

Resumo

Use o método de array JavaScript push()para acrescentar um ou mais elementos a um array.
O push()método também funciona com um objeto semelhante a um array.