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

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

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

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

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

test() // "默認(rèn)值"

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

因此有了第二種處理方式

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

ES5其實(shí)本來(lái)就有函數(shù)默認(rèn)參數(shù)，只不過(guò)這個(gè)默認(rèn)參數(shù)只能是undefined，無(wú)法設(shè)置

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

test() // undefined

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

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

}

test() // "默認(rèn)值"

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

其實(shí)非常簡(jiǎn)單，直接在參數(shù)后面加個(gè) = 號(hào)就行啦，看栗子吧

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

test() // "默認(rèn)值"

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

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

test() // 默認(rèn)值1 默認(rèn)值2

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

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

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

參數(shù)默認(rèn)值是不記錄值的，每次都會(huì)重新計(jì)算參數(shù)默認(rèn)表達(dá)式的值

// 阮一峰老師 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]

有同學(xué)一定會(huì)有疑問(wèn)，這不是廢話嗎？其實(shí)不然，比如Python的參數(shù)默認(rèn)值不一定是惰性求值，比如下面這個(gè)例子

>>> 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對(duì)象了。rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

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

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

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

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

1.1 基本用法

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

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

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

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

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

那么，如果我們也想對(duì)這些多余參數(shù)進(jìn)行處理的話就需要使用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 什么時(shí)候我們會(huì)用到rest參數(shù)？

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

下面看一個(gè)使用arguments的例子

// 創(chuàng)建一個(gè)sum函數(shù)，實(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)其最大的特點(diǎn)是參數(shù)個(gè)數(shù)不確定，所以如果遇到函數(shù)參數(shù)個(gè)數(shù)不確定的情況，就要優(yōu)先考慮使用rest參數(shù)，而且由于rest參數(shù)是真數(shù)組，你用起來(lái)會(huì)比arguments舒服太多
下面是用rest參數(shù)進(jìn)行改寫

// 創(chuàng)建一個(gè)sum函數(shù)，實(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. 拓展：把a(bǔ)rguments轉(zhuǎn)換為真數(shù)組的三種方式

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

function sum() {
  let arr1 = Array.prototype.slice.call(arguments)
  let arr2 = Array.from(arguments)
  let arr3 = [...arguments] // 這個(gè)是展開(kāi)語(yǔ)法【spread syntax】 我會(huì)在ES6指北的下一章講解，敬請(qǐng)關(guān)注~~
}

GPU云服務(wù)器云服務(wù)器 ES6 es6-系列 ES6入門 es6 js

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96923.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Pandaaa

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

在anaconda下安裝tensorflow

閱讀 1986·2023-04-25 15:50
怎么看網(wǎng)站是服務(wù)器還是虛擬主機(jī)-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

閱讀 1387·2021-09-22 15:49
主機(jī)優(yōu)勢(shì)是什么意思-電信云主機(jī)是什么？

閱讀 3274·2021-09-22 15:06
【每日一包0029】merge-descriptors

閱讀 3807·2019-08-30 15:54
RDD的前端背包

閱讀 2410·2019-08-29 11:33
node.js來(lái)爬取智聯(lián)全國(guó)的競(jìng)爭(zhēng)最激烈的前十崗位

閱讀 2195·2019-08-23 17:56
WebGL three.js學(xué)習(xí)筆記紋理貼圖模擬太陽(yáng)系運(yùn)轉(zhuǎn)

閱讀 2430·2019-08-23 17:06
每日 30 秒 ? 復(fù)制內(nèi)容到剪貼板

閱讀 1376·2019-08-23 15:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

***ES6指北【2】—— 箭頭函數(shù)***

ES6指北【5】——展開(kāi)語(yǔ)法(spread syntax)

ES6指北【1】——let、const

ES6指北【1】——let、const

發(fā)表評(píng)論

0條評(píng)論

Pandaaa

男|高級(jí)講師

TA的文章

在anaconda下安裝tensorflow

怎么看網(wǎng)站是服務(wù)器還是虛擬主機(jī)-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

主機(jī)優(yōu)勢(shì)是什么意思-電信云主機(jī)是什么？

【每日一包0029】merge-descriptors

RDD的前端背包

node.js來(lái)爬取智聯(lián)全國(guó)的競(jìng)爭(zhēng)最激烈的前十崗位

WebGL three.js學(xué)習(xí)筆記紋理貼圖模擬太陽(yáng)系運(yùn)轉(zhuǎn)

每日 30 秒 ? 復(fù)制內(nèi)容到剪貼板

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！