> 如果有記憶吐司就好了... # JS縮寫-語法糖 不會影響原本的JS運作,邏輯與當前的JS相同,使你的程式碼更加簡潔,可讀性更高。 ## 物件字面值 ### 1.物件內的function ```js= let a ={ myName: "Jasper", method: function(){ return this.myName } } console.log(a.method()) // 回傳"Jasper" let a ={ myName: "Jasper", //省略了:及function method(){ return this.myName } } console.log(a.method()) // 回傳"Jasper" ``` ### 2.物件內的變數 ```js= let person = { name: "Jasper" } let people = { person: person (屬性) (上面宣告的變數a) } 等同於 let people = { person //當屬性與變數相同時可以指輸入一個 } console.log(people) //回傳 { person: { name:"Jasper" } } ``` ## 展開 ### 1.不同陣列合併 ```js= let aryA = ["a","b","c"] let aryB = ["d","e","f"] let aryTotal = aryA.concat(aryB); 等同於 let artTotal = ...aryA, ...aryB; console.log(aryTotal) // 回傳 [a,b,c,d,e,f] ``` ### 2.物件擴展 ```js= const a = { hello(){ console.log(1) }, hi(){ console.log(2) } } const b = { "你好"(){ console.log(3) } } // 此時我要將a的function加入到b的物件內 const b = { "你好"(){ console.log(3) }, ...a //語法在這 } console(b) { "你好"(),hello(),hi() } ``` 請注意!!只能把前面已經先宣告的加入到後面新宣告的裡面哦,不然會報錯喔,如下: ```js= const a = { hello(){ console.log(1) }, hi(){ console.log(2) } } const b = { "你好"(){ console.log(3) } } --- // 此時如果想把b加入到a const a = { hello(){ console.log(1) }, hi(){ console.log(2) }, ...b // 語法在這 } console(a) // 因為程式碼讀到a的時候b變數還沒被存取,所以會報錯喔! ``` ### 3. 將類陣列轉成純陣列 ```htmlembedded= <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ``` ```js= // 選取上方的li形成一個陣列 let doms = document.querySelectorAll('li') ``` 這裡用querySelectorAll產生的陣列為類陣列與一般陣列不同,能使用的陣列方法有限,ex:filter、map...等都無法使用,此時我們就可以將它轉換成純陣列。 ```js= let newDoms = [...doms] ``` 此時newDoms的陣列為純陣列,可以使用所有陣列能用的方法。 ## 預設值 下方為一般的函式 ```js= function sum(a,b){ return a + b; } console.log(sum(1,2)) //回傳 3 ``` 此時,若將帶入b的參數2拿掉會發生什麼事呢? ```js= function sum(a,b){ return a + b; } console.log(sum(1)) //回傳 NaN ``` 通常這樣的狀況,為了讓函式順利執行,我們會用if判斷,如下: ```js= function sum(a,b){ // 判斷如果b不存在的話,b等於2 // 反之b如果有帶入值,就會相加回傳該值 if(!b){ b = 2 } return a + b; } console.log(sum(1)) //回傳 3 ``` 我們也可以用預設值的方式來寫,邏輯同上,使你的程式碼更加簡潔。 ```js= (預設b=2) function sum(a,b = 2){ return a + b; } console.log(sum(1)) //回傳 3 若b有帶入值,則會以帶入的為主,預設b=2就會忽略 console.log(sum(1,3)) // 回傳4 ```