วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เรียนรู้ว่า
Symbol (สัญลักษณ์) เป็นชนิดข้อมูลใหม่ใน ES6 สัญลักษณ์คือค่าดั้งเดิม (ประเภทข้อมูลพื้นฐาน) และอินสแตนซ์สัญลักษณ์จะไม่ซ้ำกันและไม่เปลี่ยนรูป สร้างขึ้นเนื่องจากใช้ในการทำเครื่องหมายแบบไม่ซ้ำกัน จากนั้นจึงใช้เป็นคุณลักษณะของวัตถุในรูปแบบที่ไม่ใช่สตริง เพื่อให้แน่ใจว่าคุณลักษณะของวัตถุใช้ตัวระบุที่ไม่ซ้ำกัน และไม่มีอันตรายจากความขัดแย้งของคุณลักษณะ
สัญลักษณ์การใช้งานพื้นฐานจะต้องเริ่มต้นโดยใช้ฟังก์ชัน Symbol() เนื่องจากสัญลักษณ์นั้นเป็นประเภทดั้งเดิม ตัวดำเนินการ typeof จึงส่งคืนสัญลักษณ์สำหรับสัญลักษณ์
ให้ sym = Symbol(); console.log(typeof sym); // symbol
Symbol() ฟังก์ชันสามารถรับพารามิเตอร์สตริงเพื่ออธิบาย จากนั้นคุณสามารถใช้สตริงนี้เพื่อดีบักโค้ดได้ แต่เป็นที่น่าสังเกตว่าแม้ว่าฟังก์ชัน Symbol() หลายฟังก์ชันจะยอมรับพารามิเตอร์เดียวกัน แต่ค่าของพวกมันก็ไม่เท่ากัน
ให้ genericSymbol = Symbol();
ให้ otherGenericSymbol = Symbol();
ให้ fooSymbol = Symbol("foo");
ให้ otherFooSymbol = Symbol("foo");
console.log(genericSymbol == otherGenericSymbol); // เท็จ
console.log(fooSymbol == otherFooSymbol); // false หากคุณต้องการใช้อินสแตนซ์ Symbol เดียวกันในหลาย ๆ ที่ในโค้ด คุณสามารถส่งผ่านเป็นสตริงแล้วใช้ Symbol.for( ) วิธีการสร้างสัญลักษณ์ที่นำมาใช้ซ้ำได้ คล้ายกับโหมดซิงเกิลตัน เมื่อใช้ Symbol.for() เป็นครั้งแรก มันจะค้นหาทั่วโลกว่าจะใช้ Symbol.for() เพื่อสร้างตามพารามิเตอร์ที่ส่งเข้ามาหรือไม่ เช่นเดียวกัน อินสแตนซ์ถูกส่งไปแล้ว หากมีอยู่ ให้นำมาใช้ใหม่ หากไม่มี ให้สร้าง
สัญลักษณ์ใหม่ ให้ fooGlobalSymbol = Symbol.for("foo"); // สร้างสัญลักษณ์ใหม่ ให้ otherFooGlobalSymbol = Symbol.for("foo"); / / นำกลับมาใช้ใหม่ Signed console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true ความแตกต่างระหว่างอินสแตนซ์ที่สร้างโดย Symbol.for() และอินสแตนซ์ที่สร้างโดย Symbol() คือ อินสแตนซ์ที่สร้างโดย Symbol() จะไม่ซ้ำกันเสมอและ จะไม่เปลี่ยนแปลงเนื่องจากพารามิเตอร์อินพุตเหมือนกันและเท่ากับอินสแตนซ์อื่นๆ แต่อินสแตนซ์ที่สร้างโดย Symbol.for() จะเท่ากันหากพารามิเตอร์เหมือนกัน เนื่องจากจะใช้อินสแตนซ์ Symbol เดียวกันร่วมกัน
ให้ fooSymbol = สัญลักษณ์("foo");
ให้ otherFooSymbol = Symbol("foo");
console.log(fooSymbol == otherFooSymbol); // false
ให้ fooGlobalSymbol = Symbol.for("foo"); // สร้างสัญลักษณ์ใหม่ ให้ otherFooGlobalSymbol = Symbol.for("foo"); // ใช้สัญลักษณ์ console.log ที่มีอยู่ซ้ำ (fooGlobalSymbol === otherFooGlobalSymbol); โดยทั่วไปแอตทริบิวต์ในวัตถุจะอยู่ในรูปแบบของสตริง แต่จริงๆ แล้ว คุณยังสามารถใช้อินสแตนซ์สัญลักษณ์เป็นคุณลักษณะได้ ข้อดีของสิ่งนี้คือคุณลักษณะใหม่ของคุณจะไม่เขียนทับคุณลักษณะใดๆ ก่อนหน้านี้
ให้ s1 = สัญลักษณ์ ( "ฟู"),
s2 = สัญลักษณ์("แถบ"),
s3 = สัญลักษณ์("บาส"),
s4 = สัญลักษณ์("qux");
ให้ o = {
[s1]: "ฟูวาล",
-
// วิธีนี้ใช้ได้เช่นกัน: o[s1] = 'foo val';
console.log(o);
// {สัญลักษณ์(foo): foo val}
Object.defineProperty(o, s2, { ค่า: "bar val" });
console.log(o);
// {สัญลักษณ์(foo): foo val, สัญลักษณ์(bar): bar val}
Object.defineProperties (o, {
[s3]: { ค่า: "baz val" },
[s4]: { ค่า: "qux val" },
-
console.log(o);
// {สัญลักษณ์(foo): foo val, สัญลักษณ์(bar): bar val,
// Symbol(baz): baz val, Symbol(qux): qux val} หมายเหตุ: เมื่อสร้างอินสแตนซ์ Symbol เป็นแอตทริบิวต์ของอ็อบเจ็กต์ หากคุณเปลี่ยนสัญลักษณ์โดยไม่ประกาศตัวแปรเพื่อรับมันที่จุดเริ่มต้น คุณจะต้องสำรวจในภายหลัง สัญลักษณ์ทั้งหมดของคุณสมบัติวัตถุเพื่อค้นหาคีย์คุณสมบัติที่เกี่ยวข้อง:
ให้ o = {
[สัญลักษณ์("foo")]: "foo val",
[สัญลักษณ์("บาร์")]: "บาร์วาล",
-
console.log(o);
// {สัญลักษณ์(foo): "foo val", สัญลักษณ์(bar): "bar val"}
ให้ barSymbol = Object.getOwnPropertySymbols(o).find(สัญลักษณ์ => symbol.toString().match(/bar/));
console.log(สัญลักษณ์บาร์);
// สัญลักษณ์(แถบ) ES6 ยังแนะนำสัญลักษณ์ในตัวที่ใช้กันทั่วไปจำนวนหนึ่ง (สัญลักษณ์ที่รู้จักกันดี) เพื่อแสดงพฤติกรรมภายในของภาษา นักพัฒนาสามารถเข้าถึง เขียนใหม่ หรือจำลองสิ่งเหล่านี้ได้โดยตรง พฤติกรรม หากแอตทริบิวต์เริ่มต้นเหล่านี้ได้รับการแก้ไข ผลการดำเนินการขั้นสุดท้ายของการดำเนินการบางอย่างสามารถเปลี่ยนแปลงได้ ตัวอย่างเช่น การวนซ้ำ for-of จะใช้คุณสมบัติ Symbol.iterator บนออบเจ็กต์ที่เกี่ยวข้อง ดังนั้นคุณจึงสามารถเปลี่ยนลักษณะการทำงานของ for-of เมื่อวนซ้ำออบเจ็กต์โดยกำหนดค่าของ Symbol.iterator บนออบเจ็กต์แบบกำหนดเองใหม่
จริงๆ แล้วคือ Generator ที่ส่งคืน Promise ซึ่งโดยทั่วไปใช้กับ for await ของ
ตามข้อกำหนดของ ECMAScript สัญลักษณ์นี้เป็นแอตทริบิวต์ที่แสดงถึง "วิธีการที่ส่งคืน AsyncIterator เริ่มต้นของวัตถุ โดย for- รอคำสั่งโดยใช้ ". กล่าวอีกนัยหนึ่ง สัญลักษณ์นี้แสดงถึงฟังก์ชันที่ใช้ API ตัววนซ้ำแบบอะซิงโครนัส
คุณสมบัตินี้ถูกกำหนดไว้บนฟังก์ชันต้นแบบ เราทุกคนรู้ดีว่าตัวดำเนินการ instance สามารถใช้เพื่อกำหนดว่า object instance นั้นเป็นของ Constructor บางตัวหรือไม่ หลักการคือตัวดำเนินการอินสแตนซ์จะใช้ฟังก์ชัน Symbol.hasInstance เพื่อกำหนด
ฟังก์ชันความสัมพันธ์ Foo() {}
ให้ f = new Foo();
console.log(f อินสแตนซ์ของ Foo); // true
คลาสบาร์ {}
ให้ b = แถบใหม่ ();
console.log(b instanceof Bar); // trueหาก คุณกำหนดคุณสมบัติ Symbol.hasInstance ของฟังก์ชันใหม่ คุณสามารถกำหนดให้เมธอด instanceof ส่งคืน
คลาส Bar ที่ไม่คาดคิด {}
คลาส Baz ขยายบาร์ {
คงที่ [Symbol.hasInstance]() {
กลับเท็จ;
-
-
ให้ b = ใหม่ Baz();
console.log(Bar[Symbol.hasInstance](b)); // จริง
console.log (b อินสแตนซ์ของบาร์); // จริง
console.log(Baz[Symbol.hasInstance](b)); // false
console.log(b instanceof Baz); // false คุณสมบัตินี้ถูกกำหนดไว้บนต้นแบบของ Array
ตามข้อกำหนดของ ECMAScript สัญลักษณ์นี้เป็นคุณสมบัติที่แสดงถึง "ค่าบูลีน" หากเป็นจริง หมายความว่า วัตถุควรใช้ Array.prototype.concat() ทำให้องค์ประกอบอาร์เรย์เรียบขึ้น" เมธอด Array.prototype.concat() ใน ES6 จะเลือกวิธีแยกออบเจ็กต์ที่มีลักษณะคล้ายอาเรย์ (pseudo-array) เข้ากับอินสแตนซ์อาเรย์ตามประเภทออบเจ็กต์ที่ได้รับ ดังนั้นการปรับเปลี่ยนค่าของ Symbol.isConcatSpreadable จึงสามารถปรับเปลี่ยนพฤติกรรมนี้ได้
เป็นเท็จ: เพิ่มวัตถุทั้งหมดให้กับอาร์เรย์ จริง: เพิ่มคู่ทั้งหมดลงในอาร์เรย์
ให้เริ่มต้น = ["foo"];
ให้ array = ["บาร์"];
console.log(array[Symbol.isConcatSpreadable]); // ไม่ได้กำหนด
console.log(initial.concat(array)); // ['foo', 'bar']
อาร์เรย์ [Symbol.isConcatSpreadable] = เท็จ;
console.log(initial.concat(array)); // ['foo', Array(1)]
ให้ arrayLikeObject = { ความยาว: 1, 0: "baz" };
console.log(arrayLikeObject[Symbol.isConcatSpreadable]); // ไม่ได้กำหนด
console.log(initial.concat(arrayLikeObject)); // ['foo', {...}]
arrayLikeObject[Symbol.isConcatSpreadable] = จริง;
console.log(initial.concat(arrayLikeObject)); // ['foo', 'baz']
ให้ otherObject = new Set().add("qux");
console.log(otherObject[Symbol.isConcatSpreadable]); // ไม่ได้กำหนด
console.log(initial.concat(otherObject)); // ['foo', ชุด (1)]
otherObject[Symbol.isConcatSpreadable] = จริง;
console.log(initial.concat(otherObject)); // ['foo'] ตามข้อกำหนด ECMAScript สัญลักษณ์นี้เป็นแอตทริบิวต์ที่แสดงถึง "วิธีการที่ส่งคืนตัววนซ้ำเริ่มต้นของวัตถุ ใช้โดย for- คำสั่ง of ใช้ "
คุณลักษณะนี้จะส่งคืนฟังก์ชัน Generator และ for of จะเรียกใช้เมธอด next() ตามลำดับ นี่คือเหตุผลที่ for of สามารถใช้กับวัตถุบางอย่างได้
ตัวส่งคลาส {
ตัวสร้าง (สูงสุด) {
นี่.สูงสุด = สูงสุด;
นี่.idx = 0;
-
*[สัญลักษณ์.ตัววนซ้ำ]() {
ในขณะที่ (this.idx < this.max) {
ให้ผล this.idx++;
-
-
-
ฟังก์ชั่นนับ () {
ให้ emitter = Emitter ใหม่ (5);
สำหรับ (const x ของตัวส่งสัญญาณ) {
console.log(x);
-
-
นับ();
// 0
// 1
// 2
// 3
// 4 ตามข้อกำหนดของ ECMAScript สัญลักษณ์นี้เป็นแอตทริบิวต์แสดงถึง "วิธีนิพจน์ทั่วไปที่ใช้นิพจน์ทั่วไปเพื่อจับคู่สตริง ใช้โดยวิธี String.prototype.match()"
เมธอด String.prototype.match() ประเมินนิพจน์ทั่วไปโดยใช้ฟังก์ชันที่คีย์โดย Symbol.match ดังนั้นการเปลี่ยนแอตทริบิวต์ Symbol.match ของนิพจน์ทั่วไปทำให้ String.prototype.match() รับค่าที่คุณต้องการ
console.log(RegExp.prototype[Symbol.match]);
// ƒ [Symbol.match]() { [รหัสพื้นเมือง] }
console.log("foobar".match(/bar/));
// ["bar", ดัชนี: 3, อินพุต: "foobar", กลุ่ม: ไม่ได้กำหนด]
คลาส FooMatcher {
คงที่ [Symbol.match] (เป้าหมาย) {
กลับ target.includes("foo");
-
-
console.log("foobar".match(FooMatcher)); // true
console.log("barbaz".match(FooMatcher)); // false
คลาส StringMatcher {
ตัวสร้าง (str) {
นี่.str = str;
-
[Symbol.match](เป้าหมาย) {
กลับ target.includes(this.str);
-
-
console.log("foobar".match(new StringMatcher("foo"))); // true
console.log("barbaz".match(new StringMatcher("qux"))); // false สัญลักษณ์นี้เป็นแอตทริบิวต์แสดงถึง "วิธีนิพจน์ทั่วไปที่ส่งคืนนิพจน์ทั่วไปที่ตรงกันในดัชนีสตริงของ สูตร ใช้โดยเมธอด String.prototype.search()"
สัญลักษณ์นี้เป็นแอตทริบิวต์แสดงถึง "ค่าฟังก์ชันที่ทำหน้าที่เป็นตัวสร้างสำหรับการสร้างวัตถุที่ได้รับ"
สัญลักษณ์นี้เป็นแอตทริบิวต์แสดงถึง "วิธีนิพจน์ทั่วไปที่แยกสตริงที่ตำแหน่งดัชนีที่ตรงกับนิพจน์ทั่วไป ใช้โดยวิธี String.prototype.split()"
สัญลักษณ์นี้เป็นคุณลักษณะแสดงถึง "วิธีการแปลงวัตถุให้เป็นค่าดั้งเดิมที่สอดคล้องกัน ใช้โดยการดำเนินการนามธรรมของ ToPrimitive"
สัญลักษณ์นี้เป็นคุณลักษณะแสดงถึง "สตริงที่ String ถูกใช้ สร้างคำอธิบายสตริงเริ่มต้นของวัตถุ ใช้โดยเมธอดในตัว Object.prototype.toString()"
สัญลักษณ์นี้แสดงถึงวัตถุเป็นคุณสมบัติ และคุณสมบัติทั้งหมดของวัตถุและคุณสมบัติที่สืบทอดมาจะได้รับมา จาก Excluded from object ที่เกี่ยวข้องพร้อมการเชื่อมโยงสภาพแวดล้อม