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

ES6 新しいデータ構造

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Apr 15, 2022 pm 07:26 PM

es6 データ構造

新しい構造は次のとおりです: 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7681

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1286

PHP チュートリアル

1229

Related knowledge

Java 関数比較を使用して複雑なデータ構造を比較する Apr 19, 2024 pm 10:24 PM

Java で複雑なデータ構造を使用する場合、Comparator を使用して柔軟な比較メカニズムを提供します。具体的な手順には、コンパレータクラスの定義、比較ロジックを定義するための比較メソッドの書き換えが含まれます。コンパレータインスタンスを作成します。 Collections.sort メソッドを使用して、コレクションとコンパレータのインスタンスを渡します。

Javaのデータ構造とアルゴリズム: 詳細な説明 May 08, 2024 pm 10:12 PM

データ構造とアルゴリズムは Java 開発の基礎です。この記事では、Java の主要なデータ構造 (配列、リンクリスト、ツリーなど) とアルゴリズム (並べ替え、検索、グラフアルゴリズムなど) について詳しく説明します。これらの構造は、スコアを保存するための配列、買い物リストを管理するためのリンクリスト、再帰を実装するためのスタック、スレッドを同期するためのキュー、高速検索と認証のためのツリーとハッシュテーブルの使用など、実際の例を通じて説明されています。これらの概念を理解すると、効率的で保守しやすい Java コードを作成できるようになります。

Go 言語の参照型についての深い理解 Feb 21, 2024 pm 11:36 PM

参照型は Go 言語の特別なデータ型であり、その値にはデータそのものが直接格納されるのではなく、格納されたデータのアドレスが格納されます。 Go 言語では、参照型にはスライス、マップ、チャネル、ポインターが含まれます。 Go 言語のメモリ管理とデータ転送方法を理解するには、参照型を深く理解することが重要です。この記事では具体的なコード例を組み合わせて、Go言語における参照型の特徴と使い方を紹介します。 1. スライススライスは、Go 言語で最も一般的に使用される参照型の 1 つです。

PHP データ構造: AVL ツリーのバランス、効率的で秩序あるデータ構造の維持 Jun 03, 2024 am 09:58 AM

AVL ツリーは、高速かつ効率的なデータ操作を保証するバランスのとれた二分探索ツリーです。バランスを達成するために、左回転と右回転の操作を実行し、バランスに反するサブツリーを調整します。 AVL ツリーは高さバランシングを利用して、ツリーの高さがノード数に対して常に小さくなるようにすることで、対数時間計算量 (O(logn)) の検索操作を実現し、大規模なデータセットでもデータ構造の効率を維持します。

Java コレクションフレームワークの完全分析: データ構造を分析し、効率的なストレージの秘密を明らかにする Feb 23, 2024 am 10:49 AM

Java コレクションフレームワークの概要 Java コレクションフレームワークは Java プログラミング言語の重要な部分であり、データを保存および管理できる一連のコンテナクラスライブラリを提供します。これらのコンテナクラスライブラリには、さまざまなシナリオでのデータストレージと処理のニーズを満たすために、さまざまなデータ構造があります。コレクションフレームワークの利点は、統一されたインターフェイスが提供され、開発者が異なるコンテナクラスライブラリを同じ方法で操作できるため、開発の困難さが軽減されることです。 Java コレクションフレームワークのデータ構造 Java コレクションフレームワークにはさまざまなデータ構造が含まれており、それぞれに独自の特性と適用可能なシナリオがあります。以下に、一般的な Java コレクションフレームワークのデータ構造をいくつか示します。 1. リスト: リストは、要素を繰り返すことができる順序付けされたコレクションです。李

ハッシュテーブルベースのデータ構造により、PHP 配列の論理積と和集合の計算が最適化されます。 May 02, 2024 pm 12:06 PM

ハッシュテーブルを使用すると、PHP 配列の交差と和集合の計算を最適化し、時間の複雑さを O(n*m) から O(n+m) に減らすことができます。具体的な手順は次のとおりです。ハッシュテーブルを使用して要素をマップします。最初の配列をブール値に変換すると、2 番目の配列の要素が存在するかどうかがすぐにわかり、交差計算の効率が向上します。ハッシュテーブルを使用して最初の配列の要素を既存としてマークし、次に 2 番目の配列の要素を 1 つずつ追加し、既存の要素を無視して共用体計算の効率を向上させます。

PHP SPL データ構造: プロジェクトにスピードと柔軟性をもたらします Feb 19, 2024 pm 11:00 PM

PHPSPL データ構造ライブラリの概要 PHPSPL (標準 PHP ライブラリ) データ構造ライブラリには、さまざまなデータ構造を保存および操作するためのクラスとインターフェイスのセットが含まれています。これらのデータ構造には、配列、リンクリスト、スタック、キュー、セットが含まれており、それぞれがデータを操作するためのメソッドとプロパティの特定のセットを提供します。配列 PHP では、配列は一連の要素を格納する順序付けされたコレクションです。 SPL 配列クラスは、ソート、フィルタリング、マッピングなどのネイティブ PHP 配列の拡張機能を提供します。 SPL 配列クラスの使用例を次に示します。 useSplArrayObject;$array=newArrayObject(["foo","bar","baz"]);$array

Go 言語のデータ構造の秘密を詳しく学ぶ Mar 29, 2024 pm 12:42 PM

Go 言語のデータ構造の謎を深く研究するには、具体的なコード例が必要ですが、簡潔で効率的なプログラミング言語である Go 言語は、データ構造の処理においても独特の魅力を発揮します。データ構造はコンピューターサイエンスの基本概念であり、より効率的にアクセスして操作できるようにデータを整理および管理することを目的としています。 Go 言語のデータ構造の謎を深く学ぶことで、データがどのように保存され操作されるかをより深く理解できるようになり、それによってプログラミングの効率とコードの品質が向上します。 1. 配列配列は最も単純なデータ構造の 1 つです

See all articles

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

ES6 新しいデータ構造

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック