이 기사는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!