Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah struktur data es6 baharu?

Apakah struktur data es6 baharu?

青灯夜游
Lepaskan: 2022-10-26 17:58:21
asal
2387 orang telah melayarinya

Struktur baharu ialah: 1. Simbol, yang mewakili nilai unik dan merupakan struktur fungsi 2. Set, yang merujuk kepada struktur "set", serupa dengan tatasusunan, membenarkan penyimpanan tidak tertib dan data tidak berulang; 3. WeakSet adalah serupa dengan Set, dan data dalaman tidak boleh mempunyai nilai pendua;

Apakah struktur data es6 baharu?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Struktur data baharu ES6

1 Simbol

Symbol ialah yang baharu dalam ES6 Salah satu. jenis data asas, ia adalah fungsi. Setiap nilai Symbol yang dikembalikan daripada fungsi Symbol adalah unik Nilai symbol berfungsi sebagai pengecam atribut objek dan mempunyai satu-satunya tujuan.

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false
Salin selepas log masuk

simbol sebagai kunci

Cara pertama ialah menambahkannya terus dalam literal objek.

// symbol作为key
const obj = {
  [s1]:'abc',
  [s2]:'cc',
}
Salin selepas log masuk

Cara kedua ialah menambahnya dengan menambah tatasusunan.

// 需要用数组方式来获取,不能通过点语法,否则会获取到字符串key
console.log(obj[s1]);
Salin selepas log masuk

Cara ketiga ialah menambahkannya melalui kaedah defineProperty dalam objek.

const s4=Symbol()
Object.defineProperty(obj,s4,{
  configurable:true,
  enumerable:true,
  writable:true,
  value:'ff'
})
Salin selepas log masuk

Dapatkan nilai yang sepadan melalui simbol

perlu diperolehi dalam mod tatasusunan, bukan melalui sintaks titik, jika tidak, kunci rentetan akan diperolehi.

console.log(obj[s1]);
Salin selepas log masuk

symbol tidak boleh ditukar secara tersirat kepada menaip string.

Nota: Parameter dalam fungsi Simbol ialah deskriptor simbol, yang merupakan ciri baharu dalam ES10

let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string
Salin selepas log masuk

Kami tidak boleh terus alertasymbol objek, tetapi kita boleh mendapatkan deskriptor objek toString melalui .description atau symbol.

let sym = Symbol('a')
console.log(sym.description); // 'a'
Salin selepas log masuk

simbol traversal

tidak boleh mendapatkan kunci for apabila menggunakan object.keys traversal atau symbol Berkenaan dengan ini, object masih getOwnPropertySymbols kaedah disediakan untuk mendapatkan kunci semua simbol dalam objek.

const sKeys=(Object.getOwnPropertySymbols(obj));
for(const skey of sKeys){
  console.log(obj[skey]);
}
Salin selepas log masuk

Pendaftaran objek simbol global

Kadangkala, kita mungkin memerlukan nilai berbilang symbol untuk konsisten, kita boleh lulus statik yang disediakan oleh symbol Kaedah for lulus dalam deskriptor yang sama untuk menjadikan nilainya konsisten.

Symbol.for

Kaedah ini mencari pendaftaran simbol masa jalan untuk simbol sedia ada menggunakan kekunci yang diberikan dan mengembalikannya jika ditemui. Jika tidak, simbol baharu dicipta dalam pendaftaran simbol global menggunakan kekunci ini.

const sa=Symbol.for('cc')
const sb=Symbol.for('cc')
console.log(sa===sb); //true
Salin selepas log masuk

Symbol.keyFor

Kaedah ini digunakan untuk mendapatkan deskriptor global symbol.

const key =Symbol.keyFor(sb)
console.log(key); // c
Salin selepas log masuk

2. Set

Set objek (serupa dengan tatasusunan) membenarkan anda menyimpan sebarang jenis data, tetapi nilainya dalam tidak boleh berulang.

const s1 = new Set()
s1.add(10)
s1.add(20)
s1.add(30)
s1.add(40)

console.log(s1) // Set(4) { 10, 20, 30, 40 }

s1.add(20)
console.log(s1) // Set(4) { 10, 20, 30, 40 }
Salin selepas log masuk

Tetapkan kaedah biasa

KaedahNilai pulanganPenerangan
saizset Kuantiti dalam objekMengembalikan kuantiti dalam objek yang ditetapkan
tambah
方法返回值说明
sizeset对象中的数量返回set对象中的数量
addSet对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值
Objek
Tambah elemen
padamboolean Padam elemen
mempunyaiboolean

Sama ada nilai ini wujud dalam objek

clearNoneClearobjek Nilai dalam
3 WeakSet

WeakSetSet

ialah. serupa dengan
    > ialah satu lagi struktur data dan data dalaman tidak boleh mempunyai nilai pendua.
  • Set
      Perbezaan antaranya dan
    • WeakSet
    • hanya boleh menyimpan jenis objek, bukan jenis data asas WeakSet
    adalah rujukan yang lemah kepada elemen

Penggunaan asas
const weakSet = new WeakSet();
let obj = {
  name: "_island"
};

weakSet.add(obj);
Salin selepas log masuk

WeakSet kaedah biasa
方法返回值说明
addweakset对象添加元素
deleteboolean删除元素
hasbooleanweakset对象中是否存在这个值
<🎜><🎜>

关于遍历

WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

所以WeakSet中的对象是不能获取的

4、Map

ES6新增的数据结构,用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。(假如我们把对象作为key,其内部会将对象转换为字符串[object object]

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:&#39;a&#39;,
  [obj2]:&#39;b&#39;,
}

console.log(obj3);
// { &#39;[object Object]&#39;: &#39;b&#39; }
Salin selepas log masuk

Map则可以把对象作为key进行存储,可以通过set方法添加到Map中,也直接通过字面量的方式添加。

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: &#39;_island&#39; } => &#39;a&#39;, { name: &#39;QC2125&#39; } => &#39;b&#39; }

// or
const map2 = new Map([[obj1,&#39;a&#39;],[obj2,&#39;b&#39;]])
Salin selepas log masuk

Map常用方法

方法返回值说明
get获取对应的元素通过key获取对应元素
sizeMap对象中的数量返回Map对象中的数量
setMap对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));
Salin selepas log masuk

通过for..of遍历Map

for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
Salin selepas log masuk

5、WeakMap

Map类似,也是以键值对的形式存在的

  • 和Map的区别
    • WeakMapkey只能使用对象,不接受其他的类型作为key
    • WeakMapkey对对象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a
Salin selepas log masuk

WeakMap常用方法

方法 返回值 说明
get weakmap对象 获取元素
delete boolean 删除元素
has boolean weaksmap对象中是否存在这个值

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

【相关推荐:javascript视频教程web前端

Atas ialah kandungan terperinci Apakah struktur data es6 baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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