この記事では ES6 の Symbol について詳しく紹介 (コード例) しています。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。
Symbol は、一意の値を表すために ES6 で導入された新しいプリミティブ データ型です。
シンボルの機能
1.シンボルはファクトリ関数によって作成され、new によって作成することはできないため、instanceof 演算子によって返される結果は false
var sym = Symbol(); var sym1 = new Symbol(); // TypeError sym instanceof Symbol // false
2.シンボルuse typeof 演算子は "symbol"
var sym = Symbol('foo'); typeof sym; // "symbol"
3 を返します。Symbol ファクトリ関数は、現在のシンボルを説明するためのオプションのパラメータをサポートできます
var sym2 = Symbol('foo'); var sym3 = Symbol('foo');
4。Symbol は一意です。Symbol(" foo") = = Symbol("foo") returns false
Symbol('foo') === Symbol('foo'); // false
5. Symbol を数値または文字列で操作すると、例外がスローされます
sym | 0 // TypeError Symbol("foo") + "bar" // TypeError
6. ファクトリ関数のシンボルによって返される Symbol , オブジェクトの属性名として使用でき、属性の競合を回避できます。for...in 反復
var obj = {}; obj[Symbol("a")] = "a"; obj[Symbol.for("b")] = "b"; obj["c"] = "c"; obj.d = "d"; for (var i in obj) { console.log(i); // logs "c" and "d" }
7 では列挙できません。シンボル ファクトリ関数によって返された値を使用できます。 JSON を使用する場合 .stringify() がシリアル化に使用される場合、この属性は無視されます
JSON.stringify({[Symbol("foo")]: "foo"}); // '{}'
8.Symbol は一意ですが、Symbol.for() を使用して同じものを共有できますシンボルの値
var mySymbol1 = Symbol.for('some key'); var mySymbol2 = Symbol.for('some key'); mySymbol1 == mySymbol2 //true
シンボルの実戦
オブジェクト リテラルのプライベート プロパティとメソッド
const myPrivateMethod = Symbol("myPrivateMethod"); const myPrivateProperty = Symbol("myPrivateProperty"); const obj = { [myPrivateProperty]: "semlinker", [myPrivateMethod]() { return `Hello ${this[myPrivateProperty]}!!!`; }, hello() { console.log(this[myPrivateMethod]()); } }; console.log(Object.keys(obj)); console.log(obj.hello());
オブジェクト リテラルを作成するときに Symbol を使用するだけでなく、プライベート プロパティを定義するときにも使用できます。およびクラスのメソッド。
クラスのプライベート プロパティとメソッド
const myPrivateMethod = Symbol("myPrivateMethod"); const myPrivateProperty = Symbol("myPrivateProperty"); class MyClass { constructor() { this[myPrivateProperty] = "semlinker"; } [myPrivateMethod]() { return `Hello ${this[myPrivateProperty]}!!!`; } hello() { console.log(this[myPrivateMethod]()); } } const myCls = new MyClass(); console.log(myCls.hello());
ES6 では、Symbol.match、Symbol.replace、Symbol.search、Symbol.iterator、Symbol などのいくつかのグローバル シンボルが導入されています。 。ここでは、Symbol.search と Symbol.iterator について簡単に紹介します。
Symbol.iterator
class Skill { constructor() { this.skills = ['Angular', 'React', 'Vue', 'Koa', 'Ionic']; } [Symbol.iterator]() { let index = 0; return { next: () => { const value = this.skills[index++]; const done = index === this.skills.length + 1; return { value, done }; } } } } const mySkills = new Skill(); console.log([...mySkills]); for (let skill of mySkills) { console.log(`My skill is ${skill}`); }
Symbol.search
例を簡単に見てみましょう:
'angular'.search('ng') // 4
この例の実行プロセス:
Parse 'angular'.search('ng')
'angular' を文字列オブジェクトに変換 new String('angular')
'ng' を通常のオブジェクトに変換new Regexp ('ng')
「angular」文字列オブジェクトの search メソッドを呼び出します。これにより、ng 通常オブジェクトの Symbol.search メソッドが自動的に呼び出されます。
詳細については、を参照してください。次の疑似コードに追加します。
// pseudo code for String class class String { constructor(value) { this.value = value; } search(obj) { obj[Symbol.search](this.value); } } class RegExp { constructor(value) { this.value = value; } [Symbol.search](string) { return string.indexOf(this.value); } }
さらに、Symbol.search を使用すると、String.prototype.search() メソッドでカスタム オブジェクト内の Symbol.search() メソッドを呼び出して、カスタム検索ロジックを実装することもできます。
class Article { constructor(tag) { this.tag = tag; } [Symbol.search](string) { return string.indexOf(this.tag) >= 0 ? 'Found' : 'Not_Found'; } } var article = new Article('Angular'); console.log('Angular7'.search(article)); // Found console.log('重温ES6'.search(article)); // Not_Found
上記例の実行プロセス:
'Angular7'.search(article) ステートメントを解析します
'Angular7' を文字列オブジェクトに変換します new String("Angular7 ")
記事はオブジェクトであるため、ここでは変換は必要ありません
#「Angular7」文字列オブジェクトの検索メソッドを呼び出します。これにより、記事オブジェクト内の Symbol.search メソッドが自動的に呼び出されます。 、article[Symbol.search]( 'Angular7')など
以上がES6 のシンボルの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。