新しい es6 データ構造とは何ですか?-フロントエンドQ&A-php.cn

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

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

このチュートリアルの動作環境: 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]:&#39;abc&#39;,
  [s2]:&#39;cc&#39;,
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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(&#39;a&#39;)
console.log(sym.description); // &#39;a&#39;

ログイン後にコピー

シンボルのトラバース

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(&#39;cc&#39;)
const sb=Symbol.for(&#39;cc&#39;)
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]:&#39;a&#39;,
  [obj2]:&#39;b&#39;,
}

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

ログイン後にコピー

而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;]])

ログイン後にコピー

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 サイトの他の関連記事を参照してください。