ES6指北【4】——ES6的函数参数处置惩罚，超乎你设想

2023年5月18日 205次阅读 来源: bluesboneW

一、函数的默许参数值

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 参数搭配的变量是一个数组，该变量将过剩的参数放入数组中。

从上面的观点中，我们最少能够晓得以下三个信息

  1. 语法——...+变量。这个变量的数据类型是数组，用来寄存过剩的参数
  2. 作用——用于猎取函数的过剩参数
  3. 语法糖——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指北的下一章解说，敬请关注~~
}
    原文作者：bluesboneW
    原文地址: https://segmentfault.com/a/1190000016002003
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞