4.2. Arrow function - Chrome V8
Arrow Function
https://www.w3schools.com/js/js_arrow_function.asp
Google Apps Script JavaScript 2020 Update - V8 Engine
https://www.youtube.com/watch?v=1S_v-SUfjJg
Apps Script ทคใงี่ื ช้คเครง่อื งยนตล Chrome V8 สสำมสำรถเขยีค นฟฝังกลชืงัน่ล ในรยปแบบ Arrow function ไดค้ เหมอง น
กลับ Javascript ES6
โครงสรส้ค ำง
// แบบเดมร
function(arguments) {
// Code
}
// Chrome V8 หรมือ Javascript ES6
(arguments) => {
// Code
}
ตรวอยสม่ ำงท่ที 1
// แบบเดมร
var fn = function(){ // แบบน้นกขี ก็ได้ช
// var fn = function func(){
return "Val" ;
}
Logger.log(fn()) ; // Val
// Chrome V8 หรอืม Javascript ES6
const fn = () => "Val" // มคขี กาสิรัลง่ เดยีข วทิรี่เข ปนป็ ของฟงัฟ กชต์ ล่ิรัน ไม่ตค ชอ้ งครอบดว้ช ย { } กไก็ ดช้
Logger.log(fn()) // และจะ return ตวลั นีลน้ัน เลย จึจงไม่คต้อช งใชค้ช กาสลรง่ิั return อีขก
// Val
บททิรี่ข 4 : ฟัฟงกตช์ ัลนร่ิ 51
ตวร อยม่สำง
// แบบเดรม
let arr = [ "A" , "B" , "C" ]
let newArr = arr.map(function(r){ return r + "-0" } )
Logger.log(newArr) // [ 'A-0', 'B-0', 'C-0' ]
// Chrome V8
let arr2 = [ "A" , "B" , "C" ]
let newArr2 = arr.map( (r) => { return r+"-0" } ) // ใช้ช Arror function
Logger.log(newArr2) // [ 'A-0', 'B-0', 'C-0' ] - ให้ชผลลลัพธต์แบบเดยีข วกลัน
// Chrome V8 - ลดรปูบ // ใชช้ Arror function ลดรบปู
let arr3 = [ "A" , "B" , "C" ] // Argrument มขตี วลั เดขียว ไม่ตค ้อช งมวขี งเล็กบกไก็ ด้ช
let newArr3 = arr.map( r => r+"-0" ) // return ไมคต่ อช้ งมขี หากคมนื 1 คกาสลงร่ิั
Logger.log(newArr3) // [ 'A-0', 'B-0', 'C-0' ] - ใหชผ้ ลลพลั ธแต์ บบเดียข วกัลน
4.3. ฟงฟั กยช์ ่ีนลัท Generator
ฟงฝั กชล ่ลงืนั Generator เป็นป กค้อนขอค้ มยลแบบมลคี สส ำดลับ เวลสำเรยีค กใชง้ค สำน กสำรจะเข้สค ำไปจบัล ขอค้ มลย แตูยล่ ะตวลั ตอ้ค งใช้ค
เมธอด next จบัล ทตคี วลั เป็ปนลสสำดัลบ
เซอรลวสพิ Drive มีคคลส้ค ำยๆแบบนคีซเยอะ แตูยเ่ ปน็ป Built-in เชูย่น จบร ไฟล์พในโฟลเดอรมพ์ สำ โดยจะได้คมสำเปป็น
FileIterator หรงอกค้อนของไฟลล ตอค้ งใช้ค while และ next วนลปย เขสค้ ำไปจลับมสำทคลี ะตัวล
// การเรขียกใช้ฟช งฟั กตช์ ร่นัลิ Generator
function* gen(){ // หลงลั function มขี *
yield 1 ; // ใชชค้ กาวา่ค yield เทา่ค นัลนนี้
yield 2 ;
yield 3 ;
}
// การเรยขี กใช้ชฟฟังก์ตชลัริ่น Generator // -------------- > ดผูบ ลท่ิรีข Logs [01]
function test(){ // -------------- > ดผูบ ลทขีร่ิ Logs [02]
// -------------- > ดผูบ ลทขีริ่ Logs [03]
let n = gen() ; console.log(n) ; // -------------- > ดผูบ ลทิ่รขี Logs [04]
let a1 = n.next() ; console.log(a1) ; // -------------- > ดผูบ ลทีขริ่ Logs [05]
let a2 = n.next() ; console.log(a2) ;
let a3 = n.next() ; console.log(a3) ;
let a4 = n.next() ; console.log(a4) ;
}
52 หลกลั การเขียข นโปรแกรม Google Apps Script โดย วสนลั ต์ต คณคุ ดรลกเศวต ([email protected])
ผล
Logs
[ 01 ] {}
[ 02 ] { value: 1, done: false }
[ 03 ] { value: 2, done: false }
[ 04 ] { value: 3, done: false }
[ 05 ] { value: undefined, done: true }
4.4. Default parameters – Chrome V8
ฟงฝั กชล ื่ลนัง ทต่คืงี ค้องกสำรพสำรสำมเิพ ตอรล เรสำสสำมสำรถกสส ำหนดคูส่ย ำเรพงื่มิ ตค้น ให้กค บลั พสำรสำมิเพ ตอรลไดค้ เช่นูย function
mult(x=1 , y=1)
ตวลั อยสยู่ ำง
function callFunc() { // เรีขยกใชฟ้ช ฟังกต์ชัรนล่ิ โดยไม่คส่คงพารามเร ตอร์ไต ปใหช้
// 1 – ใชค้ช ค่า Default
let total_default = mult() ;
console.log(total_default) ; // 12 – ใชคช้ ค่า 4x3
let total = mult(4,3) ;
console.log(total) ;
}
function mult(x=1 , y=1) {
return x*y
}
4.5. วัลตถุถ Arguments
The arguments object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
JavaScript Function Parameters
https://www.w3schools.com/js/js_function_parameters.asp
วตลั ถถ arguments เปปน็ Built-in object ทเ่ืีคง ก็บก อสำรลกิพวเมน้ค ตลท่สงีืค ยูง่ ใหกค้ บัล ฟงฝั กลชืลัง่น ซืถงงึ่ สสำมสำรถเขคส้ ำถึถงได้เค หมอง น
เปป็นอสำเรยตล ัลวหนงืงึ่ถ
ตวัล อยู่สย ำง
function func1(a, b, c) { // 1
Logger.log(arguments[0]) ; // 2
Logger.log(arguments[1]) ; // 3
Logger.log(arguments[2]) ;
// ดคุผลทีริ่ข Logs ------------------- > [01], [02], [03]
}
func1(1, 2, 3) ;
บทท่ิขีร 4 : ฟังฟ กตช์ นัริ่ล 53
ผล
Logs
[ 01 ] 1
[ 02 ] 2
[ 03 ] 3
ตวร อยสม่ ำง - หสำผมรวมในกอค้ นอสำเรยล
x = sumAll(1, 123, 500, 115, 44, 88) ;
Logger.log(x) ; // 871
function sumAll() {
var i ;
var sum = 0 ;
for (i = 0 ; i < arguments.length ; i++) {
sum += arguments[i] ;
}
return sum ;
}
ตวร อย่มสำง – หสำคยูส่ ำมสำกสดถ ในกอ้ค นอสำเรยล // 500
x = findMax(1, 123, 500, 115, 44, 88) ;
function findMax() {
var i ;
var max = -Infinity ; // ค่คาทน่ริีข อช้ ยท่ีริขสดคุ
for (i = 0 ; i < arguments.length ; i++) {
if (arguments[i] > max) {
max = arguments[i] ;
}
}
return max ;
}
หมสำยเหตุถ :
กสำรหสำค่ยสู ำสงย สถดตื่สงสำสดถ มวคี ธิพ ีคท่งีงืค ู่ยสำยกวสยู่ ำนซคี เขีคยนโค้คดเพคียง 1 บรรทดลั
( ดเผ พิล่ีทมเตลิมในขตอ้ 11.4 Spread operator (3 จดป ) - Chrome V8 หนา้ต 128 )
54 หลกลั การเขียข นโปรแกรม Google Apps Script โดย วสันล ตต์ คณุค ดรลกเศวต ([email protected])
บททีทข่ 5
คคาเฉพาะ
5.1. undefined
JavaScript Global Reference
https://www.w3schools.com/jsref/jsref_obj_global.asp
JavaScript undefined Property
https://www.w3schools.com/jsref/jsref_undefined.asp
undefined กคก็ งอไมยมู่ คี หรงอไมู่ไย ดจ้ค สส ำกดัล ควสำมหมสำย เช่ยนู ตวัล แปรทคืงีย่ ลงั ไม่ยูไดร้ค ะบคถ ู่ยสำ
var x ; // พมร พ์ต : undefined
Logger.log(x) ;
if (typeof x === "undefined") { // ทกาบรรทัลดนีน้ข
txt = "x is undefined" ;
} else {
txt = "x is defined" ;
}
5.2. null
null คลสค้ ำยกบัล undefined ไม่มยู ขคี ้อค มยลเหมอง นกลนั แตตูย่ สู่ย ำงกันล ทีงืคช่ นดพิ
ตวลั อยสู่ย ำง
typeof undefined // undefined
typeof null // object
null === undefined // false ( เคร่ืมิรองหมาย = 3 ตัลว หมายถงึจ เปรยขี บเทยขี บชนดร ขอ้ช มบูลดว้ช ย)
null == undefined // true
ตวลั อยสู่ย ำง
var person = {
firstName : "John" ,
lastName : "Doe" ,
age : 50 ,
eyeColor : "blue"
};
person = undefined ; // Now both value and type is undefined
var person = {
firstName : "John" ,
lastName : "Doe" ,
age : 50 ,
eyeColor : "blue"
};
person = null ; // Now value is null, but type is still an object
56 หลักล การเขยขี นโปรแกรม Google Apps Script โดย วสันล ตต์ คณคุ ดลร กเศวต ([email protected])
5.3. this
The JavaScript this Keyword
https://www.w3schools.com/js/js_this.asp
this เปป็นคยคี ลเวพิรดล ทืหง่คี มสำยถึถง วตลั ถตถ วัล เอง this มีคหลสำกหลสำยค่สยู ำขถึซนอยกยู่ ับล วยู่สำ ถกย เรยีค กใชคท้ งีืค่ไหน
ตวร อยสม่ ำง this โดดๆ ก็คก งอโปรเจค็ก Google Apps Script
function myFunction() {
var x = this ;
Logger.log(x) ;
}
ตรวอยสม่ ำง this ในฟฝงั กลช่ลังนื กค็ก อง โปรเจก็ค Google Apps Script เหมอง นกบัล ข้คสำงบน
function call() {
Logger.log(inFunc()) ;
}
function inFunc() {
return this ;
}
ตวร อยสม่ ำง this อยใู่ย น Method ของวตลั ถถ
function myFunction() {
var person = {
firstName: "John" ,
lastName : "Doe" ,
id : 5566 ,
fullName : function() {
return this.firstName + " " + this.lastName ;
} // Close - function
} ; // Close - person
Logger.log(person.firstName) ; // พรมพ์ต : John
Logger.log(person.lastName) ; // พมร พต์ : Doe
Logger.log(person.id) ; // พมร พ์ต : 5566.0
Logger.log(person.fullName()) ; // พมร พ์ต : John Doe
}
5.4. infinity
JavaScript Infinity Property
https://www.w3schools.com/jsref/jsref_infinity.asp
Infinity หมสำยถงถึ เลขบวกทีคง่ืไม่ยสู พนิซ สถด แต่จยู รพิงๆในทสำงคอมพวิพ เตอรแล ล้คว จสส ำกดัล ทีคงื่
1.797693134862315E+308
- Infinity หมสำยถถึงคสู่ย ำเลขลบทงคี่ไื มูย่สพนซิ สดถ แตู่จย รงพิ ๆจสสำกลัดที่ืคง -1.797693134862316E+308
บททีรข่ิ 5 : คกาเฉพาะ 57
5.5. continue
JavaScript continue Statement
https://www.w3schools.com/jsref/jsref_continue.asp
JavaScript Break and Continue
https://www.w3schools.com/js/js_break.asp
continue ใชกค้ ลับลปย โดยหยถด 1 ลยป ถส้ค ำตรงตสำมเงอง่ื นไข จสำกนนัลซ ตอู่ย เน่องื งไปยลงั ลยปถลัดไป
ควสำมแตกตูส่ย ำงระหว่ยูสำง continue และ break ก็กคอง แทนทงีคื่จะโดดออกจสำกลยปไปเลย แตูย่ continue โดด
ขค้สำมไป 1 ลยป จสำกนนัซล กย็ก งลั วนลปย ตอู่ย ไป
อยสู่ย ำงไรกด็ก ีค เมงือ่ continue ทสส ำงสำน กจ็ก ะมีคพฤตกิพ รรมแตกตส่ยู ำงกันล สสสำหรบลั ลยปแตยู่ละชนิพด
ใน while เงอื่ง นไขถยกทดสอบ และถค้สำจริพง ลยปถยกทสส ำต่อูย
ใน for กอ้ค น i++ ถกย ประเมิพนกยู่อน จสำกนัซลนเงอง่ื นไขจะถกย ทดสอบ และหสำทสำงออกวสู่ย ำ ลยปอง่นื ๆจะถกย ทสสำตู่อย
continue สสำมสำรถใช้คกับล label ไดดค้ วค้ ย
รปย แบบกสำรใชง้ค สำน
continue ;
หรงอใช้กค ับล Label
continue labelname ;
ตวร อย่สม ำงท่ที 1
var text = ""; var i = 0 ;
while (i < 5) {
i++ ; // ขาช้ ม 3 ไป
if (i === 3) {
continue ;
} // if
text += "\nThe number is " + i ;
} // while
Logger.log(text) ; // ดผูบ ลทิีรข่ Logs ------------------------- >
ผล
Logs
[ 01 ] The number is 1
The number is 2
The number is 4
The number is 5
58 หลกลั การเขยีข นโปรแกรม Google Apps Script โดย วสลันต์ต คณุค ดลร กเศวต ([email protected])
ตรวอยสม่ ำงทท่ี 2
var text = ""; var i = 0 ;
for (i = 1 ; i < 8 ; i++) {
if (i === 2 || i === 3) continue ; // ขา้ช ม 2 และ 3 ไป
text += "\n" + i
}
Logger.log(text) ; // ดูบผลทิ่รขี Logs ------------------------- >
ผล
Logs
[ 01 ] 1
4
5
6
7
ตรวอยส่ม ำงทท่ี 3
var cars = [ "BMW" , "Volvo" , "Saab" , "Ford" ] ;
var text = "" ;
var i ;
for (i = 0 ; i < cars.length ; i++) { // ขชา้ ม Saab ไป
if (cars[i] === "Saab") {
continue ;
}
text += cars[i] + "\n" ;
}
ผล
Logs
[ 01 ] BMW
Volvo
Ford
บททีริ่ข 5 : คาก เฉพาะ 59
ตวร อยสม่ ำงท่ที 4 – ใชค้ continue กลบั label
var i, j ;
var text = "" ;
Loop1: // The first for loop is labeled "Loop1"
for (i = 0 ; i < 3 ; i++) {
text += "\n" + "i = " + i + ", j = " ;
Loop2: // The second for loop is labeled "Loop2"
for (j = 10 ; j < 15 ; j++) {
if (j === 12) { // ข้ชาม 12 ไป
continue Loop2 ;
}
text += j + " " ;
}
}
Logger.log(text) ;
ผล
Logs
i = 0, j = 10 11 13 14
i = 1, j = 10 11 13 14
i = 2, j = 10 11 13 14
5.6. break
JavaScript break Statement
https://www.w3schools.com/jsref/jsref_break.asp
break ใชค้โดดออกจสำก switch หรงอลยป (for, for ... in, while, do ... while)
เมงอื่ break ถยกใชค้ใน switch จะหยถด switch ทงัซล บล็กอค
เมืง่อ break ถยกใชใค้ นลปย จะหยถดลปย และทสสำโคคด้ จสำกลยปต่อูย (ถ้คสำมคี)
break สสำมสำรถใชค้กลับ label ได้คดค้วย เพงื่อโดดไปยัลง label ถค้สำไมู่ยมีค label จะใชค้งสำน breake ไดค้เฉพสำะใน
switch หรงอ ลปย เทยู่สำนซลัน
รปย แบบกสำรใช้คงสำน
break ;
หรอง ใชค้กบัล Label
break labelname ;
60 หลกัล การเขขยี นโปรแกรม Google Apps Script โดย วสลันตต์ คณุค ดรลกเศวต ([email protected])
ตวร อยส่ม ำงที่ท 1 – วน 5 ครัซลงแตหยู่ ยดถ ท่คืีง 3 แลคว้ โดดออกจสำกลยปเพรสำะ Break
var text = "" ;
var i = 0 ;
while (i < 5) {
text += "\nThe number is " + i ;
i++ ;
if (i === 3) {
break ;
}
}
Logger.log(text) ; // ดผูบ ลทขี่ิร Logs ------------------------- >
ผล
Logs
The number is 0
The number is 1
The number is 2
ตรวอยสม่ ำงทท่ี 2
var day ;
switch (new Date().getDay()) { // ได้ตช ลวั เลขออกมาเปน็ป 0-6
case 0:
day = "Sunday" ;
break ;
case 1:
day = "Monday" ;
break ;
case 2:
day = "Tuesday" ;
break ;
case 3:
day = "Wednesday" ;
break ;
case 4:
day = "Thursday" ;
break ;
case 5:
day = "Friday" ;
break ;
case 6:
day = "Saturday" ;
break ;
}
Logger.log("Today is " + day) ; // ผลเช่นค Today is Thursday
บททขีริ่ 5 : คาก เฉพาะ 61
ตวลั อยสูย่ ำงทงค่ืี 3 – ใชง้ค สำน break นอก switch หรอง ลปย
var cars = [ "BMW" , "Volvo" , "Saab" , "Ford" ] ;
var text = "" ;
list: {
text += cars[0] + "\n" ;
text += cars[1] + "\n" ;
text += cars[2] + "\n" ;
break list ;
text += cars[3] + "\n" ;
}
ผล
Logs
BMW
Volvo
Ford
ตวลั อยสยู่ ำงทง่คีื 4
var text = "" ;
var i, j ;
Loop1: // The first for loop is labeled "Loop1"
for (i = 0 ; i < 3 ; i++) {
text += "\n" + "i = " + i + ", j = " ;
Loop2: // The second for loop is labeled "Loop2"
for (j = 10 ; j < 15 ; j++) {
if (j === 12) {
break Loop1 ;
}
text += j + " " ;
}
}
Logger.log(text) ;
ผล
i = 0, j = 0 1
62 หลลักการเขขียนโปรแกรม Google Apps Script โดย วสัลนตต์ คณคุ ดรลกเศวต ([email protected])
บทท่ทีข 6
ตวลั แปรวัตล ถถ
6.1. ตลวั แปร Object (วลตั ถุถ)
JavaScript Objects
https://www.w3schools.com/js/js_object_definition.asp
JavaScript Object Accessors
https://www.w3schools.com/js/js_object_accessors.asp
ตวัต แปร Object ประกอบไปดว้ค ย keys(หรงอ Properties) และ values โดยทลัซง keys และ values เรสำ
เรคียกรวมกนลั วสูย่ ำ items (ดตย ลัวอยสูย่ ำงไดจค้ สำกโค้คดดคส้ ำนลู่ยสำง)
Object สสำมสำรถมคเี มถอดไดด้ค คว้ ย (Chrome V8) โดยเมถอดของ Object กคก็ อง คณถ สมบลัติทพ ่คบืงี รรจถดว้ค ย
ฟังฝ กชล ืลนัง่ เวลสำเรคียกใชงค้ สำนจถึงเรคียกใช้คแบบเมถอด(มวคี งเล็กบต่อยู ทส้ค ำย) เชยูน่ Object.Method()
ตวัล อยสยู่ ำงกสำรสรสค้ ำงตวลั แปรวัตล ถถ และกสำรจลัดกสำรเบอซง งตคน้
function objectFunction1() {
// ใช้ชวงเล็บก ปกีป กา ครอบคา่ค ของตัลวแปร Object
var newObj = {} ; // สรคา้ งตัวต แปร Object วาู่ย งๆ
// Object ประกอบไปด้ชวย key : value หลายตลวั
// ลาก ดบลั ของ key : value ไมส่ค าก คญัล
var employee = {
name : 'Joe Bloggs' , // key กค็ก อืม name , value กคก็ ือม 'Joe Bloggs'
age : 25 , // key กค็ก ืมอ age , value กค็ก อืม 25
title : 'Data Analyst' // key กคก็ มอื title , value ก็คก อมื 'Data Analyst'
name_title : function() { // เมถอด กค็ก อมื name_title
return this.name + " " + this.title ;
} // Close - name_title
} // Close - employee
Logger.log(employee) ; // พมร พ์ต : {name=Joe Bloggs, title=Data Analyst, age=25.0}
Logger.log(typeof employee) ; // พมร พต์ : object
Logger.log(employee.name) ; // เขาช้ ถึจงขช้อมลูบ ใน Object วธร ขีทิรีข่ 1 – ผล Joe Bloggs
Logger.log(employee['name']) ; // เขา้ช ถงึจ ขอช้ มบูลใน Object วรธีขทริีข่ 2 – ผล Joe Bloggs
Logger.log(employee.name_title()) ; // เรขียกเมถอดใน name_title()
// พมิพ พล : Joe Bloggs Data Analyst
delete employee.age // ลบคยขี ต์ age ในตัลวแปรวัลตถุค employee
employee.age = 25 // เพรมิ่ คยีข ต์ age ลงในตวัล แปรวลตั ถคุ employee
}
64 หลกลั การเขขียนโปรแกรม Google Apps Script โดย วสลันต์ต คณคุ ดรลกเศวต ([email protected])
6.2. เพมีทพ่ , ลบ, แทรก สมสำชกพ ใหค้ Object
JavaScript Object Properties
https://www.w3schools.com/js/js_object_properties.asp
กสำรเพงพิืม่ ลบ แทรก item ลงในตัวล แปร Object สสำมสำรถทสสำได้ดค งัล นซคี
function objectFunction2() {
var employee = {
name: 'Joe Bloggs',
age: 25,
title: 'Data Analyst'
}
// 1. เพีพทิม่ item ======================================================
employee['department'] = 'Web Analytics' ;
// หรรอใชคแ้ บบนีก้ทน ็ลได้ค
employee.department = 'Web Analytics' ;
Logger.log(employee);
// พมร พต์ : {name=Joe Bloggs, title=Data Analyst, department=Web Analytics, age=25.0}
// 2. ลบ item ======================================================
delete employee.age ;
Logger.log(employee) ;
// พรมพ์ต : {name=Joe Bloggs, title=Data Analyst, department=Web Analytics}
}
บททขีริ่ 6 : ตัลวแปรวตัล ถุค 65
6.3. get, set และ Object method - Chrome V8
6.3.ก.) get และ function ใน Object
JavaScript Object Accessors
https://www.w3schools.com/js/js_object_accessors.asp
2 โคดค้ ตู่ยอไปนใีซค หผค้ ลเหมอง นกลนั ตลัวหนืึ่ถงง ใชค้ function สรสค้ ำงเมถอดใหคก้ บลั Object อีกค ตวัล หนื่งึงถ ใช้ค get สรส้ค ำงเม
ถอดให้กค ับล Object
get เป็ปนของใหมยู่ ชู่ยวยใหค้โคค้ดซลับซ้คอนนค้อยลง ใช้คกสสำหนด Object Accessors หรงอ คถณสมบัลติพของวลัตถถทงื่ีค
สสำมสำรถเขยคี นโคค้ดสรส้ค ำงไดค้
โคคด้ ทีท่ 1 – เปป็นแบบดลงซั เดิพม ฟงฝั กลช่ลืนัง ทีคื่สง ร้สค ำงให้คกลับตวลั แปรวัลตถถ จะกลสำยเปป็นเมถอดของตวัล แปรนซลัน
function objectFunction() {
// สร้าช งวตลั ถุค
var person = {
firstName : "John" ,
lastName : "Doe" ,
fullName : function() {
return this.firstName + " " + this.lastName ;
}
}
Logger.log( person.fullName() ) ; // John Doe
}
โคดค้ ทที่ 2 – ใชค้ Get ฟังฝ กชล นลังื่ ทีืง่คสรสค้ ำงให้คกัลบตลัวแปรวตลั ถถ จะกลสำยเป็ปนคณถ สมบลัตพิของตวลั แปรนซัลน สังล เกตถกสำร
เรคียกใช้ค
function objectGet() {
// สร้ชางวลัตถคุ
var person = {
firstName : "John" ,
lastName : "Doe" ,
get fullName() {
return this.firstName + " " + this.lastName ;
}
}
// วรธีกข ารเรีขยกใชต้ช ่าค งจากข้าช งบน ไมม่ค ขี () ***
Logger.log(person.fullName) ; // John Doe
}
66 หลักล การเขขียนโปรแกรม Google Apps Script โดย วสันล ต์ต คณคุ ดรลกเศวต ([email protected])
6.3.ข.) set
set ใชค้งสำนคลส้ค ำยกลบั get โดย set ใชรค้ ลับพสำรสำมเิพ ตอรล ซงถึงื่ จสำกนลซนั จะนสส ำไปใช้อค ะไรตอยู่ ก็กวสยู่ ำกลันไป
ตวร อยส่ม ำง - กสสำหนดค่สยู ำให้ค lang จสำกนันลซ set lang ปรบัล แตยู่งแล้ควเอสำไปกสส ำหนดให้ค language อีคกทีค
function objectSet() {
var person = {
firstName : "John" ,
lastName : "Doe" ,
language : "" ,
set lang(lang) { this.language = lang.toUpperCase() ; }
};
Logger.log(person.language) ; // (วค่าง) - ใชแช้ บบยลังไม่กค กาหนดคคา่ ใดๆ
Logger.log(person.lang) ; // undefined - ใชแช้ บบยัลงไมกค่ าก หนดคา่ค ใดๆ
person.lang = "en" ; // กกาหนดคคา่ ให้ช lang
Logger.log(person.language) ; // John Doe
}
6.3.ค.) Object.defineProperty()
JavaScript Object Accessors - Object.defineProperty()
https://www.w3schools.com/js/js_object_accessors.asp
เมถอด Object.defineProperty() สสำมสำรถใชค้เพิพม่ืง get และ set ใหก้ค ลับตวัล แปรวลตั ถไถ ดเ้ค ชนู่ย เดยคี วกลัน
ตวัล อย่ยสู ำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_object_accessors_set4
// Define object
var obj = {counter : 0} ;
// Define setters
Object.defineProperty(obj, "reset", {
get : function() { this.counter = 0 ; }
});
Object.defineProperty(obj, "increment", {
get : function() { this.counter++ ; }
});
Object.defineProperty(obj, "decrement", {
get : function() { this.counter-- ; }
});
Object.defineProperty(obj, "add", {
set : function(value) { this.counter += value ; }
});
Object.defineProperty(obj, "subtract", {
set : function(value) { this.counter -= value ; }
}) ;
บททร่ีขิ 6 : ตวัล แปรวัลตถคุ 67
// ตลวั อยา่ค งการใชงช้ าน
obj.reset ;
obj.add = 5 ;
obj.subtract = 1 ;
obj.increment ;
obj.decrement ;
Logger.log(obj.counter) ; // ผล : 4
6.4. Object Constructors - Chrome V8
JavaScript Object Constructors
https://www.w3schools.com/js/js_object_constructors.asp
6.4.ก.) Object Types (Blueprints) (Classes)
Object Constructors ใชสค้ รสค้ ำง Blueprint(ตนค้ แบบ) เพ่งอื สรส้ค ำงวลัตถหถ ลสำยๆตวัล ทื่ีคมง ีคชนพดิ เดคยี วกลัน เชย่นู วตัล ถถ
พนลกั งสำน ทงมี่คื ีค คณถ สมบัลตพิและเมถอดขสค้ ำงในเหมงอนกนลั
ขส้ค ำงตค้นสสำมสำรถทสส ำไดโ้ค ดยใชค้ ฟฝงั กชล ทัตี่น Object constructor
ตวลั อยสยู่ ำง - ฟงฝั กชล น่ลงืั Person (ขีนึ้จนต้ชนดชว้ ยอลักษรตลัวใหญ่ค) เปป็น ฟงฟั กชพ์ รทน่ี Object constructor
https://www.w3schools.com/js/tryit.asp?filename=tryjs_object_constructor
function Person(first, last, age, eye) {
this.firstName = first ;
this.lastName = last ;
this.age = age ;
this.eyeColor = eye ;
}
เรสำสสำมสำรถสรสค้ ำงวลตั ถตถ วลั ใหมชยู่ นพิดเดยีค วกับล Person ได้โค ดยใชคค้ คียเล วพิรดล new เชยนู่
var myFather = new Person("John", "Doe", 50, "blue") ;
Logger.log("May father is " + myFather.age) ; // ผล : 50
หมสำยเหตุถ :
Apps Script มีค Built-in objects(วตลั ถทถ สี่คงื ร้คสำงไวค้แล้วค พร้อค มใหค้ใชง้ค สำน) ดงลั ตู่อย ไปนคีซ
var x1 = new Object() ; // A new Object object
var x2 = new String() ; // A new String object
var x3 = new Number() ; // A new Number object
var x4 = new Boolean() ; // A new Boolean object
var x5 = new Array() ; // A new Array object
var x6 = new RegExp() ; // A new RegExp object
var x7 = new Function() ; // A new Function object
var x8 = new Date() ; // A new Date object
68 หลักล การเขขยี นโปรแกรม Google Apps Script โดย วสลันต์ต คณคุ ดรลกเศวต ([email protected])
หมสำยเหตถุ :
ดยเพพ่ิืมง เตพิมเรงือ่ งวลัตถถ this ในข้คอ 5.3 หน้คสำ 57
this เปนป็ วัตล ถถหมสำยถถงึ วตลั ถตถ ัวล เอง หรอง วตลั ถถทืงค่ีเปป็นเจส้ค ำของโคค้ด
ใน Constructor function วตัล ถถ this ไมยู่มคีค ยู่สำใดๆ มลันเปป็นสืพิ่งงทดแทนสสสำหรัลบวลัตถถใหมูย่ ค่ยูสำของวัลตถถ this จะ
กลสำยเปป็นวตลั ถถใหมยู่ เมืงอ่ วตัล ถถใหม่ยูถยกสรสค้ ำง
6.5. Object Prototypes - Chrome V8
JavaScript Object Prototypes
https://www.w3schools.com/js/js_object_prototypes.asp
The JavaScript this Keyword
https://www.w3schools.com/js/js_this.asp
Prototype(ตน้ค แบบ) ใชเ้ค พืม่งิพ Properties และ Methods ใหคก้ บัล Object constructor
// ฟฟงั กตช์ ัน่ิรล Object constructor
function employee(name, jobtitle, born) {
this.name = name ;
this.jobtitle = jobtitle ;
this.born = born ;
}
function myFunction() { // ไม่คมขผี ล - ไม่คใช่ตค วลั แปรวตัล ถุคธรรมดา
employee.prototype.salary = 2000 ;
employee.country = 'Thailand' ;
var fred = new employee("Fred Flintstone", "Caveman", 1970) ;
Logger.log(fred) ; // ดบผู ลทิ่ขรี Logs –----------------------------- > [ 01 ]
var wasan = new employee("Wasan Kds", "Instructor", 1977) ;
Logger.log(wasan) ; // ดผบู ลทีิรข่ Logs –----------------------------- > [ 02 ]
}
ผล
Logs
[ 01 ] { jobtitle=Caveman, born=1970.0, name=Fred Flintstone, salary=2000.0 }
[ 02 ] { jobtitle=Instructor, born=1977.0, name=Wasan Kds, salary=2000.0 }
บททร่ิีข 6 : ตวลั แปรวลัตถุค 69
6.6. Classes - Chrome V8
6.6.ก.) Classes
JavaScript Classes
https://www.w3schools.com/js/js_classes.asp
Classes หรอง คลาส ก็กคอง เป็ปนกสำรสรสค้ ำงโครงสร้คสำงของวตัล ถทถ ืม่ีงค คคี ถณสมบัลติแพ ละเมธอด
หมสำยเหตุถ
Javascript class ไมยใู่ ชวูย่ ลตั ถถ แตยเู่ ป็นป แมแู่ย บบของวตัล ถถ
รปย แบบกสำรใช้งค สำน – สรสค้ ำงคลสำสช่ืงอ ClassName และเพิง่พืมเมถอดชงื่อ constructor()
class ClassName{
constructor() { ... }
}
ตวร อย่มสำง – โคด้ค ตอยู่ ไปนคีสซ รส้ค ำงคลสำสรถยนตล ทคงืี่มคี 2 คถณสมบัลตพิ กก็คอง name และ year
https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_init
class Car{
constructor(name, year) {
this.name = name;
this.year = year;
}
}
// การใชงช้ าน
let myCar1 = new Car("Ford", 2014) ;
let myCar2 = new Car("Audi", 2019) ;
6.6.ข.) The Constructor Method
เมถอด constructor เป็ปนวธพิ พคี พิเศษ
- จะตค้องมชคี อ่งื ทืคแงี่ นนู่ย อน กค็ก งอ "constructor"
- จะดสส ำเนพินกสำรโดยอัตล โนมตัล ิพเมืงอ่ สรสค้ ำงวตัล ถถใหมู่ย
- ใชคเ้ พอง่ื เรพืง่มิ ตค้นคณถ สมบลัตขิพ องวตัล ถถ-
หสำกเรสำไม่ไูย ดก้ค สส ำหนดเมถอด constructor JavaScript จะเพืมง่ิพ constructor วสู่ย ำงๆมสำใหค้
70 หลัลกการเขขียนโปรแกรม Google Apps Script โดย วสัลนตต์ คณคุ ดรลกเศวต ([email protected])
6.6.ค.) Class Methods
คลสำสเมถอด ถกย สร้สค ำงขถนซึ โดยใชคไ้ วยสำกรณลเดคียวกบลั อ็ซอบเจ็กซ ตเพ์ มธอด
ใช้คค คียลเวพิรลด class เพอ่งื สรสค้ ำงคลสำส เพมพิงื่ เมถอด constructor() เสมอ จสำกนลนซั เพ่มิงืพ เมถอดเท่ยสู ำใดกไ็ก ด้ค
รปย แบบกสำรใชงค้ สำน
class ClassName{
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
}
ตรวอยส่ม ำง – สรสค้ ำงเมถอดช่งอื age() ใหกค้ ัลบคลสำส Car()
https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_method
class Car{ // ผล : My car is 7 years old.
constructor(name, year) {
this.name = name ;
this.year = year ;
}
age() {
let date = new Date() ;
return date.getFullYear() - this.year ;
}
}
let myCar = new Car("Ford", 2014) ;
Logger.log("My car is " + myCar.age() + " years old.") ;
ตรวอยส่ม ำง – สู่ยงพสำรสำมพเิ ตอรใล หก้ค ัลบคลสำส
https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_method2
class Car{
constructor(name, year) {
this.name = name ;
this.year = year ;
}
age(x) {
return x – this.year ;
}
}
let date = new Date() ;
let year = date.getFullYear() ;
let myCar = new Car("Ford", 2014) ;
Logger.log("My car is " + myCar.age(year) + " years old.") ; // ผล : My car is 7 years old.
บทที่ิขร 6 : ตัวล แปรวัตล ถคุ 71
6.7. Class Inheritance หรอรื Child classes
JavaScript Class Inheritance
https://www.w3schools.com/js/js_class_inheritance.asp
6.7.ก.) Class Inheritance
ในกสำรสร้สค ำงกสำรสงบทอดคลสำสใหคใ้ ช้คคีคยเล วริพ ดล extend คลสำสทคส่ืงี รสค้ ำงขึนซถ ดค้วยกสำรสงบทอดคลสำส จะสงบทอด
วธิพ กีค สำรทลัซงหมดจสำกคลสำสองื่น
ตวร อย่มสำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_classes_inherit
class Car{
constructor(brand) {
this.carname = brand ;
}
present() {
return 'I have a ' + this.carname ;
}
}
class Model extends Car{
constructor(brand, mod) {
super(brand) ;
this.model = mod ;
}
show() {
return this.present() + ', it is a ' + this.model ;
}
}
let myCar = new Model("Ford", "Mustang") ;
Logger.log(myCar.show()); // I have a Ford, it is a Mustang
เมถอด super() หมสำยถึงถ คลสำสหลลกั (Parent class)
โดยกสำรเรยคี กใช้คเมถอด super() ในเมถอด constructor เรสำจะเรยคี กวสูย่ ำ Parent's constructor method
และเขคส้ ำถงถึ คถณสมบัลตแิพ ละเมธอดของคลสำสหลลกั (Parent)
กสำรสบง ทอดมีปค ระโยชนสล สสำหรลบั กสำรใชโค้ คด้ค ซสสซ ำ ใชค้คถณสมบลตั แิพ ละวธิพ กีค สำรของคลสำสทืมคีง่ คีอยยซู่ สซสำ เมอ่ืง เรสำสรสค้ ำง
คลสำสใหมูย่
72 หลกลั การเขียข นโปรแกรม Google Apps Script โดย วสัลนตต์ คณุค ดรลกเศวต ([email protected])
6.7.ข.) Getters and Setters
ในคลสำสเรสำสสำมรสำถใชค้ get และ set ไดค้ (ดเย พื่มพิง เตมิพ ข้คอ 6.3 get, set และ Object method - Chrome V8
หนสค้ ำ 66 )
มันล ดเย ป็นป เร่อืง งฉลสำดท่ีงจืค ะใช้ค get และ set สสสำหรับล คถณสมบัตล ขิพ องคลสำส โดยเฉพสำะอยสูย่ ำงยงพ่ิงื ถ้คสำเรสำตอค้ งกสำร
ทสสำส่พิงงื พิพเศษกลบั คูย่สำ กอ่ยู นทคีงจ่ื ะส่งูย คงน หรอง กย่อู นทีงื่คคถณจะตลัซงคสยู่ ำ
แมวค้ ูส่ย ำ get จะเปป็นเมถอด เรสำไมยูต่ อ้ค งใชค้วงเลบ็ก ปกป กสำ เมอง่ื เรสำตอ้ค งจลับคูย่สำจสำกคถณสมบัตล พิ
ตวร อยส่ม ำง – สรสค้ ำง get และ set ให้กค ลับคณถ สมบลัตพิ carname
https://www.w3schools.com/js/tryit.asp?filename=tryjs_classes_getters
class Car{
constructor(brand) {
this.carname = brand ;
}
get cnam() {
return this.carname ;
}
set cnam(x) {
this.carname = x ;
}
}
let myCar = new Car("Ford") ;
Logger.log(myCar.cnam) ; // Ford
ชือง่ ของเมถอด get/set ตอ้ค งไม่เูย หมอง นกลบั ชืงอ่ ของคถณสมบลัตพิ ดงัล กรณีค carname ฉะนนัซล โปรแกรมเมอรล
หลสำยคนใชอ้ค ลกั ขระขดคี ลส่ยู ำง(_) กอ่ยู นชอ่งื คณถ สมบตัล ิเพ พง่อื แยก get/set ออกจสำกคถณสมบตัล พจิ รงิพ ***
ตรวอยส่ม ำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_classes_getters2
class Car // คคณุ สมบลตั รจรรง
constructor(brand) {
this._carname = brand ;
}
get carname() { // นกาคณคุ สมบัตล รจรงร มาใชช้
return this._carname ;
}
set carname(x) { // นาก คคณุ สมบลตั รจรรงมาใช้ช
this._carname = x ;
}
}
let myCar = new Car("Ford") ; // Ford
Logger.log(myCar.carname ) ;
บทท่ขรีิ 6 : ตัลวแปรวตัล ถคุ 73
กสำรใช้ค set ใช้คไวยกสำรณลเดยีค วกันล กลับเมอง่ื เรสำตอ้ค งกสำรเซต็ก ค่ยสู ำของคถณบัตล พิ แตไูย่ มตูย่ ค้องมวคี งเลบ็ก
ตวร อยสม่ ำง – ใช้ค set เปลยีคงื่ น carname เป็นป Volvo
https://www.w3schools.com/js/tryit.asp?filename=tryjs_classes_setter
class Car // คณคุ สมบตัล จร รงร
constructor(brand) {
this._carname = brand ;
}
get carname() { // นาก คคณุ สมบตลั จร รงร มาใชช้
return this._carname ;
}
set carname(x) { // นาก คุคณสมบลตั รจรงร มาใชช้
this._carname = x ;
}
}
let myCar = new Car("Ford") ;
myCar.carname = "Volvo" ; // *****
Logger.log(myCar.carname ) ; // Volvo
6.7.ค.) Hoisting
แตกตูย่สำงจสำกฟฝงั กชล นัล และกสำรประกสำศ JavaScript อน่งื ๆ กสำรประกสำศคลสำสจะไมู่ถย ยกยกขึซนถ นงื่นลั
หมสำยควสำมวสยู่ ำเรสำตอ้ค งประกสำศคลสำสกูย่อนจถึงจะใชงค้ สำนไดค้
ตวัล อยสู่ย ำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_classes_hoisting
// ยงลั ไม่คสามารถใชค้ช ลาสไดช้ ( ณ ตรงนขนี้)
// myCar = new Car("Ford")
// ข้ชางตน้ช จะเกดร Error
class Car{
constructor(brand) {
this.carname = brand ;
}
}
// ณ ตรงนีในข้ ชคช้ ลาสไดแช้ ลว้ช
let myCar = new Car("Ford")
74 หลกัล การเขียข นโปรแกรม Google Apps Script โดย วสนัล ต์ต คณคุ ดรลกเศวต ([email protected])
6.8. เมถอด static
JavaScript Static Methods
https://www.w3schools.com/js/js_class_static.asp
static เมถอดของคลสำส ถยกกสสำหนดไวค้ในคลสำส เรสำไมยู่สสำมสำรถเรคยี ก static เมถอดบนวัตล ถไถ ด้ค เรคยี กไดค้
เฉพสำะบนคลสำสเท่สูย ำนันซล
ตรวอยสม่ ำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_static
class Car{
constructor(name) {
this.name = name ;
}
static hello() {
return "Hello!!" ;
}
}
let myCar = new Car("Ford") ;
// You can call 'hello()' on the Car Class:
Logger.log(Car.hello()) ; // Hello!!
// But NOT on a Car Object :
Logger.log(myCar.hello()) ; // เกดร Error
หสำกตอ้ค งกสำรใชว้ค ตัล ถถ myCar ภสำยในเมถอดแบบ static เรสำสสำมสำรถสู่งย เปปน็ พสำรสำมพเิ ตอรไล ดค้
ตรวอยส่ม ำง
https://www.w3schools.com/js/tryit.asp?filename=tryjs_class_static2
class Car{
constructor(name) {
this.name = name ;
}
static hello(x) {
return "Hello " + x.name ;
}
}
let myCar = new Car("Ford") ;
Logger.log(Car.hello(myCar)) ; // this will raise an error.
บททีขริ่ 6 : ตัลวแปรวลัตถุค 75
ตวร อยม่สำง – โค้คดตอ่ยู ไปนคีสซ รสค้ ำงคลสำสของบถคคล และสร้คสำงเมถอดตสยู่ ำงๆ
class Person {
constructor(name,age) {
this.name = name
this.age = age
}
hello() {
return 'Hello'
}
get getAge() {
return this.age
}
static numberFour() {
return 4 ;
}
} // Close - class
กสำรใชคง้ สำน
// สร้าช งวลัตถุคดช้วยคาค่ ทิ่ีรกข กาหนดด้วช ยพารามเร ตอร์ทต ขีสร่ิ ค่งไป
let p1 = new Person("Wasan",43)
console.log(p1) ;
console.log(p1.name) ;
console.log(p1.hello()) ;
console.log(p1.getAge) ;
ผล
[ ] { name: 'Wasan', age: 43 }
[ ] Wasan
[ ] Hello
[ ] 43
76 หลลักการเขียข นโปรแกรม Google Apps Script โดย วสันล ต์ต คณุค ดรลกเศวต ([email protected])
6.9. Object destructuring – Chrome V8 ***
Object destructuring
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Object destructuring เปป็นกสำรดึงถ คสยู่ ำของอกอ๊ บเจกก็ ตอล อกไปใช้ค ซงงถ่ึื Chrome V8 ซงึื่งถ สอดคลอ้ค งกลบั
Javascript ES6 มีโค ครงสรค้สำงในกสำรนสส ำไปใชง้ค สำนทีส่ืงค ะดวกขซึนถ
ตวร อยส่ม ำงท่ีท 1- พงนซ ฐสำน
const user = {
id: 42 ,
is_verified: true
};
// ถ่คาย Value ของออ๊อ บเจก็ก ตต์ user ไปใช้กช บลั อออ๊ บเจ็กก ตต์ไมมค่ ชขี ืิอมร่
// มแขี ตค่ Keys ทิส่ีขร อดคลอ้ช งกบลั Keys ของตลัวต้ชนทาง – เอามาบาง Keys กไก็ ด้ช
//
const {id, is_verified } = user ;
Logger.log(id) ; // 42 – ไม่ตค อ้ช งใช้ชแบบ user.id อกีข แลชว้
Logger.log(is_verified) ; // true – ไมต่ค ้ชองใชช้แบบ user.is_verified อกีข แลว้ช
ตวร อยสม่ ำงท่ีท 2 - กสสำหนดคส่ยู ำ โดยแยกจจสำกกสำรประกสำศ
let a, b ; // ประกาศตวัล แปรไว้ชกอ่ค น
( {a, b} = {a: 1, b: 2} ) ;
ตรวอยสม่ ำงท่ีท 3 - เปลยงี่คื นชงื่อ
const o = { p: 42, q: true } ;
const { p: foo, q: bar } = o ; // นาก ไอเทม็ก จาก o ใสค่ใหกช้ บัล {} จากนนน้ีัล จลับใสค่ตวลั แปรใหม่ค(ชอริ่มื ใหมค่)
Logger.log(foo) ; // 42
Logger.log(bar) ; // true
ตวร อยส่ม ำงทที่ 4 (Defalut values ) - สสำมสำรถกสสำหนดคส่ยู ำ Default ใหก้ค ัลบอ๊อก บเจกก็ ตไล ด้ค ปอ้ป งกนัล undefined
กรณคีไมยไู่ ดก้ค สส ำหนด Value ใหก้ค ับล Key
// กกาหนดคาค่ Default // 3 (คา่ค ใหมค่)
const {a = 10, b = 5} = {a: 3} ; // 5 (คา่ค Default)
Logger.log(a) ;
Logger.log(b) ;
// กาก หนดค่าค Default + จบัล ใสตค่ ัวล แปรใหมค่
const {a: aa = 10, b: bb = 5} = {a: 3} ;
console.log(aa) ; // 3
console.log(bb) ; // 5
บททิ่ีรข 6 : ตวัล แปรวัลตถคุ 77
ตวร อยส่ม ำงทท่ี 5 – แตกคยีค ลของอกอ๊ บเจ็กกตล จสำกนลนซั ผยูส่ ำนเป็ปนพสำรสำมพิเตอรลใหกค้ บลั ฟงัฝ กชล นงัล่ื
const user = {
id: 42 ,
displayName: 'jdoe' ,
fullName: {
firstName: 'John' ,
lastName: 'Doe'
}
};
function userId({id}) {
return id ;
}
function whois({displayName , fullName: {firstName: name}}) {
return `${displayName} is ${name}` ;
}
Logger.log(userId(user)) ; // 42
Logger.log(whois(user)) ; // "jdoe is John"
ตวร อยส่ม ำงทท่ี 6 – วตัล ถซถ อค้ นวลัตถถ และกสำรแตกอสำเรยล
const metadata = {
title: 'Scratchpad' ,
translations: [
{
locale: 'de' ,
localization_tags: [] ,
last_edit: '2014-04-14T08:43:37' ,
url: '/de/docs/Tools/Scratchpad' ,
title: 'JavaScript-Umgebung'
}
],
url: '/en-US/docs/Tools/Scratchpad'
};
let {
title: englishTitle , // rename
translations: [
{
title: localeTitle , // rename
},
],
} = metadata ; // Assign to { }
Logger.log(englishTitle); // "Scratchpad"
Logger.log(localeTitle); // "JavaScript-Umgebung"
78 หลกัล การเขยีข นโปรแกรม Google Apps Script โดย วสนลั ต์ต คณุค ดรลกเศวต ([email protected])
ตวร อยส่ม ำงที่ท 7 - สสสำหรัลบกสำรวนลปย และกสำร Destructuring
const people = [
{
name: 'Mike Smith' ,
family: {
mother: 'Jane Smith' ,
father: 'Harry Smith' ,
sister: 'Samantha Smith'
},
age: 35
},
{
name: 'Tom Jones' ,
family: {
mother: 'Norah Jones' ,
father: 'Richard Jones' ,
brother: 'Howard Jones'
},
age: 25
}
];
// ลบลปบู ดจงึ ขอ้ช มูลบ (บางตลัว) จากออ๊อ บเจ็กก ตอต์ อกมา
for (const { name:n , family: {father:f} } of people) {
Logger.log('Name: ' + n + ' , Father: ' + f) ;
}
// "Name: Mike Smith , Father: Harry Smith"
// "Name: Tom Jones , Father: Richard Jones"
ตวร อยสม่ ำงทที่ 8 - 3 จดถ ในกสำรแตกวตัล ถถ(Object Destructuring)
let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }
a ; // 10
b ; // 20
rest ; // { c: 30, d: 40 }
บททขีริ่ 6 : ตลัวแปรวัตล ถุค 79
ตวร อยมส่ ำงท่ีท 9 - กสำรรวมอสำเรยแล ละกสำรแตกวตัล ถถ
อสำเรยลและวัลตถสถ สำมสำรถรวมกลันได้ค สมมตวพิ สู่ย ำคถณต้อค งกสำรอเพิ ล็กมเม้นค ตทล ี่สคืง สำม ในอสำเรยดล ้สค ำนลยู่สำง จสำกนลัซน เรสำ
ตคอ้ งกสำร คีคยล name ในวตลั ถถ เรสำสสำมสำรถทสสำส่งพิืง ตู่ยอไปนีซค
const props = [
{ id: 1 , name: 'Fizz' } ,
{ id: 2 , name: 'Buzz' } ,
{ id: 3 , name: 'FizzBuzz' }
];
// เอา id ตวลั ท่ิรขี 3
const [,, { name }] = props ;
Logger.log(name) ; // "FizzBuzz"
80 หลลกั การเขียข นโปรแกรม Google Apps Script โดย วสัลนตต์ คณุค ดลร กเศวต ([email protected])
บทท่ทีข 7
วตัล ถถ Object
7.1. assign()
Object.assign()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
เมถอด assign() ใช้คก๊กอปป้ปีพร๊กอพเพอรลตีซคทซัลงหมดจสำกวลัตถถ Source ( 1 ขซถึนไป) ไปยลังวลัตถถ Target โดยจะ
คงนคสูย่ ำกลบลั มสำเปปน็ วตัล ถถ Target
รปย แบบกสำรใชง้ค สำน
Object.assign(target, ...sources)
ตวลั อยสู่ย ำง
const source = { b: 4, c: 5 } ;
const target = { a: 1, b: 2 } ;
const returnedTarget = Object.assign(target, source) ;
console.log(target) ;
// { a: 1, b: 4, c: 5 } - เขาช้ ไปเปลยิ่ีขร นตวลั ปลายทางดช้วย ฉะนนนี้ัล ไม่คจาก เป็ปนต้อช งสรช้างตัลวแปรมารัลบอขีก
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }
7.2. create()
Object.create()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
เมถอด create() ใช้คสรสค้ ำงวตลั ถถใหมูย่ จสำกวตัล ถทถ งื่มีค คอี ยู่แย ลว้ค ในแบบสรส้ค ำง Prototype
รปย แบบกสำรใช้งค สำน
Object.create(proto, [propertiesObject])
82 หลลักการเขยีข นโปรแกรม Google Apps Script โดย วสนลั ต์ต คณุค ดรลกเศวต ([email protected])
ตรวอยสม่ ำง 83
var o ;
// create an object with null as prototype
o = Object.create(null) ;
o = {} ;
// is equivalent to:
o = Object.create(Object.prototype) ;
// Example where we create an object with a couple of
// sample properties. (Note that the second parameter
// maps keys to *property descriptors*.)
o = Object.create(Object.prototype, {
// foo is a regular 'value property'
foo: {
writable: true,
configurable: true,
value: 'hello'
},
// bar is a getter-and-setter (accessor) property
bar: {
configurable: false,
get: function() { return 10; },
set: function(value) {
console.log('Setting `o.bar` to', value);
}
/* with ES2015 Accessors our code can look like this
get() { return 10; },
set(value) {
console.log('Setting `o.bar` to', value);
} */
}
}) ;
function Constructor() {}
o = new Constructor() ;
// is equivalent to:
o = Object.create(Constructor.prototype) ;
// Of course, if there is actual initialization code
// in the Constructor function,
// the Object.create() cannot reflect it
// Create a new object whose prototype is a new, empty
// object and add a single property 'p', with value 42.
o = Object.create({}, { p: { value: 42 } });
// by default properties ARE NOT writable,
// enumerable or configurable:
o.p = 24 ;
o.p ;
// 42
o.q = 12 ;
บททขีริ่ 7 : วัตล ถุค Object
for (var prop in o) {
console.log(prop);
}
// 'q'
delete o.p;
// false
// to specify an ES3 property
o2 = Object.create({}, {
p: {
value: 42,
writable: true,
enumerable: true,
configurable: true
}
});
/* is not equivalent to:
This will create an object with prototype : {p: 42 }
o2 = Object.create({p: 42}) */
ตวร อยมส่ ำง
const person = {
isHuman: false ,
printIntroduction: function() {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`) ;
}
};
const me = Object.create(person) ;
me.name = 'Matthew' ; // "name" is a property set on "me", but not on "person"
me.isHuman = true ; // inherited properties can be overwritten
me.printIntroduction() ;
// "My name is Matthew. Am I human? true"
84 หลัลกการเขยขี นโปรแกรม Google Apps Script โดย วสันล ต์ต คณคุ ดรลกเศวต ([email protected])
7.3. defineProperty()
Object.defineProperty()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
เมถอด defineProperty() ใชค้กสสำหนดคณถ สมบลตั ิพใหค้กัลบวัตล ถถโดยตรง หรงอ ใชค้ปรัลบแตู่ยงคถณสมบัลติพทีคง่ือยยู่แล้ควใน
วตัล ถถ โดยคงนคส่ยู ำกลลบั มสำเปย็ป วลัตถถ
รปย แบบกสำรใช้คงสำน
Object.defineProperty(obj, prop, descriptor)
พสำรสำมเพิ ตอรล
obj : วตลั ถถทงี่ืคเรสำจะกสสำหนดคณถ สมบตลั ิพThe object on which to define the property.
prop : ชงอ่ื ของคณถ สมบลัติพ หรอง Symbol ของคณถ สมบลัติพ ท่งีืเค รสำจะสร้สค ำงหรงอปรัลบแต่งูย
descriptor : มคี2 ส่วยู น กค็ก อง 1. Data descriptor เป็นป คณถ สมบตัล ิทพ คีง่มื คีค สยู่ ำ ซงื่งถึ อสำจจะเขียค นได้หค รอง ไมู่ยไดก้ค กไ็ ด้ค
และ 2. Accessor descriptor เป็ปนคณถ สมบัลตพทิ กงค่ีื สสำหนดโดย getter-setter descriptor ตอ้ค งมคีเพีคยงตวลั ใดตัลวหนงถึงื่
ทัซงล Data descriptor และ Accessor descriptor เปป็นวัลตถถซถ่ึงืงแชรคล ยีค ล(optional)ตยอู่ ไปนดซีค วค้ ยกลัน ก็กคงอ
configurable, enumerable, value, writable Accessor descriptor มคคี คียล(optional) ตอู่ย ไปนซีค get, set
ถค้สำ descriptor ไม่ยูมคีคีคยล value, writable, get และ set จะถยกมองเป็ปน Data descriptor แตยู่ถค้สำมีค Error
จะถกย ขว้สค ำงออกมสำ
ตวลั อยูยส่ ำง
const object1 = {} ;
Object.defineProperty(object1, 'property1', {
value: 42 ,
writable: false
}) ;
object1.property1 = 77 ; // throws an error in strict mode
console.log(object1) ; // {property1: 42}
console.log(object1.property1) ; // 42
ตวัล อยูส่ย ำง
var o = {} ;
Object.defineProperty(o, 'a', {
value : 37 ,
writable : true ,
enumerable : true ,
configurable : true
}) ;
console.log(a) ; // {a: 37}
console.log(o.a) ; // 37
บททีิร่ข 7 : วตัล ถคุ Object 85
var bValue = 38 ;
Object.defineProperty(o, 'b', {
// แบบเกคา่ get: function() { return bValue; }
get() { return bValue ; } ,
// แบบเกค่า set: function(newValue) { bValue = newValue; }
set(newValue) { bValue = newValue; } ,
enumerable: true ,
configurable: true
});
o.b ; // 38
// แบบนไข้นี มไค่ ดช้ Mix ดวช้ ยกันล ไมค่ไดช้ - Error
Object.defineProperty(o, 'conflict' , {
value: 0x9f91102 ,
get() { return 0xdeadbeef ; }
}) ;
7.4. Descriptors
A property descriptor is a record with some of the following attributes:
value
The value associated with the property (data descriptors only).
writable
true if and only if the value associated with the property may be changed (data descriptors
only).
get
A function which serves as a getter for the property, or undefined if there is no getter
(accessor descriptors only).
set
A function which serves as a setter for the property, or undefined if there is no setter
(accessor descriptors only).
configurable
true if and only if the type of this property descriptor may be changed and if the property
may be deleted from the corresponding object.
enumerable
true if and only if this property shows up during enumeration of the properties on the
corresponding object.
86 หลักล การเขียข นโปรแกรม Google Apps Script โดย วสนัล ต์ต คณุค ดลร กเศวต ([email protected])
7.5. defineProperties()
Object.defineProperties()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
รยปแบบกสำรใช้คงสำน
Object.defineProperties(obj, props)
ตวลั อยส่ยู ำง
const object1 = {} ;
Object.defineProperties(object1, {
property1: {
value: 42,
writable: true
},
property2: {}
}) ;
console.log(object1.property1) ; // 42
7.6. entries()
Object.entries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
เมถอด entries() คนง คยสู่ ำกลบัล มสำเปน็ป อสำเรยล(2 มติพ )พิ จสำกวตัล ถถทงื่เีค ลงอก โดยมกคี สำรแจกแจงอสำเรยเล ปป็นคูขย่ อง
Key-Value โดยลสสำดบลั เปปน็ แบบเดคียวกับล ทงืใคี่ ชค้ for/in วนเขส้ค ำไป
กสำรเรคียงลสส ำดลับอสำเรยลทีง่ืคคงนคูย่สำมสำจสำก Object.entries() ไมู่ยได้คขถซึนกัลบวยู่สำวลัตถถสรค้สำงมสำอยู่ยสำงไร ฉะนซัลนถ้คสำมีค
ควสำมจสส ำเปน็ป ต้อค งเรียค งอสำเรยล สสำมสำรถทสส ำไดค้ดัลงนซีค
Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])) ;
รปย แบบกสำรใชงค้ สำน
Object.entries(obj)
ตวัล อยูยส่ ำง
const obj = { foo: 'bar' , baz: 42 } ;
console.log(Object.entries(obj)) ; // [ ['foo', 'bar'], ['baz', 42] ]
ตัลวอยู่ยสำง – ถค้สำระบถพสำรสำมพิเตอรล เปป็นส่ืพิงงทง่คีืไมูย่ใชู่ยวลัตถถ ตัลวมีคจะถยกแปลงเป็ปนวลัตถถ กรณีคตสำมตลัวอยยู่สำงตยู่อไปนีซค
ระบถเป็ปน string
Logger.log(Object.entries('foo')) ;
บททรข่ิี 7 : วลตั ถคุ Object 87
ผล
Logs
[] [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
หมสำยเหตถ - ถ้คสำระบพถ สำรสำมเพิ ตอรลเป็ปน Number จะไดอ้ค สำเรยวล ่ยสู ำงกลลับมสำ
ตวลั อยสูย่ ำง - กสำรวนเขค้สำไปในวัตล ถถ
const obj = { a: 5 , b: 7 , c: 9 } ; // ดูบผลทิีขร่ Logs
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`) ;
}
ผล
Logs
[] "a 5"
[] "b 7"
[] "c 9"
จสำกตลัวอย่สูย ำงก่อยู นหน้คสำ ใช้เค มถอด forEach ของอสำเรยลก็กไดค้
Object.entries(obj).forEach(([key, value]) => { // "a 5", "b 7", "c 9"
console.log(`${key} ${value}`) ;
}) ;
7.7. fromEntries()
Object.fromEntries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
เมถอด fromEntries() ใช้คแปลงรสำยกสำรทื่งีคเปป็นคู่ยของ Key-Value กลัลบไปเปป็นวลัตถถ พสำรสำมพิเตอรล iterable
เปป็นไดค้ทซัลงวัลตถถ Array หรงอ Map หรงอวลัตถถอง่ืนๆทงื่ีคสสำมสำรถวนเขค้สำไปได้ค เมถอด fromEntries() คงนคยู่สำกลัลบมสำเปป็น
วตัล ถตถ ัลวใหมู่ย
รปย แบบกสำรใชงค้ สำน
Object.fromEntries(iterable) ;
ตวัล อยสู่ย ำง – แปลงอสำเรยล เปน็ป วตลั ถถ
const arr = [
['0' , 'a'] ,
['1' , 'b'] , ['2', 'c']
];
88 หลลกั การเขขยี นโปรแกรม Google Apps Script โดย วสนลั ต์ต คณุค ดลร กเศวต ([email protected])
const obj = Object.fromEntries(arr) ;
console.log(obj) ; // { 0: "a", 1: "b", 2: "c" }
ตวลั อยยสู่ ำง – แปลง Map เปน็ป วัลตถถ
const entries = new Map([
[ 'foo' , 'bar' ] ,
[ 'baz' , 42 ]
]) ;
const obj = Object.fromEntries(entries) ;
console.log(obj) ; // { foo: "bar", baz: 42 }
7.8. freeze()
Object.freeze()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
เมถอด freeze() ใชแค้ ช่แยู ขงก็ วตัล ถถ ไมู่สย สำมสำรถเปลย่คีงื นแปลงไดค้อีคกตยูอ่ ไป กสำรฟรซคี วลัตถถ ปอป้ งกนัล กสำรกสำรสรส้ค ำง
คณถ สมบลัตใพิ หม่ยู ป้ปองกสำรลบ ปป้องกนลั กสำรเปลคงืีย่ นแปลง enumerable, writable, configurable ท่ืคีงกสสำหนดไวแค้ ลค้ว
และปอป้ งกนัล กสำรเปล่ืคยงี นแปลงคส่ยู ำตยู่สำงของคณถ สมบลตั ิตพ ่ยูสำงๆ และเมถอด freeze() ป้ปองกัลนวลัตถทถ ืงคี่ prototpye ไป
เปลคีงื่ยนแปลงอีกค ด้วค ย
freeze() คนง คู่ยสำกลับล มสำเปน็ป วลตั ถถตัวล ปัฝจจบถ นัล
รยปแบบกสำรใช้งค สำน
Object.freeze(obj) // Throws an error in strict mode
// 42
ตวัล อยู่ยสำง
const obj = {
prop: 42
};
Object.freeze(obj) ;
obj.prop = 33 ;
Logger.log(obj.prop) ;
7.9. isFrozen()
Object.isFrozen()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen
เมถอด isFrozen() ใชคต้ รวจสอบวสู่ย ำวตลั ถถถกย แชู่แย ขก็งอยย่หู รงอไมูย่
รยปแบบกสำรใชค้งสำน
บททิขีร่ 7 : วัลตถคุ Object 89
Object.isFrozen(obj) // false
// true
ตวัล อยสยู่ ำง
const object1 = {
property1: 42
};
console.log(Object.isFrozen(object1)) ;
Object.freeze(object1) ;
console.log(Object.isFrozen(object1)) ;
7.10. seal()
Object.seal()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal
เมถอด seal() ปปดิ ผนถึกวลตั ถถ ปอ้ป งกลนั กสำรเพ่ืพมิง คณถ สมบตัล ิพใหม่ยู และมสำรคล คณถ สมบลตั ทิพ ่ืีมงค ีคอยย่แู ลค้ว ให้เค ป็ปน non-
configurable คสู่ย ำของคณถ สมบลตั ิพปฝัจจบถ ันล ยลังคงเปลืงคี่ยนไดค้ ตรสำบใดทีืงค่ writable
seal() คนง คสูย่ ำกลลับมสำเปป็นวัลตถตถ วลั เดมิพ ทคีงถ่ื กย ปปิดผนกึถ
รปย แบบกสำรใชง้ค สำน
Object.seal(obj)
ตวลั อยสู่ย ำง
var obj = {
prop: function() {} ,
foo: 'bar'
};
obj.foo = 'baz' ; // เปลยขี่ริ นคา่ค ของคคุณสมบตลั ร prop
obj.lumpy = 'woof' ; // เพรมิ่ คณคุ สมบลัตร lumpy
delete obj.prop ; // ลบคุณค สมบัตล ร prop
Logger.log(obj) // { foo: "baz", lumpy: "woof" }
var o = Object.seal(obj) ; // สร้ชางวตัล ถุค o จาก obj ทริ่ปีข ดิป ผนจกึ
o === obj ; // true ( o มขีทุคกอย่าค งเหมมอื นกบัล obj )
Object.isSealed(obj) ; // === true
obj.foo = 'quux' ; // เปลยขริี่ นคา่ค ของคุคณสมบตลั ร >>> ยลงั คงทาก ไดช้
// ไมส่ค ามารถแปลงคคุณสมบลตั ร ไปเปน็ป Accessors ได้ช - ERROR
Object.defineProperty(obj, 'foo', {
get: function() { return 'g' ; }
}) ;
90 หลกัล การเขขยี นโปรแกรม Google Apps Script โดย วสัลนตต์ คณุค ดรลกเศวต ([email protected])
// ณ ตอนนี้นข กรเปลยรีิข่ นแปลงใดๆ นอกเหนือม จากคณุค สมบตลั ร จะทาก ไม่ไค ดช้
obj.quaxxor = 'the friendly duck' ; // silently doesn't add the property
delete obj.foo ; // silently doesn't delete the property
// ...and in strict mode such attempts will throw TypeErrors.
function fail() {
'use strict' ;
delete obj.foo ; // throws a TypeError
obj.sparky = 'arf' ; // throws a TypeError
}
fail() ; // Error
// Attempted additions through Object.defineProperty will also throw.
Object.defineProperty(obj, 'ohai', {
value: 17
}) ; // throws a TypeError
Object.defineProperty(obj, 'foo', {
value: 'eit'
}) ; // changes existing property value
7.11. isSealed()
Object.isSealed()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed
เมถอด isSealed() ใชตค้ รวจสอบวูยส่ ำวลัตถถถ ยกปิดป ผนึถกหรงอไมู่ย
รยปแบบกสำรใชง้ค สำน
Object.isSealed(obj)
ตวลั อยสู่ย ำง // false
// true
const object1 = {
property1: 42
};
console.log(Object.isSealed(object1));
Object.seal(object1);
console.log(Object.isSealed(object1)) ;
7.12. is()
Object.is()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
เมถอด is() ใช้ตค รวจสอบว่ยูสำ 2 คย่สู ำเปป็นคสู่ย ำเดยีค วกัลนหรงอไมู่ย
บททีริ่ข 7 : วัลตถุค Object 91
รปย แบบกสำรใชคง้ สำน
Object.is(value1, value2) ;
ตวลั อยสู่ย ำง
Object.is('foo', 'foo') ; // true
Object.is(window, window) ; // true
Object.is('foo', 'bar') ; // false
Object.is([], []) ; // false
var foo = { a: 1 } ;
var bar = { a: 1 } ;
Object.is(foo, foo) ; // true
Object.is(foo, bar) ; // false - ใช้ชเปรียข บเทยขี บเนอืมนี้ หาในวัตล ถุไค มค่ได้ช
Object.is(null, null) ; // true
// Special Cases // false
Object.is(0, -0) ; // true
Object.is(-0, -0) ; // true
Object.is(NaN, 0/0) ;
7.13. isExtensible()
Object.isExtensible()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible
เมถอด isExtensible() ใชค้ตรวจสอบวยู่สำวัตล ถถขยสำยไดค้หรงอไมู่ย (Extensible) ก็กคงอ สสำมสำรถเพืง่ิพมคถณสมบัลติพลง
ไปไดคห้ รอง ไมู่ย ?
รปย แบบกสำรใชง้ค สำน
Object.isExtensible(obj)
ตวัล อยสูย่ ำง // true
// false
const object1 = {} ;
console.log(Object.isExtensible(object1)) ;
Object.preventExtensions(object1) ;
console.log(Object.isExtensible(object1)) ;
ตวลั อยสู่ย ำง
// New objects are extensible.
var empty = {} ;
Object.isExtensible(empty) ; // === true
92 หลลักการเขขียนโปรแกรม Google Apps Script โดย วสลันตต์ คณุค ดรลกเศวต ([email protected])
// ...but that can be changed.
Object.preventExtensions(empty) ;
Object.isExtensible(empty) ; // === false
// วัลตถุทค ่ีถริข บูก Seal เปน็ป Non-extensible.
var sealed = Object.seal({}) ;
Object.isExtensible(sealed) ; // === false
// วลัตถทุค ถ่ิรีข บกู Freeze เปน็ป Non-extensible.
var frozen = Object.freeze({}) ;
Object.isExtensible(frozen) ; // === false
7.14. preventExtensions()
Object.preventExtensions()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
เมถอด preventExtensions() ปอป้ งกันล กสำรเพิ่พงืมคถณสมบตลั ใิพ หมู่ย ลงไปในวตัล ถถ
รยปแบบกสำรใชค้งสำน
Object.preventExtensions(obj)
ตรวอยสม่ ำง
// Object.preventExtensions คมนื คค่าเป็นป วลัตถคตุ วลั เดมร แต่ค non-extensible
var obj = {} ;
var obj2 = Object.preventExtensions(obj) ;
obj === obj2 ; // true
// Objects สามารถ Extensible ไดอ้ช ยแ่คูบ ล้ชว โดยปรยร าย
var empty = {} ;
Object.isExtensible(empty) ; // === true
// … แตส่ค ามารถเปลยิีขร่ นได้ช
Object.preventExtensions(empty) ;
Object.isExtensible(empty) ; // === false
// Object.defineProperty ขว้ชาง Error ออกมา หากเราพยายามไปเพมิร่ คคุณสมบัลตใร ห้ช Non-extensible
var nonExtensible = { removable: true } ;
Object.preventExtensions(nonExtensible) ;
Object.defineProperty(nonExtensible, 'new', {
value: 8675309
}) ; // throws a TypeError
// ในโหมด strict ความพยายามทขริจ่ี ะเพมิร่ คุคณสมบัลตรใหก้ช บลั Non-extensible จะขว้ชาง Error ออกมา
function fail() {
'use strict' ;
nonExtensible.newProperty = 'FAIL' ;
}
fail() ; // throws a TypeError
บททขร่ิี 7 : วตลั ถุค Object 93
7.15. keys() ***
JavaScript ES5 Object Methods
https://www.w3schools.com/js/js_object_es5.asp
ECMAScript 6 - ECMAScript 2015
https://www.w3schools.com/js/js_es6.asp
Object – เมถอดตา่ค งๆในคลาส Object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Object.keys(obj)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
เมถอด keys() ใชจ้ค ลับ Keys ของตลวั แปรวตัล ถใถ สใู่ย นอสำเรยล พสำรสำมิเพ ตอรล obj กคก็ อง วตัล ถถ โดยจะคนง คูย่สำกลบัล มสำ
เปนป็ string[] - กอ้ค นสตรงพิ ของ Keys ของ obj
รปย แบบกสำรใชคง้ สำน
Object.keys(obj)
ตวลั อยส่ยู ำง
var instrutor = {
fname : "Wasan" ,
lname : "Khunnsdiloksawet" ,
email : "[email protected]" ,
zip : 67140
};
var arr = Object.keys(instrutor) ;
Logger.log(arr) ; // ดผูบ ลทร่ีขิ Logs ------------------ > [ 01 ]
// ใส่พค ารามเร ตอรเ์ต ป็นป อาเรยต์
var arr2 = Object.keys(arr) ; // ดผบู ลทขี่ิร Logs ------------------ > [ 02 ]
Logger.log(arr2) ;
ผล
Logs
[ 01 ] [fname, lname, email, zip]
[ 02 ] [0, 1, 2, 3]
94 หลกัล การเขยขี นโปรแกรม Google Apps Script โดย วสลนั ต์ต คณุค ดลร กเศวต ([email protected])
7.16. values() ***
Object.values()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
เมถอด values() ใช้จค ับล Values ของตวลั แปรวตลั ถใถ ส่ใยู นอสำเรยล พสำรสำมเิพ ตอรล obj กค็ก อง วตลั ถถ โดยจะคนง คู่สย ำ
กลลบั มสำเปน็ป string[] - กอ้ค นสตรงพิ ของ Keys ของ obj
รยปแบบกสำรใชค้งสำน
Object.values(obj)
ตวัล อยสู่ย ำง
const object1 = {
a: 'somestring' ,
b: 42 ,
c: false
};
console.log(Object.values(object1)) ; // ["somestring", 42, false]
ตวัล อยยูส่ ำง – ถ้คสำพสำรสำมพิเตอรทล งื่รีค ะบลถ งไป ไมใูย่ ชว่ยู ตลั ถถ ตวลั มลนั จะถยกแปลงเป็นป วตลั ถถ
console.log(Object.values('foo')) ; // ['f', 'o', 'o']
ตวัล อยสู่ย ำง
const my_obj = Object.create({}, { getFoo:
{ value: function() { return this.foo ; } }
}) ;
my_obj.foo = 'bar' ;
console.log(Object.values(my_obj)) ; // ['bar']
7.17. getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
เมถอด getOwnPropertyDescriptor() คนง คยู่สำเปป็น คณถ สมบัตล พิของ Discriptor ของคถณสมบัลตพิของวลตั ถถใดๆ
กคก็ งอ ตวลั ทคงแืี่ สดงบนวัลตถใถ ดๆ ไมู่ยใชู่ยของวตัล ถถสงบถอด
รปย แบบกสำรใชง้ค สำน
Object.getOwnPropertyDescriptor(obj, prop)
obj : วตลั ถทถ ืคีง่จะมองหสำคถณสมบตัล พิ
prop : ช่งอื หรอง Symbol ของคถณสมบตลั ิพ ซื่ถงงึ จะรลับคสส ำจสสำกดัล ควสำมมสำ
บททิ่ีขร 7 : วตลั ถคุ Object 95
ตวร อย่มสำง
const object1 = {
property1: 42
};
const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1') ;
console.log(descriptor1.configurable) ; // true
console.log(descriptor1.value) ; // 42
ตวัล อยสู่ย ำง
var o , d ;
o = { get foo() { return 17 ; } } ;
d = Object.getOwnPropertyDescriptor(o , 'foo') ;
// d is {
// configurable: true ,
// enumerable: true ,
// get: /*the getter function*/ ,
// set: undefined
// }
o = { bar: 42 } ;
d = Object.getOwnPropertyDescriptor(o , 'bar') ;
// d is {
// configurable: true ,
// enumerable: true ,
// value: 42 ,
// writable: true
// }
o = { [Symbol.for('baz')]: 73 }
d = Object.getOwnPropertyDescriptor(o , Symbol.for('baz')) ;
// d is {
// configurable: true ,
// enumerable: true ,
// value: 73 ,
// writable: true
// }
o = {} ;
Object.defineProperty(o , 'qux' , {
value: 8675309 ,
writable: false ,
enumerable: false
}) ;
d = Object.getOwnPropertyDescriptor(o , 'qux') ;
// d is {
// value: 8675309 ,
// writable: false ,
// enumerable: false ,
// configurable: false
// }
96 หลกลั การเขยีข นโปรแกรม Google Apps Script โดย วสลันต์ต คณุค ดลร กเศวต ([email protected])
7.18. getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
เมถอด getOwnPropertyDescriptors() คงนคสูย่ ำเป็ปน วตัล ถถทืงีคป่ ระกอบไปดค้วย Property descriptors ของตลัว
เอง สสสำหรลบั วตลั ถใถ ดๆ
รยปแบบกสำรใช้งค สำน
Object.getOwnPropertyDescriptors(obj)
ตวัล อย่ยูสำง
const object1 = {
property1: 42
};
const descriptors1 = Object.getOwnPropertyDescriptors(object1) ;
console.log(descriptors1.property1.writable) ; // true
console.log(descriptors1.property1.value) ; // 42
7.19. getOwnPropertyNames()
Object.getOwnPropertyNames()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
เมถอด getOwnPropertyNames() คงนคสยู่ ำเปปน็ อสำเรยขล องทถกคณถ สมบัลตพิ ทพคีงื่ บโดยตรงของวลัตถทถ รงีคื่ ะบถ (รวม
ไปถถึงคณถ สมบลัตพิ Non-enumerable ยกเวคน้ ทใคีงื่ ช้ค Symbol )
รยปแบบกสำรใชง้ค สำน
Object.getOwnPropertyNames(obj)
ตวัล อยยู่สำง
const object1 = {
a: 1 ,
b: 2 ,
c: 3
};
console.log(Object.getOwnPropertyNames(object1)) ; // ["a", "b", "c"]
ตวลั อยู่ยสำง – ถคส้ ำระบพถ สำรสำมิพเตอรล ทงคี่ืไมยู่ใชวูย่ ลตั ถถ จะถยกแปลงเป็ปนวตลั ถถ
Object.getOwnPropertyNames('foo') ; // ["0", "1", "2", "length"]
บททขิรี่ 7 : วลัตถคุ Object 97
ตวร อยม่สำง
var arr = ['a', 'b', 'c'] ; // พารามรเตอรต์เปป็น อาเรย์ต
console.log(Object.getOwnPropertyNames(arr).sort()) ; // ["0", "1", "2", "length"]
// วลัตถคทุ ค่รีิข ลช้ายอาเรยต์ (Array-like object) // ["0", "1", "2"]
var obj = { 0: 'a', 1: 'b', 2: 'c' } ;
console.log(Object.getOwnPropertyNames(obj).sort()) ;
// Logging property names and values using Array.forEach
Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) {
console.log(val + ' -> ' + obj[val]) ;
}) ;
// 0 -> a
// 1 -> b
// 2 -> c
// non-enumerable property
var my_obj = Object.create({}, {
getFoo: {
value: function() { return this.foo ; },
enumerable: false
}
}) ;
my_obj.foo = 1 ;
console.log(Object.getOwnPropertyNames(my_obj).sort()) ; // ["foo", "getFoo"]
7.20. getOwnPropertySymbols()
Object.getOwnPropertySymbols()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
เมถอด getOwnPropertySymbols() คงนคยู่สำเปป็นอสำเรยลของ ทถก Symbol properties ท่ืงคีพบโดยตรงขถึซนอยยู่
กลับวตลั ถถทืีง่รค ะบถ
รปย แบบกสำรใชค้งสำน
Object.getOwnPropertySymbols(obj)
98 หลกัล การเขยขี นโปรแกรม Google Apps Script โดย วสลันตต์ คณคุ ดลร กเศวต ([email protected])
ตวัล อยสยู่ ำง
const object1 = {} ;
const a = Symbol('a') ;
const b = Symbol.for('b') ;
object1[a] = 'localSymbol' ;
object1[b] = 'globalSymbol' ;
console.log(obj) ; // {Symbol(a): "localSymbol", Symbol(b): "globalSymbol"}
const objectSymbols = Object.getOwnPropertySymbols(object1) ;
console.log(objectSymbols.length) ; // 2
console.log(objectSymbols) ; // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) ; // Symbol(a)
7.21. getPrototypeOf()
Object.getPrototypeOf()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
เมถอด getPrototypeOf() คงนคยู่สำเปป็น Prototype เชยูน่ คสู่ย ำของคถณสมบัลตภพิ สำยในของวตัล ถถทีคงื่ระบถ
รปย แบบกสำรใช้คงสำน
Object.getPrototypeOf(obj)
ตวัล อยยูส่ ำง // true
const prototype1 = {} ;
const object1 = Object.create(prototype1) ;
console.log(Object.getPrototypeOf(object1) === prototype1) ;
ดเย พทมิพี่ เตพิม : setPrototypeOf()
Object.setPrototypeOf()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
บทท่ขิรี 7 : วตัล ถคุ Object 99
100 หลลักการเขขียนโปรแกรม Google Apps Script โดย วสันล ต์ต คณุค ดลร กเศวต ([email protected])