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

三十三

~ เกี่ยวกับเรา ~

สารบัญ

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

ภาษา python มอดูลต่างๆ -- numpy -- matplotlib -- pandas -- manim -- opencv -- pyqt -- pytorch การเรียนรู้ของเครื่อง -- โครงข่าย      ประสาทเทียม

ภาษา javascript

ภาษา mongol

ภาษาศาสตร์

maya

ความน่าจะเป็น

บันทึกในญี่ปุ่น

บันทึกในจีน -- บันทึกในปักกิ่ง -- บันทึกในฮ่องกง -- บันทึกในมาเก๊า

บันทึกในไต้หวัน

บันทึกในยุโรปเหนือ

บันทึกในประเทศอื่นๆ

qiita

บทความอื่นๆ

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

==เลือกหมวด== ดาราศาสตร์ คณิตศาสตร์ -ความน่าจะเป็น คอมพิวเตอร์ -เขียนโปรแกรม --python ---numpy ---scipy ---matplotlib ---pandas ---manim ---pyqt ---sklearn ---pytorch ---mayapython --ruby --javascript --dart --sql --regex --opencv -shell -3D --maya --MMD -microsoft_office -pdf -ปัญญาประดิษฐ์ --โครงข่ายประสาทเทียม -การสุ่ม ภาษาศาสตร์ -ตัวอักษร -เรียนภาษา -หลักเกณฑ์การทับศัพท์ -ภาษาจีน --ภาษาจีนกลาง -ภาษาญี่ปุ่น -ภาษามองโกล -ภาษาลาว -ภาษาเขมร ประวัติศาสตร์ -ประวัติศาสตร์จีน -ประวัติศาสตร์ญี่ปุ่น ปรัชญา บันทึก เรื่องแต่ง ประเทศจีน -จีนแผ่นดินใหญ่ --ปักกิ่ง --เทียนจิน --เหลียวหนิง --เหอเป่ย์ --เหอหนาน --ซานตง --ซานซี --อานฮุย --เจ้อเจียง --หูเป่ย์ --หูหนาน --ฝูเจี้ยน --กวางตุ้ง ---แต้จิ๋ว --ยูนนาน --ซินเจียง -ฮ่องกง -มาเก๊า -ไต้หวัน --ไทเป --จีหลง --เถาหยวน --ซินจู๋ --เหมียวลี่ --ไถจง --จางฮว่า --หยวินหลิน --เจียอี้ --ไถหนาน --เกาสยง --ผิงตง --อี๋หลาน ประเทศญี่ปุ่น -ฮกไกโด -อาโอโมริ -อิวาเตะ -มิยางิ -อากิตะ -ยามางาตะ -ฟุกุชิมะ -อิบารากิ -โทจิงิ -กุมมะ -ไซตามะ -จิบะ -โตเกียว -คานางาวะ -นีงาตะ -โทยามะ -อิชิกาวะ -ฟุกุอิ -ยามานาชิ -นางาโนะ -กิฟุ -ชิซึโอกะ -ไอจิ -มิเอะ -ชิงะ -เกียวโต -โอซากะ -เฮียวโงะ -นาระ -วากายามะ -โอกายามะ -ฮิโรชิมะ -ยามางุจิ -ฟุกุโอกะ ต่างแดน -อุษาคเนย์ --กัมพูชา --พม่า --สิงคโปร์ -ยุโรป --สวีเดน --เดนมาร์ก --ฟินแลนด์ ท่องเที่ยว -มหาวิทยาลัย -พิพิธภัณฑ์ --พิพิธภัณฑ์วิทยาศาสตร์ --หอศิลป์ -สวนสัตว์ --พิพิธภัณฑ์สัตว์น้ำ -ท้องฟ้าจำลอง -ตึกระฟ้า -ปราสาท☑ --ปราสาทญี่ปุ่น --ปราสาทขอม --ปราสาทยุโรป -ศาสนสถาน --วัด --ศาลเจ้า --โบสถ์ --มัสยิด -สุสาน -มรดกโลก -ทะเล -ทะเลสาบ -ภูเขา -หิมะ -ดอกซากุระ -แมว -รถไฟ -เรือ -ตลาดกลางคืน -งานเทศกาล -ที่ระลึกภัยพิบัติ -ตามรอย บันเทิง -เกม --อาเตอลีเย --โปเกมอน --caligula --vn -อนิเมะ -มังงะ -นิยาย -เพลง --เพลงอนิเมะ --เพลงเกม

　 ค้นหาบทความ

　 บทความล่าสุด

　 บทความแนะนำ

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

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

ไทย

日本語

中文