[TOC] >[success] # 參數篇章 [想更快了解es6函數參數使用請直接參考這里](http://www.hmoore.net/cyyspring/more/1006387) >[info] ## es6讓函數可以像pyhton一樣使用默認參數 >[danger] ##### es5 模擬默認參數缺點 ~~~ function getParam(param){ let a = param || 'default'; return a; } // 如果參數傳入0，也會走默認參數'default'不是我們想要的結果 setParam1 = getParam(0); ~~~ * 解決'||' 這種形式漏洞 ~~~ //解決漏洞需要使用typeof來做 function show(a,b){ var a=typeof a === 'undefined'?20:a; var b=typeof b === 'undefined'?30:b; console.log(a,b) } show(0,0) //0 0 ~~~ >[danger] ##### es6 默認傳參像pyhon一樣 ~~~ 1.為了解決es5那種需要額外的代碼來實現默認傳參的形式，es6擁有了 和 'python' 一樣的使用默認參數的形式 2.通過下面案例，如果想使用的默認參數不是最后一個形參，想讓參數調用 其默認參數需要傳'undefined' ~~~ ~~~ function test(url, timeout = 2000, callback = function () {}) { // 代碼體 } // 使用timeout 和 callback默認參數 test('/foo') // 不使用timeout 和 callback 默認參數 test('/foo', 500, function(body){console.log(body)}) // 使用timeout 默認參數，不使用callback默認參數 test('/foo', undefined, function(body){console.log(body)}) ~~~ >[info] ## arguments -- es6使用默認參數后的arguments >[danger] ##### es5 中的 -- arguments ~~~ 1.通過下面案例可以看出來，es5 時候在非嚴格模式下，形參改變，則arguments， 會跟著一起變 2.如果是嚴格模式，arguments只記錄第一次傳入時候形參值，不會隨著后期改變而 改變 ~~~ * 非嚴格模式 ~~~ function test(first, second) { console.log(first === arguments[0]) console.log(second === arguments[1]) first = 'a' second = 'b' console.log(first === arguments[0]) console.log(second === arguments[1]) } test(1,2) // 打印結果： true true true true ~~~ * 嚴格模式 ~~~ function test(first, second) { 'use strict' console.log(first === arguments[0]) console.log(second === arguments[1]) first = 'a' second = 'b' console.log(first === arguments[0]) console.log(second === arguments[1]) } test(1,2) // 打印結果： true true false false ~~~ >[danger] ##### es6 中的 -- arguments ~~~ 1.如果函數使用了'es6'的默認參數的形式，無論是否定義嚴格模式， 'arguments'的長度等于非使用默認參數的形參長度，并且會像es5的 嚴格模式一樣，只會獲取第一次別改變的形參值，不會隨著接下來的 改變而改變 ~~~ ~~~ function test(first, second=3) { console.log(arguments.length) console.log(first === arguments[0]) console.log(second === arguments[1]) first = 'a' second = 'b' console.log(first === arguments[0]) console.log(second === arguments[1]) } test(1) test(1,2) // 這種沒有使用默認參數arguments還是能都取到此時length長度為2 // 打印結果： 1 true false false false ~~~ >[info] ## es6默認參數 -- 調用函數和調用形參使用 ~~~ 1.es6的默認參數不僅僅可以是我們想到數字，字符串，對象，函數 這些類型，也可以是一個被調用的函數，或者其他形參 2. ~~~ >[danger] ##### 調用函數舉個例子 ~~~ 1.將調用函數作為默認參數的時候，只有在調用函數時候且使用默認參數， 才會執行形參為被調用函數 ~~~ ~~~ function getValue() { return 5 } // 現在初始化函數getValue() 沒有執行 function add(first, second = getValue()) { console.log(first + second) } // 現在沒有使用默認參數所以也沒有執行getValue() add(1,1) // 這時候才會執行getValue() add(1) ~~~ >[danger] ##### 默認參數為其他形參的默認值 ~~~ 1.可以使用'先定義'的參數作為后定義參數的默認值 2.不可以使用后定義參數作為先定義參數的默認值 ~~~ * 先定義的作為后定義的默認值 ~~~ function add(first, second = first) { console.log(first + second) } add(1) // 2 add(1,1) // 2 ~~~ ~~~ // 也可以這么使用 function add(first, second = getValue(first)) { console.log(first + second) } ~~~ * 不能后定義的作為先定義的默認值 ~~~ 1.默認參數也有臨時鎖死區的感念，像下面的案例拆解后的效果： let first = second let second = 1 要注意當執行到second的時候，由于TDZ 的緣故導致說second還未被使用 所以在TDZ 中，導致不能后定義的作為先定義的默認值 ~~~ ~~~ function add(first = second, second) { console.log(first + second) } add(undefined,1) // 報錯 ~~~ >[info] ## 小技巧只返回一個對象中特定key方法 ~~~ // 返回傳入對象參數，指定key的新對象 function pick(object){ // 創建一個沒有繼承任何原型方法，也就是說它的原型鏈沒有上一層。 let result = Object.create(null) for(let i=1;arguments.length>i;i++){ result[arguments[i]] = object[arguments[i]] } console.log(result) return result } let book = { title:'a', author:'Nic', year:2016 } // 想返回一個 只有'author','year' 的對象 let bookData = pick(book,'author','year') console.log(bookData) // 打印結果： {author: "Nic", year: 2016} ~~~ >[info] ## es6 的不定參數 ~~~ 1.不定參數，字面意思就是不確定要傳給函數形參的個數， 表現形式在參數前加(...) 2.注意：每個函數只能有一個不定參數，且不定參數只能在 末尾，對象的字面量setter中不能使用不定參數，因為setter參數 有且只能有一個 3.下面的案例是對上面的案例改造，由于上面的案例使用的是arguments， 所以循環必須從1 開始，現在有了不定參數就可以從0開始 ~~~ ~~~ // 返回傳入對象參數，指定key的新對象 function pick(object,...key){ // 創建一個沒有繼承任何原型方法，也就是說它的原型鏈沒有上一層。 let result = Object.create(null) for(let i=0;key.length>i;i++){ result[key[i]] = object[key[i]] } console.log(result) return result } let book = { title:'a', author:'Nic', year:2016 } // 想返回一個 只有'author','year' 的對象 let bookData = pick(book,'author','year') console.log(bookData) ~~~ * 在es5 沒有這種展開運算符的時候使用apply來替代的 ~~~ const arr = ['foo', 'bar', 'baz'] // console.log( // arr[0], // arr[1], // arr[2], // ) // console.log.apply(console, arr) console.log(...arr) ~~~