ES6 Symbol 데이터 유형의 응용 사례 분석

본고의 실례는 ES6 Symbol 데이터 유형의 응용을 서술하였다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
Symbol은 ES6에 도입된 새로운 데이터 유형으로, 고유한 값을 나타냅니다.대상을 대상으로 하는 모든 대상에 문자열 형식의 속성이 있기 때문에 새로운 방법의 이름은 기존 방법과 충돌할 수 있습니다.Symbol의 도입은 모든 속성의 이름이 유일무이하다는 것을 보증함으로써 속성명의 충돌을 근본적으로 방지한다.
ES6 이전 객체 속성의 이름 지정 방법

var obj = {
 name:'Joh',
 'my name': 'Johnny'
}
console.log(obj.name); // Joh
console.log(obj['my name']); // Johnny

Symbol 도입 후 변수가 반복되지 않음

let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1 === name2); // false

보시다시피 모두 Symbol 함수를 호출했지만, 되돌아오는 Symbol 유형의name1과name2는 같지 않습니다
Symbol 유형을 문자열 유형으로 변환

let name1 = Symbol('name');
let name2 = Symbol('name');
console.log(name1.toString());// Symbol(name)
console.log(String(name2)); // Symbol(name)

Symbol 유형이 객체에 적용되는 속성

let getName = Symbol('name');
let obj = {
 [getName]() {
  return 'Joh';
 }
}
console.log(obj[getName]()); // Joh

Symbol 유형의 속성은 어느 정도 숨겨집니다.

let name = Symbol('name');
let obj = {
 age:22,
 [name]:'Joh'
};
console.log(Object.keys(obj)); //    Symbol [name] 
//  for-in   Symbol [name] 
for(var k in obj) {
 console.log(k);
}
//   Object.getOwnPropertyNames    Symbol [name] 
console.log(Object.getOwnPropertyNames(obj));
//   Object.getOwnPropertySymbols  
var key = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[key]); // Joh

Symbol 유형을 사용하여 개체의 개인 속성을 시뮬레이션합니다.
User 모듈

'use strict';
let getName = Symbol('getName');
module.exports = class User {
 [getName]() {
  return 'Joh';
 }
 print() {
  console.log(this[getName]());
 }
}

User 모듈 테스트

'use strict';
const User = require('./User');
let user = new User();
user.print(); // Joh
let getName = Symbol('getName');
user[getName](); // getName is not defined  ,   Symbol  

Symbol.for 및 Symbol.keyFor 응용 프로그램

let name1 = Symbol.for('name');
let name2 = Symbol.for('name');
console.log(name1 === name2); // true
console.log(Symbol.keyFor(name1)); // name  ： 

Symbol.for를 사용하여 Symbol 유형의 값을 가져오고 Symbol.keyFor를 사용하여 이전 문자열을 가져옵니다.
for-of를 사용하여 그룹의 항목을 순서대로 출력합니다

let arr = ['a', 'b', 'c'];
for(let item of arr) {
 console.log(item); //   a b c
}

Symbol을 사용합니다.iterator 교체기가 하나하나 그룹의 항목을 되돌려줍니다

let arr = ['a', 'b', 'c'];
var iterator = arr[Symbol.iterator]();
// next  done 
console.log(iterator.next()); // {value: "a", done: false}
console.log(iterator.next()); // {value: "b", done: false}
console.log(iterator.next()); // {value: "c", done: false}
console.log(iterator.next()); // {value: undefined, done: true}
console.log(iterator.next()); // {value: undefined, done: true}

프로그램 최적화:

let arr = ['a', 'b', 'c'];
var iterator = arr[Symbol.iterator]();
// next  done 
var next = iterator.next();
while(!next.done) {
 console.log(next);
 next = iterator.next();
};

Symbol.iterator 객체에 적용할 인스턴스 1:

'use strict';
class UserGroup {
 constructor(users) {
  // json {joh:111,lili:1123}
  this.users = users;
 }
 [Symbol.iterator]() {
  let self = this;
  let i = 0;
  const names = Object.keys(this.users);
  const length = names.length;
  // iterator  ， 
  return {
   next() {
    let name = names[i++];
    let qq = self.users[name];
    return {value: {name, qq}, done: i > length}
   }
  }
 }
}
let group = new UserGroup({'Joh':'595959','Lili':'888116'});
for (let user of group) {
 console.log(user);
}
// { name: 'Joh', qq: '595959' }
// { name: 'Lili', qq: '888116' }

Symbol.iterator 객체에 적용할 인스턴스 2:

'use strict';
var obj = {'Joh':'56999', 'Lili':'899888'};
obj[Symbol.iterator] = function() {
 let self = this;
 let i = 0;
 const names = Object.keys(this);
 const length = names.length;
 // iterator  ， 
 return {
  next() {
   let name = names[i++];
   let qq = self[name];
   return {value: {name, qq}, done: i > length}
  }
 }
}
for (let u of obj) console.log(u);

프로그램 최적화 이후:

'use strict';
var obj = {'Joh':'56999', 'Lili':'899888'};
let iteratorFun = function () {
 let self = this;
 let i = 0;
 const names = Object.keys(this);
 const length = names.length;
 // iterator  ， 
 return {
  next() {
   let name = names[i++];
   let qq = self[name];
   return {value: {name, qq}, done: i > length}
  }
 }
}
obj[Symbol.iterator] = iteratorFun;
for (let u of obj) console.log(u);

Symbol.iterator가 위수 그룹에 적용

'use strict';
var obj = {
 length:2,
 '0':'abc',
 '1':'ddd'
}
/*
// if this , err: obj is not iterable
for (let i of obj) {
 console.log(i);
}
*/
obj[Symbol.iterator] = [][Symbol.iterator]; // handle this first
// then
for (let i of obj) {
 console.log(i);
}

문자열은 Symbol을 구현합니다.iterator 인터페이스

'use strict';
console.log('Joh'[Symbol.iterator]); // [Function: [Symbol.iterator]]
for(let char of 'Lili') {
 console.log(char);
}

마찬가지로 ES6에서 set, 맵 문자열 모두 가능Symbol.iterator 인터페이스
JavaScript에 관한 더 많은 내용은 본 사이트의 주제를 보실 수 있습니다.,,,,,,,,,,,,,,,,
이 문서가 JavaScript 프로그램 설계에 도움이 되었으면 합니다.