Estou procurando um método de inserção de matriz JavaScript, no estilo de:
arr.insert(index, item)
De preferência no jQuery, mas qualquer implementação em JavaScript funcionará neste momento.
javascript
jquery
arrays
tags2k
fonte
fonte
Respostas:
O que você deseja é a
splice
função no objeto de matriz nativa.arr.splice(index, 0, item);
irá inseriritem
emarr
no índice especificado (excluindo0
itens em primeiro lugar, que é, é apenas uma inserção).Neste exemplo, criaremos uma matriz e adicionaremos um elemento a ela no índice 2:
fonte
arr.splice(2,3)
removerá 3 elementos começando no índice 2. Sem passar o terceiro .... Nésimo parâmetro, nada é inserido. Portanto, o nomeinsert()
também não faz justiça.Você pode implementar o
Array.insert
método fazendo o seguinte:Então você pode usá-lo como:
fonte
Array.prototype.insert = function (index, items) { this.splice.apply(this, [index, 0].concat(items)); }
Além da emenda, você pode usar essa abordagem que não altera a matriz original, mas cria uma nova matriz com o item adicionado. Você deve evitar a mutação sempre que possível. Estou usando o operador de propagação ES6 aqui.
Isso pode ser usado para adicionar mais de um item, aprimorando um pouco a função para usar o operador restante para os novos itens e espalhá-lo no resultado retornado também
fonte
insert
Métodos de matriz personalizados1. Com vários argumentos e suporte a encadeamento
Pode inserir vários elementos (como nativo
splice
faz) e suporta encadeamento:2. Com argumentos do tipo array, mesclando e encadeando o suporte
Ele pode mesclar matrizes dos argumentos com a matriz fornecida e também suporta encadeamento:
DEMO: http://jsfiddle.net/UPphH/
fonte
["b", "X", "Y", "Z", "c"]
. Por que não está"d"
incluído? Parece-me que se você colocar 6 como o segundo parâmetro deslice()
e houver 6 elementos na matriz a partir do índice especificado, deverá obter todos os 6 elementos no valor de retorno. (O documento dizhowMany
para esse parâmetro.) Developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(3, 3);
=>[ ]
slice
método e nãosplice
, ao qual você está se referindo no comentário. O segundo parâmetro deslice
(nomeadoend
) é o índice baseado em zero no qual finalizar a extração.slice
extrai até, mas não incluiend
. Portanto, depois deinsert
ter["a", "b", "X", "Y", "Z", "c", "d"]
, a partir do qualslice
extrai elementos com índices de1
até6
, ou seja, de"b"
até,"d"
mas não incluindo"d"
. Isso faz sentido?Se você deseja inserir vários elementos em uma matriz de uma só vez, confira esta resposta do Stack Overflow: Uma maneira melhor de unir uma matriz em uma matriz em javascript
Também aqui estão algumas funções para ilustrar os dois exemplos:
Finalmente, aqui está um jsFiddle para que você possa ver por si mesmo: http://jsfiddle.net/luisperezphd/Wc8aS/
E é assim que você usa as funções:
fonte
Para programação funcional adequada e propósitos de encadeamento, uma invenção
Array.prototype.insert()
é essencial. Na verdade, a emenda poderia ter sido perfeita se tivesse retornado a matriz mutada em vez de uma matriz vazia totalmente sem sentido. Então aqui vaiBem, o que foi dito acima
Array.prototype.splice()
muda com a matriz original e alguns podem reclamar como "você não deve modificar o que não lhe pertence" e isso pode acabar se tornando correto também. Então, para o bem-estar público, gostaria de dar outroArray.prototype.insert()
que não modifique a matriz original. Aqui vai;fonte
splice
modifica a matriz original, não acho que a "programação funcional apropriada" pertença a nenhum lugar nas proximidadessplice
.Eu recomendo usar JavaScript puro neste caso, também não há método de inserção em JavaScript, mas temos um método que é um método Array interno que faz o trabalho para você, chamado de emenda ...
Vamos ver o que é splice () ...
OK, imagine que temos esta matriz abaixo:
Podemos remover
3
assim:Ele retornará 3, mas se verificarmos o arr agora, temos:
Até agora, tudo bem, mas como podemos adicionar um novo elemento à matriz usando emenda? Vamos colocar de volta 3 no arr ...
Vamos ver o que fizemos ...
Usamos emenda novamente, mas desta vez para o segundo argumento, passamos 0 , significa que não queremos excluir nenhum item, mas, ao mesmo tempo, adicionamos o terceiro argumento, que é 3, que será adicionado no segundo índice ...
Você deve estar ciente de que podemos excluir e adicionar ao mesmo tempo, por exemplo, agora podemos fazer:
O que excluirá 2 itens no índice 2, depois adicionará 3 no índice 2 e o resultado será:
Isso está mostrando como cada item da emenda funciona:
fonte
Anexar elemento único a um índice específico
Anexar vários elementos em um índice específico
fonte
arrName[3] = 'newName1';
será acrescentado se a matriz tiver apenas 3 elementos. Se houver um elemento no índice 3, este será substituído. Se você quiser acrescentar no final, é melhor usararrName.push('newName1');
Outra solução possível, com o uso de
Array#reduce
.fonte
Aqui estão duas maneiras:
OU
fonte
Mesmo que isso já tenha sido respondido, estou adicionando esta nota para uma abordagem alternativa.
Eu queria colocar um número conhecido de itens em uma matriz, em posições específicas, pois elas saem de uma "matriz associativa" (isto é, um objeto) que, por definição, não é garantido que esteja em uma ordem classificada. Eu queria que a matriz resultante fosse uma matriz de objetos, mas os objetos estivessem em uma ordem específica na matriz, já que uma matriz garante sua ordem. Então eu fiz isso.
Primeiro, o objeto de origem, uma string JSONB recuperada do PostgreSQL. Eu queria que ele fosse classificado pela propriedade "order" em cada objeto filho.
Como o número de nós no objeto é conhecido, primeiro crio uma matriz com o comprimento especificado:
E, em seguida, itere o objeto, colocando os objetos temporários recém-criados nos locais desejados na matriz, sem que ocorra realmente uma "classificação".
fonte
Qualquer um que ainda esteja tendo problemas com esse problema, tentou todas as opções acima e nunca conseguiu. Estou compartilhando minha solução, isso é para levar em consideração que você não deseja declarar explicitamente as propriedades do seu objeto versus a matriz.
Essa é uma combinação de iterar a matriz de referência e compará-la com o objeto que você deseja verificar, converter os dois em uma sequência e iterar se corresponder. Então você pode apenas contar. Isso pode ser melhorado, mas é aqui que eu me acomodo. Espero que isto ajude.
fonte
Tendo lucro do método de redução da seguinte forma:
Dessa forma, podemos retornar uma nova matriz (será uma maneira funcional legal - muito melhor do que usar push ou emenda) com o elemento inserido no índice e, se o índice for maior que o comprimento da matriz, ele será inserido no fim.
fonte
Array#splice()
é o caminho a seguir, a menos que você realmente queira evitar a mutação da matriz. Dado 2 matrizesarr1
earr2
, aqui está como você iria inserir o conteúdo dearr2
dentroarr1
após o primeiro elemento:Se você estiver preocupado em alterar a matriz (por exemplo, se estiver usando o Immutable.js), poderá usar
slice()
, para não confundirsplice()
com a'p'
.fonte
Eu tentei isso e está funcionando bem!
Índice é a posição em que você deseja inserir ou excluir o elemento. 0 ou seja, o segundo parâmetro define o número de elemento do índice a ser removido. As novas entradas que você deseja criar na matriz. Pode ser um ou mais de um.
fonte
Aqui está uma função que eu uso em um dos meus aplicativos.
Isso verifica se o item sai
E então eu chamo isso abaixo.
fonte
Um pouco mais antigo, mas tenho que concordar com o Redu acima porque o splice definitivamente tem uma interface um pouco confusa. E a resposta dada por cdbajorin de que "ele retorna apenas uma matriz vazia quando o segundo parâmetro é 0. Se for maior que 0, retorna os itens removidos da matriz" está, enquanto preciso, provando o ponto. A intenção da função é unir ou, como já foi dito por Jakob Keller, "unir-se ou conectar-se, também para alterar. Você tem uma matriz estabelecida que agora está mudando, o que envolveria adicionar ou remover elementos ...". o valor de retorno dos elementos, se houver, que foram removidos é, na melhor das hipóteses, estranho. E eu 100% concorda que esse método poderia ser mais adequado ao encadeamento se tivesse retornado o que parece natural, uma nova matriz com os elementos emendados adicionados. Depois, você pode fazer coisas como ["19", "17"]. Splice (1,0, "18"). Join ("...") ou o que quiser com a matriz retornada. O fato de que ele retorna o que foi removido é meio que IMHO sem sentido. Se a intenção do método era "cortar um conjunto de elementos" e essa era a única intenção, talvez. Parece que, se eu ainda não sei o que estou cortando, provavelmente tenho poucas razões para cortar esses elementos, não é? Seria melhor se ele se comportasse como concat, mapear, reduzir, cortar, etc., onde uma nova matriz é feita a partir da matriz existente, em vez de mudar a matriz existente. Tudo isso é encadeado e isso é um problema significativo. É bastante comum a manipulação de array em cadeia. Parece que o idioma precisa seguir uma direção ou outra e tentar cumpri-lo o máximo possível. Javascript sendo funcional e menos declarativo, parece apenas um desvio estranho da norma.
fonte
atuação
Hoje (2020.04.24) realizo testes para soluções escolhidas para matrizes grandes e pequenas. Testei-os no MacOs High Sierra 10.13.6 no Chrome 81.0, Safari 13.1, Firefox 75.0.
Conclusões
Para todos os navegadores
slice
ereduce
(D, E, F) são geralmente 10x-100x mais rápido do que as soluções em-lugarsplice
(AI, BI, CI) foram as mais rápidas (às vezes ~ 100x - mas isso depende do tamanho da matriz)Detalhes
Os testes foram divididos em dois grupos: soluções no local (AI, BI, CI) e soluções não no local (D, E, F) e foram realizados em dois casos
O código testado é apresentado no snippet abaixo
Mostrar snippet de código
Os resultados de exemplo para matriz pequena no chrome estão abaixo
fonte