ES6: シンボルの概念と使用例

コンセプト: ES6 では、一意の値を表す新しいプリミティブデータ型が導入されていますSymbol。

1-オブジェクトのプロパティ名としてシンボルを使用します

let name = Symbol()
let age = Symbol()
var obj = {
    [name]:"kerwin",
    [age]:100
}

理解例:

a. オブジェクトに固有の属性を追加する

let obj = {
  name: 'Jack'
}

let name = Symbol()
obj[name] = "Mike"

console.log(obj); // {name: 'Jack', Symbol(): 'Mike'}
console.log(obj[name]); // Mike

b. 公共図書館の定義が簡単

ここでプロパティとメソッドをカプセル化するときは、すべて Symbol 型を採用するため、他の人が同じ名前 (名前や年齢など) のプロパティやメソッドを追加したとしても、オブジェクトの本来の使用には影響しません。

let keys = {
  name: Symbol(),
  age: Symbol(),
  location: Symbol(),
  test: Symbol(),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); // {Symbol(): 'Mike', Symbol(): 100, Symbol(): 'WUXI'}
obj[keys.test]() // test

知らせ：

let s1 = Symbol()

//1. 不能进行运算
console.log(s1>2); // Uncaught TypeError: Cannot convert a Symbol value to a number

//2. 显示调用toString()
console.log(s1.toString() + "aaa");

//3. 隐式转换boolean
if(s1){
  console.log("执行");
}

2- Symbol() 関数は、Symbol インスタンスの説明を表す文字列をパラメータとして受け入れることができます。これは主にコンソールに表示されるため、区別しやすくなります。

let keys = {
  name: Symbol("name"),
  age: Symbol("age"),
  location: Symbol("localtion"),
  test: Symbol("test"),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); 
// {Symbol(name): 'Mike', Symbol(age): 100, Symbol(localtion): 'WUXI', Symbol(test): ƒ}

3-問題を徹底的に調べる

Symbol の値を for in で走査することはできません。

let keys = {
    name:Symbol("name"),
    age:Symbol("age")
}
var obj = {
  [keys.name]:"kerwin",
  [keys.age]:100,
  a:1,
  b:2,
  c:3
}

// 输出对象中的普通属性
for(let i in obj) {
  console.log(i); // a b c
}

// 输出对象中的Symbol属性
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)]

// 遍历输出 Reflect.ownKeys(obj) 可以找到对象中所有的属性,并返回一个数组
Reflect.ownKeys(obj).forEach(item=>{
  console.log(item,obj[item])
})
/**
 * Symbol(name) 'kerwin'
 * test.html:32 Symbol(age) 100
*/

補足：Symbolのプロパティを取得するObject.getOwnPropertySymbols(obj)

4- Symbol.for() は同じシンボル値を再利用できます

var obj  ={
    [Symbol.for("name")]:"kerwin",
    [Symbol.for("age")]:100
}

console.log(obj[Symbol.for("name")]) // kerwin

5-シンボルは一意の定数を表します

case は指定された定数のみを使用できます

const VIDEO = Symbol();
const AUDIO = Symbol();
const IMAGE = Symbol();

function play(type) {
  switch(type) {
    case VIDEO:
      console.log("VIDEO");
      break;
    case AUDIO:
      console.log("AUDIO");
      break;
    case IMAGE:
      console.log("IMAGE");
      break;
  }
}

play(VIDEO) // VIDEO

参照: Qian Feng 011-ES6-Symbol_哔哩哔哩_bilibili

ES6: シンボルの概念と使用例

おすすめ