iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

初學者跪著學JavaScript系列 第 7

初學者跪著學JavaScript Day7 : 資料型別 : Symbol

一日客家話:中文:茄子 客語:雕吹
當作是一種語言擴充機制

  • primitive data type
  • 非字串Property特性的名稱用途
  • 不支持new Symbol(),不是建構子所以無法和new使用
  • Symbol(描述Symbol)會產生唯一 unique Symbol,可以解決相同名被覆蓋
  • 沒有literal 語法所以要建立需呼叫Symbol()
  • 不能進行四則運算
  • 屬性無法使用for in
    但可以使用reflect.ownKeys 取得key name

當你想要做共享Symbol可以使用 Symbol.for()

JavaScript有一個全域的Symbol registry註冊狀態(犀牛JS大全翻譯)

  • Symbol.for("key")
    • key會在全域的Symbol registry(全域符號註冊表)找尋
    • 當字串關聯的Symbol值相同會返回相同的Symbol
    • 當字串關聯的Symbol值不相同就會在Symbol registry創新的Symbol

Symbol.for() function 和 Symbol() function 是不一樣的

Symbol()不會回傳相同的值
Symbol.for()相同字串關聯就會回傳相同值


建立Symbol

方式一:Symbol() function

let s = Symbol('wendy');
console.log(typeof s); //symbol

方式二:Symbol.for() function

let c = Symbol.for('wendy');
console.log(c, typeof c);//Symbol(wendy) symbol

Symbol( )有唯一性

let a = Symbol('wendy');
let b = Symbol('wendy');
console.log(a===b)//false

Symbol.for()

let c = Symbol.for('wendy');
let d = Symbol.for('wendy');

console.log(c === d);//true
console.log(c, typeof c);//Symbol(wendy) symbol
console.log(d, typeof d);//Symbol(wendy) symbol
let a = Symbol('wendy');
let b = Symbol('wendy');
console.log(a, typeof a);//Symbol(wendy) symbol
console.log(b, typeof b);//Symbol(wendy) symbol
console.log(a === b);//false

let string = a.toString();
console.log(string);//Symbol(wendy)

無法四則運算:

let value1 = Symbol('1');
let value2 = Symbol('2');
console.log(value1 + value2);//error

一個基本的物件:是由properties特性:key和value 組成的無序群集
properties name(key) : 通常是字串
物件裡的key 使用 Symbol

let apple = Symbol('red apple');
let myFruit = {
    [apple]: '2',
};


console.log(myFruit);
//{ [Symbol(red apple)]: '2' }
console.log(Object.getOwnPropertyNames(myFruit));
//[]
console.log(Object.getOwnPropertySymbols(myFruit)); 
//[ Symbol(red apple) ]

getOwnPropertyNames:
回傳一個array裡面放所有Property的Names

getOwnPropertySymbols:
1.返回:symbol的array
2.創建symbol 才有symbol的array

當想要使用相同properties name
因為Symbol 具有唯一性所以不會被覆蓋

const fruit = 'fruit';
let symbol1 = Symbol(fruit);
let symbol2 = Symbol(fruit);
let myObject = {};
myObject[symbol1] = 'apple';
myObject[symbol2] = 'banana';
console.log(myObject);
//{ [Symbol(fruit)]: 'apple', [Symbol(fruit)]: 'banana' }

但無法使用:for/in、for...of
for/in:列出object的key值
以Symbol為propertie name是不會被列舉

const fruit = 'fruit';
let symbol1 = Symbol(fruit);
let symbol2 = Symbol(fruit);
let myObject = { drink: 'water' };
myObject[symbol1] = 'apple';
myObject[symbol2] = 'banana';
console.log(myObject);
//{ drink: 'water', [Symbol(fruit)]: 'apple', [Symbol(fruit)]: 'banana' }
console.log(myObject[symbol1]); //apple
console.log(myObject[symbol2]); //banana

for (let x in myObject) {
    console.log(x); //drink
}

尚硅谷 ES6 Symbol的介绍与创建
mdn
ES6 and Typescript Tutorial - 36 - Symbols
JavaScript 大全
The Ultimate Guide to JavaScript Symbol


上一篇
初學者跪著學JavaScript Day6 :template literals和 tagged template literals傻傻分不清楚
下一篇
初學者跪著學JavaScript Day8 : 資料型別:BigInt
系列文
初學者跪著學JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-22 13:49:07

我喜歡初版的圖,有畢卡索的速寫fu

wendy iT邦新手 2 級 ‧ 2021-09-23 06:27:41 檢舉

謝謝喔 那個只能留給我自己偷偷欣賞

1
MJ
iT邦新手 4 級 ‧ 2021-09-22 15:53:59

老...老師,請問Symbol跟雕吹有什麼關係?

wendy iT邦新手 2 級 ‧ 2021-09-22 20:23:57 檢舉

茄子英文和Symbol 都有l的關係

我要留言

立即登入留言