ES6指北【4】——ES6的函數參數處理，超乎你想象

Pandaaa 發布于2019-08-23 11:01 / 1341人閱讀

摘要：參數搭配的變量是一個數組，該變量將多余的參數放入數組中。從上面的概念中，我們至少可以知道如下三個信息語法變量。

一、函數的默認參數值 1. ES6之前，我們如何實現函數默認參數 1.1 方式一：使用邏輯運算符【||】

function test(x) {
  x = x || "默認值" // 使用||設置默認值
  console.log(x) 
}

test() // "默認值"

但這樣做有個非常明顯的缺陷
如果x的值為null/+0或-0/NaN/""/false中的一個，x都會被設置為默認值，但我們的本意是在不傳值的時候才設置為默認值

因此有了第二種處理方式

1.2 方式二：對參數是否為undefined進行判斷

ES5其實本來就有函數默認參數，只不過這個默認參數只能是undefined，無法設置

function test(x) {
  console.log(x)
}

test() // undefined

所以我們只要對傳入的值是否為undefined進行判斷就可以實現自由設置默認參數了

function test(x) {
  if(!(Object.prototype.toString.call(x) === "[object Undefined]")) {
    console.log("默認值")
  } else {
    console.log(x) 
  }

}

test() // "默認值"

2. ES6實現函數默認參數 2.1 基本用法

其實非常簡單，直接在參數后面加個 = 號就行啦，看栗子吧

function test(x = "默認值") {
  console.log(x) 
}

test() // "默認值"

如果要給多個參數賦值，就像下面這樣寫

function test(x = "默認值1",y = "默認值2") {
  console.log(x,y) 
}

test() // 默認值1 默認值2

但這本質上其實還是對undefined做判斷，是1.2小節的語法糖

function f(x = 1) {
    console.log(x)
}
f(undefined) // 1

2.2 參數默認值的惰性求值

參數默認值是不記錄值的，每次都會重新計算參數默認表達式的值

// 阮一峰老師 ES6深入淺出 的例子
let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101 而不是 100

// mdn的例子
function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); //[1]
append(2); //[2] 而不是 [1, 2]

有同學一定會有疑問，這不是廢話嗎？其實不然，比如Python的參數默認值不一定是惰性求值，比如下面這個例子

>>> def f1(data=[]):
...     data.append(1)
...     return data
...
>>> f1()
[1]
>>> f1()
[1, 1]
>>> f1()
[1, 1, 1]

二、剩余參數

函數剩余參數的英文為 —— Functions Rest Parameters，一般我們剩余參數為rest參數

1. 基本概念

注：概念摘自阮一峰老師的《ECMAScript 6 入門》
ES6 引入 rest 參數（形式為...變量名），用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多余的參數放入數組中。

從上面的概念中，我們至少可以知道如下三個信息

語法——...+變量。這個變量的數據類型是數組，用來存放多余的參數

作用——用于獲取函數的多余參數

語法糖——rest參數一定是arguments對象的語法糖

1.1 基本用法

首先我們要搞清楚什么是多余參數

function sum(x, y) {
  return x + y
}

sum(1, 2, "多余1", "多余2", "多余3") // 3

從上面的例子我們可以看到，sum函數接受兩個參數的傳遞，但是用戶傳遞了五個參數，后面的三個參數即使傳遞也是無法被sum函數使用，顯得有些多余

這里的多余并不是無用的意思，而是相對于被使用到了的參數顯得多余而已

那么，如果我們也想對這些多余參數進行處理的話就需要使用rest參數了

// 用rest參數改寫之后
function sum(x, y, ...paraArr) {
  console.log(paraArr)
  return x + y
}

sum(1, 2, "多余1", "多余2", "多余3") 
// ["多余1", "多余2", "多余3"] 3

1.2 什么時候我們會用到rest參數？

既然rest參數是arguments的語法糖，那么我們只要搞清楚以往arguments的應用場景是什么，那么自然就懂得如何使用rest參數了。

下面看一個使用arguments的例子

// 創建一個sum函數，實現如下功能
// sum() // 0
// sum(1) // 1
// sum(2,10,2) // 14
// sum(0,0,200,1) // 201
// sum(1,10,3,2,100) // 116

function sum() {
  let total = 0
  for (let i = 0; i < arguments.length; i++) {
      total += arguments[i]
  }
  return total
}

從上面的例子我們可以發現其最大的特點是參數個數不確定，所以如果遇到函數參數個數不確定的情況，就要優先考慮使用rest參數，而且由于rest參數是真數組，你用起來會比arguments舒服太多
下面是用rest參數進行改寫

// 創建一個sum函數，實現如下功能
// sum() // 0
// sum(1) // 1
// sum(2,10,2) // 14
// sum(0,0,200,1) // 201
// sum(1,10,3,2,100) // 116

function sum(...paraArr) {
  let total = 0
  paraArr.forEach(e => total += e)
  return total
}

2. 拓展：把arguments轉換為真數組的三種方式

arguments因為能獲取到所有參數所以還是有它的不可替代性的，但是其偽數組的特性實在有點惡心，下面教大家三種方法轉換，第一種是ES5的方法，剩下兩種是ES6的方法

function sum() {
  let arr1 = Array.prototype.slice.call(arguments)
  let arr2 = Array.from(arguments)
  let arr3 = [...arguments] // 這個是展開語法【spread syntax】 我會在ES6指北的下一章講解，敬請關注~~
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96923.html

ES6指北【6】——詳談解構賦值【附贈練習題】

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】一、何謂解構賦值？ 1. 基本概念首先我們看一下MDN給的定義解構賦值語法是一個 Javasc...

sorra 2019-08-23 11:33 評論0 收藏0
ES6指北【2】—— 箭頭函數

摘要：箭頭函數基本語法函數語法具名函數匿名函數三句話第一句話聲明第二句話聲明匿名函數第三句話把匿名函數賦值給箭頭函數語法特點只能做賦值，不能做聲明第一種寫法完全寫法不省略參數個數，不省略函數體花括號參數個數函數體內語句個數第二種寫法省略參數括號參 1.箭頭函數基本語法 1.1 ES3 函數語法 // 具名函數 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 評論0 收藏0
ES6指北【5】——展開語法(spread syntax)

摘要：我們先來看一看的官方定義展開語法可以在函數調用數組構造時將數組表達式或者在語法層面展開還可以在構造字面量對象時將對象表達式按的方式展開。我們先來看一看MDN的官方定義展開語法(Spread syntax), 可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開；還可以在構造字面量對象時, 將對象表達式按key-value的方式展開。(譯者注: 字面量一般指 [1...

ZoomQuiet 2019-08-26 12:16 評論0 收藏0
ES6指北【1】——let、const

摘要：如何學習的學習順序以此類推沒學好就別想學好邊學邊用學了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結論含義不明的問題下面的代碼不會執 1.如何學習ES6 1.1 js的學習順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學好就別想學好ES6 1.2 邊學邊用 ...

張春雷 2019-08-26 11:45 評論0 收藏0
ES6指北【1】——let、const

摘要：如何學習的學習順序以此類推沒學好就別想學好邊學邊用學了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結論含義不明的問題下面的代碼不會執 1.如何學習ES6 1.1 js的學習順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學好就別想學好ES6 1.2 邊學邊用 ...

tain335 2019-08-01 18:35 評論0 收藏0