Symbol ที่รู้จักกันดี
ปรับแต่งพฤติกรรมด้วย Symbol.iterator และ Symbol อื่น ๆ
Symbol ที่รู้จักกันดี เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
สัญลักษณ์ที่เป็นที่รู้จัก
สัญลักษณ์ที่เป็นที่รู้จัก คือสัญลักษณ์ที่มีมาให้ในตัวและจัดเก็บอยู่บนออบเจ็กต์สัญลักษณ์ สัญลักษณ์เหล่านี้ช่วยปรับแต่งพฤติกรรมของออบเจ็กต์เมื่อใช้ความสามารถของภาษา เช่น การวนซ้ำและการแปลงค่า
console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toPrimitive)Symbol.iterator
Symbol.iterator กำหนดวิธีวนซ้ำออบเจ็กต์ด้วยลูปวนตามค่าและตัวดำเนินการกระจาย อาร์เรย์และข้อความที่มีมาให้ในตัวมีความสามารถนี้อยู่แล้ว
const arr = [10, 20]
const it = arr[Symbol.iterator]()
console.log(it.next().value)การทำให้ออบเจ็กต์วนซ้ำได้
คุณสามารถเพิ่มเมธอด Symbol.iterator ที่ส่งคืนตัววนซ้ำซึ่งมีเมธอด next เพื่อทำให้ออบเจ็กต์ใด ๆ ใช้กับลูปวนตามค่าได้
const range = {
from: 1,
to: 3,
[Symbol.iterator]() {
let cur = this.from
const last = this.to
return {
next() {
return cur <= last ? { value: cur++, done: false } : { value: undefined, done: true }
}
}
}
}
for (const n of range) {
console.log(n)
}การวนซ้ำด้วยการกระจาย
เนื่องจาก Symbol.iterator ควบคุมการกระจายด้วย ออบเจ็กต์ที่วนซ้ำได้แบบกำหนดเองจึงสามารถขยายเป็นอาร์เรย์ได้
const nums = {
[Symbol.iterator]() {
let i = 0
return { next() { return i < 3 ? { value: i++, done: false } : { value: undefined, done: true } } }
}
}
console.log([...nums])Symbol.toPrimitive
Symbol.toPrimitive ช่วยให้ออบเจ็กต์ควบคุมวิธีแปลงตัวเองเป็นค่าพื้นฐานในบริบทตัวเลข ข้อความ หรือค่าเริ่มต้น
const money = {
amount: 50,
[Symbol.toPrimitive](hint) {
if (hint === "number") return this.amount
return "$" + this.amount
}
}
console.log(+money)
console.log(money + "")อาร์กิวเมนต์คำใบ้
ตัวจัดการการแปลงจะได้รับคำใบ้ว่าเป็นตัวเลข ข้อความ หรือค่าเริ่มต้น ทำให้สามารถส่งคืนค่าที่เหมาะสมกับแต่ละสถานการณ์
const obj = {
[Symbol.toPrimitive](hint) {
return hint
}
}
console.log(+obj)
console.log(obj + "")
console.log(String(obj))Symbol.toStringTag
Symbol.toStringTag ปรับแต่งข้อความที่ toString ตามค่าเริ่มต้นรายงานสำหรับออบเจ็กต์ ซึ่งมีประโยชน์สำหรับกำหนดป้ายกำกับชนิดข้อมูลเอง
const widget = {
[Symbol.toStringTag]: "Widget"
}
console.log(Object.prototype.toString.call(widget))Symbol.hasInstance
Symbol.hasInstance ช่วยให้คลาสหรือออบเจ็กต์ปรับแต่งพฤติกรรมของตัวดำเนินการตรวจสอบอินสแตนซ์ได้
class Even {
static [Symbol.hasInstance](num) {
return num % 2 === 0
}
}
console.log(4 instanceof Even)
console.log(3 instanceof Even)สิ่งที่มีมาให้ในตัวก็ใช้เช่นกัน
อาร์เรย์ แผนที่ เซต และข้อความต่างก็ใช้ Symbol.iterator จึงทำงานร่วมกับลูปวนตามค่าและการกระจายได้อย่างราบรื่น
const set = new Set([1, 2, 3])
console.log([...set])เหตุผลที่สัญลักษณ์เหล่านี้สำคัญ
สัญลักษณ์ที่เป็นที่รู้จักคือจุดขยายความสามารถ ช่วยให้ออบเจ็กต์ของคุณทำงานร่วมกับการดำเนินการพื้นฐานของภาษาได้อย่างเป็นธรรมชาติ แทนที่จะต้องเขียนกรณีพิเศษแยกต่างหาก
const list = {
items: ["a", "b"],
[Symbol.iterator]() {
return this.items[Symbol.iterator]()
}
}
for (const x of list) {
console.log(x)
}การค้นหาสัญลักษณ์เหล่านี้
ออบเจ็กต์สัญลักษณ์เปิดเผยสัญลักษณ์เหล่านี้ในรูปแบบคุณสมบัติแบบสถิต คุณสามารถอ้างอิงได้ เช่น Symbol.iterator และ Symbol.toPrimitive เมื่อจำเป็น
console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toStringTag)
console.log(typeof Symbol.hasInstance)ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับสัญลักษณ์ที่เป็นที่รู้จัก
สรุปทบทวน
สรุปทบทวน: สัญลักษณ์ที่เป็นที่รู้จักช่วยปรับแต่งพฤติกรรมของภาษา
- Symbol.iterator ควบคุมลูปวนตามค่าและการกระจาย
- Symbol.toPrimitive ควบคุมการแปลงค่าผ่านคำใบ้
- Symbol.toStringTag ใช้กำหนดป้ายกำกับให้ออบเจ็กต์
- Symbol.hasInstance ใช้ปรับแต่งการตรวจสอบอินสแตนซ์
const r = { [Symbol.iterator]() { let i = 0; return { next() { return i < 2 ? { value: i++, done: false } : { value: 0, done: true } } } } }
console.log([...r])คำถามที่พบบ่อย
บทเรียน “Symbol ที่รู้จักกันดี” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Symbol ที่รู้จักกันดี” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Symbol ที่รู้จักกันดี”
ปรับแต่งพฤติกรรมด้วย Symbol.iterator และ Symbol อื่น ๆ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “Symbol ที่รู้จักกันดี” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้าง Symbol ที่ไม่ซ้ำกัน
- การใช้ Symbol เป็นคีย์ของออบเจ็กต์
- รีจิสทรี Symbol ส่วนกลาง
- Symbol ที่รู้จักกันดี