φυβλαςのβλογ
phyblasのブログ



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


เรื่องของพื้นฐานการสร้างออบเจ็กต์ได้เขียนถึงไว้ในบทที่ ๙ ส่วนในบทนี้จะพูดถึงความสามารถที่เพิ่มเข้ามาใน 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
-- manim
-- opencv
-- pyqt
-- pytorch
機械学習
-- ニューラル
     ネットワーク
javascript
モンゴル語
言語学
maya
確率論
日本での日記
中国での日記
-- 北京での日記
-- 香港での日記
-- 澳門での日記
台灣での日記
北欧での日記
他の国での日記
qiita
その他の記事

記事の類別



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

  記事を検索

  おすすめの記事

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

月別記事

2024年

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

2023年

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

2022年

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

2021年

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

2020年

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

もっと前の記事

ไทย

日本語

中文