Rumah hujung hadapan web tutorial js Cara menggunakan teknik Set dan WeakSet_javascript dalam ES6

Cara menggunakan teknik Set dan WeakSet_javascript dalam ES6

May 16, 2016 pm 03:11 PM
es6 set

ES6 menyediakan dua struktur data baharu-Set dan WeakSet. Set adalah serupa dengan tatasusunan, tetapi nilai pembolehubah ahli adalah unik dan tiada nilai pendua. WeakSet juga merupakan koleksi nilai unik, tetapi ia hanya boleh digunakan untuk menyimpan objek.

1. Penggunaan Set

(1)Set sendiri menyediakan pembina untuk menjana struktur data Set.

var s = new Set();
[2,2,2,5,8,16,2,1].map(x => s.add(x))

for(i of s){console.log(i)}
//2,5,8,16,1

Salin selepas log masuk

(2) Fungsi Set() boleh menerima tatasusunan sebagai parameter pembinaan untuk permulaan.

var s = new Set([1,2,3,4,2,4,3]);
[...s]
//[1,2,3,4]
Salin selepas log masuk

Nota: Penukaran jenis tidak berlaku apabila menambah nilai pada Set, jadi 5 dan "5" ialah dua nilai yang berbeza secara dalaman menentukan sama ada kedua-dua nilai adalah sama, menggunakan = ==, yang bermaksud kedua-dua objek sentiasa tidak sama. Satu-satunya perkara di luar senarai ialah NaN itu sendiri (pengendali kesaksamaan yang tepat menganggap NaN tidak sama dengan dirinya sendiri)

let set = new Set();
set.add({})
set.size//1
set.add({})
set.size//2
Salin selepas log masuk

Kemudian, kod di atas bermakna memandangkan kedua-dua objek kosong itu tidak betul-betul sama, ia adalah dua nilai yang berbeza.

(3)Tetapkan kaedah dan atribut

(3.1)Tetapkan atribut

Set.prototype.size: Mengembalikan bilangan ahli contoh Set.
Set.prototype.constructor: Fungsi set pembina lalai.

(3.2)Tetapkan fungsi operasi

tambah(nilai): Tambah nilai dan kembalikan struktur Set itu sendiri.
delete(value): Padamkan nilai tertentu dan kembalikan nilai Boolean yang menunjukkan pemadaman berjaya.
has(value): Mengembalikan nilai Boolean yang menunjukkan sama ada parameter ialah ahli Set.
clear(): Kosongkan semua ahli, tiada nilai pulangan.

set var = Set baharu();
set.add(1).add(2).add(22).add(22);
set.saiz//3

set.hae(22)//true
set.has(4)//false
set.delete(2)//true

(3.3)Tetapkan operasi lintasan

Set mempunyai empat kaedah traversal. Boleh digunakan untuk melintasi ahli.
keys(): Mengembalikan penyeberang nama kunci
values() : mengembalikan nilai traverser
entri(): Mengembalikan penyeberang pasangan nilai kunci
forEach(): Gunakan fungsi panggil balik untuk melintasi setiap ahli

Nota: Memandangkan Set tidak mempunyai nama kunci, hanya nama nilai, hasil yang dikembalikan oleh keys() dan values() adalah sama,

let set = new Set(['red','green','blue']);
for(let item of set.keys()){
console.log(item);
}
//red,green,blue
for(let item of set.values()){
console.log(item);
}
//red,green,blue
for(let item of set.entries()){
console.log(item);
}
//["red","red"]
//["green","green"]
//["blue","blue"]

//所以,entries方法返回的遍历器同时包括键名和值,所以每次输出的是一个数组。其实成员都是完全一样的。

Salin selepas log masuk

Nota: Set boleh dilalui secara lalai, dan fungsi penjanaan traverser lalainya ialah kaedah nilainya.
Ini bermakna anda boleh meninggalkan kaedah nilai dan terus digunakan untuk...untuk melintasi.

var set = new Set([1,2,3,4]);
for(let x of set){
console.log(x);
}
//1
//2
//3
//4
Salin selepas log masuk

Jika anda menggunakan operator hamparan (...), gelung for...of digunakan secara dalaman, jadi ia juga boleh digunakan untuk struktur Set.

let set = new Set(['red','green','blue']);
let arr = [...set];
//['red','green','blue'];
Salin selepas log masuk

(3.4)Set melaksanakan kesatuan, persilangan dan set beza

let set1 = new Set([1,2,3,4,5,6]);
let set2 = new Set([4,5,6,7,8,9]);

//并集
let union = new Set([...set1,...set2]);
//[1,2,3,4,5,6,7,8,9]
//交集
let intersect = new Set([...set1].filter(x => b.has(s)));
//[4,5,6]
//差集
let intersect = new Set([...set1].filter(x => !b.has(s)));
//[1,2,3,4]
Salin selepas log masuk

(3.5)Set melaksanakan penggunaan forEach

let set = new Set([1,2,3,4,5,6]);
set.forEach(value,key)=>consloe.log(vlaue+1);
//2
//3
//4
//5
//6
//7
Salin selepas log masuk

Nota: Parameter kaedah forEach ialah fungsi pemprosesan, yang seterusnya ialah koleksi (nilai kunci, nama kunci) itu sendiri. Di samping itu, kaedah forEach mempunyai parameter kedua, yang mewakili objek yang terikat.

2. Penggunaan WeakSet

WeakSet adalah serupa dengan Set dan juga merupakan koleksi nilai tidak berulang. Tetapi ia hanya boleh digunakan untuk menyimpan objek. Ia tidak boleh menjadi jenis nilai lain.
WeakSet ialah pembina. Boleh menerima tatasusunan dan objek seperti tatasusunan sebagai hujah. (Malah, sebarang objek dengan antara muka boleh lelar boleh digunakan sebagai parameter WeakSet). Semua ahli tatasusunan secara automatik akan menjadi ahli objek contoh WeakSet.
var a = baharu [[1,2],[3,4]]; var ws = WeakSet(a);

var ws = new WeakSet();
ws.add(1);//TypeError:Invalid value used in weak set 
ws.add(Symbol);//TypeError:Invalid value used in weak set 
Salin selepas log masuk
Tambahkan nilai dan Simbol, dan ralat akan dilaporkan pada masa yang sama.

Struktur WeakSet mempunyai kaedah berikut

WeakSet.protoptype.add(value): Tambah ahli baharu pada contoh WeakSet.
WeakSet.protoptype.delete(value): Padamkan ahli yang ditentukan bagi contoh WeakSet.
WeakSet.protoptype.has(value): Mengembalikan nilai Boolean yang menunjukkan sama ada nilai berada dalam contoh WeakSet.

var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window);//true
ws.has(foo);false
ws.delete(window);//true
ws.has(window);//false

Salin selepas log masuk
WeakSet tidak boleh dilalui kerana ahli adalah rujukan yang lemah dan boleh hilang pada bila-bila masa tidak dapat menjamin kewujudan ahli. Mungkin selepas tamat perjalanan, ahli-ahli sudah tidak ada lagi. Satu penggunaan WeakSet adalah untuk menyimpan nod DOM tanpa perlu risau tentang kebocoran memori apabila nod ini dialih keluar daripada dokumen.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penjelasan terperinci tentang fungsi Set tag dalam teg SQL dinamik MyBatis Penjelasan terperinci tentang fungsi Set tag dalam teg SQL dinamik MyBatis Feb 26, 2024 pm 07:48 PM

Tafsiran teg SQL dinamik MyBatis: Penjelasan terperinci tentang penggunaan teg Set MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik Ia menyediakan banyak teg SQL dinamik dan boleh membina pernyataan operasi pangkalan data secara fleksibel. Antaranya, tag Set ialah tag yang digunakan untuk menjana klausa SET dalam kenyataan UPDATE, yang sangat biasa digunakan dalam operasi kemas kini. Artikel ini akan menerangkan secara terperinci penggunaan teg Set dalam MyBatis dan menunjukkan kefungsiannya melalui contoh kod tertentu. Apakah itu Set tag Set tag digunakan dalam MyBati

Bagaimana untuk membalikkan tatasusunan dalam ES6 Bagaimana untuk membalikkan tatasusunan dalam ES6 Oct 26, 2022 pm 06:19 PM

Dalam ES6, anda boleh menggunakan kaedah reverse() objek tatasusunan untuk mencapai pembalikan tatasusunan Kaedah ini digunakan untuk membalikkan susunan elemen dalam tatasusunan, meletakkan elemen terakhir dahulu dan elemen pertama terakhir .reverse()". Kaedah reverse() akan mengubah suai tatasusunan asal Jika anda tidak mahu mengubah suainya, anda perlu menggunakannya dengan operator pengembangan "..." dan sintaksnya ialah "[...array].reverse() ".

Adakah async untuk es6 atau es7? Adakah async untuk es6 atau es7? Jan 29, 2023 pm 05:36 PM

async ialah es7. async dan await ialah penambahan baharu kepada ES7 dan merupakan penyelesaian untuk operasi asynchronous/wait boleh dikatakan sebagai gula sintaktik untuk modul bersama dan fungsi penjana, menyelesaikan kod tak segerak dengan semantik yang lebih jelas. Seperti namanya, async bermaksud "tak segerak".

Bagaimana untuk mencari item yang berbeza dalam dua tatasusunan dalam es6 Bagaimana untuk mencari item yang berbeza dalam dua tatasusunan dalam es6 Nov 01, 2022 pm 06:07 PM

Langkah-langkah: 1. Tukar dua tatasusunan untuk menetapkan jenis masing-masing, dengan sintaks "newA=new Set(a);newB=new Set(b);" 2. Gunakan has() dan filter() untuk mencari set perbezaan , dengan sintaks " new Set([...newA].filter(x =>!newB.has(x)))", elemen set perbezaan akan dimasukkan dalam koleksi set dan dikembalikan 3. Gunakan Array. daripada untuk menukar set menjadi Jenis tatasusunan, sintaks "Array.from(collection)".

Mengapakah program mini perlu menukar es6 kepada es5? Mengapakah program mini perlu menukar es6 kepada es5? Nov 21, 2022 pm 06:15 PM

Untuk keserasian pelayar. Sebagai spesifikasi baharu untuk JS, ES6 menambah banyak sintaks dan API baharu Walau bagaimanapun, penyemak imbas moden tidak mempunyai sokongan tinggi untuk ciri baharu ES6, jadi kod ES6 perlu ditukar kepada kod ES5. Dalam alat pembangun web WeChat, babel digunakan secara lalai untuk menukar kod sintaks ES6 pembangun kepada kod ES5 yang disokong dengan baik oleh ketiga-tiga terminal, membantu pembangun menyelesaikan masalah pembangunan yang disebabkan oleh persekitaran yang berbeza hanya dalam projek Hanya konfigurasi dan semak Pilihan "ES6 hingga ES5".

Apakah maksud zon mati sementara es6? Apakah maksud zon mati sementara es6? Jan 03, 2023 pm 03:56 PM

Dalam es6, zon mati sementara ialah ralat sintaks, yang merujuk kepada arahan let dan const yang menjadikan blok membentuk skop tertutup. Dalam blok kod, sebelum pembolehubah diisytiharkan menggunakan perintah let/const, pembolehubah tidak tersedia dan tergolong dalam "zon mati" pembolehubah sebelum pembolehubah diisytiharkan ini secara sintaksis dipanggil "zon mati sementara". ES6 menetapkan bahawa promosi pembolehubah tidak berlaku dalam zon mati sementara dan pernyataan let dan const, terutamanya untuk mengurangkan ralat masa jalan dan menghalang pembolehubah daripada digunakan sebelum ia diisytiharkan, yang mungkin membawa kepada tingkah laku yang tidak dijangka.

Bagaimana untuk melaksanakan deduplikasi tatasusunan dalam es5 dan es6 Bagaimana untuk melaksanakan deduplikasi tatasusunan dalam es5 dan es6 Jan 16, 2023 pm 05:09 PM

Dalam es5, anda boleh menggunakan fungsi for dan indexOf() untuk mencapai deduplikasi tatasusunan Sintaks "for(i=0;i<array length;i++){a=newArr.indexOf(arr[i]);if(. a== -1){...}}". Dalam es6, anda boleh menggunakan operator spread, Array.from() dan Set untuk mengalih keluar penduaan anda perlu terlebih dahulu menukar tatasusunan menjadi objek Set untuk mengalih keluar pendua, dan kemudian menggunakan fungsi spread atau Array.from() untuk tukar objek Set kembali kepada kumpulan Just.

Adakah peta es6 dipesan? Adakah peta es6 dipesan? Nov 03, 2022 pm 07:05 PM

Peta dipesan. Jenis peta dalam ES6 ialah senarai tersusun yang menyimpan banyak pasangan nilai kunci Nama kunci dan nilai yang sepadan menyokong semua jenis data, kesetaraan nama kunci dinilai dengan memanggil kaedah "Objext.is()". , jadi nombor 5 dan rentetan "5" akan dinilai sebagai dua jenis, dan boleh muncul dalam program sebagai dua kekunci bebas.

See all articles