Ringkasan dan berbagi fungsi operasi array JavaScript

Array Advanced

memperkenalkan konsep dasar array dan beberapa fungsi operasi elemen array sederhana Faktanya, array menyediakan lebih banyak fungsi.

push , pop , shift dan unshift adalah fungsi yang beroperasi pada kedua ujung array. Fungsi-fungsi tersebut telah disebutkan di atas dan tidak akan diulangi dalam artikel ini.

Penghapusan elemen (metode objek)

telah diperkenalkan secara singkat di artikel sebelumnya. Array adalah objek khusus, jadi kita dapat mencoba menggunakan metode penghapusan atribut objek: delete .

Contoh:

let arr = [1,2,3,4,5];delete arr[2];console.log(arr);

Hasil eksekusi kodenya adalah sebagai berikut:

Perhatikan posisi kuning pada gambar, meskipun elemen telah dihapus, panjang array tetap 5 , dan terdapat空tambahan pada posisi terhapus. Jika kita mengakses elemen dengan indeks 2 , kita akan mendapatkan hasil sebagai berikut:

Alasan untuk fenomena ini adalah delete obj.key menghapus nilai terkait melalui key , artinya, delete arr[2] menghapus pasangan nilai kunci 2:3 dalam array. Saat kita mengakses subskrip 2 , subskrip tersebut undefined .

Dalam sebuah array, kita sering berharap setelah menghapus suatu elemen, posisi elemen tersebut akan terisi oleh elemen berikutnya dan panjang array akan menjadi lebih pendek.

Saat ini, kita memerlukan metode splice() .

splice()

Perlu diperhatikan terlebih dahulu bahwa metode splice() cukup serbaguna dan tidak hanya menghapus elemen saja. Berikut sintaksnya:

arr.splice(start[,deleteCount,e1,e2,...,eN] )

metode splice Mulai dari posisi start , hapus elemen deleteCount , lalu masukkan e1,e2,e3 dan elemen lainnya pada tempatnya.

Menghapus sebuah elemen

Contoh berikut dapat menghapus sebuah elemen dari array:

let arr = [1,2,3,4,5]arr.splice(0,1);//Hapus elemen pertama 1console.log(arr)

The kode di atas menghapus 1 pada posisi pertama dalam array. Hasil eksekusinya adalah sebagai berikut:

Menghapus beberapa elemen

sama dengan menghapus satu elemen. Anda hanya perlu mengubah parameter kedua ke angka yang ditentukan

. ;//Hapus tiga elemen pertama console.log(arr);//[4,5]

Hasil eksekusi kodenya adalah sebagai berikut:

Memotong array.

Jika kita hanya menyediakan satu parameter start , maka semua elemen setelah posisi start array akan dihapus

. //Hapus Console.log(arr);//[1,2] 
hasil eksekusi kode
 dari subskrip 2 dan semua elemen berikutnya

Penggantian elemen

Jika kita menyediakan lebih dari dua parameter, kita dapat mengganti elemen array, misalnya:

let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

Hasil eksekusi kodenya adalah sebagai berikut:

Kode di atas sebenarnya melakukan operasi dua langkah, pertama menghapus 2 elemen mulai dari 0 , dan kemudian memasukkan tiga elemen baru pada posisi 0 .

Penyisipan elemen

Jika kita mengubah parameter kedua (jumlah penghapusan) menjadi 0 , maka kita hanya dapat menyisipkan elemen tanpa menghapus elemen. Contoh:

let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

Nilai yang dikembalikan

Fungsi splice() akan mengembalikan array elemen yang dihapus, misalnya:

let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

Hasil eksekusi kode:

Indeks negatif

Kita dapat menggunakan angka negatif untuk menunjukkan posisi di mana memulai elemen operasi, misalnya:

let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']

Hasil eksekusi kodenya adalah sebagai berikut:

irisan()

Metode slice() dapat mencegat larik dalam rentang tertentu. Sintaksnya adalah sebagai berikut:

arr.slice([mulai],[akhir])

mengembalikan larik baru yang dimulai dari start dan berakhir di end , tetapi tidak termasuk end .

Contoh:

misalkan arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]

Hasil eksekusi kode:

slice() juga dapat menggunakan subskrip negatif:

let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr . irisan(-5,-1))//[1,2,3,4]

Hasil eksekusi kodenya adalah sebagai berikut:

Jika Anda hanya menyediakan satu parameter ke metode slice() , parameter tersebut akan terpotong hingga akhir array seperti halnya splice() .

concat()

Fungsi concat() dapat menggabungkan beberapa array atau tipe nilai lainnya ke dalam array yang panjang. Sintaksnya adalah sebagai berikut:

arr.concat(e1, e2, e3)

Kode di atas akan mengembalikan array baru, dan array baru digabungkan dengan arr Ini dibentuk oleh e1 , e2 dan e3 .

Contoh:

let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))

Hasil eksekusi kodenya sebagai berikut:

Objek biasa, meskipun terlihat sama dengan objek, tetap dimasukkan ke dalam array secara keseluruhan, contoh:

let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj))

hasil eksekusi kode:

Namun, jika objek memiliki properti Symbol.isConcatSpreadable , maka akan diperlakukan sebagai array:

let arr = [1,2]let obj = {0:'x',
           1: 'kamu',
           [Symbol.isConcatSpreadable]: benar,
           length:2 }console.log(arr.concat(obj))

hasil eksekusi kode:

forEach()

melintasi seluruh array dan menyediakan fungsi operasi untuk setiap elemen array. Sintaks:

let arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})

Contoh aplikasi:

let arr = [1,2,3,4,5]arr.forEach((itm)=>{
    console.log(itm)})

hasil eksekusi kode:

biarkan arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] di [${array}] adalah ${itm}`)})

hasil eksekusi kode:

indexOf, lastIndexOf, dan include

mirip dengan string. indexOf , lastIndexOf , dan includes dapat digunakan dengan subskrip elemen yang ditentukan dalam larik kueri:

1. arr.indexOf(itm,start) : itm mulai dari posisi start . Jika ditemukan, kembalikan subskripnya, jika tidak, kembalikan -1 ;
2. arr.lastIndexOf(itm,start) : Cari seluruh array dalam urutan terbalik hingga start , dan kembalikan subskrip pertama yang ditemukan (yaitu, item terakhir yang cocok dalam array). Jika tidak ditemukan, kembalikan -1 ;
3. arr.includes(itm,start) : Cari itm dari posisi start , kembalikan true jika ditemukan, jika tidak false

false

; 6,"7","8","9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole.log(arr.includes(9))//false

Metode ini menggunakan === saat membandingkan elemen array, jadi false dan 0 berbeda.

Penanganan NaN

NaN adalah bilangan khusus, dan terdapat perbedaan halus di antara ketiganya dalam menangani NaN :

let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole. log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1Alasan

hasil ini terkait dengan karakteristik NaN itu sendiri, yaitu NaN tidak sama dengan bilangan berapa pun , termasuk dirinya sendiri.

Isinya sudah dibahas pada bab sebelumnya. Untuk sepatu anak yang terlupakan, ingatlah untuk meninjau masa lalu dan mempelajari yang baru.

Find dan findIndex

sering kali menemukan array objek selama proses pemrograman, dan objek tidak dapat dibandingkan secara langsung menggunakan === .

Saat ini, Anda perlu menggunakan metode find dan findIndex . Sintaksnya adalah sebagai berikut:

let result = arr.find(function(itm,idx,array){
    //elemen array itm //subskrip elemen idx //array array itu sendiri //memasukkan fungsi penilaian, jika fungsi mengembalikan nilai true, kembalikan objek saat ini itm})

Misalnya, kita mencari objek yang atribut name sama dengan xiaoming :

biarkan arr =[
    {id:1,nama:'xiaoming'},
    {id:2,nama:'xiaohong'},
    {id:3,nama:'xiaojunn'},]biarkan xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

hasil eksekusi kode:

Jika tidak ada objek yang memenuhi ketentuan, undefined akan dikembalikan.

Kode di atas juga dapat disederhanakan menjadi:

let xiaoming = arr.find((itm)=> itm.name == 'xiaoming').

Efek eksekusinya persis sama.

Tujuan dari arr.findIndex(func) hampir sama dengan arr.find(func) Satu-satunya perbedaan adalah arr.findIndex mengembalikan subskrip dari objek yang memenuhi syarat, bukan objek itu sendiri -1 .

filter

find dan findIndex hanya dapat menemukan satu objek yang memenuhi persyaratan. Jika ada beberapa objek yang memenuhi persyaratan dalam sebuah array, Anda perlu menggunakan metode filter . Sintaksnya adalah sebagai berikut:

let results = arr.filter(function( itm,idx,array){
    //Penggunaan yang sama seperti find, namun akan mengembalikan array objek yang memenuhi persyaratan //Jika tidak ditemukan, array kosong akan dikembalikan})

Contoh:

let arr =[
    {id:1,nama:'xiaoming'},
    {id:2,nama:'xiaohong'},
    {id:3,nama:'xiaojunn'},]biarkan res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

hasil eksekusi kode:

map

arr.map dapat memanggil fungsi pada setiap objek array dan kemudian mengembalikan array yang diproses. Ini adalah salah satu metode array yang paling berguna dan penting.

Sintaks:

biarkan arrNew = arr.map(function(itm,idx,array){
    //Kembalikan hasil baru})

Misalnya, kembalikan array panjang yang sesuai dengan array string:

let arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]

hasil eksekusi kode:

sort

arr.sort mengurutkan array pada tempatnya dan mengembalikan array yang diurutkan. Namun, karena array asli telah diubah, nilai yang dikembalikan sebenarnya tidak ada artinya.

Apa yang disebut penyortiran di tempat berarti mengurutkan dalam ruang array asli alih-alih membuat array baru

eksekusi kode

let arr = ['a','c','b']arr.sort()console.log(arr)

hasil:

Perhatikan bahwa secara default, metode sort mengurutkan berdasarkan abjad , yang cocok untuk pengurutan string. Jika Anda ingin mengurutkan jenis array lain, Anda perlu menyesuaikan metode perbandingan

untuk array numerik,

misalkan arr = [1,3,2] arr.sort(fungsi(a,b){
    jika(a > b)mengembalikan 1;
    jika(a < b)mengembalikan -1;
    return 0;})

Hasil eksekusi kode:

Fungsi sort menggunakan algoritma quick sort secara internal, atau bisa juga algoritma timsort , namun kita tidak perlu mempedulikannya, kita hanya perlu memperhatikan fungsi perbandingannya.

Fungsi perbandingan dapat mengembalikan nilai numerik apa pun, angka positif berarti > , angka negatif berarti < , dan 0 berarti sama, sehingga kita dapat menyederhanakan metode perbandingan numerik:

misalkan arr = [1,3,2]arr.sort(( a,b)=> a - b)

Jika ingin mengurutkan terbalik, cukup tukar posisi a dan b :

misalkan arr = [1,3,2]arr.sort((a,b)=> b - a)

string

Lupa menggunakan metode str.localeCompare(str1) untuk perbandingan string?

let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))

hasil Eksekusi kode:

reverse

arr.reverse digunakan untuk array terbalik

let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

Tidak ada yang perlu dikatakan tentang ini.

str.split() dan arr.join()

Ingat fungsi pemisahan string? Fungsi pemisahan string dapat membagi string menjadi array karakter:

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

Tidak populer pengetahuan, fungsi split memiliki parameter kedua, yang dapat membatasi panjang array yang dihasilkan

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong' ]

Metode arr.join() adalah kebalikan dari metode split . Metode ini dapat menggabungkan array menjadi string.

Contoh:

let arr = [1,2,3]let str = arr.join(';')console.log(str)

hasil eksekusi kode:

kurangi, kurangi Kanan

Metode arr.reduce mirip dengan metode arr.map , keduanya meneruskan suatu metode dan kemudian memanggil metode ini pada elemen array secara berurutan. Perbedaannya adalah ketika metode app.map memproses elemen array, masing-masing pemanggilan elemen bersifat independen, dan arr.reduce akan meneruskan hasil panggilan elemen sebelumnya ke metode pemrosesan elemen saat ini.

Sintaks:

biarkan res = arr.reduce(function(prev,itm,idx,array){
    //prev adalah hasil yang dikembalikan oleh pemanggilan elemen sebelumnya //init akan berfungsi sebagai hasil pemanggilan elemen sebelumnya ketika elemen pertama dieksekusi}, [init])

Bayangkan saja, bagaimana mengimplementasikan penjumlahan elemen array yang terdiri dari angka? Tidak ada cara untuk mengimplementasikan peta. Saat ini, Anda perlu menggunakan arr.reduce :

let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15

Proses eksekusi kodenya adalah sebagai berikut:

arr.reduceRight memiliki tujuan yang sama dengan arr.reduce , hanya saja metode dipanggil pada elemen dari kanan ke kiri.

Array.isArray()

Array adalah kasus khusus objek. Menggunakan typeof tidak dapat secara akurat membedakan perbedaan antara keduanya:

console.log(typeof {})//objectconsole.log(typeof [])//object

Keduanya adalah objek, kami perlu menggunakan metode Array.isArray() untuk membuat penilaian lebih lanjut:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true

some, every

arr.some(func) dan arr.every(func) metode digunakan untuk memeriksa angka, dan mekanisme eksekusinya mirip dengan map .

some

true metode yang diteruskan pada setiap elemen array false Jika metode mengembalikan true , ia segera mengembalikan true .

every

mengeksekusi metode yang diteruskan pada setiap elemen array, mengembalikan true jika semua elemen mengembalikan true , jika tidak maka akan mengembalikan false .

Misalnya:

misalkan arr = [1,2,3,4,5]//Tentukan apakah ada elemen yang lebih besar dari 2 dalam array console.log(arr.some((itm)=>{
    if(itm > 2)return true;}))//true//Tentukan apakah semua elemen lebih besar dari 2console.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

Di semua metode array, kecuali sort , ada parameter tetap yang tidak umum thisArg . Sintaksnya adalah sebagai berikut:

arr.find(func,thisArg)arr.filter( func,thisArg)arr.map(func,thisArg)

Jika kita meneruskan thisArg , maka akan menjadi this di func .

Parameter ini tidak banyak berguna dalam keadaan normal, tetapi jika func adalah metode anggota (metode suatu objek), dan this digunakan dalam metode, maka thisArg akan sangat berarti.

Misalnya:

misalkan obj = {
    nomor: 3,
    fungsi(itm){
        konsol.log(ini)
        kembalikan > this.num;//Temukan angka yang lebih besar dari 3}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr)

hasil eksekusi kode:

Di sini kita dapat melihat bahwa keluaran this di func adalah nilai thisArg yang kita masukkan.

Jika kita menggunakan metode anggota objek tanpa menentukan nilai thisArg , this akan menjadi undefined , yang mengakibatkan kesalahan program.