函数默认参数

ES6中,可以为函数的参数指定默认值。函数默认参数允许在没有值或undefined被传入时使用默认形参。

function log(x, y = 'World') { console.log;}log // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello
  1. 参数变量是默认声明的,所以不能用let或const再次声明。

function foo { let x = 1; // error const x = 2; // error}
  1. 使用参数默认值时,函数不能有同名参数。

// 不报错function foo { // ...}// 报错function foo(x, x, y = 1) { // ...}// SyntaxError: Duplicate parameter name not allowed in this context
  1. 显式传入undefined或不传值时使用函数默认参数值;传入''null时使用传入的参数值。

function test { console.log(typeof num);}test(); // 'number' (num is set to 1)test(undefined); // 'number' (num is set to 1 too)// test with other falsy values:test; // 'string' (num is set to '')test; // 'object' (num is set to null)
  1. 参数默认值不是传值的,而是在函数被调用时,参数默认值才会被解析。

function append(value, array = []) { array.push; return array;}append; //[1]append; //[2], not [1, 2]
  1. 位置在前的默认参数可用于后面的默认参数。

function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message];}greet('David', 'Hi'); // ["David", "Hi", "Hi David"]greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]
  1. 通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

// 例一function f { return [x, y];}f() // [1, undefined]f // [2, undefined])f // 报错f(undefined, 1) // [1, 1]// 例二function f(x, y = 5, z) { return [x, y, z];}f() // [undefined, 5, undefined]f // [1, 5, undefined]f // 报错f(1, undefined, 2) // [1, 5, 2]
  1. 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。后文的
    rest 参数也不会计入length属性。

(function .length // 1(function  {}).length // 0(function (a, b, c = 5) {}).length // 2(function {}).length // 0(function (a = 0, b, c) {}).length // 0(function (a, b = 1, c) {}).length // 1

原文链接

函数参数的默认值

剩余(rest)参数

ES6 引入 rest
参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum;}add // 10
  1. rest
    参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

// 报错function f(a, ...b, c) { // ...}
  1. 函数的length属性,不包括 rest 参数。

(function.length // 1(function.length // 0(function {}).length // 1
  1. rest参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。

function f(...[a, b, c]) { return a + b + c;}f // NaN (b and c are undefined)f // 6f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
  • rest参数只包含那些没有对应形参的实参,而arguments对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而rest参数是真正的Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如
    sortmapforEachpop
  • arguments对象还有一些附加的属性 (如callee属性)。

译文 

基本用法

在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。

ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以看到,ES6的写法比ES5简洁许多,而且非常自然。

ES6的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。

参数变量是默认声明的,所以不能用letconst再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

上面代码中,参数变量x是默认声明的,在函数体中,不能用letconst再次声明,否则会报错。

 

与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值,结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

上面代码使用了对象的解构赋值默认值,而没有使用函数参数的默认值。只有当函数foo的参数是一个对象时,变量xy才会通过解构赋值而生成。如果函数foo调用时参数不是对象,变量xy就不会生成,从而报错。如果参数对象没有y属性,y的默认值5才会生效。

  ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式。除了其它新特性外,我们还可以使用rest参数、默认值、解构赋值等。

参数默认值的位置

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined

如果传入undefined,将触发该参数等于默认值,null则没有这个效果。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

上面代码中,x参数对应undefined,结果触发了默认值,y参数等于null,就没有触发默认值。

  本教程中,我们将详细探索arguments和parameters,看看ES6是如果改善升级它们的。

函数的length属性

指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

上面代码中,length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。比如,上面最后一个函数,定义了3个参数,其中有一个参数c指定了默认值,因此length属性等于3减去1,最后得到2

这是因为length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,rest参数也不会计入length属性。

(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

对比 Arguments 和 Parameters

作用域

一个需要注意的地方是,如果参数默认值是一个变量,则该变量所处的作用域,与其他变量的作用域规则是一样的,即先是当前函数的作用域,然后才是全局作用域。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

上面代码中,参数y的默认值等于x。调用时,由于函数作用域内部的变量x已经生成,所以y等于参数x,而不是全局变量x

如果调用时,函数作用域内部的变量x没有生成,结果就会不一样。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中,函数调用时,y的默认值变量x尚未在函数内部生成,所以x指向全局变量,结果又不一样。

利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

上面代码的foo函数,如果调用的时候没有参数,就会调用默认值throwIfMissing函数,从而抛出一个错误。

从上面代码还可以看到,参数mustBeProvided的默认值等于throwIfMissing函数的运行结果(即函数名之后有一对圆括号),这表明参数的默认值不是在定义时执行,而是在运行时执行(即如果参数已经赋值,默认值中的函数就不会运行),这与python语言不一样。

另外,可以将参数默认值设为undefined,表明这个参数是可以省略的。

function foo(optional = undefined) { ··· }

  通常情况下提到 Arguments
和 Parameters, 都认为是可以互换使用的。然而,基于本教程的目的,我们做了明确的区分。在大多数标准中,parameters (形式参数) 指声明函数名和函数体的时候使用的参数,而
arguments (实际参数) 指在函数实际调用时,传入的确定值。思考下面这个函数:

rest参数

ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。

下面是一个rest参数代替arguments变量的例子。

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

上面代码的两种写法,比较后可以发现,rest参数的写法更自然也更简洁。

注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

函数的length属性,不包括rest参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1
function foo(param1, param2) {
    // do something
}
foo(10, 20);

扩展运算符

  在这个函数中, param1 和 param2 是函数的形式参数(形参), 而在函数foo调用时,传入的 (10 和 20) 则是实际参数(实参)。

含义

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

 

替代数组的apply方法

由于扩展运算符可以展开数组,所以不再需要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);

扩展操作符

扩展运算符的应用

(1)合并数组

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

(2)与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组。

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

(3)函数的返回值

JavaScript的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date

4)字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

上面的写法,有一个重要的好处,那就是能够正确识别32位的Unicode字符。

'xuD83DuDE80y'.length // 4
[...'xuD83DuDE80y'].length // 3

(5)实现了Iterator接口的对象

任何Iterator接口的对象,都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了Iterator接口。

  在 ES5 中,用 apply() 方法可以很方便地将一个数组传递给函数。例如,我们经常把它和
Math.max() 结合使用,来取得数组中的最大值。请看下面代码:

name属性

函数的name属性,返回该函数的函数名。

function foo() {}
foo.name // "foo"

这个属性早就被浏览器广泛支持,但是直到ES6,才将其写入了标准。

需要注意的是,ES6对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5的name属性,会返回空字符串,而ES6的name属性会返回实际的函数名。

var func1 = function () {};

// ES5
func1.name // ""

// ES6
func1.name // "func1"

上面代码中,变量func1等于一个匿名函数,ES5和ES6的name属性返回的值不一样。

bind返回的函数,name属性值会加上“bound ”前缀。

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

 

 

var myArray = [5, 10, 50];

Math.max(myArray);    // Error: NaN

Math.max.apply(Math, myArray);    // 50

  Math.max() 方法并不支持传入数组,它只接受数字。所以当我们把数组作为参数传递给它时,就会抛出错误。但是,加上
apply() 方法后,数组会被转换成单独的数字,就能被
Math.max() 处理了。

  庆幸的是,ES6 引入了扩展操作符,我们不需要再使用
apply() 方法了。通过扩展操作符,我们可以很方便地为表达式传入多个参数:

var myArray = [5, 10, 50];

Math.max(...myArray);    // 50

  这里,扩展操作符把 myArray 展开成独立的数值传给了函数。 ES5里面使用 apply() 来模仿操作符是可以达到目的的,只是语法上令人困惑,并且缺乏扩展操作符的灵活性。 扩展操作符不仅易于使用,还涵盖了很多其他特性。例如,它可以被多次使用,还可以在 function 调用时,和其它参数混合使用:

function myFunction() {

  for(var i in arguments){

    console.log(arguments[i]);

  }

}

var params = [10, 15];

myFunction(5, ...params, 20, ...[25]);    // 5 10 15 20 25

  扩展操作符的另一个优点,就是它可以很简单地和构造函数一起使用:

new Date(...[2016, 5, 6]);    // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)`

  当然,我们可以用ES5重写上面的代码,但我们则需要用一个复杂的模式来避免类型错误:

new Date.apply(null, [2016, 4, 24]);    // TypeError: Date.apply is not a constructor

new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6])));   // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

  浏览器对扩展操作符在函数中调用的支持情况

  图片 1

Rest参数

  rest参数和扩展操作符拥有相同的语法,不同的是,rest参数是把所有的参数收集起来转换成数组,而扩展操作符是把数组扩展成单独的参数。

function myFunction(...options) {

     return options;

}

myFunction('a', 'b', 'c');      // ["a", "b", "c"]

  如果函数调用时,没有传入实际参数,则rest参数会输出一个空数组,如下:

function myFunction(...options) {
     return options;
}

myFunction();      // []

  rest参数在创建一个可变函数(即一个参数个数可变的函数)时尤其有用。rest参数有着数组固有的优势,可以快捷地替换 arguments 对象(下文会解释这个名词)。下面这个函数是用ES5写的,我们来看下:

function checkSubstrings(string) {
  for (var i = 1; i < arguments.length; i++) {
    if (string.indexOf(arguments[i]) === -1) {
      return false;
    }
  }
  return true;
}

checkSubstrings('this is a string', 'is', 'this');   // true

  该函数检查字符串(this is a
string)是否包括这些子串(is, this)。这个函数存在的第一个问题是,我们必须看函数体内是否有多个参数。第二个问题是,循环必须从
1 开始,而不是从 0 开始, 因为 arguments[0] 指向的就是第一个参数(this is a string)。 如果以后我们想要在这个字符串的前面或者后面添加另一个参数,我们可能会忘记更新循环体。而使用rest参数,我们就可以很容易地避免这些问题:

function checkSubstrings(string, ...keys) {
  for (var key of keys) {
    if (string.indexOf(key) === -1) {
      return false;
    }
  }
  return true;
}

checkSubstrings('this is a string', 'is', 'this');   // true

  该函数的输出跟前一个函数的输出是一样的。这里再提一下,参数
string 被包含在这个函数的 argument 中,并且第一个被传递进来,剩下的参数都被放到一个数组,并且赋给了名为
keys 的变量。

  使用rest参数替代
arguments 对象来提高代码的可读性和避免一些js的优化问题1。 然而,rest参数也不是没有缺点的。例如,它必须是最后一个参数,否则就会报错,如下面函数所示:

function logArguments(a, ...params, b) {
        console.log(a, params, b);
}

logArguments(5, 10, 15);    // SyntaxError: parameter after rest parame

  另一个缺点是,一个函数声明只能允许有一个rest参数:

function logArguments(...param1, ...param2) {
}

logArguments(5, 10, 15);    // SyntaxError: parameter after rest parameter

  浏览器对Rest参数的支持情况:

 图片 2

默认参数

ES5 默认参数

  在ES5中,JS 并不支持默认参数, 但是,我们也有一种变通的方案,那就是在函数中使用 OR 操作符( ||)。我们简单地模仿ES5中的默认参数,请看下面函数:

function foo(param1, param2) {
   param1 = param1 || 10;
   param2 = param2 || 10;
   console.log(param1, param2);
}

foo(5, 5);  // 5 5
foo(5);    // 5 10
foo();    // 10 10

  该函数预期传入两个参数,但如果在调用该函数时,没有传入实参,则它会用默认值。在函数体内,如果没有传入实际参数,则会被自动设为
undefined, 所以,我们可以检测这些参数,并且声明他们的默认值。我们可以使用
OR 操作符(||)来检测是否有传入实际参数,并且设定他们的默认值。OR 操作符会检测它的第一个参数,如果有实际值2,则用第一个,如果没有,则用它的第二个参数。

  这种方法在函数中普遍使用,但它有一个瑕疵,那就是传入 0 或者 null 也会触发默认值,因为 0 和 null 都被认为是false. 所以,如果我们需要给函数传入 0 和 null 时,我们需要另一种方式去检测这个参数是否缺失:

function foo(param1, param2) {
  if(param1 === undefined){
    param1 = 10;
  }
  if(param2 === undefined){
    param2 = 10;
  }
  console.log(param1, param2);
}

foo(0, null);    // 0, null
foo();    // 10, 10

  在上面这个函数中,只有当所传的参数全等于
undefined 时,才会使用默认值。这种方式需要用到的代码稍微多点,但是安全度更高,我们可以给函数传入
0 和 null 。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注