Metode array baru: 1. from(), yang dapat mengubah objek seperti array atau objek yang dapat diubah menjadi array nyata; 2. of(), yang dapat mengubah sekumpulan nilai menjadi array, yang menutupi kekurangannya dari konstruktor array Array() ; 3. find() dan findIndex(), mengembalikan elemen array pertama yang memenuhi ketentuan;
Cara cepat memulai VUE3.0: Masuk ke
lingkungan pengoperasian tutorial ini: Sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
1. Array.from()
Metode Array.from digunakan untuk mengubah dua jenis objek menjadi array nyata:
objek seperti array dan
objek yang dapat diubah (termasuk ES6 baru Struktur data Set dan Peta)
berarti selama saat struktur data antarmuka Iterator diterapkan, Array.from dapat mengubahnya menjadi array.
Dalam pengembangan sebenarnya, biasanya dapat digunakan untuk mengonversi koleksi NodeList yang dikembalikan oleh operasi DOM, serta argumen di dalam fungsi.
Ketikaobjek
melewati parameter, itu digunakan untuk mengubah array kelas menjadi
array array nyata untuk menghilangkan duplikasi.
konstanta arr = [1,2,3,3,3,2,5]; console.log(Array.dari(Set baru(arr))); //[1,2,3,5] //...Efek yang sama juga dapat dicapai console.log([...new Set(arr)]) //[1,2,3,5]
Untuk browser yang tidak menerapkan metode ini, Anda dapat menggunakan Array.prototipe.metode irisan alih-alih
cosnt toArray = (() => {
Array.dari ? Array.dari : obj => [].slice.call(obj)
})() juga dapat menerima parameter kedua, yang diteruskan ke fungsi untuk mencapai efek yang mirip dengan metode peta, memproses setiap elemen dan mengembalikan array yang diproses
Array.from([1,2,3 ], item => item *2) //[2,4,6]
Panjang string yang dikembalikan
dapat digunakan untuk mengubah string menjadi array, dan kemudian mengembalikan panjang string, karena dapat menangani berbagai karakter Unicode dengan benar, Hal ini menghindari Bug JS sendiri dalam menghitung karakter Unicode yang lebih besar dari /uFFFF sebagai 2 karakter
function countLength(string) {
kembalikan Array.dari(string).panjang
} 2. Array.of()
Metode Array.of digunakan untuk mengubah sekumpulan nilai menjadi array. Mengganti kekurangan konstruktor array Array(). Karena jumlah parameternya berbeda, perilaku Array() akan berbeda
//Kode berikut menunjukkan perbedaannya Array.of(3);
Array.dari(3, 11, 8); // [3,11,8]
Array baru(3); // [, , ,]
Array baru(3, 11, 8); // [3, 11, 8]
//Metode Array.of dapat disimulasikan dengan kode berikut.
fungsi ArrayOf() {
return [].slice.call(argumen);
} 3. Find() dan findIndex() dari instance array.
find()
mengembalikan anggota array pertama yang memenuhi ketentuan. Parameternya adalah fungsi panggilan balik. Semua anggota array menjalankan fungsi ini secara berurutan hingga anggota array pertama yang memenuhi ketentuan ditemukan. anggota, dan kemudian kembalikan anggota. Jika tidak ada anggota yang memenuhi kondisi, kembalikan tidak terdefinisi.
Fungsi panggilan balik dari metode ini menerima tiga parameter: nilai saat ini, posisi saat ini,
contoh array asli 1
[1,12,4 ,0,5] .find((item,index, arr) => mengembalikan item < 1) // 0
Contoh 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
konsol.log(item); // -5
// find juga mendukung pencarian kompleks semacam ini var points = [
{
x: 10,
kamu: 20
},
{
x: 20,
kamu: 30
},
{
x: 30,
kamu: 40
},
{
x: 40,
kamu: 50
},
{
x: 50,
kamu: 60
}
];
poin.find(fungsi pencocokan(titik) {
titik balik.x % 3 == 0 && titik.y % 4 == 0;
}); // { x: 30, y: 40 } Penulisan dan penggunaan findIndex()
pada dasarnya sama dengan metode find(). Ia hanya mengembalikan posisi anggota array pertama yang memenuhi syarat Jika ada tidak ada, ia mengembalikan -1.
Contoh 1
[1 ,2,4,15,0].findIndex((item, indeks,arr) => mengembalikan item > 10) //3Contoh
2
var points = [
{
x: 10,
kamu: 20
},
{
x: 20,
kamu: 30
},
{
x: 30,
kamu: 40
},
{
x: 40,
kamu: 50
},
{
x: 50,
kamu: 60
}
];
poin.findIndex(fungsi pencocokan(titik) {
titik balik.x % 3 == 0 && titik.y % 4 == 0;
}); // 2
poin.findIndex(fungsi pencocokan(titik) {
titik balik.x % 6 == 0 && titik.y % 7 == 0;
}); //1 4. Metode fill(
// Metode pengisian mengisi array dengan nilai tertentu.
var fillArray = Array baru(6).isi(1);
konsol.log(isiArray); //[1, 1, 1, 1, 1, 1]
//Metode pengisian juga dapat menerima parameter kedua dan ketiga, yang digunakan untuk menentukan posisi awal dan akhir pengisian.
["a", "b", "c"].isi(7, 1, 2);
// ['a', 7, 'c']
// Perhatikan bahwa jika tipe yang diisi adalah objek, maka objek yang ditetapkan adalah alamat memori yang sama, bukan objek salinan dalam.
biarkan arr = Array baru(3).isi({
nama: "Mike"
});
arr[0].nama = "Ben";
konsol.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] Kedua metode dapat menemukan NaN dalam array, tetapi indexOf() di ES5 tidak dapat menemukan NaN
metode entri(), kunci() dannilai
() dari instance array
semuanya digunakan untuk melintasi array, dan semuanya mengembalikan objek traverser. Perulangan for...of dapat digunakan untuk melintasi array.
kunci() adalah sepasang nama kunci. Penjelajahan
nilai() adalah penjelajahan nilai kunci.
entri() adalah penjelajahan pasangan nilai kunci
untuk (biarkan indeks ["a", "b"].kunci ()) {
konsol.log(indeks);
}
// 0 1
for (biarkan elemen dari ["a", "b"].values()) {
konsol.log(elemen);
}
//ab
for (biarkan [indeks, elem] dari ["a", "b"].entries()) {
console.log(indeks, elemen);
}
// 0 "sebuah"
// 1 "b"
var a = [1, 2, 3];
[...a.nilai()]; // [1,2,3]
[...a.kunci()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. Metode include() mengembalikan nilai
Boolean , menunjukkan apakah suatu array berisi nilai tertentu
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
juga dapat menerima parameter kedua, yang menunjukkan posisi awal pencarian, defaultnya adalah 0. Jika parameter kedua adalah angka negatif, ini menunjukkan posisi angka tersebut. Jika parameter kedua lebih besar dari panjang array, metode include dimulai dari subskrip 0
untuk menutupi kekurangan metode indexOf yang tidak cukup semantik dan salah menilai NaN
[1, 23, NaN].includes(NaN) //
metode yang benar-benar kompatibel:
fungsi berisi = ( () => {
Array.prototipe.termasuk
?(arr , val) => arr.termasuk(val)
:(arr , val) => arr.some(barang => kembalikan barang === val)
})() 7. Flat() dari instance array, flatMap()
// flat()
[1, 2, [3, [4, 5]]].datar()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].datar(2)
// [1, 2, 3, 4, 5]
//Peta datar()
[2, 3, 4].flatMap((x) => [x, x * 2])
//Setelah peta dieksekusi, itu adalah [[2, 4], [3, 6], [4, 8]]
//Kemudian jalankan metode flat() untuk mendapatkan hasil sebagai berikut // [2, 4, 3, 6, 4, 8]
// flatMap() hanya dapat memperluas satu level array.
// Setara dengan .flat()
[1, 2, 3, 4].peta datar(x => [
[x*2]
])
//Setelah peta dieksekusi, itu adalah [[[2]], [[4]], [[6]], [[8]]]
//Kemudian jalankan metode flat() untuk mendapatkan hasil berikut // [[2], [4], [6], [8]] Salin kode 8. copywithin() dari instance array
akan menyalin anggota di posisi yang ditentukan di dalam larik saat ini. Salin ke posisi lain, lalu kembali ke larik saat ini, yang akan mengubah larik asli
untuk menerima tiga parameter:
1. target (wajib) mulai mengganti data dari posisi ini
2. mulai (opsional) mulai membaca data dari posisi ini, defaultnya adalah 0, Jika angka negatif berarti
berhenti membaca data sebelum mencapai angka 3 dan berakhir (opsional). Jika berupa angka negatif, berarti
ketiga parameter tersebut harus berupa angka. Jika tidak, maka secara otomatis akan dikonversi ke nilai numerik
[1,2,3,4,5].copywithin(0,3 /); /[4,5,3 ,4,5] berarti anggota dari subskrip 3 sampai akhir (4,5) disalin ke posisi mulai dari subskrip 0, dan yang asli 1 dan 2 diganti.