Dengan terus berkembangnya teknologi front-end, antarmuka yang perlu ditampilkan dalam pekerjaan front-end menjadi semakin kompleks, sehingga semakin banyak skenario pemrosesan data. Misalnya: struktur pohon sering kali perlu ditampilkan dalam sistem manajemen latar belakang, dan data front-end yang dikembalikan oleh latar belakang adalah struktur Horizontal, saat ini kita perlu mengubah data menjadi struktur pohon, saat menampilkan histogram grafik, data yang dikembalikan perlu dihapus duplikatnya dan digabungkan; saat memfilter, kita perlu mengurutkan data; yang paling umum adalah Ada penambahan, penghapusan, modifikasi dan pemeriksaan Dom ketika kita membuat komentar, dll. Jadi artikel hari ini akan membawa Anda ke dalam skenario bisnis ini dan menghadapi kesulitan-kesulitan ini kami tidak lagi takut dengan operasi data JavaScript dan membiarkan pekerjaan pengembangan menjadi sederhana dan efisien.

1. Skenario penambahan, penghapusan, modifikasi, dan kueri data

: Ini adalah sistem manajemen latar belakang - modul manajemen kamus, yang mencakup empat operasi penambahan, penghapusan, modifikasi, dan kueri kamus data. Lalu bagaimana solusi kita untuk menghadapi 4 operasi tersebut? Silakan baca terus.

1. Penambahan baru pada array

arr.push mendorong satu atau lebih elemen dari belakang array

var arr = [1,2,3];
// Return: panjang array yang dimodifikasi arr.push(4,5,6);
konsol.log(arr)
//Hasil keluaran arr=[1,2,3,4,5,6]

arr.unshift menambahkan satu atau lebih elemen dari depan array

var arr = [1,2,3];
// Return: panjang array yang dimodifikasi arr.unshift(4,5,6);
konsol.log(arr)
//Hasil keluaran arr=[4,5,6,1,2,3]

2. Penghapusan array

arr.shift digunakan untuk menghapus elemen pertama dari array

// Metode shift dari array digunakan untuk menghapus elemen pertama elemen array. Hapus satu elemen var arr = [1,2,3];
// Mengembalikan elemen yang dihapus;
arr.shift();
//Hasil keluaran arr=[2,3]

arr.pop menghapus elemen terakhir dari array;

//Metode pop dari array digunakan untuk menghapus elemen terakhir dari array var arr = [1,2,3] ;
// Mengembalikan elemen yang dihapus;
arr.pop();
//Hasil keluaran arr = [1,2];

3. Modifikasi array

arr.splice : Dapat ditambahkan, dihapus, atau dimodifikasi di posisi mana pun dalam array.

Metode ini memiliki tiga fungsi: penghapusan, penyisipan, dan penggantian mengembalikan array (termasuk item asli yang Dihapus dalam array (mengembalikan array kosong jika tidak ada item yang dihapus))

• Sambungan

sintaksis

(indeks, berapa banyak, item1, ... itemx);

• atau hapus, gunakan angka negatif, mulai dari akhir array Tentukan lokasi.
• berapa banyak - diperlukan, jumlah yang akan dihapus, jika 0, item tidak akan dihapus.
• item1,…itemx – Opsional, item baru untuk ditambahkan ke array.

1. Hapus dapat menghapus sejumlah item dengan menentukan 2 parameter: posisi item pertama yang akan dihapus dan jumlah item yang akan dihapus.

biarkan arr=[1,2,3];
let arr1=arr.splice(1,2);//akan menghapus elemen ke-2 dan ke-3 dari array (yaitu 2,3)
peringatan(arr);//[1]
peringatan(arr1);//[2,3]


2. Sisipkan dapat memasukkan sejumlah item ke dalam posisi yang ditentukan dengan hanya menyediakan 3 parameter: posisi awal, 0 (jumlah item yang akan dihapus), dan item yang akan disisipkan.
biarkan arr=[1,2,3];
let arr1=arr.splice(1,0,4,5);//akan memasukkan 4,5 mulai dari posisi 1 array
peringatan(arr);//[1,4,5,2,3]
peringatan(arr1);//[]

3. Pengganti dapat memasukkan sejumlah item ke posisi yang ditentukan dan menghapus sejumlah item secara bersamaan. Anda hanya perlu menentukan 3 parameter: posisi awal, jumlah item yang akan dihapus, dan jumlah item yang akan dihapus disisipkan (jumlah penyisipan tidak harus sama dengan jumlah yang dihapus)
misalkan arr = [1,2,3];
let arr1=arr.splice(1,1,"red","green");//akan menghapus 2, lalu masukkan string "merah" dan "hijau" dari posisi 2
waspada(arr);//[1,"merah","hijau",3]
alert(arr1);//[2]

4. Pencarian array

arr.indexOf : Temukan indeks berdasarkan elemen. Jika elemen ada dalam array, kembalikan indeks, jika tidak, kembalikan -1 larik

var arr = [10,20,30]
konsol.log(arr.indexOf(30)); // 2
console.log(arr.indexOf(40)); // -1

arr.findIndex : digunakan untuk mencari indeks elemen pertama yang memenuhi kondisi, jika tidak, kembalikan -1

var arr = [10, 20, 30] ;
var res1 = arr.findIndex(fungsi (item) {
  barang kembali >= 20;
});
//Mengembalikan indeks elemen pertama yang memenuhi kondisi console.log(res1);

5. Gabungan konversi array dan string

digunakan untuk menghubungkan beberapa elemen dalam array menjadi string dengan pemisah yang ditentukan

var arr = [ 'User1' ,'Pengguna2','Pengguna3'];
var str = arr.join('|'); 
konsol.log(str);  
Pengguna 1 |. Pengguna 2 |. Pengguna 3

Metode pemisahan string: konversi angka, diikuti dengan karakter yang dipisahkan

// Metode ini digunakan untuk membagi string menjadi array dengan simbol yang ditentukan var str = 'Pengguna 1 |.
var arr = str.split('|');
konsol.log(arr);
['Pengguna 1', 'Pengguna 2', 'Pengguna 3']

2. Penyortiran data

Harus dikatakan bahwa dengan kemajuan teknologi dan perkembangan perangkat keras, kinerja komputasi browser juga meningkat Situasi kedua - operasi penyortiran data, yang berarti kita perlu menerapkan berbagai pengurutan di front end, jadi apa solusinya? Mari kita baca terus~

1. fungsi bawaan js arr.sort()

var arr = [23,34,3,4,23,44,333,444];
        arr.sort(fungsi(a,b){
            kembali ab;
        })
    console.log(arr);

Di sini kami juga memperkenalkan beberapa algoritma pengurutan yang umum digunakan:

2. Insertion sort

var arr = [23,34,3,4,23,44,333,444];

var arrShow = (fungsi insertionSort(array){
if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){

    for (var i = 1; i < array.panjang; i++) {
        var kunci = larik[i];
        var j = saya - 1;
        sementara (j >= 0 && larik[j] > kunci) {
        larik[j + 1] = larik[j];
        J--;
        }
      larik[j + 1] = kunci;
    }
    kembalikan susunan;
}kalau tidak{

    return 'array bukan Array!';
}
})(arr);

console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444]

3. Fungsi pengurutan penyisipan biner

binerInsertionSort(array) {
if (Objek.prototipe.toString.call(array).slice(8, -1) === 'Array') {
for (var i = 1; i < array.panjang; i++) {
    kunci var = larik[i], kiri = 0, kanan = i - 1;
    sementara (kiri <= kanan) {
    var tengah = parseInt((kiri + kanan) / 2);
    if (kunci < array[tengah]) {
    kanan = tengah - 1;
} kalau tidak {
    kiri = tengah + 1;
}
}
untuk (var j = i - 1; j >= kiri; j--) {
    larik[j + 1] = larik[j];
}
larik[kiri] = kunci;
}
kembalikan susunan;
} kalau tidak {
    return 'array bukan Array!';
}
}

4. Fungsi pengurutan seleksi

seleksiSort(array) {
if (Objek.prototipe.toString.call(array).slice(8, -1) === 'Array') {
    var len = array.panjang, suhu;
    untuk (var i = 0; i < len - 1; i++) {
    var min = larik[i];
    untuk (var j = i + 1; j < len; j++) {
        jika (array[j] < menit) {
        suhu = menit;
        min = susunan[j];
        susunan[j] = suhu;
    }
  }
    larik[i] = menit;
}
 kembalikan susunan;
} kalau tidak {
    return 'array bukan Array!';
}
}

5. Fungsi pengurutan gelembung

bubbleSort(array) {
if (Objek.prototipe.toString.call(array).slice(8, -1) === 'Array') {
var len = array.panjang, suhu;
untuk (var i = 0; i < len - 1; i++) {
    untuk (var j = len - 1; j >= i; j--) {
        jika (array[j] < array[j - 1]) {
        suhu = susunan[j];
        susunan[j] = susunan[j - 1];
        larik[j - 1] = suhu;
}
}
}
    kembalikan susunan;
} kalau tidak {
    return 'array bukan Array!';
}
}

6. Pengurutan cepat

//Metode 1 fungsi quickSort(array, kiri, kanan) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
jika (kiri <kanan) {
var x = larik[kanan], i = kiri - 1, suhu;
untuk (var j = kiri; j <= kanan; j++) {
    jika (array[j] <= x) {
    saya++;
    suhu = susunan[i];
    susunan[i] = susunan[j];
    susunan[j] = suhu;
}
}
quickSort(array, kiri, i - 1);
quickSort(array, i + 1, kanan);
};
} kalau tidak {
return 'array bukan Array atau kiri atau kanan bukan angka!';
}
}
var aaa = [3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.panjang - 1);
konsol.log(aaa);


//Metode 2 var quickSort = function(arr) {
if (arr.panjang <= 1) { return arr }
var pivotIndex = Matematika.lantai(arr.panjang / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var kiri = [];
var kanan = [];
for (var i = 0; i < arr.panjang; i++){
jika (arr[i] < poros) {
kiri.push(arr[i]);
} kalau tidak {
kanan.push(arr[i]);
}
}
return quickSort(kiri).concat([pivot], quickSort(kanan));
};

7. Pengurutan tumpukan

/*Deskripsi metode: Pengurutan tumpukan @param array Array yang akan diurutkan*/
fungsi heapSort(array) {
if (Objek.prototipe.toString.call(array).slice(8, -1) === 'Array') {
//Membangun heap var heapSize = array.length, temp;
for (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(array, i, heapSize);
}

//Urutan tumpukan untuk (var j = heapSize - 1; j >= 1; j--) {
    suhu = susunan[0];
    susunan[0] = susunan[j];
    susunan[j] = suhu;
    heapify(array, 0, --heapSize);
}
} kalau tidak {
return 'array bukan Array!';
}
}
/*Deskripsi metode: Mempertahankan properti heap @param arr array @param x array subscript @param len heap size*/
fungsi menumpuk(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'number') {
var l = 2 * x, r = 2 * x + 1, terbesar = x, temp;
if (l < len && arr[l] > arr[terbesar]) {
terbesar = aku;
}
if (r < len && arr[r] > arr[terbesar]) {
terbesar = r;
}
jika (terbesar != x) {
    suhu = arr[x];
    arr[x] = arr[terbesar];
    arr[terbesar] = suhu;
    heapify(arr, terbesar, len);
}
} kalau tidak {
    return 'arr bukan Array atau x bukan angka!';
}
}

3. Deduplikasi data

Oke, setelah kita menyelesaikan masalah penyortiran, sekarang kita dihadapkan pada masalah deduplikasi data. Jangan takut, masih banyak solusinya. Silakan baca perlahan:

Di tempat kerja Saat memproses data json, Misalnya saat menyortir ukuran suatu produk, wajar jika produk yang berbeda memiliki ukuran yang sama. Jika kita ingin mengubahnya menjadi tabel untuk menampilkannya, maka ukurannya tidak boleh diduplikasi turunkan beberapa metode untuk menghapus duplikasi dari array untuk referensi Anda:

1. Metode sederhana untuk menghapus duplikasi dari

//Metode paling sederhana untuk menghapus duplikasi dari array/*
* Buat array baru, lintasi array masuk, dan masukkan nilai ke dalam array baru jika tidak ada dalam array baru * IE8 dan di bawahnya tidak mendukung metode indexOf dari array* */
fungsi uniq(array){
    var temp = []; //Array sementara baru untuk(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    suhu kembali;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

2. Metode nilai kunci objek untuk menghapus duplikat

/*
* Tercepat dan memakan ruang paling banyak (ruang ditukar dengan waktu)
*
* Metode ini dijalankan lebih cepat dibandingkan metode lainnya, namun memerlukan lebih banyak memori.
* Ide saat ini: Buat objek js baru dan array baru. Saat melintasi array masuk, tentukan apakah nilainya adalah kunci dari objek js.
* Jika tidak, tambahkan kunci ke objek dan masukkan ke dalam array baru.
* Catatan: Saat menentukan apakah itu kunci objek js, "toString()" akan dieksekusi secara otomatis pada kunci yang masuk.
* Kunci yang berbeda mungkin salah dikira sama, seperti n[val]--n[1], n["1"];
* Untuk mengatasi masalah di atas, Anda tetap harus memanggil "indexOf". */
fungsi uniq(array){
    var temp = {}, r = [], len = array.panjang, val, tipe;
    untuk (var i = 0; saya < len; i++) {
        val = susunan[i];
        tipe = tipe val;
        jika (!temp[val]) {
            suhu[val] = [tipe];
            r.push(val);
        } else if (temp[val].indexOf(tipe) < 0) {
            temp[val].push(ketik);
            r.push(val);
        }
    }
    kembali r;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

3. Metode penghapusan yang berdekatan setelah penyortiran

/*
* Urutkan array yang masuk sehingga nilai yang sama berdekatan setelah pengurutan.
* Kemudian saat melakukan traversing, hanya nilai yang bukan duplikat dari nilai sebelumnya yang ditambahkan ke array baru.
*Akan mengganggu urutan array asli* */
fungsi uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.panjang; i++){
        if(array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    suhu kembali;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

4. Metode subskrip array

/*
*
* Anda masih harus memanggil "indexOf" dan kinerjanya mirip dengan metode 1.
* Ide implementasi: Jika item ke-i dari array saat ini pertama kali muncul di posisi selain i,
* Berarti item ke-i diulang dan diabaikan. Jika tidak, simpan array hasil.
* */
fungsi uniq(array){
    var suhu = [];
    for(var i = 0; i < array.panjang; i++) {
        //Jika item ke-i dari array saat ini pertama kali muncul di i dalam array saat ini, item tersebut akan disimpan dalam array; jika tidak, itu berarti duplikat if(array.indexOf(array[i]) == i) {
            temp.push(array[i])
        }
    }
    suhu kembali;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

5. Optimalkan metode traversal array

// Ide: Dapatkan nilai paling kanan tanpa pengulangan dan masukkan ke dalam array baru /*
*Metode yang disarankan*
* Kode implementasi metode ini cukup keren.
* Ide implementasi: Dapatkan nilai paling kanan tanpa duplikasi dan masukkan ke dalam array baru.
* (Ketika nilai duplikat terdeteksi, hentikan loop saat ini dan masuk ke putaran penilaian berikutnya dari loop tingkat atas) */
fungsi uniq(array){
    var suhu = [];
    var indeks = [];
    var l = array.panjang;
    untuk(var saya = 0; saya < l; saya++) {
        untuk(var j = saya + 1; j < l; j++){
            jika (array[i] === array[j]){
                saya++;
                j = saya;
            }
        }
        temp.push(array[i]);
        indeks.push(i);
    }
    konsol.log(indeks);
    suhu kembali;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));

4. Daftar horizontal menjadi struktur pohon

. Saat memilih departemen, apakah Anda sering melihat menu pohon seperti ini? kami biasanya membuat menu seperti ini? Silakan lihat~~

1. Metode disajikan secara khusus di sini:

const dataTree = [
        {id: 1, nama: 'Kantor Pusat', parentId: 0},
        {id: 2, nama: 'Cabang Shenzhen', parentId: 1},
        {id: 3, nama: 'Cabang Beijing', parentId: 1},
       {id: 4, nama: 'Departemen Litbang', parentId: 2},
        {id: 5, nama: 'Departemen Pemasaran', parentId: 2},
        {id: 6, nama: 'Departemen Pengujian', parentId: 2},
        {id: 7, nama: 'Departemen Keuangan', parentId: 2},
        {id: 8, nama: 'Departemen Operasi dan Pemeliharaan', parentId: 2},
        {id: 9, nama: 'Departemen Pemasaran', parentId: 3},
        {id: 10, nama: 'Departemen Keuangan', parentId: 3},
       
    ]
    fungsi changeData(data, parentId = 0) {
        let tree = [];//Membuat array kosong//Melintasi setiap bagian data data.map((item) => {
            //parentId di setiap bagian data sama dengan yang diteruskan if (item.parentId == parentId) {
                //Cari saja subset elemen ini untuk menemukan parentId==item.id di dalam elemen. Dengan cara ini, secara rekursif item.children = changeData(data, item.id);
                pohon.push(item);
            }
        })
        pohon kembali
    }
    console.log(changeData(dataTree, 0));

5. Menggabungkan item-item objek array yang sama

Sering kali kita jumpai pengolahan data saat menampilkan grafik, dan juga sering kita jumpai penggabungan item-item array. Berikut cara menggabungkan item-item array yang sama:

• Pertama, data arr array asli digunakan,
• lalu objek peta kosong dan array hasil kosong dibuat. Dengan menilai apakah peta berisi item tertentu, hasil array dinilai apakah akan menambahkan data,
• dan kemudian item yang sama adalah membandingkan dan menggabungkan dengan isi array hasil yang ada.

1. Blogger secara khusus mendedikasikan kode leluhur yang telah disimpan selama bertahun-tahun kepada semua bos di sini:

var arr = [
{"id":"1","name":"Chelizi","num":"245"},
{"id":"1","name":"Chelizi","num":"360"},
{"id":"2","name":"Apple","num":"120"},
{"id":"2","name":"Apple","num":"360"},
{"id":"2","name":"Apple","num":"180"},
{"id":"3","nama":"pisang","num":"160"},
{"id":"4","name":"Nanas","num":"180"},
{"id":"4","name":"Nanas","num":"240"}
];
var peta = {},hasil= [];
for(var i = 0; i < arr.panjang; i++){
varele = arr[i];
if(!map[ele.id]){
hasil.push({
id:ele.id,
nama: ele.nama,
nilai: ele.nilai
});
peta[ele.id] = ele;
}kalau tidak{
for(var j = 0; j < hasil.panjang; j++){
var dj = hasil[j];
if(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
merusak;
}
}
}
};
console.log(result);

Melihat hal tersebut, beberapa masalah umum pengolahan data di front end hampir teratasi. Tentu saja pada kenyataannya masih banyak masalah yang belum dimasukkan, dan akan ditindaklanjuti. Saya akan mengupdate dan memasukkannya secara perlahan. Di saat yang sama, saya juga berharap teman-teman yang kesulitan mengolah data JavaScript dapat berkomunikasi dengan blogger dan mereka yang memiliki ide pemecahan masalah yang baik juga dapat memberikan masukan kepada blogger.

Artikel ini memperkenalkan lima masalah pemrosesan data umum dalam proses pengembangan JavaScript dan memberikan solusi yang sesuai. Artikel ini pada dasarnya mencakup kebutuhan penggunaan dalam proses pengembangan sehari-hari. Membaca artikel ini dapat sangat meningkatkan keterampilan dasar JavaScript Anda dan Mampu merespons dengan cepat dan memberikan solusi.