ES6のシンボルデータ型について詳しく説明します

ES6のシンボルデータ型について詳しく説明します

シンボルデータタイプ

js 言語には、ES6 より前に 6 つのデータ型がありました。

ES6 では新たに symbol データ型が提案されているため、symbol は js の 7 番目のデータ型となり、一意の値を表します。文字列に似たデータ型です。

目的は、属性名の競合を防ぎ、オブジェクト内の各属性名が一意であることを保証することです。

s1 = シンボル('foo')とします。
s2 = シンボル('foo')とします。

s1 === s2 // 偽

Symbol 型には、Symbol インスタンスの説明を表す文字列パラメータを設定できます。したがって、同じ説明を持つ 2 つのシンボル タイプのインスタンスは等しくありません。

シンボルが表示される理由

ES5 のオブジェクト プロパティ名はすべて文字列であるため、プロパティ名の競合が簡単に発生する可能性があります。たとえば、他の人が提供したオブジェクトを使用しているが、このオブジェクトに新しいメソッドを追加したい場合 (ミックスイン モード)、新しいメソッドの名前が既存のメソッドと競合する可能性があります。各属性名が一意であることを保証し、属性名の競合が発生しないようにするメカニズムがあれば便利です。これがES6でSymbolが導入された理由です

シンボルの特徴

  • シンボル値は一意であり、名前の競合を解決するために使用されます。
  • シンボル値は他のデータと一緒に操作することはできません
  • Symbolで定義されたオブジェクトプロパティはfr..inループを使用して走査することはできませんが、Reflect.ownKeysを使用してオブジェクトのすべてのキー名を取得できます。
  • 新しいコマンドは Symbol 関数の前に使用することはできません。そうしないと、エラーが報告されます。これは、生成されたシンボルがオブジェクトではなくプリミティブ値であるためです。つまり、Symbol 値はオブジェクトではないため、プロパティを追加することはできません。基本的には文字列に似たデータ型です。
//シンボルを作成
s = シンボル() とします。
console.log(s, typeof s);


// 同じ名前のシンボルを 2 つ作成してみます。let s2 = Symbol(' 辣鸡rb');
let s3 = Symbol(' 辣鸡rb');
console.log(s2 === s3); //偽


//Symbol.forを使用して同じシンボルを作成します
let s4 = Symbol.for('スパイシーチキンrb');
let s5 = Symbol.for('スパイシーチキンrb');
console.log(s4 === s5); //true


//他のデータでは操作できません let result = s + 100; //エラー、

記事の最後では、jsのデータ型を復習しましょう。

シリコンバレーの記憶術

// USONB =>あなたはとても.niubilityです あなたはとても素晴らしいです // u=>undefined

// s=>文字列シンボル

// 0=>オブジェクト

// n=>null 数

// b=>ブール値

考えた後、もっと書くことにしました。

シンボルの応用

rbオブジェクトにupメソッドとdownメソッドを追加する

方法1

rb = {とする
    名前:「日本の戦争犯罪者」
    年齢: 500,
};
// シンボルによる処理 // 2つのメソッドを含むオブジェクトを宣言します。メソッドは symbol() で記述されます。let methods = {
    上: シンボル(),
    下: シンボル()
};
// メソッドを追加 rb[methods.up] = function () {
    console.log('人について話してごめんなさい');
};
rb[methods.down] = 関数(){
    console.log('この獣は恥知らずで、中国国民に許しを求めている');
};
コンソールにログ出力します。

方法2

rb オブジェクトに sb メソッドと dsb メソッドを追加します。

rb = {とする
    名前:「日本の戦争犯罪者」
    年齢: 500,
    [シンボル('sb')]: 関数() {
        console.log('私は日本のアニメが好きです');
    },
     [シンボル('dsb')]: 関数() {
         console.log('しかし、中国で彼らが犯した犯罪に対する私の憎しみは止まりません');
     },
};

コンソールにログ出力します。

シンボル組み込みプロパティ値

  • Symbol.hasInstance: 他のオブジェクトが instanceof 演算子を使用する場合、プロパティ名が指す内部メソッドが使用されます。
  • シンボル.isConcatSpreadable
  • シンボル.種
  • シンボル.一致
  • シンボル.置換
  • シンボル検索
  • シンボル.分割
  • シンボル.イテレータ
  • シンボル.toPrimitive
  • シンボル.toStringTag
  • シンボル.スコープ外

要約する

ES6 のシンボルデータ型に関するこの記事はこれで終わりです。ES6 のシンボルデータ型についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ES6シンボルの目的の詳細な説明
  • ES6 コンセプト シンボル toString() メソッド
  • ES6におけるシンボル型の使用例の詳細な説明
  • Javascript ES6 におけるデータ型 Symbol の使用に関する詳細な説明
  • ES6 コンセプト Symbol.keyFor() メソッド
  • ES6 の新機能におけるシンボル型の使用法の分析
  • es6シンボルの実装例
  • ES6 におけるシンボル、セット、マップの使用法の詳細な説明
  • ES5はES6のシンボルをシミュレートしてプライベートメンバー関数の例を実装します
  • ES6 シンボルデータ型の応用例分析

<<:  ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)

>>:  Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

推薦する

JavaScriptにおけるこのポインティング問題の詳細な説明

序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...

Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法

LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

HTML テーブル タグ チュートリアル (34): 行スパン属性 ROWSPAN

複雑なテーブル構造では、一部のセルが水平方向に複数のセルにまたがるため、行間属性 ROWSPAN を...

Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明

目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...

JS にこれがあるのはなぜですか?

目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...

MySQLインジェクションバイパスフィルタリング技術の概要

まず、GIF 操作を見てみましょう。ケース1: スペースがフィルタリングされるスペースの代わりに角括...

VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...

Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法

目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析

目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...

JavaScriptは両端キューを実装する

この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...

CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装

フレックスレイアウト定義: Flexレイアウトの要素は、 Flex 、または略して「コンテナー」と呼...