深入精通javascript函数序列第四篇——ES6函数扩充

前方的话

  ES6正规关于函数扩大部分,重要涉嫌以下三个地方:参数默认值、rest参数、扩充运算符和箭头函数

 

参数默认值

  一般地,为参数设置默认值需举行如下设置

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

  但这样设置实际上是有问题的,如若y的值我是假值(包括false、undefined、null、”、0、-0、NaN),则无从获取本身值

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', NaN) // Hello World

  ES6同意为函数的参数设置默认值,即直接写在参数定义的背后

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', NaN) // Hello NaN

  [注意]参数变量是默认评释的,所以不可能用let或const再度宣示

function foo(x = 5) {
  let x = 1; //SyntaxError: Identifier 'x' has already been declared
  const x = 2; //SyntaxError: Identifier 'x' has already been declared
}

尾参数

  经常状况下,定义了默认值的参数,应该是函数的尾参数。因为如此相比便于看出来,到底省略了怎么参数。假若非尾部的参数设置默认值,实际上那么些参数是没法省略的

function f(x = 1, y) {
  return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

  假使传入undefined,将触发该参数等于默认值,null则并未这个意义

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

length

  指定了默认值未来,函数的length属性,将赶回没有指定默认值的参数个数

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

  [注意]一经设置了默认值的参数不是尾参数,那么length属性也不再计入后边的参数了

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

作用域

  【1】假若参数默认值是一个变量,则该变量所处的功用域,与另外变量的功用域规则是如出一辙的,即首先当前函数的效能域,然后才是大局功能域

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

  【2】倘若函数调用时,函数效能域内部的变量x没有变化,则x指向全局变量

var x = 1;
function f(y = x) {
  var x = 2;
  console.log(y);
}
f() // 1

应用

  利用参数默认值,可以指定某一个参数不得省略,假使简单就抛出一个不当

function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo()// Error: Missing parameter

  [注意]将参数默认值设为undefined,注脚这一个参数可以概括

function foo(optional = undefined) {
    //todo
}

 

rest参数

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

function add(...values) {
  var sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) //10

  rest参数中的变量代表一个数组,所以数组特有的主意都得以用来这么些变量

  下边是一个拔取rest参数改写数组push方法的例证

function push(array, ...items) {
  items.forEach(function(i) {
    array.push(i);
    console.log(i);
  });
}
var a = [];
push(a, 1, 2, 3);

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

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

  [注意]rest参数之后无法再有任何参数

//Uncaught SyntaxError: Rest parameter must be last formal parameter
function f(a, ...b, c) {
  //todo
}

 

恢宏运算符

  增加运算符(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>]

  该运算符首要用以函数调用

function add(x, y) {
  return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

  Math.max方法简化

// ES5
Math.max.apply(null, [14, 3, 77])

// ES6
Math.max(...[14, 3, 77])

//等同于
Math.max(14, 3, 77)

  push方法简化

// ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

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

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

 

箭头函数

  关于箭头函数的详尽介绍移步至此

 

参考资料

  《ECMAScript 6入门》 阮一峰