Posts

Set ใน JavaScript

 เริ่มมีให้ใช้ใน ES6 ไม่เรียงลำดับ ไม่ index ไม่ยอมให้มีค่าซ้ำ .add() จะเพิ่มสมาชิกได้ทีละตัวเท่านั้น หากใส่ Array เข้าใปจะทำให้ Array กลายเป็นสมาชิกตัวหนึ่งของเซ็ต let s = new Set(); // A new, empty set let t = new Set([ 1 , s]); // A new set with two members let t = new Set(s); // A new set that copies the elements of s . let unique = new Set( "Mississippi" ); // 4 elements: "M" , "i" , "s" , and "p" unique . size // => 4 แสดงจำนวนของสมาชิกในเซ็ต // Methods ที่ใช้ได้ // add(),delete(),clear(), has() let s = new Set(); // Start empty s . size // => 0 s . add( 1 ); // Add a number s . size // => 1 ; now the set has one member s . add( 1 ); // Add the same number again s . size // => 1 ; the size does not change s . add(true); // Add another value; note that it is fine to mix types s . size

Locale Storage กับ sessionStorage

 Locale Storage กับ sessionStorage เป็น Object ที่เป็น property ของ Object Window ค่าของ property ของ Locale Storage กับ sessionStorage จะเป็น String เท่านั้น อายุการเก็บค่ากับ Scope   Lifetime Scope localStorage ตลอดไปจนกว่าจะถูกลบ document origin (protocol+hostname+port) sessionStorage หายไปเมื่อปิดหน้าต่าง (Browser อาจจะเอาค่ากลับคืนหากมีการใช้ restore tab ) document origin + window Script ที่รันคนละหน้าต่างหรืแท็บจะมี sessionStorage แยกกัน การใช้งาน ใช้แบบ object ปกติ let name = localStorage . username; // Query a stored value . if ( ! name) { name = prompt( "What is your name?" ); // Ask the user a question . localStorage . username = name; // Store the user 's response. } delete localStorage . username //Use delete operator สามารถใช้ for/in หรือ Object.key() ได้ ใช้ผ่าน methods clear() getItem(keyName) setItem(keyName, keyValu

Class ใน JavaScript, การสร้าง class ด้วย keyword class

 ใน ES6 มีการเพิ่ม keyword class ขึ้นมา การประกาศ class แบบนี้จะไม่สามารถใช้การเรียกใช้ function แบบปกติกับ constructor ได้ จะต้องใช้กับ new เท่านั้น เนื้อหาของ class คล้าย object literal แต่ไม่เหมือนกันทั้งหมด ไม่ต้องใช้ comma คั่น method การประกาศ Property ใช้  name:value ไม่ได้ ใช้ constructor() ในการประกาศ function แต่ชื่อ function จริงๆคือชื่อของ class ถ้าไม่ต้องการตั้งค่าเริ่มต้นใดๆ ไม่ต้องใส่ constructor ก็ได้ constructor ว่างจะถูกสร้างให้อัตโนมัติ การประกาศ class จะไม่ถูก hoisted นั้นคือจะไม่สามารถเรียกใช้ class ก่อนการประกาศได้    class Range { constructor(from, to) { // Store the start and end points (state) of this new range object. // These are noninherited properties that are unique to this object. this .from = from; this .to = to; } // Return true if x is in the range, false otherwise // This method works for textual and Date ranges as well as numeric. includes(x) { return this .from <= x && x <

Class ใน JavaScript, Class กับ Constructor

ชื่อของ Contructor จะให้เริ่มต้นด้วยอักษรตัวใหญ่ เรียกใช้ด้วย new  prototype property จะเป็น prototype ของ object ที่สร้างขึ้นใหม่ ค่า new.target จะเป็น undefined ถ้ามีการเรียกใช้ construtor แบบ function ธรรมดา ถ้าใช้ new ค่า new.target จะเป็น constuctor function ของ class หรือ subclass ที่เรียกใช้ ใน ES6 จะมี keyword class ให้ใช้ // This is a factory function that returns a new range object . function range (from, to) { // Use Object . create() to create an object that inherits from the // prototype object defined below . The prototype object is stored as // a property of this function, and defines the shared methods (behavior) // for all range objects . let r = Object . create( range . methods); // Store the start and end points (state) of this new range object . // These are noninherited properties that are unique to this object . r . from = from; r . to = to; // Finally return the new object return

Class ใน JavaScript, Class กับ Prototype

 class ใน JavaScript จะต่างจาก class ในภาษาอื่นๆ ใน JavaScript object ที่เป็น class เดียวกันคือ object ที่มี prototype object เดียวกัน สามารถใช้ Object.create() เพื่อสร้าง object ที่เป็น class เดียวกันโดนการใช้ prototype object เดียวกัน // This is a factory function that returns a new range object . function range (from, to) { // Use Object . create() to create an object that inherits from the // prototype object defined below . The prototype object is stored as // a property of this function, and defines the shared methods (behavior) // for all range objects . let r = Object . create( range . methods); // Store the start and end points (state) of this new range object . // These are noninherited properties that are unique to this object . r . from = from; r . to = to; // Finally return the new object return r; } // This prototype object defines methods inherited by all range objects . range . method

Object ใน JavaScript, Object Literal

Shorthand Properties Normal: let x = 1 , y = 2 ; let o = { x : x, y : y }; ทางลัดใน ES6 let x = 1 , y = 2 ; let o = { x, y }; o.x + o.y // => 3 ชื่อ Property ที่มาจากการคำนวณ ปกติ const PROPERTY_NAME = "p1" ; function computePropertyName() { return "p" + 2 ; } let o = {}; o[PROPERTY_NAME] = 1 ; o[computePropertyName()] = 2 ; ES6 ในเครื่องหมาย [] จะเป็น JavaScript Expression อะไรก็ได้ const PROPERTY_NAME = "p1" ; function computePropertyName() { return "p" + 2 ; } let p = { [PROPERTY_NAME]: 1 , [computePropertyName()]: 2 }; p . p1 + p . p2 // => 3 ชื่อ Property ที่เป็น Symbol const extension = Symbol( "my extension symbol" ); let o = { [extension] : { /* extension data stored in this object */ } }; o[extension].x = 0 ; // This won't conflict with other properties of o Spread Operator ES2018 ขึ้นไป จะแตกเฉพาะ own property เท่านั้น หลีกเลี่ยงการใช้ในลูปเพราะ

Object ใน JavaScript, การขยายต่อเติม

 Object.assign()    จะ copy enumerable own property ของ object ที่ถัดจาก argument ตัวแรกใส่เข้าไปใน object ที่เป็น argument ตัวแรก ถ้าชื่อ property ซ้ำ ค่าจะถูกเขียนทับ สร้าง object ที่เป็นค่าผสมระหว่าง default กับค่าใหม่   o = Object.assign({}, defaults, o); o = {...defaults, ...o}; Serializing Objects คือการเปลี่ยน object ให้อยู่ในรูป String ที่เป็น JSON (JavaScript Object Notation) หรือกลับกัน let o = {x : 1 , y : {z : [ false , null , "" ]}}; // Define a test object let s = JSON.stringify(o); // s == '{"x":1,"y":{"z":[false,null,""]}}' let p = JSON.parse(s); // p == {x: 1, y: {z: [false, null, ""]}} ในการแปลง Object เป็น JSON NaN, Infinity, -Infinity, จะถูกแปลงเป็น null วันเวลาจะแปลงเป็น String ใน ISO format แต่JSON.parse จะไม่แปลมันกลับเป็นวันเวลา วันเวลาจะกลายเป็น String ตอนแปลงกลับแทน   Function, RegExp, Error, undefined จะไม่โดนแปลง  JSON.stringify()  จะแปลงเฉพาะ enumberable own property เท