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.

1. Cenários de adição, exclusão, modificação e consulta de dados

: 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?

1. Nova adição ao array

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]

2. Exclusão do array

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];

3. Modificação do array

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))

• Sintaxe

splice

(index,howmany,item1,...itemx);

• ou exclua, use números negativos, comece do final da matriz Especifique o local.
• quantos - obrigatório, a quantidade a ser excluída, se for 0 o item não será excluído.
• item1,…itemx – Opcional, novos itens para adicionar ao array.

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]

4. Pesquisa de array

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);

5. A junção de conversão de array e string

é 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']

2. Classificação de dados

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?

1. Função interna do js arr.sort()

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:

2. Ordenação por inserção

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]

3. Função de classificação de inserção binária

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!';
}
}

4.

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!';
}
}

5.

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!';
}
}

6. Classificação rápida

//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));
};

7. Heap sort

/*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!';
}
}

3. Desduplicação de dados

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:

1. Método simples para remover duplicação de

//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));

2. Método de valor-chave do objeto para remover duplicatas

/*
* 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));

3. Método de remoção adjacente após classificação

/*
* 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));

4. Método de subscrição de array

/*
*
* 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));

5. Método de otimização de passagem de array

// 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));

4. A lista horizontal se torna uma estrutura em árvore

. 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 ~~

1. O método é apresentado especialmente aqui:

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));

5. Mesclando os mesmos itens de objetos de matriz

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:

• Primeiro, os dados arr da matriz original são usados
• ​​e, em seguida, um objeto de mapa vazio e uma matriz de resultados vazia são criados. Ao julgar se o mapa contém um determinado item, o resultado da matriz é julgado se deve adicionar dados
• e, em seguida, o mesmo item é. comparado e mesclado com o conteúdo da matriz de resultados existente

1. O blogueiro dedicou especialmente o código ancestral que foi apreciado por muitos anos a todos os chefes aqui:

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);

Vendo isso, vários problemas comuns de processamento de dados no front-end foram quase resolvidos. É claro que, na realidade, ainda existem muitos problemas que não foram incluídos e serão seguidos um após o outro. Vou atualizá-lo e incluí-lo lentamente. Ao mesmo tempo, também espero que amigos que tenham problemas para processar dados JavaScript possam se comunicar com o blogueiro e aqueles que tenham boas ideias para resolver problemas também possam dar feedback ao blogueiro.

Este artigo apresenta cinco problemas comuns de processamento de dados no processo de desenvolvimento de JavaScript e fornece soluções correspondentes. Ele basicamente cobre as necessidades de uso no processo de desenvolvimento diário. fornecer soluções.