ホームページ >ウェブフロントエンド >jsチュートリアル >ES6アクション:シンボルとその用途
ES2015では、開発者が長い間期待していたいくつかの言語機能を紹介しますが、シンボルなど、明らかではないあまり知られていない機能も紹介します。
シンボルは、新しいプリミティブデータ型であり、他のシンボルと競合しないことが保証されている一意のタグです。この意味で、シンボルをuuidの一種(普遍的な一意の識別子)と考えることができます。シンボルがどのように機能し、何ができるか見てみましょう。
キーポイント
新しいシンボルを作成
新しいシンボルを作成することは非常にシンプルで、シンボル関数を呼び出すだけです。これは、オブジェクトコンストラクターではなく、単なる標準関数であることに注意してください。新しいオペレーターでそれを呼び出そうとすると、TypeRRORが得られます。シンボル関数を呼び出すたびに、新しい完全にユニークな値が得られます。
<code class="language-javascript">const foo = Symbol(); const bar = Symbol(); foo === bar // false</code>
最初のパラメーターとして文字列を渡すことにより、タグ付き記号を作成することもできます。タグはシンボルの値には影響しませんが、デバッグに役立ち、シンボルのtoStringメソッドが呼び出されるとタグが表示されます。同じタグで複数のシンボルを作成できますが、これには利点がなく、混乱につながる可能性があります。
<code class="language-javascript">let foo = Symbol('baz'); let bar = Symbol('baz'); foo === bar // false // console.log(foo); // Symbol(baz)</code>
シンボルの目的
文字列と整数は一意の値ではありません。たとえば、2番目または文字列「開発」も、プログラムの他の場所でさまざまな目的で使用できます。シンボルを使用すると、提供された値に自信を持つことができます。
<code class="language-javascript">class Application { constructor(mode) { switch (mode) { case Application.DEV: // 设置开发环境的应用程序 break; case Application.PROD: // 设置生产环境的应用程序 break; default: throw new Error('无效的应用程序模式:' + mode); } } } Application.DEV = Symbol('dev'); Application.PROD = Symbol('prod'); // 使用示例 const app = new Application(Application.DEV);</code>
シンボルのもう1つの興味深い使用は、オブジェクト属性キーとしてです。 JavaScriptオブジェクトをハッシュマップとして使用したことがある場合(PHP用語のAssociation Arrays and Python用語の辞書)、正方形のブラケット表記を使用してプロパティを取得/設定することに精通しています。
<code class="language-javascript">const foo = Symbol(); const bar = Symbol(); foo === bar // false</code>
四角いブラケット表記を使用すると、属性キーとしてシンボルを使用することもできます。これを行うことにはいくつかの利点があります。まず、オブジェクトの既存のプロパティやメソッドと競合する可能性のある文字列キーとは異なり、シンボルベースのキーが競合しないことを確認できます。第二に、それらはfor ... loopで列挙されておらず、object.keys()、object.getownpropertynames()、json.stringify()などの関数によって無視されます。これにより、オブジェクトをシリアル化するときに含めたくないプロパティに最適になります。
<code class="language-javascript">let foo = Symbol('baz'); let bar = Symbol('baz'); foo === bar // false // console.log(foo); // Symbol(baz)</code>ただし、シンボルをキーとして使用してもプライバシーを保証しないことは注目に値します。シンボルベースのプロパティキーにアクセスできる新しいツールがあります。 object.getownPropertySymbols()は、シンボルベースのキーの配列を返します。
<code class="language-javascript">class Application { constructor(mode) { switch (mode) { case Application.DEV: // 设置开发环境的应用程序 break; case Application.PROD: // 设置生产环境的应用程序 break; default: throw new Error('无效的应用程序模式:' + mode); } } } Application.DEV = Symbol('dev'); Application.PROD = Symbol('prod'); // 使用示例 const app = new Application(Application.DEV);</code>
パブリックシンボル
シンボルキープロパティは、ES6の前にコードに実際には見えません。既存のタイプのJavaScriptに逆方向の互換性を破ることなく新しい機能を追加するのに最適です。いわゆる「パブリック」シンボルは、特定の言語機能の動作をカスタマイズし、イテレーターなどの新しい関数を実装するために使用されるシンボル関数の事前定義されたプロパティです。symbol.iteratorは、反復を可能にするオブジェクトに特別な方法を割り当てるために使用されるパブリックシンボルです。
組み込みタイプの文字列、Array、Map、およびSETは、これらのタイプのインスタンスをfor ...または拡張機能を使用するときに呼び出されるデフォルトのシンボルメソッドを持っています。また、ブラウザはSymbol.iteratorキーの使用を開始して、同じ方法でDOM構造(NodeListやHTMLCollectionなど)を繰り返すことができます。
<code class="language-javascript">const data = []; data['name'] = 'Ted Mosby'; data['nickname'] = 'Teddy Westside'; data['city'] = 'New York';</code>グローバル登録
仕様は、ランタイム全体のシンボルレジストリも定義します。つまり、ドキュメントと組み込みのiframeまたはサービスワーカーの間など、さまざまな実行コンテキストでシンボルを保存および取得できます。
symbol.for(key)レジストリから指定されたキーのシンボルを取得します。キーがシンボルが存在しない場合、新しいシンボルが返されます。ご想像のとおり、同じキーへの後続の呼び出しは同じシンボルを返します。
symbol.keyfor(シンボル)を使用すると、特定のシンボルのキーを取得できます。レジストリに存在しないシンボルでメソッドを呼び出すと、未定義に戻ります:
<code class="language-javascript">const user = {}; const email = Symbol(); user.name = 'Fred'; user.age = 30; user[email] = 'fred@example.com'; Object.keys(user); // ['name', 'age'] Object.getOwnPropertyNames(user); // ['name', 'age'] JSON.stringify(user); // {"name":"Fred","age":30}</code>ユーザーケース
一部のユースケースでは、シンボルを使用すると利点があります。前の記事で言及されている1つのユースケースは、オブジェクトがシリアル化されたときに含まれないオブジェクトに「非表示」プロパティを追加する場合です。
ライブラリの著者は、シンボルを使用して、既存のキー(またはそのキーが他のコードによって上書きされることを心配することなく、クライアントオブジェクトにプロパティまたはメソッドを安全に追加することもできます。たとえば、ウィジェットコンポーネント(日付セレクターなど)は、多くの場合、さまざまなオプションを使用して初期化され、州に保存する必要があります。プロパティが別のキーと競合する可能性があるため、ウィジェットインスタンスをDOM要素オブジェクトに割り当てることは理想的ではありません。シンボルベースのキーを使用すると、この問題を巧みに回避し、ウィジェットインスタンスが上書きされないようにします。 Mozilla Hacksのブログ投稿ES6の詳細については、詳細をご覧ください:シンボル。
ブラウザサポート
シンボルを試してみたい場合は、主流のブラウザのサポートは非常に優れています。ご覧のとおり、Chrome、Firefox、Microsoft Edge、およびOperaの現在のバージョンはすべて、モバイルデバイスのAndroid 5.1とiOS 9だけでなく、シンボルタイプをネイティブにサポートしています。古いブラウザをサポートする必要がある場合は、PolyFillを使用することもできます。
結論
シンボルを導入する主な理由は、既存のコードを壊すことなく新しい機能を言語に追加することを促進することですが、興味深い用途があります。すべての開発者は、少なくともそれらの基本的な理解を持ち、最も一般的に使用されるパブリックシンボルとその用途に精通している必要があります。
ES6記号 ES6シンボルの実際の使用は何ですか? ES6シンボルは、ES6(ECMAScript 6)で導入された新しいプリミティブデータ型です。これらは、オブジェクトプロパティの識別子として使用できるユニークで不変のデータ型です。それらを使用して、オブジェクトの私有地を作成し、メタレベルのプログラミングの概念を実装し、競合の命名を避けることができます。また、オブジェクトのカスタム反復動作を定義するためにも使用できます。シンボル()関数を使用して、新しいシンボルを作成できます。この関数は、たとえ同じ引数を渡す場合でも、呼び出されるたびに一意のシンボルを返します。たとえば、ここでは
、Symbol1とsymbol2は、同じパラメーター「シンボル」がシンボル()関数に渡された場合でも、異なるシンボルです。
let symbol1 = Symbol('symbol'); let symbol2 = Symbol('symbol');
正方形の括弧内のシンボルをオブジェクトキーとして使用できます。たとえば、
let symbol = Symbol('key'); let obj = {}; obj[symbol] = 'value';
グローバルシンボルレジストリは、IFRAMEやサービスワーカーなどのさまざまな領域でシンボルを作成、アクセス、共有できる共有環境です。 symbol.for(key)を使用してグローバルレジストリにシンボルを作成し、symbol.keyfor(symbol)を使用してアクセスできます。
オブジェクトを備えたシンボルを使用して、一意のキーを作成できます。これは、シンボルが常に一意であるため、命名の競合を回避するのに役立ちます。たとえば、let symbol = Symbol('key'); let obj = { [symbol]: 'value' };
ここでは、シンボル「シンボル」はオブジェクト「OBJ」のキーとして使用されます。
はい、toString()メソッドを呼び出すことで、シンボルを文字列に変換できます。これは、「記号(説明)」という形式の文字列を返します。ここで、「説明」はシンボル()関数に渡すオプションの説明です。
はい、配列付きシンボルを使用できます。たとえば、シンボルを一意の属性キーとして使用して、アレイに関するメタデータを保存できます。ただし、シンボルはアレイの長さプロパティに含まれておらず、ほとんどの配列メソッドはそれらを返しません。
はい、関数付きのシンボルを使用できます。たとえば、シンボルを一意の属性キーとして使用して、関数についてメタデータを保存できます。ただし、シンボルは関数の長さプロパティに含まれておらず、ほとんどの関数方法はそれらを返さない。
はい、クラスでシンボルを使用できます。たとえば、シンボルを一意の属性キーとして使用して、クラスに関するメタデータを保存できます。ただし、シンボルはクラスの長さのプロパティに含まれておらず、ほとんどのクラスメソッドはそれらを返しません。
はい、文字列付きシンボルを使用できます。たとえば、シンボルを一意の属性キーとして使用して、文字列にメタデータを保存できます。ただし、シンボルは文字列の長さプロパティに含まれておらず、ほとんどの文字列メソッドはそれらを返さない。
以上がES6アクション:シンボルとその用途の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。