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



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


เรื่องของพื้นฐานการสร้างออบเจ็กต์ได้เขียนถึงไว้ในบทที่ ๙ ส่วนในบทนี้จะพูดถึงความสามารถที่เพิ่มเข้ามาใน 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

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
python
-- numpy
-- matplotlib

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

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



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

  ค้นหาบทความ

  บทความแนะนำ

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

บทความแต่ละเดือน

2020年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2019年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2018年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2017年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2016年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

ค้นบทความเก่ากว่านั้น

ไทย

日本語

中文