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};三十三