ES6의 기호에 대한 자세한 소개(코드 예)

이 기사는 ES6의 Symbol에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

Symbol은 고유한 값을 표현하기 위해 ES6에 도입된 새로운 기본 데이터 유형입니다.

Symbol 기능

1.Symbol은 팩토리 함수를 통해 생성되며 new로 생성될 수 없으므로, instanceof 연산자를 사용하여 반환된 결과는 false입니다

var sym = Symbol();
var sym1 = new Symbol(); // TypeError
sym instanceof Symbol // false

2.Symbol은 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")는 false를 반환합니다

Symbol('foo') === Symbol('foo'); // false

5.Symbol 및 숫자 또는 문자열인 경우 작업이 수행되면 예외가 발생합니다

sym | 0 // TypeError
Symbol("foo") + "bar" // TypeError

6. 기호 팩토리 함수에서 반환된 기호는 속성 충돌을 피하기 위해 객체의 속성 이름으로 사용될 수 있습니다. for...in iteration

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. Symbol 팩토리 함수에서 반환된 값을 객체 속성 이름으로 사용할 수 있습니다. JSON.stringify()를 사용하여 직렬화하는 경우 이 속성은 무시됩니다.

JSON.stringify({[Symbol("foo")]: "foo"});  // '{}'

8.Symbol은 고유하지만 Symbol.for를 사용할 수 있습니다. () 동일한 Symbol 값 공유

var mySymbol1 = Symbol.for('some key'); 
var mySymbol2 = Symbol.for('some key');
mySymbol1 == mySymbol2 //true

Symbol 실제 전투

객체 리터럴 전용 속성 및 메서드

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.split과 같은 일부 전역 기호가 도입되었습니다. 여기에서는 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')

Convert ' angle'을 문자열 객체로 new String('angular')

'ng'를 일반 객체로 변환 new Regexp('ng')

'angular' 문자열 객체의 검색 메서드를 호출하면 자동으로 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 메소드가 자동으로 호출됩니다(예: 기사[Symbol.search](' Angular7')

위 내용은 ES6의 기호에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!