0Pricing
JavaScript Academy · บทเรียน

การใช้ Symbol เป็นคีย์ของออบเจ็กต์

ใช้ Symbol สำหรับคุณสมบัติที่ไม่ชนกัน

การใช้ Symbol เป็นคีย์ของออบเจ็กต์ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

สัญลักษณ์ในฐานะ key

สัญลักษณ์สามารถใช้เป็น key ของคุณสมบัติในออบเจ็กต์ ได้ เนื่องจากสัญลักษณ์แต่ละตัวไม่ซ้ำกัน คุณสมบัติดังกล่าวจึงไม่สามารถชนกับ key ที่เป็นข้อความโดยไม่ตั้งใจ

const id = Symbol("id")
const user = {}
user[id] = 123
console.log(user[id])

คีย์สัญลักษณ์ที่คำนวณจากนิพจน์

หากต้องการใช้สัญลักษณ์เป็น key ในตัวอักษรออบเจ็กต์ ให้ใส่ไว้ในวงเล็บเหลี่ยมเพื่อระบุชื่อคุณสมบัติที่คำนวณจากนิพจน์

const id = Symbol("id")
const user = {
  name: "Ann",
  [id]: 99
}
console.log(user[id])

การอ่านคุณสมบัติของสัญลักษณ์

คุณต้องมีการอ้างอิงถึงสัญลักษณ์ตัวเดิมเพื่ออ่านคุณสมบัติของสัญลักษณ์นั้น หากไม่มีการอ้างอิง ค่าดังกล่าวก็จะเสมือนถูกซ่อนไว้

const secret = Symbol("secret")
const obj = { [secret]: "hidden" }
console.log(obj[secret])

ไม่ถูกนับในลูปวนตามคีย์

key ของสัญลักษณ์จะถูกข้ามโดยลูปวนตามคีย์ ทำให้คุณสมบัติของสัญลักษณ์ไม่ปรากฏในการวนซ้ำทั่วไป

const tag = Symbol("tag")
const obj = { a: 1, b: 2, [tag]: 3 }
for (const key in obj) {
  console.log(key)
}

ถูกข้ามโดย Object.keys

Object.keys จะส่งคืนเฉพาะ key ที่เป็นข้อความ ดังนั้นคุณสมบัติที่ใช้สัญลักษณ์เป็น key จึงถูกตัดออกจากผลลัพธ์เช่นกัน

const tag = Symbol("tag")
const obj = { a: 1, [tag]: 2 }
console.log(Object.keys(obj))

ไม่ปรากฏใน JSON

JSON.stringify จะไม่สนใจ key ของสัญลักษณ์โดยสิ้นเชิง ดังนั้น key เหล่านี้จะไม่ปรากฏในผลลัพธ์ที่แปลงเป็นข้อมูลอนุกรม ทำให้เหมาะสำหรับเก็บข้อมูลกำกับภายใน

const meta = Symbol("meta")
const obj = { name: "Bo", [meta]: "internal" }
console.log(JSON.stringify(obj))

การค้นหา key ของสัญลักษณ์

หากต้องการแสดงรายการ key ของสัญลักษณ์ ให้ใช้ Object.getOwnPropertySymbols ซึ่งจะส่งคืนอาร์เรย์ของคุณสมบัติที่ใช้สัญลักษณ์เป็น key บนออบเจ็กต์

const tag = Symbol("tag")
const obj = { a: 1, [tag]: 2 }
const syms = Object.getOwnPropertySymbols(obj)
console.log(syms.length)

การหลีกเลี่ยงชื่อที่ชนกัน

key ที่เป็นสัญลักษณ์ช่วยให้ไลบรารีต่าง ๆ เพิ่มคุณสมบัติลงในออบเจ็กต์เดียวกันได้โดยไม่เสี่ยงเขียนทับกัน เพราะสัญลักษณ์ของแต่ละไลบรารีแตกต่างกัน

const libA = Symbol("data")
const libB = Symbol("data")
const shared = {}
shared[libA] = 1
shared[libB] = 2
console.log(shared[libA], shared[libB])

key ของสัญลักษณ์กับการกระจายออบเจ็กต์

ตัวดำเนินการกระจายออบเจ็กต์จะคัดลอก key ของสัญลักษณ์ด้วย ต่างจากลูปวนตามคีย์และ Object.keys ดังนั้นควรทราบว่า key เหล่านี้จะถูกส่งต่อเมื่อโคลนออบเจ็กต์

const tag = Symbol("tag")
const src = { a: 1, [tag]: 2 }
const copy = { ...src }
console.log(copy[tag])

การจัดเก็บข้อมูลที่คล้ายเป็นส่วนตัว

key ของสัญลักษณ์มอบความเป็นส่วนตัวในระดับหนึ่ง ข้อมูลจะเข้าถึงได้เฉพาะโค้ดที่ถือสัญลักษณ์นั้นอยู่ จึงไม่ปรากฏในรายการคุณสมบัติตามปกติ

const balance = Symbol("balance")
function makeAccount() {
  const acct = {}
  acct[balance] = 100
  return { acct: acct, key: balance }
}
const a = makeAccount()
console.log(a.acct[a.key])

การลบคุณสมบัติของสัญลักษณ์

คุณลบคุณสมบัติของสัญลักษณ์ได้เช่นเดียวกับคุณสมบัติอื่น โดยใช้ตัวดำเนินการลบพร้อมการอ้างอิงถึงสัญลักษณ์

const tag = Symbol("tag")
const obj = { [tag]: 5 }
delete obj[tag]
console.log(obj[tag])

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับ key ของสัญลักษณ์

สรุปทบทวน

สรุปทบทวน: สัญลักษณ์ช่วยสร้าง key ของออบเจ็กต์ที่ปลอดภัยและซ่อนอยู่

  • ใช้วงเล็บเหลี่ยมสำหรับ key ของสัญลักษณ์ที่คำนวณจากนิพจน์
  • ถูกข้ามโดยลูปวนตามคีย์ Object.keys และ JSON
  • แสดงรายการได้ด้วย Object.getOwnPropertySymbols
  • เหมาะอย่างยิ่งสำหรับข้อมูลกำกับที่ไม่ชนกัน
const k = Symbol("k")
const o = { [k]: 7 }
console.log(o[k])

คำถามที่พบบ่อย

บทเรียน “การใช้ Symbol เป็นคีย์ของออบเจ็กต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การใช้ Symbol เป็นคีย์ของออบเจ็กต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การใช้ Symbol เป็นคีย์ของออบเจ็กต์”

ใช้ Symbol สำหรับคุณสมบัติที่ไม่ชนกัน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การใช้ Symbol เป็นคีย์ของออบเจ็กต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การสร้าง Symbol ที่ไม่ซ้ำกัน
  2. การใช้ Symbol เป็นคีย์ของออบเจ็กต์
  3. รีจิสทรี Symbol ส่วนกลาง
  4. Symbol ที่รู้จักกันดี
← กลับไปที่ JavaScript Academy