รวี ีวฟรีเจอรใ หมใ น จาวาสครปิ ตม าตรฐาน ES7(ECMAScript 2016) แกไ ขคร้งั ท่ี 2 เขียนโดย แอดมินโฮ โอนอยออกEBook เล่มนีสงวนลิขสิทธิตามกฎหมาย ห้ามมิให้ผ้ใู ด นาํ ไปเผยแพร่ต่อสาธารณะ เพือประโยชน์ในการค้า หรืออืนๆโดยไม่ได้รับความยินยอมเป็นลายลกั ษณ์อักษรจากผ้เู ขียน
ใหความรเู พิม่ เติมนิดหน่งึ เผื่อคนไมร จู ักภาษา JavaScript JavaScript เป็ นภาษาเขียนโปรแกรมทีโคตรจะอนิ ดี ถ้าศกึ ษาอยา่ งผิวเผินก็จะคิดวา่ ง๊ายงา่ ย แตเ่ มือศกึ ษาลง ลกึ ๆ แล้ว ก็จะพบวา่ มนั เป็นภาษาปราบเซยี น จนคนไมค่ อ่ ยเข้าใจกนั มากสดุ ภาษาหนงึ ในโลก JavaScript ไมใ่ ชภ่ าษา Java นะครับ คนละภาษา (คนมกั สบั สนกนั ) คนสว่ นใหญ่รู้แคว่ า่ ใช้ JavaScript ร่วมกบั ภาษา HTML กบั CSS เพือทําให้เวบ็ มนั ไดนามิก ฟ้ งุ ฟิง กรุ้งกิง (มนั ดงั ในฝัง Font-end มานาน) แตป่ ัจจบุ นั นี JavaScript สมัยใหม่ มนั ก้าวหน้าไปไกลมาก ๆๆๆ เพราะสามารถทํางานอยฝู่ ังเซริ ์ฟเวอร์ได้ (Back-end) ด้วย Node.js แม้แตเ่ อาไปทําแอพบนโมบาย หรือแม้แตโ่ รบอท ก็ยงั ทําได้ด้วย ….อายยะ่ ฝังเซริ ์ฟเวอร์ ฝังไคลเอนต์ HTTP ใช Node.js ฐานขอมลู Request รนั แอพพลเิ คชน่ัHTML + CSS + JavaScript ระบบซอฟตแวร Response ทเี่ ขยี นดวย ขางนอก JavaScript ES6 (ECMAScript 2015) เป็ นมาตรฐานใหมล่ า่ สดุ ของ JavaScript ประกาศออกมาเมือกลางเดือนมิถนุ ายนปี 2558 ซงึ ถือวา่ เปลียนแปลงเวอร์ชนั ครังใหญ่สดุ ในประวตั ิศาสตร์ของภาษานี หลงั จากไมไ่ ด้เปลียนมาเกือบ 6 ปี (เวอร์ชนั เก่าทีเราค้นุ เคยกนั ดี ก็คือ ES5) ES6 ES5
ปี ค.ศ. 2016 เวอร์ชนั ใหม่ ES7 (ECMAScript 2016) ก็ออกมาแหละ สว่ นปี หน้า 2017 ก็จะเป็นคิวของเวอร์ชนั ES8 (ECMAScript 2017) จะออกมาเชน่ กนั ต้องเข้าใจอย่างนีนะครัช เนือง ES6 มนั ใหญ่โตอลงั การงานสร้างมาก คืนรอปล่อยออกมาหมดทีเดียว ก็คงรอ หลายชาตภิ พ อาจทําให้มีเสียงบน่ ตามมาได้ ด้วยเหตนุ ีเข้าถงึ เพิมฟี เจอร์เลก็ ยิบ ๆ ยอ่ ย ๆ มาใสไ่ ว้ในเวอร์ชนั หลงั ๆ แทน โดยคาดวา่ จากนีไป จะมีการประกาศเวอร์ชนั ใหม่ทกุ ๆ ปี โดยให้คิดเสียวา่ ES6 เหมือนโปรแกรมหลกั สว่ นเวอร์ ชนั ทีออกตามทีหลงั ไมไ่ ด้วา่ จะเป็น ES7, ES8 และ ESXXXXX มนั ก็คือการอพั เดตซอฟต์แวร์ อะไรประมาณนี ES8 ES6 ES5 ES7 API ทีใช้ตดิ ตอ่ กบั DOM หรือใช้งานร่วมกบั HTML5, CSS3 ใน ES6 เขาไมไ่ ด้เปลียนแปลงอะไรเลย ES6,ES7,ES8 มนั เป็ นแค่มาตรฐานใหม่สด ๆ ซิง ๆ ดงั นนั การใช้งานโดยตรงบนเว็บบราวเซอร์ (ปัจจบุ นั ทีผม เขียนอย่นู ี) ก็ยงั ไม่ support ทกุ ฟี เจอร์ ต้องมีตวั คอมไพล์ช่วยก่อน (ยงั มีข้อจํากดั บางประการ) …หรือถ้าใคร ใช้ Node.js เวอร์ชนั 6 ก็ยงั รองรับ ES6 ได้แค่ 93 % (ES7 รองรับได้บางสว่ น) ชือเวอร์ชัน ชือมาตรฐานเตม็ ปี ทอี อก ES6 ECMAScript 2015 2015 ES7 ECMAScript 2016 2016 ES8 ECMAScript 2017 2017 เวอร์ชนั ตอ่ ไปนี ก็จะอพั เดตจาก ES6 ไปเรือย ๆข้อตกลงเวลาอ่านเอกสารชุดนี จะกลา่ วถงึ เฉพาะฟี เจอร์ทีเพมิ เข้ามาใน ES7 และ สงิ ทีเปลยี นแปลงไปในเวอร์ชนั ดงั กลา่ ว สําหรับความรู้จาวาสคริปต์มาตรฐานใหม่ ES6 แบบเจาะลกึ ถงึ ขวั หวั ใจ (เนือหาเยอะมาก) ทา่ นสามารถอา่ นได้ จากหนงั สอื ทีอ้างองิ [1] เพราะความรู้จาวาสคริปต์แบบเก่า (ES5) ทีคณุ รู้จกั …นับวันใกล้หมดอายุลงเตม็ ทน
ตัวอยา งการเขียน ES6 กบั ES7ตวั อย่างนีจะแสดงการเขียน JavaScript บนเว็บเบราเซอร์ โดยใช้ Traceur ทําตวั เป็ น transpiler (คอมไพลเลอร์) เพือแปลงซอร์สโค้ดให้อยใู่ นรูปเวอร์ชนั ES5 จากนนั เวบ็ เบราเซอร์ถงึ จะทํางานได้ (หาอา่ นเพิมเตมิ ได้ตามหนงั สอื [1])<!-- ไฟล์ index.html--><!DOCTYPE html><html><head><!-- Traceur (เป็ นตวั transpiler)--><script src=\"https://google.github.io/traceur-compiler/bin/traceur.js\"></script><script src=\"https://google.github.io/traceur-compiler/bin/BrowserSystem.js\"></script><script src=\"https://google.github.io/traceur-compiler/src/bootstrap.js\"></script></head><body><h1 id=\"element1\"></h1><script type=\"module\"> class Chat{ // class ไวยากรณ์ใหมข่ อง ES6 constructor(message) { // constructor ไวยากรณ์ใหมข่ อง ES6 this.message = message; } say(){ let element = document.querySelector('#element1'); element.innerHTML = this.message; } } // let ไวยากรณ์ใหมข่ อง ES6 let chat = new Chat(\"Hello, world!\"); chat.say(); let array = [\"A\", \"B\", \"C\"]; // let ไวยากรณ์ใหมข่ อง ES6 // true -- เมธอดของอาร์เรย์ทีเพมิ เข้ามาใน ES7 console.log(array.includes(\"A\"));</script></body></html>ถ้าซอร์สโค้ดดงั กลา่ วเซฟเป็นไฟล์เก็บไว้ที “C:/ES6/index.html” เมือดบั เบลิ คลกิ เปิ ดมนั ขนึ มา ก็จะปรากฏดงั รูปหมายเหตุ ถ้าอา่ นจากหนงั สือ [1] วิธีการใช้ ES6 กบั ES7 จะต่างกบั ซอร์สโค้ดทีเห็นในตวั อย่างนีสกั เล็กหน่อย เพราะtraceur มนั มีการเปลียนแปลง ด้วยการเพิม BrowserSystem.js เข้าไปใน <head> …</head> ดงั นี<script src=\"https://google.github.io/traceur-compiler/bin/BrowserSystem.js\"></script>(ทีมา https://github.com/google/traceur-compiler/wiki/Getting-Started)
ตวั อยา่ งตอ่ ไปนีจะแสดงการเขียน ES6 กบั ES7 บน node.js ดงั นีclass Chat{ // class ไวยากรณ์ใหมข่ อง ES6constructor(message) { // constructor ไวยากรณ์ใหม่ของ ES6 this.message = message;}say(){ console.log(this.message);}}let chat = new Chat(\"Hello, world!\"); // let ไวยากรณ์ใหม่ของ ES6chat.say(); // \"Hello, world!\"let array = [\"A\", \"B\", \"C\"]; -- เมธอดของอาร์เรย์ทีเพิมมาใน ES7console.log(array.includes(\"A\")); // trueถ้าซอร์สโค้ดดงั กลา่ วเซฟเป็นไฟล์เก็บไว้ที “C:/ES6/test.js” และมีโครงสร้างโปรเจคดงั นีC:/ES6/ |-- test.jsเมือรันคอมมานไลน์บนวนิ โดว์ส (ให้ Node.js มาอา่ นและประมวลผลไฟล์จาวาสคริปต์) ก็จะได้ผลลพั ธ์ดงั ภาพหมายเหตุ สําหรับวิธีตดิ ตงั และรันจาวาสคริปต์บน Node.js สามารถอา่ นเพิมเตมิ ได้ที (เป็น PDF แจกฟรี) http://www.patanasongsivilai.com/javascript.html
ฟเจอรใหมทีเ่ พิ่มเขา มาใน ES7 (นิดเดยี วเอง)เพมิ การใช้งานโอเปอเรเตอร์ยกกาํ ลงั (Exponentiation Operator)โอเปอเรเตอร์ยกกําลงั จะใช้สญั ลกั ษณ์เป็น ** (ดอกจนั ทร์สองอนั วางตดิ กนั ) เพือแทนการคํานวณตวั เลขแบบยกกําลงั โดยไมต่ ้องใช้เมธอด Math.pow() ซงึ จะมีตวั อยา่ งการใช้งานดงั นีlet ans = 10 ** 2; // นําเลข 10 มายกกําลงั 2 ( 102 )console.log(ans); // 100// เสมือนใช้เมธอด Math.pow() ดงั นี // trueconsole.log(ans === Math.pow(10, 2));ลาํ ดบั ของโอเปอเรเตอร์ **โอเปอเรเตอร์ ** จะถือวา่ มีลําดบั ความสําคญั สงู กวา่ โอเปอเรเตอร์ทางคณิตศาสตร์ตวั อืน ๆlet ans = 3 * 10 ** 2;console.log(ans); // 300จากตวั อยา่ งเดมิ จะเสมือนมีวงเลบ็ มาครอบนิพจน์ (10 ** 2) ดงั ตวั อยา่ งซอร์สโค้ดข้างลา่ งlet ans = 3 * (10 ** 2);console.log(ans); // 300ข้อเข้มงวดของโอเปอเรเตอร์ **โอเปอเรเตอร์ยกกําลงั ไมส่ ามารถใช้งานร่วมกบั โอเปอเรเตอร์พวก unary expression เชน่ - (เครืองหมายลบ ไมใ่ ชก่ ารลบ),+ (เครืองหมายบวก ไมใ่ ชก่ ารบวก), void, delete และ typeof เป็นต้น โดยจะให้ดตู วั อยา่ งตอ่ ไปนีประกอบlet ans = -10 ** 2; // syntax errorตวั อยา่ งทียกมานีจะเกิด error เพราะตรงนิพจน์ -10 ** 2 มนั กํากวม เนืองจากอาจหมายถงึ -(10 ** 2) (-10) ** 2จากตวั อยา่ งเดมิ ถ้าลองนําวงเลบ็ มาครอบเพือกําหนดลาํ ดบั การทํางานเสยี ใหม่ ก็จะไมเ่ กิด error ดงั ตวั อยา่ งหน้าถดั ไป
let ans = - (10 ** 2); // -100จากตวั อยา่ งเตมิ เชน่ กนั ถ้าลองเปลยี นการครอบวงเลบ็ เสียใหม่ ก็จะได้ผลการทํางานทีแตกตา่ งกนั ดงั นีlet ans = (-10) ** 2; // 100ขณะเดียวกนั โอเปอเรเตอร์ยกกําลงั ก็จะมีข้อยกเว้น มนั สามารถใช้ได้กบั ++ หรือ -- (เป็น unary expression) โดยไมต่ ้องใช้วงเลบ็ ครอบลองพิจารณาการใช้โอเปอเรเตอร์ยกกําลงั ร่วมกบั โอเปอเรอเตอร์ ++ ดงั ตวั อยา่ งlet value1 = 9, value2 = 10;// ใช้งานโอเปอเรเตอร์ ++ แบบ prefix // 100// คา่ ของ value1 ถกู บวกด้วยหนงึ ก่อนทีจะยกกําลงั 2 // 10console.log(++value1 ** 2);console.log(value1);// ใช้งานโอเปอเรเตอร์ ++ แบบ postfix// หลงั จากยกกําลงั 2 ไปแล้ว คา่ ของ value2 จงึ ถกู บวกด้วยหนงึ ทีหลงัconsole.log(value2++ ** 2); // 100console.log(value2); // 11ลองพิจารณาการใช้โอเปอเรเตอร์ยกกําลงั ร่วมกบั โอเปอเรเตอร์ -- ดงั ตวั อยา่ งlet value1 = 11, value2 = 10;// ใช้งานโอเปอเรเตอร์ -- แบบ prefix // 100// คา่ value1 ถกู ลบด้วยหนงึ กอ่ นทีจะยกกําลงั 2 // 10console.log(--value1 ** 2);console.log(value1);// ใช้งานโอเปอเรเตอร์ -- แบบ postfix// หลงั จากยกกําลงั 2 ไปแล้ว คา่ ของ value2 จงึ ถกู ลบด้วยหนงึ ทีหลงัconsole.log(value2-- ** 2); // 100console.log(value2); // 9หมายเหตุ โอเปอเรเตอร์ ** ตามสเปค ES7 ผมยงั หาจาวาสคริปต์เอ็นจินรองรับการรันเทสไม่ได้เลย (เศร้าจงั ) สรุปซอร์สโค้ดทีเห็นในตวั อย่างทีผ่าน ๆ มา ขาดการทดสอบจริงจงั ดงั นนั ถ้าในอนาคตสามารถทดสอบได้ เดียวมาปรับแก้เนือหาใหม่ ตอนนีเอาคอนเซปท์ให้เหน็ ไปก่อนแล้วกนั เนอะ!
เพ่มิ เมธอด Array.prototype.includes()สําหรับ ES6 นนั สตริงทกุ ตวั จะมีเมธอด includes() และเช่นเดียวกนั ใน ES7 ก็ได้เพิมเมธอดดงั กลา่ วให้กบั อาร์เรย์ โดยมีจดุ ประสงค์ใช้ค้นหาข้อมลู ในอาร์เรย์ ถ้าเจอข้อมลู ทีต้องการหาก็จะรีเทิร์นเป็ น true ถ้าไม่เจอก็จะได้เป็ น false ดงั ตวั อยา่ ง(ทํางานแบบเดียวกบั includes() ของสตริงบทที 5 ในหนงั สอื [1])let array = [\"A\", \"B\", \"C\"]; // ประกาศอาร์เรย์console.log(array.includes(\"A\")); // trueconsole.log(array.includes(\"Z\")); // falseในตวั อยา่ งนีจะค้นหาตวั อกั ษร \"A\" เจอในอาร์เรย์ แตไ่ มส่ ามารถค้นหา \"Z\" พบ เพราะมนั ไมม่ ีอยใู่ นอาร์เรย์ปกติแล้วเมธอด includes() จะเริมค้นหาทีตําแหน่งอินเด็กซ์เป็ น 0 โดยดีฟอลต์ ดงั นนั ถ้าจะเปลียนตําแหน่งอินเด็กซ์ทีใช้ค้นหา ก็สามารถทําได้ดงั ตวั อยา่ งlet array = [\"A\", \"B\", \"C\"]; // ประกาศอาร์เรย์// เริมค้นหา \"B\" จากอินเดก็ ซ์คือ 2 ซงึ จะพบวา่ หาไมเ่ จอ // falseconsole.log(array.includes(\"B\", 2));// แตถ่ ้าเปลียนมาเริมค้นหาจากอนิ เดก็ ซ์เป็ น 1 ก็จะหา \"B\" เจอ // trueconsole.log(array.includes(\"B\", 1));ในตวั อยา่ งดงั กลา่ วจะเหน็ วา่ เมธอด includes รับคา่ อากิวเมนต์ตวั ทีสอง เพือระบตุ ําแหนง่ เริมต้นของอนิ เดก็ ซ์ทีจะใช้ค้นหาข้อมลู ในอาร์เรย์ข้อควรระวัง includes()เมธอด includes() จะเสมือนใช้โอเปอเรเตอร์ === เปรียบเทียบวา่ มีสมาชิกทีต้องค้นหาหรือไม่ แตท่ วา่ เวลามนั เหน็ ข้อมลูเป็น NaN ก็จะมองวา่ มีคา่ เทา่ กนั (เปรียบเทียบแล้วได้ true) ซงึ จะแตกตา่ งจาก indexOf ซงึ จะเสมือนใช้ === เชน่ กนั ซงึเวลามนั เหน็ NaN จะมองวา่ มีคา่ ตา่ งกนั (เปรียบเทียบแล้วได้ false) ดงั ตวั อยา่ งlet array = [0, NaN, 1]; // -1 -- ไมเ่ จอสมาชิกทีต้องการ // trueconsole.log(array.indexOf(NaN));console.log(array.includes(NaN));แตถ่ ้าข้อมลู เป็น +0 กบั -0 จะมองวา่ เทา่ กนั (เปรียบเทียบแล้วได้เป็น true) ทงั includes() กบั indexOf() ดงั ตวั อยา่ งlet array = [-0, NaN, 1]; // 0 -- เจอคา่ -0 อยใู่ นอาร์เรย์ทีตาํ แหนง่ อนิ เดก็ ซ์ 0console.log(array.indexOf(+0)); // trueconsole.log(array.includes(+0));
TypedArray.prototype.includes()ในอาร์เรย์ระดบั บติ (TypedArray บทที 12 ของหนงั สอื [1]) ก็จะมีเมธอด includes() ให้ใช้งานเหมือนกบั อาร์เรย์ในหวั ข้อก่อนหน้านีทกุ ประการเด๊ะ ดงั ตวั อยา่ งlet uint8 = new Uint8Array([1, 2, 3, 4, 5]);console.log(uint8.includes(1)); // trueconsole.log(uint8.includes(5)); // trueconsole.log(uint8.includes(10)); // false สิง่ ท่ีเปล่ยี นแปลงไปของ ES7 เมอื่ เทียบกับ ES6 (นดิ เดยี วเอง)หวั ข้อกอ่ นหน้านีได้กลา่ วถงึ ฟี เจอร์ทีเพิมมาใหมใ่ น ES7 แตห่ วั ข้อนีจะกลา่ วถงึ ฟี เจอร์ทีเปลยี นไปจาก ES6 ดงั นี 1) trap ทีเป็น enumerate() ของพร็อกซี (บทที 14 ของหนงั สอื [1]) ถกู เอาออกไปใน ES7 เรียบร้อยแล้ว 2) เจอเนอเรเตอร์ (บทที 13 ของหนงั สอื [1]) ไมม่ ี [[Construct]] ถ้าเรียก new จะเกิด error ขนึ มาดงั ตวั อยา่ งfunction * generator() {}let iterator = new generator(); // throws \"TypeError: f is not a constructor\" ส่ิงทีค่ าดวาจะเพ่ิมเขา มาใน ES8 (ECMAScript 2017) (มีนดิ เดียว) Object.values() Object.entries() อา งอิง[1] หนงั สือ “พฒั นาเวบ็ แอปพลเิ คชนั ด้วย JavaScript” จะอธิบายถงึ มาตรฐานตวั ใหม่ ECMAScript 2015 หรือเรียก สนั ๆ วา่ “ES6” หรือ “ES6 Harmony” โดยเล่มนีตพี มิ พ์และจดั จาํ หน่ายโดยซีเอด็
[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla[3] https://github.com/nzakas/understandinges6/blob/master/manuscript/B-ECMAScript-7.md[4] https://tc39.github.io/ecma262/2016/ กอนจากกนั PDF จะอยทู่ ีนีครับ http://www.patanasongsivilai.com/javascript.html (ถ้าไปดาวน์โหลดจากทีอืนอาจไมไ่ ด้ เวอร์ชนั ใหมล่ า่ สดุ ) สนใจอยากตดิ ตามเพจเกียวกบั ไอที ก็กด Like ได้ที https://www.facebook.com/programmerthai/ เขียนโดย แอดมนิ โฮ โอน้อยออก (จตรุ พชั ร์ พฒั นทรงศิวิไล) 30 พ.ค. 2559
Search
Read the Text Version
- 1 - 10
Pages:
