φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๓๓: ความสามารถเพิ่มเติมเกี่ยวกับการสร้างและใช้ออบเจ็กต์
เขียนเมื่อ 2020/02/01 10:21
แก้ไขล่าสุด 2020/03/19 14:07


เรื่องของพื้นฐานการสร้างออบเจ็กต์ได้เขียนถึงไว้ในบทที่ ๙ ส่วนในบทนี้จะพูดถึงความสามารถที่เพิ่มเข้ามาใน ES6

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




การเขียนย่อเมื่อป้อนค่าตัวแปรใส่พรอเพอร์ที่มีชื่อเหมือนตัวแปร

ปกติเวลาสร้างออบเจ็กต์จะต้องใส่ชื่อพรอเพอร์ตีพร้อมกับค่าของตัวแปร

แต่ในบางครั้งหากบังเอิญว่าชื่อตัวแปรที่ใช้นั้นตรงกับชื่อพรอเพอต์ตีที่ต้องการใส่พอดี เช่น
let chue = "อาร์โบ", namnak = 6.9, suansung = 2;
let pokemon = {
  chue: chue,
  namnak: namnak,
  suansung: suansung
};



แบบนี้สามารถเขียนย่อลงเป็นแบบนี้ได้
let chue = "อาร์โบ", namnak = 6.9, suansung = 2;
let pokemon = { chue, namnak, suansung };

// ลองดูผล
alert(pokemon.chue); // ได้ อาร์โบ
alert(pokemon.namnak); // ได้ 6.9
alert(pokemon.suansung); // ได้ 2

พอเขียนแบบนี้แล้วก็ดูกะทัดรัดขึ้น ไม่ต้องเขียนชื่อเดิมซ้ำ ๒ รอบ แทนที่จะเขียน chue: chue ก็ย่อเหลือแค่ chue เฉยๆแบบนี้

แต่กว่าการเขียนแบบนี้ทำได้แค่พรอเพอร์ตีที่ชื่อเหมือนกับตัวแปรเท่านั้น ถ้าหากมีทั้งตัวที่ซ้ำและไม่ซ้ำก็เขียนย่อเฉพาะตัวที่ชื่อซ้ำได้ ส่วนตัวที่ชื่อไม่เหมือน หรือตัวที่ป้อนค่าเข้าไปโดยตรงโดยไม่ได้มาจากตัวแปรก็เขียนตามปกติ
let chue = "อาร์บ็อก", nak = 6.9;
let pokemon = {
  chue,
  namnak: nak,
  suansung: 3.5
};






การเขียนย่อเวลาสร้างเมธอดให้ออบเจ็กต์

ปกติแล้วเวลาสร้างเมธอดให้ออบเจ็กต์จะต้องใส่ชื่อของฟังก์ชันแล้วตามด้วย : แล้วตามด้วยคำสั่ง function เช่นแบบนี้
let pokemon = {
  chue: "โอนิดริล",
  nak: 38,
  sung: 1.2,
  bokKhomun: function () {
    alert(this.chue + " หนัก " + this.nak + " กก. สูง " + this.sung + " ม.")
  }
};

pokemon.bokKhomun() // ได้ โอนิดริล หนัก 38 กก. สูง 1.2 ม.



ใน ES6 สามารถเขียนย่อโดยตัด : function ลงเหลือแบบนี้ได้
let pokemon = {
  chue: "โอนิดริล",
  nak: 38,
  sung: 1.2,
  bokKhomun() {
    alert(this.chue + " หนัก " + this.nak + " กก. สูง " + this.sung + " ม.")
  }
};

pokemon.bokKhomun() // ได้ โอนิดริล หนัก 38 กก. สูง 1.2 ม.

การเขียนแบบนี้เทียบเท่ากับการสร้างเมธอดด้วยคำสั่ง function คือสามารถใช้ตัวแปร this เพื่อแทนตัวออบเจ็กต์ได้ แต่จะต่างจากการสร้างฟังก์ชันแบบลูกศร => ซึ่งได้เขียนถึงในบทที่ ๓๑ ซึ่งไม่สามารถใช้ this แบบนี้ได้




การสร้างพรอเพอร์ตีที่ชื่อมาจากนิพจน์

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

เช่นถ้าเขียนแบบนี้ขึ้นมาก็จะขึ้น SyntaxError

let obj = {
  1 + 1: "สอง",
  1 + 1 + 1: "สาม"
}; // SyntaxError

แต่ว่าใน ES6 สามารถใช้ [] ล้อมเพื่อจะใส่นิพจน์หรือฟังก์ชันอะไรลงไปก็ได้
let au = {
  [1 + 1]: "สอง",
  [1 + 1 + 1]: "สาม"
};
alert(Object.keys(au)) // ได้ 2,3

let ar = ["hito","futa","mi"];
let le = {
  ["x" + ar[0]]: 0,
  ["x" + ar[1]]: 0,
  ["x" + ar[2]]: 0
};
alert(Object.keys(le)) // ได้ xhito,xfuta,xmi

พอเขียนแบบนี้แล้วชื่อพรอเพอร์ตีก็จะกลายเป็นตามผลของนิพจน์

ในนี้ยังอาจใช้วิธีการเขียนอย่าง i++ หรือ ++i เพื่อให้ได้ค่าที่เพิ่มขึ้นไปในขณะที่ใช้ค่านั้นไปในนี้ด้วย เช่น
let i = 1;
let da = {
  ["ichi_" + i++]: 7,
  ["ni_" + i++]: 16,
  ["san_" + i++]: 22,
  ["shi_" + i++]: 19
};
alert(Object.keys(da)) // ได้ ichi_1,ni_2,san_3,shi_4

วิธีนี้จึงทำให้การตั้งชื่อพรอเพอร์ตีของออบเจ็กต์มีความยืดหยุ่นขึ้น




การป้อนค่าจากพรอเพอร์ตีในออบเจ็กต์ใส่ตัวแปร

ในบทที่ ๓๐ได้พูดถึงการกระจายค่าในแถวลำดับมาใส่ในตัวแปรพร้อมกันหลายตัวไปแล้ว

ในทำนองเดียวกัน ออบเจ็กต์ก็สามารถทำอะไรคล้ายๆกันแบบนี้ได้

เช่นเดียวกับที่ตอนที่ใช้แถวลำดับในการกระจายค่ามาใส่จะต้องใช้วงเล็บเหลี่ยม [ ] ล้อมชื่อตัวแปร ถ้าหากจะใช้ค่าจากออบเจ็กต์ก็จะใช้วงเล็บปีกกา { }

ตัวอย่างเช่น
let {aho, baka} = {baka: 555, aho: 55};
alert(aho); // ได้ 55
alert(baka); // ได้ 555

แบบนี้ก็จะทำนองเดียวกับการเขียนแจกค่าจากแถวลำดับแบบนี้
let {aho, baka} = [55, 555];

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

หากชื่อของตัวแปรที่ต้องการป้อนให้นั้นไม่เหมือนกับชื่อพรอเพอร์ตีก็สามารถใช้ : เพื่อบอกว่าจะเอาค่าจากพรอเพอร์ตีไหนมาใส่ตัวแปรชื่ออะไร
let {x: kami, y: oshi} = {y: "กด", x: "กระดาษ"};
alert(kami); // ได้ กระดาษ
alert(oshi); // ได้ กด

จะเอาค่าป้อนใส่ตัวแปรที่มีอยู่แล้วหรือประกาศเตรียมไว้แล้ว หรือประกาศค่าโดยไม่ใช้ let หรือ var ก็ได้ แต่ในกรณีแบบนี้จะต้องใส่วงเล็บโค้ง ( ) คร่อมทั้งหมดไว้ ไม่เช่นนั้นจะเกิดข้อผิดพลาด
let ichi, ni;
({ichi, ni} = {ni: 2, ichi: 1});
alert(ichi); // ได้ 1
alert(ni); // ได้ 2

ถ้าเขียนโดยไม่ใส่วงเล็บด้านนอกแบบนี้จะเกิดข้อผิดพลาด จึงจำเป็นต้องใส่วงเล็บ ถ้าไม่ได้ใช้พร้อมกับ let หรือ var
{ichi, ni} = {ni: 2, ichi: 1};





-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- opencv
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
maya
javascript
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
เรียนภาษาจีน
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
หลักการเขียนทับศัพท์ภาษาจีนกวางตุ้ง
การใช้ unix shell เบื้องต้น ใน linux และ mac
หลักการเขียนทับศัพท์ภาษาจีนกลาง
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
บันทึกการเที่ยวสวีเดน 1-12 พ.ค. 2014
แนะนำองค์การวิจัยและพัฒนาการสำรวจอวกาศญี่ปุ่น (JAXA)
เล่าประสบการณ์ค่ายอบรมวิชาการทางดาราศาสตร์โดยโซวเคนได 10 - 16 พ.ย. 2013
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
บันทึกการเที่ยวญี่ปุ่นครั้งแรกในชีวิต - ทุกอย่างเริ่มต้นที่สนามบินนานาชาติคันไซ
หลักการเขียนทับศัพท์ภาษาญี่ปุ่น
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ
ทำไมถึงอยากมาเรียนต่อนอก
เหตุผลอะไรที่ต้องใช้ภาษาวิบัติ?

ไทย

日本語

中文