วัตถุ

ดังที่เราทราบจากบท Data types มีข้อมูลอยู่แปดประเภทใน JavaScript เจ็ดรายการเรียกว่า "ดั้งเดิม" เนื่องจากค่าของพวกมันมีเพียงสิ่งเดียว (ไม่ว่าจะเป็นสตริง ตัวเลข หรืออะไรก็ตาม)

ในทางตรงกันข้าม ออบเจ็กต์ถูกใช้เพื่อจัดเก็บคอลเลกชันคีย์ของข้อมูลต่างๆ และเอนทิตีที่ซับซ้อนมากขึ้น ใน JavaScript วัตถุจะแทรกซึมเกือบทุกแง่มุมของภาษา ดังนั้นเราต้องเข้าใจก่อนจึงจะเจาะลึกไปที่อื่นได้

สามารถสร้างออบเจ็กต์ได้ด้วยวงเล็บรูป {…} พร้อมด้วยรายการ คุณสมบัติ เพิ่มเติม คุณสมบัติคือคู่ "คีย์: ค่า" โดยที่ key คือสตริง (หรือที่เรียกว่า "ชื่อคุณสมบัติ") และ value สามารถเป็นอะไรก็ได้

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

วัตถุว่าง (“ตู้เปล่า”) สามารถสร้างขึ้นได้โดยใช้หนึ่งในสองไวยากรณ์:

 ให้ผู้ใช้ = วัตถุใหม่ (); // ไวยากรณ์ "ตัวสร้างวัตถุ"
ให้ผู้ใช้ = {};  // ไวยากรณ์ "วัตถุตัวอักษร" 

โดยปกติแล้ว วงเล็บรูป {...} จะถูกใช้ การประกาศนั้นเรียกว่า วัตถุตามตัวอักษร

ตัวอักษรและคุณสมบัติ

เราสามารถใส่คุณสมบัติบางอย่างลงใน {...} ได้ทันทีเป็นคู่ “key: value”:

 ให้ผู้ใช้ = { // วัตถุ
  ชื่อ: "John", // โดยคีย์ "ชื่อ" เก็บค่า "John"
  อายุ: 30 // ตามคีย์ "อายุ" เก็บมูลค่า 30
-

คุณสมบัติมีคีย์ (หรือที่เรียกว่า "ชื่อ" หรือ "ตัวระบุ") นำหน้าเครื่องหมายทวิภาค ":" และค่าทางด้านขวา

ในวัตถุ user มีคุณสมบัติสองประการ:

1. คุณสมบัติแรกมีชื่อ "name" และค่า "John"

2. อันที่สองมีชื่อ "age" และมีค่า 30

ออบเจ็กต์ user ที่เป็นผลลัพธ์สามารถจินตนาการได้ว่าเป็น Cabinet ที่มีไฟล์ลงนามสองไฟล์ที่มีป้ายกำกับว่า "ชื่อ" และ "อายุ"

เราสามารถเพิ่ม ลบ และอ่านไฟล์ได้ตลอดเวลา

ค่าทรัพย์สินสามารถเข้าถึงได้โดยใช้เครื่องหมายจุด:

 // รับค่าคุณสมบัติของวัตถุ:
การแจ้งเตือน (ชื่อผู้ใช้.ชื่อ); // จอห์น
การแจ้งเตือน ( user.age ); // 30

ค่าสามารถเป็นประเภทใดก็ได้ มาเพิ่มบูลีนกัน:

 user.isAdmin = จริง; 

หากต้องการลบคุณสมบัติ เราสามารถใช้ตัวดำเนินการ delete :

 ลบ user.age; 

เรายังสามารถใช้ชื่อคุณสมบัติที่มีหลายคำได้ แต่ต้องยกมา:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30,
  "likes Birds": true // ต้องอ้างอิงชื่อคุณสมบัติหลายคำ
- 

คุณสมบัติสุดท้ายในรายการอาจลงท้ายด้วยลูกน้ำ:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30,
-

นั่นเรียกว่าลูกน้ำ "ต่อท้าย" หรือ "ห้อย" ทำให้เพิ่ม/ลบ/ย้ายคุณสมบัติได้ง่ายขึ้น เนื่องจากทุกบรรทัดจะเหมือนกัน

วงเล็บเหลี่ยม

สำหรับคุณสมบัติที่มีหลายคำ การเข้าถึงแบบจุดจะไม่ทำงาน:

 // นี่จะทำให้เกิดข้อผิดพลาดทางไวยากรณ์
user.likes นก = จริง

JavaScript ไม่เข้าใจสิ่งนั้น คิดว่าเราจัดการกับ user.likes แล้วแสดงข้อผิดพลาดทางไวยากรณ์เมื่อเจอ birds ที่ไม่คาดคิด

จุดต้องการให้คีย์เป็นตัวระบุตัวแปรที่ถูกต้อง นั่นหมายความว่า: ไม่มีการเว้นวรรค ไม่ขึ้นต้นด้วยตัวเลข และไม่มีอักขระพิเศษ ( อนุญาตให้ใช้ $ และ _ )

มี "เครื่องหมายวงเล็บเหลี่ยม" อีกแบบหนึ่งที่ใช้ได้กับสตริงใดๆ:

 ให้ผู้ใช้ = {};

// ชุด
ผู้ใช้ ["ชอบนก"] = จริง;

// รับ
alert(ผู้ใช้["ชอบนก"]); // จริง

// ลบ
ลบผู้ใช้["ชอบนก"];

ตอนนี้ทุกอย่างเรียบร้อยดี โปรดทราบว่าสตริงที่อยู่ในวงเล็บมีเครื่องหมายคำพูดอย่างถูกต้อง (เครื่องหมายคำพูดประเภทใดก็ได้)

วงเล็บเหลี่ยมยังให้วิธีการรับชื่อคุณสมบัติเป็นผลลัพธ์ของนิพจน์ใดๆ ซึ่งแตกต่างจากสตริงตามตัวอักษรจากตัวแปรดังต่อไปนี้:

 ให้คีย์ = "ชอบนก";

// เช่นเดียวกับผู้ใช้ ["ชอบนก"] = จริง;
ผู้ใช้ [คีย์] = จริง;

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

ตัวอย่างเช่น:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30
-

ให้ key = prompt("คุณต้องการทราบอะไรเกี่ยวกับผู้ใช้นี้", "ชื่อ");

// เข้าถึงโดยตัวแปร
การแจ้งเตือน( ผู้ใช้[คีย์] ); // จอห์น (ถ้าใส่ "ชื่อ")

ไม่สามารถใช้เครื่องหมายจุดในลักษณะเดียวกันได้:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30
-

ให้คีย์ = "ชื่อ";
alert( user.key ) // ไม่ได้กำหนด

คุณสมบัติที่คำนวณ

เราสามารถใช้วงเล็บเหลี่ยมในวัตถุตามตัวอักษรเมื่อสร้างวัตถุ นั่นเรียกว่า คุณสมบัติที่คำนวณได้

ตัวอย่างเช่น:

 ให้ผลไม้ = prompt("ผลไม้ชนิดไหนที่จะซื้อ?", "แอปเปิ้ล");

ให้กระเป๋า = {
  [ผลไม้]: 5, // ชื่อของคุณสมบัตินำมาจากผลไม้ตัวแปร
-

การแจ้งเตือน( bag.apple ); // 5 ถ้าผลไม้ = "แอปเปิ้ล"

ความหมายของคุณสมบัติที่คำนวณนั้นเรียบง่าย: [fruit] หมายความว่าชื่อคุณสมบัติควรนำมาจาก fruit

ดังนั้น หากผู้เยี่ยมชมป้อน "apple" bag จะกลายเป็น {apple: 5}

โดยพื้นฐานแล้วมันใช้งานได้เหมือนกับ:

 ให้ผลไม้ = prompt("ผลไม้ชนิดไหนที่จะซื้อ?", "แอปเปิ้ล");
ให้กระเป๋า = {};

// รับชื่อคุณสมบัติจากตัวแปรผลไม้
ถุง [ผลไม้] = 5;

…แต่ดูดีกว่า

เราสามารถใช้นิพจน์ที่ซับซ้อนมากขึ้นภายในวงเล็บเหลี่ยมได้:

 ให้ผลไม้ = 'แอปเปิ้ล';
ให้กระเป๋า = {
  [ผลไม้ + 'คอมพิวเตอร์']: 5 // bag.appleComputers = 5
-

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

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

มูลค่าทรัพย์สินชวเลข

ในโค้ดจริง เรามักจะใช้ตัวแปรที่มีอยู่เป็นค่าสำหรับชื่อคุณสมบัติ

ตัวอย่างเช่น:

 ฟังก์ชั่น makeUser(ชื่อ, อายุ) {
  กลับ {
    ชื่อ: ชื่อ,
    อายุ: อายุ,
    // ...คุณสมบัติอื่นๆ
  -
-

ให้ผู้ใช้ = makeUser("จอห์น", 30);
การแจ้งเตือน (ชื่อผู้ใช้); // จอห์น

ในตัวอย่างข้างต้น คุณสมบัติมีชื่อเดียวกันกับตัวแปร กรณีการใช้งานในการสร้างคุณสมบัติจากตัวแปรเป็นเรื่องปกติมาก โดยมี ค่าคุณสมบัติพิเศษในการจดชวเลข เพื่อทำให้สั้นลง

แทนที่จะเป็น name:name เราก็สามารถเขียน name ได้ เช่นนี้

 ฟังก์ชั่น makeUser(ชื่อ, อายุ) {
  กลับ {
    ชื่อ // เหมือนกับชื่อ: ชื่อ
    อายุ // เช่นเดียวกับอายุ: อายุ
    -
  -
-

เราสามารถใช้ทั้งคุณสมบัติปกติและชวเลขในวัตถุเดียวกัน:

 ให้ผู้ใช้ = {
  ชื่อ // เหมือนกับชื่อ:ชื่อ
  อายุ: 30
-

ข้อจำกัดของชื่อคุณสมบัติ

ดังที่เราทราบกันดีอยู่แล้วว่าตัวแปรไม่สามารถมีชื่อเท่ากับคำสงวนภาษาคำใดคำหนึ่งเช่น "for", "let", "return" ฯลฯ

แต่สำหรับคุณสมบัติของอ็อบเจ็กต์ ไม่มีข้อจำกัดดังกล่าว:

 // คุณสมบัติเหล่านี้ถูกต้อง
ให้ obj = {
  สำหรับ: 1,
  ให้: 2,
  กลับ: 3
-

การแจ้งเตือน ( obj.for + obj.let + obj.return );  // 6

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

ประเภทอื่นๆ จะถูกแปลงเป็นสตริงโดยอัตโนมัติ

ตัวอย่างเช่น ตัวเลข 0 จะกลายเป็นสตริง "0" เมื่อใช้เป็นคีย์คุณสมบัติ:

 ให้ obj = {
  0: "ทดสอบ" // เหมือนกับ "0": "ทดสอบ"
-

// การแจ้งเตือนทั้งสองเข้าถึงคุณสมบัติเดียวกัน (หมายเลข 0 จะถูกแปลงเป็นสตริง "0")
การแจ้งเตือน( obj["0"] ); // ทดสอบ
การแจ้งเตือน (obj[0] ); // ทดสอบ (คุณสมบัติเดียวกัน)

มี gotcha ผู้เยาว์ที่มีคุณสมบัติพิเศษชื่อ __proto__ เราไม่สามารถตั้งค่าให้เป็นค่าที่ไม่ใช่วัตถุได้:

 ให้ obj = {};
obj.__โปรโต__ = 5; // กำหนดหมายเลข
การแจ้งเตือน (obj.__โปรโต__); // [วัตถุวัตถุ] - ค่าเป็นวัตถุ ไม่ทำงานตามที่ตั้งใจไว้

ดังที่เราเห็นจากโค้ด การมอบหมายให้กับ 5 ดั้งเดิมจะถูกละเว้น

เราจะพูดถึงลักษณะพิเศษของ __proto__ ในบทต่อๆ ไป และแนะนำวิธีแก้ไขพฤติกรรมดังกล่าว

การทดสอบการมีอยู่ของคุณสมบัติ ตัวดำเนินการ "ใน"

คุณลักษณะเด่นของออบเจ็กต์ใน JavaScript เมื่อเปรียบเทียบกับภาษาอื่นๆ มากมายก็คือ สามารถเข้าถึงคุณสมบัติใดๆ ก็ได้ จะไม่มีข้อผิดพลาดหากไม่มีคุณสมบัติ!

การอ่านคุณสมบัติที่ไม่มีอยู่เพียงแต่ส่งคืน undefined ดังนั้นเราจึงสามารถทดสอบได้อย่างง่ายดายว่ามีทรัพย์สินอยู่หรือไม่:

 ให้ผู้ใช้ = {};

การแจ้งเตือน ( user.noSuchProperty === ไม่ได้กำหนด ); // true หมายถึง "ไม่มีคุณสมบัติดังกล่าว"

นอกจากนี้ยังมีโอเปอเรเตอร์พิเศษ "in" สำหรับสิ่งนั้นด้วย

ไวยากรณ์คือ:

 "คีย์" ในวัตถุ

ตัวอย่างเช่น:

 ให้ผู้ใช้ = { ชื่อ: "จอห์น" อายุ: 30 };

alert( "อายุ" ในผู้ใช้); // จริงอยู่ มี user.age อยู่
alert( "blabla" ในผู้ใช้); // เท็จ ไม่มี user.blabla

โปรดทราบว่าทางด้านซ้ายของ in จะต้องมี ชื่อที่พัก โดยปกติจะเป็นสตริงที่ยกมา

หากเราไม่ใส่เครื่องหมายคำพูด นั่นหมายความว่าตัวแปรควรมีชื่อจริงที่จะทดสอบ ตัวอย่างเช่น:

 ให้ผู้ใช้ = { อายุ: 30 };

ให้คีย์ = "อายุ";
alert( กรอกชื่อผู้ใช้ ); // จริงอยู่ คุณสมบัติ "อายุ" มีอยู่จริง

เหตุใดจึงมีตัวดำเนินการ in ? มันไม่เพียงพอที่จะเปรียบเทียบกับ undefined เหรอ?

โดยส่วนใหญ่แล้วการเปรียบเทียบกับ undefined ก็ใช้ได้ดี แต่มีกรณีพิเศษเมื่อมันล้มเหลว แต่ "in" ทำงานอย่างถูกต้อง

เมื่อมีคุณสมบัติของวัตถุ แต่เก็บ undefined :

 ให้ obj = {
  ทดสอบ: ไม่ได้กำหนด
-

การแจ้งเตือน (obj.test); // มันไม่ได้กำหนดไว้ ดังนั้น - ไม่มีคุณสมบัติเช่นนั้นเหรอ?

alert( "ทดสอบ" ใน obj ); // จริงอยู่ คุณสมบัติมีอยู่จริง!

ในโค้ดด้านบน คุณสมบัติ obj.test นั้นมีอยู่ในทางเทคนิค ดังนั้น in โอเปอเรเตอร์จึงทำงานถูกต้อง

สถานการณ์เช่นนี้เกิดขึ้นน้อยมาก เนื่องจากไม่ควรกำหนด undefined ไว้อย่างชัดเจน ส่วนใหญ่เราใช้ null สำหรับค่า "ไม่ทราบ" หรือ "ว่างเปล่า" ดังนั้นตัวดำเนินการ in จึงเป็นแขกที่แปลกใหม่ในโค้ด

ห่วง "for..in"

ในการเดินผ่านคีย์ทั้งหมดของวัตถุ จะมีรูปแบบพิเศษของการวนซ้ำ: for..in นี่เป็นสิ่งที่แตกต่างอย่างสิ้นเชิงจากโครงสร้าง for(;;) ที่เราศึกษามาก่อน

ไวยากรณ์:

 สำหรับ (ป้อนวัตถุ) {
  // ดำเนินการเนื้อความสำหรับแต่ละคีย์ระหว่างคุณสมบัติของวัตถุ
-

ตัวอย่างเช่น ให้แสดงคุณสมบัติทั้งหมดของ user :

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  อายุ: 30,
  คือผู้ดูแลระบบ: จริง
-

สำหรับ (ให้ป้อนผู้ใช้) {
  // กุญแจ
  การแจ้งเตือน ( สำคัญ );  // ชื่อ อายุ isAdmin
  // ค่าสำหรับคีย์
  การแจ้งเตือน( ผู้ใช้[คีย์] ); // จอห์น 30 จริงด้วย
-

โปรดทราบว่าโครงสร้าง "for" ทั้งหมดอนุญาตให้เราประกาศตัวแปรการวนซ้ำภายในลูปได้ เช่น let key ที่นี่

นอกจากนี้เรายังสามารถใช้ชื่อตัวแปรอื่นที่นี่แทน key ได้ ตัวอย่างเช่น "for (let prop in obj)" ยังใช้กันอย่างแพร่หลาย

สั่งเหมือนวัตถุ

มีการเรียงลำดับวัตถุหรือไม่? กล่าวอีกนัยหนึ่ง ถ้าเราวนซ้ำวัตถุ เราจะได้คุณสมบัติทั้งหมดตามลำดับเดียวกับที่เพิ่มเข้าไปหรือไม่? เราสามารถพึ่งพาสิ่งนี้ได้หรือไม่?

คำตอบสั้นๆ คือ: “เรียงลำดับในลักษณะพิเศษ”: คุณสมบัติจำนวนเต็มจะถูกจัดเรียง ส่วนคุณสมบัติอื่นๆ จะปรากฏตามลำดับการสร้าง รายละเอียดติดตามครับ

เป็นตัวอย่าง ลองพิจารณาออบเจ็กต์ที่มีรหัสโทรศัพท์:

 ให้รหัส = {
  "49": "เยอรมนี",
  "41": "สวิตเซอร์แลนด์",
  "44": "บริเตนใหญ่",
  -
  "1": "สหรัฐอเมริกา"
-

สำหรับ (ให้รหัสเป็นรหัส) {
  การแจ้งเตือน (รหัส); // 1, 41, 44, 49
-

วัตถุอาจถูกนำมาใช้เพื่อแนะนำรายการตัวเลือกให้กับผู้ใช้ หากเราสร้างเว็บไซต์สำหรับผู้ชมชาวเยอรมันเป็นหลัก เราอาจต้องการให้ 49 เป็นเว็บไซต์แรก

แต่ถ้าเรารันโค้ด เราจะเห็นภาพที่แตกต่างไปจากเดิมอย่างสิ้นเชิง:

• สหรัฐอเมริกา (1) ไปก่อน

• สวิตเซอร์แลนด์ (41) และอื่นๆ

รหัสโทรศัพท์จะเรียงลำดับจากน้อยไปหามาก เนื่องจากเป็นจำนวนเต็ม ดังนั้นเราจึงเห็น 1, 41, 44, 49 .

คุณสมบัติจำนวนเต็ม? นั่นอะไรน่ะ?

คำว่า "คุณสมบัติจำนวนเต็ม" ในที่นี้หมายถึงสตริงที่สามารถแปลงเป็นและจากจำนวนเต็มได้โดยไม่ต้องเปลี่ยนแปลง

ดังนั้น "49" จึงเป็นชื่อคุณสมบัติจำนวนเต็ม เพราะเมื่อแปลงเป็นจำนวนเต็มแล้วย้อนกลับมา ก็ยังคงเหมือนเดิม แต่ "+49" และ "1.2" ไม่ใช่:

 // Number(...) แปลงเป็นตัวเลขอย่างชัดเจน
// Math.trunc เป็นฟังก์ชันในตัวที่จะลบส่วนทศนิยมออก
alert( สตริง(Math.trunc(หมายเลข("49"))) ); // "49" เหมือนกัน คุณสมบัติจำนวนเต็ม
alert( String(Math.trunc(Number("+49"))) ); // "49" ไม่เหมือนกัน "+49" ⇒ ไม่ใช่คุณสมบัติจำนวนเต็ม
alert( String(Math.trunc(Number("1.2"))) ); // "1" ไม่ใช่ "1.2" เหมือนกัน ⇒ ไม่ใช่คุณสมบัติจำนวนเต็ม

…ในทางกลับกัน หากคีย์ไม่ใช่จำนวนเต็ม คีย์เหล่านั้นจะแสดงอยู่ในลำดับการสร้าง เช่น:

 ให้ผู้ใช้ = {
  ชื่อ: "จอห์น"
  นามสกุล: "สมิธ"
-
ผู้ใช้อายุ = 25; //เพิ่มอีกอัน

// คุณสมบัติที่ไม่ใช่จำนวนเต็มแสดงอยู่ในลำดับการสร้าง
สำหรับ (ให้ผู้ใช้ประคับประคอง) {
  การแจ้งเตือน (พร็อพ); // ชื่อ นามสกุล อายุ
-

ดังนั้น เพื่อแก้ไขปัญหาเกี่ยวกับรหัสโทรศัพท์ เราสามารถ "โกง" โดยการทำให้รหัสไม่ใช่จำนวนเต็ม การใส่เครื่องหมายบวก "+" ก่อนแต่ละโค้ดก็เพียงพอแล้ว

แบบนี้:

 ให้รหัส = {
  "+49": "เยอรมนี",
  "+41": "สวิตเซอร์แลนด์",
  "+44": "บริเตนใหญ่",
  -
  "+1": "สหรัฐอเมริกา"
-

สำหรับ (ให้รหัสเป็นรหัส) {
  การแจ้งเตือน( +รหัส ); // 49, 41, 44, 1
-

ตอนนี้มันทำงานได้ตามที่ตั้งใจไว้

สรุป

ออบเจ็กต์เป็นอาร์เรย์แบบเชื่อมโยงที่มีคุณสมบัติพิเศษหลายประการ

พวกเขาจัดเก็บคุณสมบัติ (คู่คีย์-ค่า) โดยที่:

• คีย์คุณสมบัติต้องเป็นสตริงหรือสัญลักษณ์ (โดยปกติจะเป็นสตริง)

• ค่าสามารถเป็นประเภทใดก็ได้

ในการเข้าถึงทรัพย์สิน เราสามารถใช้:

• สัญกรณ์ดอท: obj.property

• สัญลักษณ์วงเล็บเหลี่ยม obj["property"] วงเล็บเหลี่ยมอนุญาตให้รับคีย์จากตัวแปร เช่น obj[varWithKey]

ตัวดำเนินการเพิ่มเติม:

• หากต้องการลบคุณสมบัติ: delete obj.prop

• หากต้องการตรวจสอบว่ามีคุณสมบัติที่มีคีย์ที่กำหนดหรือไม่: "key" in obj

• หากต้องการวนซ้ำวัตถุ: for (let key in obj) loop

สิ่งที่เราได้ศึกษาในบทนี้เรียกว่า “วัตถุธรรมดา” หรือเพียงแค่ Object

มีวัตถุประเภทอื่น ๆ อีกมากมายใน JavaScript:

• Array เพื่อจัดเก็บชุดข้อมูลที่เรียงลำดับ

• Date สำหรับจัดเก็บข้อมูลเกี่ยวกับวันที่และเวลา

• Error ในการจัดเก็บข้อมูลเกี่ยวกับข้อผิดพลาด

• …และอื่นๆ

พวกเขามีคุณสมบัติพิเศษที่เราจะศึกษาในภายหลัง บางครั้งผู้คนพูดถึงบางอย่างเช่น "ประเภทอาร์เรย์" หรือ "ประเภทวันที่" แต่อย่างเป็นทางการแล้ว พวกเขาไม่ใช่ประเภทของตนเอง แต่เป็นของประเภทข้อมูล "วัตถุ" เดียว และพวกเขาขยายออกไปในรูปแบบต่างๆ

ออบเจ็กต์ใน JavaScript มีประสิทธิภาพมาก ที่นี่เราเพิ่งจะกล่าวถึงพื้นผิวของหัวข้อที่มีขนาดใหญ่มาก เราจะทำงานอย่างใกล้ชิดกับวัตถุต่างๆ และเรียนรู้เพิ่มเติมเกี่ยวกับวัตถุเหล่านั้นในส่วนอื่นๆ ของบทช่วยสอน

งาน

สวัสดี วัตถุ

ความสำคัญ: 5

เขียนโค้ดหนึ่งบรรทัดสำหรับแต่ละการกระทำ:

1. สร้าง user วัตถุที่ว่างเปล่า

2. เพิ่ม name คุณสมบัติด้วยค่า John

3. เพิ่ม surname ทรัพย์สินด้วยค่า Smith

4. เปลี่ยนค่าของ name เป็น Pete

5. ลบ name คุณสมบัติออกจากวัตถุ

สารละลาย

 ให้ผู้ใช้ = {};
user.name = "จอห์น";
user.surname = "สมิธ";
user.name = "พีท";
ลบชื่อผู้ใช้.ชื่อ;

ตรวจสอบความว่างเปล่า

ความสำคัญ: 5

เขียนฟังก์ชัน isEmpty(obj) ซึ่งจะคืนค่า true หากวัตถุไม่มีคุณสมบัติ มิฉะนั้นจะ false

ควรทำงานเช่นนั้น:

 ให้กำหนดการ = {};

การแจ้งเตือน ( isEmpty (กำหนดการ) ); // จริง

schedule["8:30"] = "ลุกขึ้น";

การแจ้งเตือน ( isEmpty (กำหนดการ) ); // เท็จ

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

เพียงวนซ้ำวัตถุแล้ว return false ทันทีหากมีคุณสมบัติอย่างน้อยหนึ่งรายการ

 ฟังก์ชั่น isEmpty (obj) {
  สำหรับ (ให้ใส่ obj) {
    // ถ้าการวนซ้ำได้เริ่มต้นขึ้น ก็แสดงว่ามีคุณสมบัติ
    กลับเท็จ;
  -
  กลับเป็นจริง;
-

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์

รวมคุณสมบัติของวัตถุ

ความสำคัญ: 5

เรามีวัตถุที่เก็บเงินเดือนของทีมของเรา:

 ให้เงินเดือน = {
  จอห์น: 100,
  แอน: 160,
  พีท: 130
-

เขียนโค้ดเพื่อรวมเงินเดือนทั้งหมดและเก็บไว้ใน sum ตัวแปร ตัวอย่างด้านบนควรเป็น 390

หาก salaries ว่างเปล่า ผลลัพธ์จะต้องเป็น 0

สารละลาย

 ให้เงินเดือน = {
  จอห์น: 100,
  แอน: 160,
  พีท: 130
-

ให้ผลรวม = 0;
สำหรับ (ให้ระบุเงินเดือน) {
  ผลรวม += เงินเดือน[คีย์];
-

การแจ้งเตือน (ผลรวม); //390

คูณค่าคุณสมบัติตัวเลขด้วย 2

ความสำคัญ: 3

สร้างฟังก์ชัน multiplyNumeric(obj) ที่คูณค่าคุณสมบัติตัวเลขทั้งหมดของ obj ด้วย 2

ตัวอย่างเช่น:

 //ก่อนจะวางสาย
ให้เมนู = {
  ความกว้าง: 200,
  ส่วนสูง: 300,
  หัวข้อ: "เมนูของฉัน"
-

คูณตัวเลข (เมนู);

//หลังวางสาย.
เมนู = {
  ความกว้าง: 400,
  ส่วนสูง: 600,
  หัวข้อ: "เมนูของฉัน"
-

โปรดทราบว่า multiplyNumeric ไม่จำเป็นต้องส่งคืนสิ่งใด ควรแก้ไขวัตถุในตำแหน่ง

PS ใช้ typeof เพื่อตรวจสอบหมายเลขที่นี่

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

 ฟังก์ชั่นคูณตัวเลข (obj) {
  สำหรับ (ให้ใส่ obj) {
    ถ้า (ประเภทของ obj [คีย์] == 'หมายเลข') {
      obj[คีย์] *= 2;
    -
  -
-

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์