函數的擴展 · 前端筆記

[TOC] ## 函數參數默認值 ES6之前不能直接給函數的參數設置默認值。 ``` function log(x, y) { y = y || 'world' console.log(x, y) } log('hello') // hello world log('hello', '') // hello world ``` 這種寫法的缺點在于如果參數y賦值了，但對應的值為false，則該賦值不起作用。為了避免這個問題，通常要先判斷參數y是否被賦值，如果沒有，再等于默認值，這有兩種寫法。 ``` if (typeof y === 'undefinded') { y = 'world' } if (arguments.length === 1) { y = 'world' } ``` ES6允許為函數的參數設置默認值，即直接在參數定義的后面。 ``` function log(x, y = 'world') { congole.log(x, y) } ``` ### 與解構賦值默認值結合 ``` function log({x, y = 5}) { congole.log(x, y) } foo({}) // undefined, 5 foo({x:1}) // 1, 5 foo({x:1, y:2}) // 1, 2 ``` ``` function fetch(url, {body = '', method = 'GET', header = {} }) { console.log(method) } fetch('http://example.com', {}) // 'GET' fetch('http://example.com') // 報錯 ``` 上面的代碼，如果fetch第二個參數是對象，就會給3個屬性設置默認值，但不能省略第二個參數。如果結合函數參數的默認值，則可以省略第二個參數。這時，就出現了雙重默認值。 ``` function fetch(url, {method = 'GET'} = {}) { console.log(method) } fetch('http://example.com') // 'GET' ``` ``` function m1({x=0, y=0} = {}) { return [x, y] } function m2({x, y} = {x: 0, y: 0}) { return [x, y] } m1({}) // [0,0] m2({}) // [undefined, undefined] m1({x:1}) // [3, 0] m1({x:1}) // [3, undefined] ``` ### 函數的length屬性指定默認值后，函數的length屬性將返回沒有指定默認值的參數個數。 ``` (function(a){}).length // 1 (function(a = 5){}).length // 0 (function(a, b, c = 1){}).length // 2 ``` 這是因為length屬性的含義是，該函數預期傳入的參數個數。某個函數指定默認值后，預期傳入的參數個數就不包括這個參數了。同理，rest函數也不會計入length屬性。 ``` (function(...args){}).length // 0 ``` ### 作用域如果函數默認值是一個變量，則該變量所處的作用域與其他變量的作用域規則一樣，即先是當前函數的作用域，然后才是全局作用域。 ``` var x = 1 function f(x, y = x) { console.log(y) } f(2) // 2 ``` 如果調用時函數作用域內部的變量x還沒生成，結果會不一樣。 ``` let x = 1 function f(y = x) { let x = 2 console.log(y) } f() // 1 ``` ## rest參數 Rest參數接收函數的多余參數，組成一個數組，放在形參的最后，形式如下： ``` function func(a, b, ...theArgs) { // ... } ``` Rest參數和arguments對象的區別 * rest參數只包括那些沒有給出名稱的參數，arguments包含所有參數； * arguments對象不是真正的array，而rest參數是Array的實例，可以直接應用sort, map, forEach, pop等方法； * arguments對象擁有一些自己額外的功能。函數的length屬性，不包括rest參數： ``` (function(a) {}).length // 1 (function(...a) {}).length // 0 (function(a, b, ...c)).length // 2 ``` ## 擴展運算符擴展運算符是三個點（...），將一個數組轉為用逗號分隔的參數序列。 ``` console.log(...[1,2,3]) // 1 2 3 console.log(1,...[2,3,3], 5) // 1 2 3 4 5 ``` 該運算符主要用于函數調用 ``` function push(array, ...items) { array.push(...items) } function add(x, y) { return x + y } var number = [4, 38] add(... number) ``` ### 替代數組的apply方法 ``` // ES5 function f(x, y, z) {} var args = [0,1,2] f.apply(null, args) // ES6 function f(x, y, z){} var args = [0,1,2] f(...args) ``` ### 應用 #### 合并數組 ``` // ES5 [1,2].conacat(more) // ES6 [1,2,...more] ``` #### 與解構賦值結合生成新數組 ``` // ES5 a = list[0], rest = list.slice(1) // ES6 [A, ...rest] = list ``` #### 函數的返回值 JavaScript的函數只能返回一個值，多個值只能通過數組或對象。擴展運算符為解決這個問題提供了變通的方法。 ``` var dataFileds = readDateFields(database) var d = new Date(...dateFileds) ``` 從數據庫讀取一行數據，通過擴展運算符將其傳入構造函數Date。 #### 字符串擴展運算符還可以將字符串轉為真正的數組。 ``` [...'hello'] // ['h', 'e', 'l', 'l', 'o'] ``` #### 類似數組的對象任何類似數組的對象都能用擴展運算符轉為真正的數組。 ``` var nodeList = document.querySelectorAll('div') var array = [...nodeList] ``` #### Map和Set結構，Generator函數只要有Interator接口的對象，都可以使用擴展運算符。 ``` let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'] ]) let arr = [...map.keys()] // 1,2,3 ``` Genertor函數允許后返回一個遍歷器對象，也可以使用擴展運算符。 ``` var go = function *() { yield 1 yield 2 yield 3 } [...go()] [1,2,3] ``` ## name屬性返回該函數的函數名。 ``` function foo(){} foo.name // 'foo' ``` ## 箭頭函數 ``` var f = v => v //等同于 var f = function(v) { return v } ``` 如果函數不需要參數或需要多個參數，就使用圓括號代表參數部分。 ``` var f= () => 6 等同于 var f = function() { return 6 } var f= (num1, num2) => num1 + num2 等同于 var f = function(num1, num2) { return num1 + num2 } ``` 由于大括號被解析為代碼塊，箭頭函數返回直接返回對象，外面要加上括號。 ``` var getTempItem = id => ({id: id, name: 'temp'}) ``` 可以與變量解構結合使用。 ``` const full = ({first, last}) => first + ' ' + last ``` ### 使用注意點 1. **函數體內的this對象就是定義時所在的對象，而不是使用時所在的對象。** 2. 不可以當做構造函數，即不能使用new命令，否則會報錯。 3. 不可以使用arguments對象，該對象在函數體內不存在。如果要用，用rest參數替代。 4. 不可以使用yield命令，因此箭頭函數不能用作Generator函數。 this對象的指向是可變的，但在箭頭函數中它是固定的。 ``` function foo() { setTimeout(() => { console.log('id:', this.id) }, 100) } foo.call({id: 42}) //42 ``` 如果是一般函數，指向的this指向全局對象，但是箭頭函數導致this總是指向函數所在的對象。箭頭函數沒有this，內部的this就是外層代碼塊的this。正因為它沒有this，不能用作構造函數。也不能用call\(\)、apply\(\)、bind\(\)這些方法。 ## 函數綁定箭頭函數綁定this對象，大大減少了顯示綁定this對象的寫法，但箭頭函數并非適合所有場合，所以ES7提出了函數綁定運算符，用來取代call、apply和bind 的調用。函數綁定運算符是并排的雙冒號（::），雙冒號左邊是一個對象，右邊是一個函數。該運算符會自動將左邊的對象作為上下文環境（即this對象）綁定到右邊的函數。 ``` foo:bar // 等同于 bar.bind(foo) const hansOwnProperty = Object.prototype.hasOwnProperty function hasOwn(obj, key) { return obj::hasOwnProperty(key) } ``` 如果雙冒號左邊為空，右邊是一個對象的方法，則將該方法綁定在該對象上。 ``` var method = obj::obj.foo // 等同于 var method = ::obj.foo var log = ::console.log // 等同于 var log = cosole.log.bind(console) ``` 由于雙冒號運算符返回的還是原對象，因此可以使用鏈式寫法。 ``` let {find, html} = jake document.querySelectorAll('div.myClass') ::find('p') ::html('sss') ``` ## 尾調用優化