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

Pandaaa 發(fā)布于2019-08-23 11:01 / 1351人閱讀

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

一、函數(shù)的默認參數(shù)值 1. ES6之前，我們?nèi)绾螌崿F(xiàn)函數(shù)默認參數(shù) 1.1 方式一：使用邏輯運算符【||】

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

test() // "默認值"

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

因此有了第二種處理方式

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

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

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

test() // undefined

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

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

}

test() // "默認值"

2. ES6實現(xiàn)函數(shù)默認參數(shù) 2.1 基本用法

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

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

test() // "默認值"

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

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

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

但這本質(zhì)上其實還是對undefined做判斷，是1.2小節(jié)的語法糖

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

2.2 參數(shù)默認值的惰性求值

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

// 阮一峰老師 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的參數(shù)默認值不一定是惰性求值，比如下面這個例子

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

二、剩余參數(shù)

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

1. 基本概念

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

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

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

作用——用于獲取函數(shù)的多余參數(shù)

語法糖——rest參數(shù)一定是arguments對象的語法糖

1.1 基本用法

首先我們要搞清楚什么是多余參數(shù)

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

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

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

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

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

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

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

1.2 什么時候我們會用到rest參數(shù)？

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

下面看一個使用arguments的例子

// 創(chuàng)建一個sum函數(shù)，實現(xiàn)如下功能
// 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
}

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

// 創(chuàng)建一個sum函數(shù)，實現(xiàn)如下功能
// 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轉(zhuǎn)換為真數(shù)組的三種方式

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

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

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96923.html

ES6指北【6】——詳談解構(gòu)賦值【附贈練習題】

摘要：指北詳談解構(gòu)賦值附贈練習題一何謂解構(gòu)賦值基本概念首先我們看一下給的定義解構(gòu)賦值語法是一個表達式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐袕亩x中，我們可以發(fā)現(xiàn)解構(gòu)賦值的作用是對變量進行賦值主要通過兩個方面實現(xiàn)這個作用數(shù)組將數(shù)組中的 ES6指北【6】——詳談解構(gòu)賦值【附贈練習題】一、何謂解構(gòu)賦值？ 1. 基本概念首先我們看一下MDN給的定義解構(gòu)賦值語法是一個 Javasc...

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

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

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

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

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

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

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

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

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