新しい es6 データ構造とは何ですか?

新しい構造は次のとおりです: 1. 一意の値を表す関数構造であるシンボル 2. 配列に似た「セット」構造を参照するセット。非反復データ; 3. WeakSet、Set と同様、内部データは重複値を持つことができません; 4. Map、マッピング関係を格納できる「辞書」構造を指します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES6 新しいデータ構造

1、シンボル

シンボルはES6 One の新しい基本データ型の は関数です。 Symbol 関数から返される各 Symbol 値は一意であり、symbol 値はオブジェクト属性の識別子として機能し、その唯一の目的を持ちます。

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

symbol as key

最初の方法は、それをオブジェクトのリテラルに直接追加することです。

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

2 番目の方法は、配列を追加して追加することです。

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

3 番目の方法は、オブジェクトの defineProperty メソッドを使用して追加することです。

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

シンボルを通じて対応する値を取得します

ドット構文ではなく、配列モードで取得する必要があります。そうでない場合は、文字列キーが取得されます。

console.log(obj[s1]);

symbol を暗黙的に string 型に変換することはできません。

注: Symbol 関数のパラメーターはシンボル記述子であり、これは ES10 の新機能です

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

1 つを直接 alert することはできませんsymbol オブジェクトですが、toString または .description を通じて symbol オブジェクトの記述子を取得できます。

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

シンボルのトラバース

for トラバーサルおよび object.keys を使用する場合、symbol を取得できません。正常です。object には、オブジェクト内のすべてのシンボルのキーを取得するために使用される getOwnPropertySymbols メソッドも用意されています。

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

グローバル シンボル オブジェクトの登録

複数の symbol の値を一貫させる必要がある場合は、## を渡すことができます。 #symbol 提供される静的メソッド for メソッドは、値の一貫性を保つために同じ記述子を渡します。

Symbol.for

このメソッドは、指定されたキーを使用してランタイム シンボル レジストリで既存のシンボルを検索し、見つかった場合はそれを返します。それ以外の場合は、このキーを使用してグローバル シンボル レジストリに新しいシンボルが作成されます。

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

Symbol.keyFor

このメソッドは、グローバル

symbol の記述子を取得するために使用されます。

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

2. Set

Set オブジェクト (配列に似ています) を使用すると、任意のデータ型を保存できます。ただし、値を繰り返すことはできません。

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 }

共通メソッドの設定

メソッド#sizeオブジェクト内の数値addObjectdelete hasこの値がオブジェクトに存在するかどうかclear オブジェクトの値をクリアします ##3. WeakSet

戻り値	説明
set	オブジェクト内の数値を返します。セットオブジェクト Quantity
Set	Add element
boolean	要素を削除
boolean	Set
None	Set

WeakSet は

Set

と同様のデータ構造であり、内部データは重複した値を持つことができません。 これと Set

• WeakSet の違いはオブジェクト型のみを保存でき、基本データ型は保存できません
  • WeakSetこれは要素への弱参照です
  基本的な使用法

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

weakSet.add(obj);

WeakSet 共通メソッド

メソッド戻り値add削除has

説明

weaksetオブジェクト

要素の追加

boolean

要素を削除

boolean

weaksetこの値がオブジェクトに存在するかどうか

关于遍历

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

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

4、Map

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

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

console.log(obj3);
// { '[object Object]': 'b' }

而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: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])

Map常用方法

方法	返回值	说明
get	获取对应的元素	通过key获取对应元素
size	Map对象中的数量	返回Map对象中的数量
set	Map对象	添加元素
delete	boolean	删除元素
has	boolean	Set对象中是否存在这个值
clear	无	清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));

通过for..of遍历Map

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

5、WeakMap

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

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

基本使用

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

WeakMap常用方法

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

关于遍历

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

【相关推荐：javascript视频教程、web前端】

以上が新しい es6 データ構造とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。