Koleksi ES6: Menggunakan peta, set, lemah, lemah

Artikel ini meneroka empat koleksi ES6 baru dan manfaat yang mereka bawa.

Kebanyakan bahasa pengaturcaraan utama mempunyai beberapa jenis koleksi data. Python mempunyai senarai, tuples, dan kamus. Java mempunyai senarai, koleksi, peta, dan beratur. Ruby mempunyai hash dan array. Setakat ini, JavaScript hanya mempunyai tatasusunan. Objek dan tatasusunan adalah pembantu kanan JavaScript. ES6 memperkenalkan empat struktur data baru yang akan meningkatkan keupayaan yang kuat dan ekspresif bahasa: peta, set, lemah dan lemah.

mata utama

ES6 memperkenalkan empat struktur data baru: peta, set, lemah dan lemah. Koleksi ini membolehkan pengaturcaraan JavaScript yang lebih ekspresif dan berkuasa.
Peta dan ditetapkan dalam ES6 adalah koleksi pasangan nilai utama mana-mana jenis. Mereka dioptimumkan untuk mendapatkan semula cepat dan menyediakan kaedah untuk menambah, memadam, dan gelung melalui nilai. Walau bagaimanapun, mereka memegang rujukan yang kuat kepada objek, yang boleh mahal jika objeknya besar dan tidak lagi diperlukan.
ES6 juga memperkenalkan lemah dan lemah, yang sama dengan MAP dan menetapkan tetapi memegang rujukan lemah kepada objek. Ini bermakna apabila objek ini tidak lagi diperlukan, mereka boleh dikumpulkan sampah, yang sangat bermanfaat untuk pengurusan ingatan.
Walaupun koleksi ES6 baru memberikan fleksibiliti yang lebih besar, dalam banyak kes, objek JavaScript masih boleh digunakan sebagai koleksi. Apabila memutuskan sama ada untuk menggunakan objek atau koleksi yang diketuai, pemaju harus mempertimbangkan faktor-faktor seperti keperluan untuk carian utama dinamik, pertukaran nilai, dan kekerapan menambah atau memadam pasangan nilai kunci.

Mencari hashmap JavaScript

hashmap, kamus, dan hash adalah beberapa cara di mana pelbagai bahasa pengaturcaraan menyimpan pasangan nilai kunci, dan struktur data ini dioptimumkan untuk mendapatkan semula cepat.

Dalam ES5, objek JavaScript (hanya apa -apa koleksi sifat dengan kunci dan nilai) boleh mensimulasikan hash, tetapi terdapat beberapa kelemahan untuk menggunakan objek sebagai hash.

Kelemahan#1: Kunci dalam ES5 mestilah rentetan

kekunci harta benda JavaScript mestilah rentetan, yang mengehadkan keupayaan mereka untuk menjadi koleksi pasangan nilai utama jenis data yang berbeza. Sudah tentu, anda boleh membuang jenis data lain ke rentetan, tetapi ini menambah kerja tambahan.

Kelemahan#2: Objek tidak semestinya

Objek tidak direka sebagai koleksi, jadi tidak ada cara yang berkesan untuk menentukan berapa banyak atribut objek yang ada. (Sebagai contoh, Object.keys adalah perlahan). Apabila anda gelung melalui sifat objek, anda juga mendapat sifat prototaipnya. Anda boleh menambah sifat -sifatnya kepada semua objek, tetapi tidak semua objek dimaksudkan untuk digunakan sebagai koleksi. Anda boleh menggunakan untuk ... dalam kaedah Loop dan HasownProperty (), tetapi ini hanya penyelesaian. Apabila anda gelung melalui sifat objek, sifat tidak semestinya diambil mengikut urutan yang dimasukkan.

Kelemahan #3: Cabaran Konflik Kaedah Terbina

Objek mempunyai kaedah terbina dalam seperti pembina, toString, dan valueof. Jika salah satu daripada mereka ditambah sebagai harta, ia boleh menyebabkan konflik. Anda boleh membuat objek telanjang (tidak diwarisi dari object.prototype) menggunakan object.create (null), tetapi ini masih hanya penyelesaian.

ES6 mengandungi jenis data koleksi baru, jadi tidak lagi perlu menggunakan objek dan menahan kelemahan mereka.

menggunakan koleksi peta ES6

Peta adalah struktur data pertama/set yang akan kita periksa. Peta adalah koleksi pasangan nilai utama dari mana-mana jenis. Sangat mudah untuk membuat peta baru, menambah/mengeluarkan nilai, gelung melalui kunci/nilai, dan dengan berkesan menentukan saiznya. Berikut adalah kaedah utama:

Buat peta dan gunakan kaedah biasa

const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True

Jalankan contoh ini di jsbin

menggunakan set

set adalah senarai nilai yang diperintahkan, tanpa pendua. Set tidak diindeks seperti array, tetapi diakses menggunakan kekunci. Set sudah ada di Java, Ruby, Python, dan banyak bahasa lain. Satu perbezaan antara set ES6 dan set dalam bahasa lain ialah perintah itu penting dalam ES6 (bukan dalam banyak bahasa lain). Berikut adalah kaedah set utama:

const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0

Jalankan contoh ini di jsbin

Koleksi lemah, memori dan koleksi sampah

Koleksi sampah JavaScript adalah satu bentuk pengurusan memori di mana objek yang tidak lagi dirujuk akan dipadamkan secara automatik dan sumber mereka akan dikitar semula.

peta dan tetapkan rujukan kepada objek dipaksa dipegang dan pengumpulan sampah tidak dibenarkan. Ini boleh menjadi mahal jika peta/set merujuk objek besar yang tidak lagi diperlukan (seperti elemen DOM yang telah dikeluarkan dari DOM).

Untuk menyelesaikan masalah ini, ES6 juga memperkenalkan dua set lemah baru yang dipanggil lemah dan lemah. Koleksi ES6 ini "lemah" kerana mereka membenarkan objek yang tidak lagi perlu dibersihkan dari ingatan.

lemah

Beakmap adalah koleksi ES6 baru yang kami diperkenalkan. Lemmap adalah serupa dengan peta biasa, tetapi mempunyai kaedah yang lebih sedikit dan terdapat perbezaan di atas dalam pengumpulan sampah.

const aboutAuthor = new WeakMap(); // 创建新的WeakMap
const currentAge = {}; // 键必须是对象
const currentCity = {}; // 键必须是对象

aboutAuthor.set(currentAge, 30); // 设置键值
aboutAuthor.set(currentCity, 'Denver'); // 键值可以是不同数据类型

console.log(aboutAuthor.has(currentCity)); // 测试WeakMap是否包含键

aboutAuthor.delete(currentAge); // 删除键

Kes Pengguna

Weakmap mempunyai beberapa kes penggunaan popular. Mereka boleh digunakan untuk menyimpan data peribadi objek peribadi, atau untuk mengesan nod/objek DOM.

Kes Penggunaan Data Persendirian

Contoh berikut berasal dari pakar JavaScript Nicholas C. Zakas:

var Person = (function() {
  var privateData = new WeakMap();

  function Person(name) {
    privateData.set(this, { name: name });
  }

  Person.prototype.getName = function() {
    return privateData.get(this).name;
  };

  return Person;
}());

Menggunakan lemah di sini memudahkan proses menyimpan data objek peribadi. Objek orang boleh dirujuk, tetapi privatedataweakmap tidak dibenarkan untuk mengakses jika tidak ada contoh orang tertentu.

node dom menggunakan kes

Projek Polimer Google menggunakan lemah dalam coretan kod yang dipanggil PositionWalker.

PositionWalker menjejaki lokasi di subtree DOM sebagai nod semasa dan mengimbangi dalam nod itu.

Weakmap digunakan untuk mengesan penyuntingan, pemadam dan perubahan nod DOM:

const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True

lemah

BeakSet adalah satu set set yang unsur -unsurnya boleh dikumpulkan apabila objek yang mereka rujuk tidak lagi memerlukan. Lemah tidak membenarkan lelaran. Kes penggunaannya agak terhad (sekurang -kurangnya buat masa ini). Kebanyakan pengangkut awal berkata lemah boleh digunakan untuk menandakan objek tanpa mengubahnya. ES6 Features.org mempunyai contoh menambah dan mengeluarkan unsur-unsur dari lemah untuk menjejaki sama ada objek telah ditandakan:

const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0

peta semua perkara? Rekod dan koleksi ES6

Peta dan set adalah koleksi ES6 baru yang bagus dari pasangan nilai utama. Iaitu, objek JavaScript masih boleh digunakan sebagai koleksi dalam banyak kes. Tidak perlu beralih ke koleksi ES6 baru melainkan keadaannya memerlukannya.

MDN mempunyai senarai soalan yang baik untuk menentukan kapan menggunakan objek atau koleksi yang dikunci:

Adakah kekunci
• biasanya tidak diketahui sehingga mereka dijalankan? Adakah anda perlu mencari mereka secara dinamik?
• Semua nilai mempunyai jenis yang sama dan boleh digunakan secara bergantian?
• Adakah anda memerlukan kunci yang bukan rentetan?
• Adakah pasangan nilai utama ditambah atau dipadam dengan kerap?
• Adakah anda mempunyai nombor (mudah berubah) pasangan nilai kunci?
• Adakah koleksi itu berulang?

koleksi ES6 baru menghasilkan JavaScript yang lebih mudah

Koleksi JavaScript sebelum ini sangat terhad, tetapi ini telah diperbetulkan dengan ES6. Koleksi ES6 baru ini akan meningkatkan kuasa dan fleksibiliti bahasa dan memudahkan tugas pemaju JavaScript yang mengamalkannya.

---

Artikel ini adalah sebahagian daripada siri pembangunan web dari Microsoft Technology Evangelist dan Developtelligence mengenai pembelajaran praktikal JavaScript, projek sumber terbuka, dan amalan terbaik interoperabilitas termasuk pelayar Microsoft Edge dan enjin rendering EdgeHTML yang baru. DevelopTelligence menawarkan kursus latihan JavaScript dan React Training melalui AppendTo, blog yang fokus pada akhir dan laman web kursus.

Kami menggalakkan anda untuk menguji pelbagai pelayar dan peranti termasuk Microsoft Edge, penyemak imbas lalai untuk Windows 10, dan anda boleh menggunakan alat percuma di dev.microsoftedge.com, termasuk penjejakan isu EdgeHtml di mana anda boleh boleh Laporkan atau cari isu EdgeHTML, seperti rendering laman web atau isu pematuhan standard. Juga, lawati Blog Edge untuk maklumat terkini dari pemaju dan pakar Microsoft.

Soalan Lazim Mengenai Koleksi ES6 (Soalan Lazim): Peta, Set, Leakmap, Leakset

Apakah perbezaan utama antara Peta dan Leakmap dalam JavaScript ES6?

Dalam JavaScript ES6, kedua-dua Peta dan Leakmap digunakan untuk menyimpan pasangan nilai utama. Walau bagaimanapun, terdapat beberapa perbezaan yang signifikan di antara mereka. Pertama, dalam peta, kunci boleh menjadi jenis, manakala dalam lemah, kunci mestilah objek. Kedua, Peta mempunyai saiz harta yang membolehkan anda menyemak bilangan pasangan nilai utama, tetapi Weakmap tidak mempunyai harta ini. Akhirnya, MAP memegang rujukan yang kuat kepada objek utama, yang bermaksud bahawa selagi peta wujud, mereka tidak layak untuk pengumpulan sampah. Lemmap, sebaliknya, memegang rujukan yang lemah kepada objek utama, yang bermaksud bahawa jika tidak ada rujukan lain pada objek, ia boleh dikumpulkan sampah.

bagaimana untuk melelehkan kelemahan atau lemah dalam JavaScript ES6?

Tidak seperti peta dan set, lemah dan lemah tidak mempunyai cara untuk melangkah ke atas unsur -unsur mereka. Ini kerana mereka direka untuk memegang rujukan yang lemah terhadap kunci (lemah) atau nilai (lemah), yang bermaksud ini boleh menjadi sampah yang dikumpulkan pada bila -bila masa. Oleh itu, tidak ada jaminan bahawa elemen itu masih akan wujud ketika cuba melelehkannya. Sekiranya anda perlu melangkah ke atas koleksi, anda harus menggunakan peta atau set sebaliknya.

Bolehkah saya menggunakan jenis data asal sebagai kunci dalam lemah atau lemah?

Tidak, anda tidak boleh menggunakan jenis data asal sebagai kunci dalam lemah atau lemah. Kekunci dalam koleksi ini mestilah objek. Ini kerana lemah dan lemah memegang rujukan yang lemah kepada kunci mereka, yang bermaksud bahawa jika tidak ada rujukan lain kepada mereka, kunci boleh dikumpulkan. Jenis data primitif (seperti nombor dan rentetan) tidak sampah yang dikumpulkan seperti objek, jadi mereka tidak boleh digunakan sebagai kunci dalam koleksi ini.

Kenapa saya harus menggunakan lemah atau lemah bukan peta atau set?

lemah dan lemah mempunyai beberapa ciri unik, dan dalam beberapa kes mereka mungkin lebih sesuai daripada peta atau set. Kerana mereka memegang rujukan yang lemah terhadap kunci mereka (lemah) atau nilai (lemah), mereka boleh menjadi sampah yang dikumpulkan apabila mereka tidak lagi digunakan. Ini berguna jika anda ingin mengaitkan data lain dengan objek tetapi tidak mahu menghalang objek dari koleksi sampah apabila ia tidak lagi diperlukan. Tambahan pula, kerana lemah dan lemah tidak mempunyai cara untuk melangkah ke atas unsur -unsur mereka, mereka dapat memberikan tahap privasi tertentu untuk data yang mereka simpan.

Apa yang berlaku apabila kunci dalam lemah atau lemah adalah sampah yang dikumpulkan?

Apabila kunci dalam lemah atau lemah adalah sampah yang dikumpulkan, penyertaan yang sepadan dalam koleksi akan dipadamkan secara automatik. Ini kerana set ini memegang rujukan lemah kepada kunci mereka, yang bermaksud bahawa apabila mereka tidak lagi digunakan, kunci boleh dikumpulkan sampah. Ciri ini berguna untuk menguruskan memori dalam aplikasi JavaScript kerana ia memastikan data yang berkaitan dengan objek yang tidak lagi digunakan juga akan dibersihkan.

Bolehkah saya menggunakan lemah atau lemah untuk menyimpan data sementara?

Ya, lemah dan lemah adalah bagus untuk menyimpan data sementara. Kerana mereka memegang rujukan yang lemah terhadap kunci mereka (lemah) atau nilai (lemah), mereka boleh menjadi sampah yang dikumpulkan apabila mereka tidak lagi digunakan. Ini bermakna apabila kunci sampah dikumpulkan, data yang disimpan dalam set ini juga dibersihkan. Ini berguna untuk menyimpan apa yang diperlukan hanya untuk masa yang singkat, kerana anda tidak perlu bimbang tentang membersihkannya secara manual.

Bagaimana untuk memeriksa sama ada lemah atau lemah mengandungi kunci atau nilai tertentu?

Anda boleh menggunakan kaedah HAS untuk memeriksa sama ada kelemahan atau kelemahan mengandungi kunci tertentu. Kaedah ini mengembalikan nilai boolean yang menunjukkan sama ada kunci wujud dalam koleksi. Walau bagaimanapun, ingatlah bahawa anda tidak boleh menggunakan kaedah ini untuk memeriksa nilai tertentu dalam lemah, kerana nilai -nilai dalam set ini tidak dapat diakses.

Bolehkah saya memadam entri dari lemah atau lemah?

Ya, anda boleh menggunakan kaedah padam untuk memadam entri dari Weakmap. Kaedah ini memadam entri yang berkaitan dengan kunci yang diberikan dan mengembalikan nilai boolean yang menunjukkan sama ada kunci wujud dalam koleksi. Walau bagaimanapun, anda tidak boleh memadam penyertaan dari lemah kerana koleksi ini tidak mempunyai kaedah memadam.

Bolehkah saya membersihkan semua penyertaan dalam lemah atau lemah?

Tidak, anda tidak dapat membersihkan semua penyertaan dalam lemah atau lemah. Koleksi ini tidak mempunyai kaedah yang jelas, yang boleh didapati dalam peta dan ditetapkan. Ini kerana lemah dan lemah direka untuk membersihkan kunci secara automatik apabila mereka dikumpulkan sampah.

Bolehkah saya mendapatkan saiz lemah atau lemah?

Tidak, anda tidak boleh mendapatkan saiz lemah atau lemah. Koleksi ini tidak mempunyai harta saiz, yang boleh didapati dalam peta dan ditetapkan. Ini kerana saiz lemah atau lemah boleh diubah pada bila -bila masa disebabkan oleh pengumpulan sampah.

Atas ialah kandungan terperinci Koleksi ES6: Menggunakan peta, set, lemah, lemah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!