ES6 のシンボルの詳細な紹介 (コード例)

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