Com o desenvolvimento contínuo da tecnologia front-end, as interfaces que precisam ser exibidas no trabalho front-end estão se tornando cada vez mais complexas, de modo que há cada vez mais cenários de processamento de dados. Por exemplo: muitas vezes é necessário exibir uma estrutura em árvore. no sistema de gerenciamento de plano de fundo, e os dados front-end retornados pelo plano de fundo são de estrutura horizontal, neste momento precisamos converter os dados em uma estrutura de árvore ao exibir o histograma do echart, os dados retornados precisam ser desduplicados e mesclados; ao filtrar, precisamos ordenar os dados; o mais comum é Existem adições, exclusões, modificações e verificações de Dom quando estamos fazendo comentários, etc. Portanto, o artigo de hoje irá levá-lo a esses cenários de negócios e enfrentar essas dificuldades. não tenhamos mais medo das operações de dados JavaScript e deixemos o trabalho de desenvolvimento se tornar simples e eficiente.
: Este é um sistema de gerenciamento em segundo plano - o módulo de gerenciamento de dicionário, que inclui quatro operações de adição, exclusão, modificação e consulta ao dicionário de dados. Então, qual é a nossa solução para lidar com essas 4 operações?
arr.push empurra um ou mais elementos da parte de trás do array
var arr = [1,2,3]; // Retorno: o comprimento do array modificado arr.push(4,5,6); console.log(arr) //Resultado de saída arr=[1,2,3,4,5,6]
arr.unshift adiciona um ou mais elementos da frente do array
var arr = [1,2,3]; // Retorno: o comprimento do array modificado arr.unshift(4,5,6); console.log(arr) //Resultado de saída arr=[4,5,6,1,2,3]
arr.shift é usado para remover o primeiro elemento do array
// O método shift do array é usado para remover o primeiro elemento da matriz. Remova um elemento var arr = [1,2,3]; // Retorna o elemento deletado; arr.shift(); //Resultado de saída arr=[2,3]
arr.pop exclui o último elemento do array
//O método pop do array é usado para remover o último elemento do array var arr = [1,2,3] ; // Retorna o elemento deletado; arr.pop(); //Resultado de saída arr = [1,2];
adicionado
, excluído ou modificado em qualquer posição do array.
retorna um array (incluindo os itens excluídos originais no array (retorna um array vazio se nenhum item for excluído))
splice
(index,howmany,item1,...itemx);
1. Excluir pode excluir qualquer número de itens especificando 2 parâmetros: a posição do primeiro item a ser excluído e o número de itens a serem excluídos. deixe arr=[1,2,3]; let arr1=arr.splice(1,2); // excluirá o segundo e o terceiro elementos do array (ou seja, 2,3) alerta(arr);//[1] alerta(arr1);//[2,3] 2. Inserir pode inserir qualquer número de itens na posição especificada, fornecendo apenas 3 parâmetros: posição inicial, 0 (número de itens a serem excluídos) e itens a serem inseridos. deixe arr=[1,2,3]; let arr1=arr.splice(1,0,4,5);//irá inserir 4,5 começando na posição 1 do array alerta(arr);//[1,4,5,2,3] alerta(arr1);//[] 3. A substituição pode inserir qualquer número de itens na posição especificada e excluir qualquer número de itens ao mesmo tempo. Você só precisa especificar 3 parâmetros: a posição inicial, o número de itens a serem excluídos e qualquer número de itens a serem excluídos. ser inserido (o número de inserções não precisa ser igual ao número excluído) deixe arr = [1,2,3]; let arr1=arr.splice(1,1,"red","green"); // excluirá 2 e, em seguida, inserirá as strings "red" e "green" da posição 2 alert(arr);//[1,"vermelho","verde",3] alert(arr1);//[2]
arr.indexOf : Encontre o índice de acordo com o elemento. Se o elemento estiver no array, retorne o índice, caso contrário, retorne -1. matriz
var arr = [10,20,30] console.log(arr.indexOf(30)); console.log(arr.indexOf(40)); // -1
arr.findIndex : usado para encontrar o índice do primeiro elemento que atende à condição, caso contrário, return -1
var arr = [10, 20, 30] ;
var res1 = arr.findIndex(função (item) {
item de retorno >= 20;
});
//Retorna o índice do primeiro elemento que atende à condição console.log(res1); é usada para conectar vários elementos no array em uma string com o separador especificado
var arr = [ 'User1' ,'Usuário2','Usuário3'];
var str = arr.join('|');
console.log(str);
Usuário 1 | Usuário 2 | Usuário 3 Método de divisão de string: converte números, seguidos de caracteres separados
// Este método é usado para dividir uma string em um array com o símbolo especificado var str = 'Usuário 1 | Usuário 2 |
var arr = str.split('|');
console.log(arr);
['Usuário 1', 'Usuário 2', 'Usuário 3'] Deve-se dizer que com o avanço da tecnologia e o desenvolvimento do hardware, o desempenho computacional dos navegadores também melhorou. A segunda situação - operação de classificação de dados, o que significa que precisamos implementar várias classificações no front-end, então quais são as nossas soluções?
var arr = [23,34,3,4,23,44,333,444];
arr.sort(função(a,b){
retornar ab;
})
console.log(arr); Aqui também apresentamos vários algoritmos de classificação comumente usados:
var arr = [23,34,3,4,23,44,333,444];
var arrShow = (função inserçãoSort(array){
if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){
for (var i = 1; i < array.comprimento; i++) {
chave var = matriz[i];
varj = i - 1;
while (j >= 0 && array[j] > chave) {
matriz[j + 1] = matriz[j];
j--;
}
matriz[j + 1] = chave;
}
matriz de retorno;
}outro{
return 'array não é um array!';
}
})(arr);
console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444] bináriaInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
for (var i = 1; i < array.comprimento; i++) {
var chave = array[i], esquerda = 0, direita = i - 1;
while (esquerda <= direita) {
var meio = parseInt((esquerda + direita) / 2);
if (chave < array[meio]) {
direita = meio - 1;
} outro {
esquerda = meio + 1;
}
}
for (var j = i - 1; j >= esquerda; j--) {
matriz[j + 1] = matriz[j];
}
matriz[esquerda] = chave;
}
matriz de retorno;
} outro {
return 'array não é um array!';
}
} Função de classificação de seleção selectionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.comprimento, temp;
for (var i = 0; i < len - 1; i++) {
var min = matriz[i];
for (var j = i + 1; j <len; j++) {
if (matriz[j] <min) {
temperatura = min;
min = matriz[j];
matriz[j] = temp;
}
}
matriz[i] = min;
}
matriz de retorno;
} outro {
return 'array não é um array!';
}
} Função de classificação por bolha bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.comprimento, temp;
for (var i = 0; i < len - 1; i++) {
for (var j = len - 1; j >= i; j--) {
if (matriz[j] <matriz[j - 1]) {
temperatura = matriz[j];
matriz[j] = matriz[j - 1];
matriz[j - 1] = temp;
}
}
}
matriz de retorno;
} outro {
return 'array não é um array!';
}
} //Método 1 function quickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
if (esquerda <direita) {
var x = array[direita], i = esquerda - 1, temp;
for (var j = esquerda; j <= direita; j++) {
if (matriz[j] <= x) {
eu++;
temp = matriz[i];
matriz[i] = matriz[j];
matriz[j] = temp;
}
}
quickSort(matriz, esquerda, i - 1);
quickSort(matriz, i + 1, direita);
};
} outro {
return 'array não é um array ou esquerda ou direita não é um número!';
}
}
var aaa = [3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.length - 1);
console.log(aaa);
//Método 2 var quickSort = function(arr) {
if (arr.length <= 1) { retornar arr }
var pivotIndex = Math.floor(arr.length/2);
var pivô = arr.splice(pivotIndex, 1)[0];
var esquerda = [];
var direita = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivô) {
esquerda.push(arr[i]);
} outro {
direita.push(arr[i]);
}
}
return quickSort(esquerda).concat([pivô], quickSort(direita));
}; /*Descrição do método: Heap sort @param array Matriz a ser classificada*/
função heapSort(matriz) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
//Constrói um heap var heapSize = array.length, temp;
for (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(array, i, heapSize);
}
//Classificação de heap para (var j = heapSize - 1; j >= 1; j--) {
temp = matriz[0];
matriz[0] = matriz[j];
matriz[j] = temp;
heapify(matriz, 0, --heapSize);
}
} outro {
return 'array não é um array!';
}
}
/*Descrição do método: Manter as propriedades do heap @param arr array @param x array subscript @param len heap size*/
função heapify(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'número') {
var l = 2 * x, r = 2 * x + 1, maior = x, temp;
if (l < len && arr[l] > arr[maior]) {
maior = eu;
}
if (r < len && arr[r] > arr[maior]) {
maior = r;
}
if (maior! = x) {
temp = arr[x];
arr[x] = arr[maior];
arr[maior] = temp;
heapify(arr, maior, len);
}
} outro {
return 'arr não é um array ou x não é um número!';
}
} Ok, depois de resolvermos o problema de classificação, agora nos deparamos com o problema de desduplicação de dados. Não tenha medo, ainda existem muitas soluções. Continue lendo devagar:
No trabalho Ao processar dados json. por exemplo, ao classificar os tamanhos de determinados produtos, é normal que produtos diferentes tenham o mesmo tamanho. Se quisermos convertê-los em uma tabela para exibi-los, então estes O tamanho não deve ser duplicado Aqui, escreverei. abaixo alguns métodos para remover duplicação de arrays para sua referência:
//O método mais simples para remover duplicação de arrays/*
* Crie um novo array, percorra o array de entrada e coloque o valor no novo array se não estiver no novo array * IE8 e anteriores não suportam o método indexOf do array* */
função uniq(matriz){
var temp = []; //Um novo array temporário for(var i = 0; i < array.length; i++){
if(temp.indexOf(array[i]) == -1){
temp.push(matriz[i]);
}
}
temperatura de retorno;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa)); /*
* O mais rápido e que ocupa mais espaço (o espaço é trocado por tempo)
*
* Este método é executado mais rápido que qualquer outro método, mas ocupa mais memória.
* Ideia atual: Crie um novo objeto js e um novo array Ao percorrer o array de entrada, determine se o valor é a chave do objeto js.
* Caso contrário, adicione a chave ao objeto e coloque-a em um novo array.
* Nota: Ao determinar se é uma chave de objeto js, "toString()" será executado automaticamente na chave recebida.
* Chaves diferentes podem ser confundidas com as mesmas, como n[val]--n[1], n["1"];
* Para resolver o problema acima, você ainda precisa chamar "indexOf". */
função uniq(matriz){
var temp = {}, r = [], len = array.length, val, tipo;
for (var i = 0; i < len; i++) {
val = matriz[i];
tipo = tipo de val;
if (!temp[val]) {
temp[val] = [tipo];
r.push(val);
} else if (temp[val].indexOf(type) < 0) {
temp[val].push(tipo);
r.push(val);
}
}
retornar r;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa)); /*
* Classifique a matriz recebida para que os mesmos valores sejam adjacentes após a classificação.
* Então, ao percorrer, apenas os valores que não são duplicados do valor anterior são adicionados ao novo array.
* Atrapalhará a ordem do array original* */
função uniq(matriz){
array.sort();
var temp=[matriz[0]];
for(var i = 1; i < array.length; i++){
if(array[i] !== temp[temp.length-1]){
temp.push(matriz[i]);
}
}
temperatura de retorno;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa)); /*
*
* Você ainda precisa chamar "indexOf" e o desempenho é semelhante ao método 1.
* Idéia de implementação: se o i-ésimo item da matriz atual aparecer primeiro em uma posição diferente de i,
* Então significa que o i-ésimo item é repetido e ignorado. Caso contrário, armazene a matriz de resultados.
* */
função uniq(matriz){
var temp = [];
for(var i = 0; i < array.comprimento; i++) {
//Se o i-ésimo item do array atual aparecer primeiro em i no array atual, ele será armazenado no array, caso contrário, significa uma duplicata if(array.indexOf(array[i]) == i) {
temp.push(matriz[i])
}
}
temperatura de retorno;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa)); // Ideia: Obtenha o valor mais à direita sem repetição e coloque-o em um novo array /*
*Método recomendado*
* O código de implementação do método é bem legal.
* Ideia de implementação: Obtenha o valor mais à direita sem duplicação e coloque-o em um novo array.
* (Quando valores duplicados são detectados, encerre o loop atual e entre na próxima rodada de julgamento do loop de nível superior) */
função uniq(matriz){
var temp = [];
varíndice = [];
var l = array.comprimento;
for(var i = 0; i < l; i++) {
for(var j = i + 1; j < l; j++){
if (matriz[i] === matriz[j]){
eu++;
j = eu;
}
}
temp.push(matriz[i]);
índice.push(i);
}
console.log(índice);
temperatura de retorno;
}
var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa)); . Ao selecionar um departamento, você costuma ver esse tipo de menu em árvore. Os dados retornados pelo plano de fundo são geralmente horizontais. geralmente geramos esse tipo de menu. Por favor, veja ~~
const dataTree = [
{id: 1, nome: 'Sede', parentId: 0},
{id: 2, nome: 'Filial de Shenzhen', parentId: 1},
{id: 3, nome: 'Filial de Pequim', parentId: 1},
{id: 4, nome: 'Departamento de P&D', parentId: 2},
{id: 5, nome: 'Departamento de Marketing', parentId: 2},
{id: 6, nome: 'Departamento de Teste', parentId: 2},
{id: 7, nome: 'Departamento Financeiro', parentId: 2},
{id: 8, nome: 'Departamento de Operação e Manutenção', parentId: 2},
{id: 9, nome: 'Departamento de Marketing', parentId: 3},
{id: 10, nome: 'Departamento Financeiro', parentId: 3},
]
function alterarDados(dados, parentId = 0) {
let tree = [];//Cria um array vazio//Percorre cada pedaço de dados data.map((item) => {
//O parentId em cada dado é o mesmo passado if (item.parentId == parentId) {
//Basta procurar um subconjunto deste elemento para encontrar parentId==item.id no elemento. Dessa forma, recursivamente item.children = changeData(data, item.id);
árvore.push(item);
}
})
árvore de retorno
}
console.log(changeData(dataTree, 0)); 
Freqüentemente encontramos processamento de dados ao exibir gráficos e também encontramos frequentemente a fusão de matrizes. A seguir está uma maneira de mesclar os mesmos itens de matrizes:
var arr = [.
{"id":"1","nome":"Chelizi","num":"245"},
{"id":"1","nome":"Chelizi","num":"360"},
{"id":"2","nome":"Apple","num":"120"},
{"id":"2","nome":"Apple","num":"360"},
{"id":"2","nome":"Apple","num":"180"},
{"id":"3","nome":"banana","num":"160"},
{"id":"4","nome":"Abacaxi","num":"180"},
{"id":"4","name":"Abacaxi","num":"240"}
];
var mapa = {},resultado= [];
for(var i = 0; i < arr.length; i++){
varele = arr[i];
if(!map[ele.id]){
resultado.push({
id:ele.id,
nome: ele.nome,
valor: ele.valor
});
mapa[ele.id] = ele;
}outro{
for(var j = 0; j < resultado.comprimento; j++){
var dj = resultado[j];
if(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
quebrar;
}
}
}
};
console.log(resultado);