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

Cara menggunakan teknik Set dan WeakSet_javascript dalam ES6

WBOY
Lepaskan: 2016-05-16 15:11:09
asal
1363 orang telah melayarinya

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.

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan