ES6，新增语法整理之函数的扩展

ES6之函数的扩展

一. 函数参数的默认值 (常用)

在 ES6 之前，不能为函数的参数指定默认值，通常采用如下方法实现。

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

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

// 缺点在于，当参数y为布尔值false、数值0,则赋值不起作用
// 于是又会加上以下判断
if (typeof y === 'undefined') {
  y = 'World';
}

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

// 示例1
function print(x, y = 'World') {
  console.log(x, y);
}

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

// 示例2
function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

注意点

• 1. 参数变量是默认声明的，所以不能用let或const再次声明

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

• 2. 使用参数默认值时，函数不能有同名参数。

// 不报错；后一个覆盖前一个
function foo(x, x, y) {
  // ...
}

// 直接报错
function foo(x, x, y = 1) {
  // ...
}
// SyntaxError: Duplicate parameter name not allowed in this context

• 3. 参数默认值是惰性求值的，每次都重新计算默认值表达式的值。

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101
// 参数p的默认值是x + 1。这时，每次调用函数foo()，
// 都会重新计算x + 1，而不是默认p等于 100

• 4. 参数默认值的位置，应该是函数的尾参数

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

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

/*
 * 示例中有默认值的参数不是尾参数。
 * 这时，无法只省略该参数，而不省略它后面的参数，
 * 除非显式输入undefined 
*/

• 5. 指定参数默认值后，函数的 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

• 6. 与解构赋值默认值结合使用

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 函数只是使用了对象的解构赋值默认值，没有使用函数参数的默认值
 * 所以函数foo()调用时没提供参数，变量x和y就不会生成，从而报错
 * 应该为函数参数提供默认值
*/
function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

// 如上所示，函数参数的默认值生效以后，参数解构赋值依然会进行

二. rest 参数 (常用)

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

// 利用 rest 参数，可以向该函数传入任意数目的参数。
function add(...values) {

  console.log(Array.isArray(values)) // true

  let sum = 0;

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

  return sum;
}

add(2, 5, 3) // 10
add(2, 5, 3, 8, 10) // 28

使用rest 参数代替arguments变量的示例

// arguments对象不是数组，而是一个类似数组的对象
// arguments变量的写法;
function sortNumbers() {
  // 先将arguments转为数组
  return Array.from(arguments).sort();
}

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

注意

• rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

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

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

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

三. 箭头函数 (常用)

ES6 允许使用“箭头”（=>）定义函数。
语法 (参数)=> { statements }

• 没有参数时

let f = ()=> 5;

// 等同于
let f = function () {
  return 5;
};

f(); // 5

• 一个参数时

let f = (num)=> num + 5;
// 简写，省去（）
let f = num => num + 5;

f(10); // 15

• 多个参数，圆括号代表参数部分,不可省略。

let f = (a,b) => a + b;

f(1,2); // 3

• 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

// 没有大括号，默认返回表达式结果
let f1 = (a,b) => a + b
f1(1,2) // 3

// 有大括号，无return语句，没有返回值
let f2 = (a,b) => {a + b}
f2(1,2) // undefined

// 有大括号，有return语句，返回结果
let f3 = (a,b) => {return a + b}
f3(1,2) // 3

• 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getPerson = id => { id: id, name: "浪子快跑" };

// 不报错
let getPerson  = id => ({ id: id, name: "朴荟圈圈" });

使用箭头函数可以简化代码

// 普通函数写法
let list = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
let list = values.sort((a, b) => a - b);
 
// 箭头函数可以与变量解构结合使用
let full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

//  rest 参数与箭头函数结合
let numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

let headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

箭头函数注意事项

• 箭头函数没有自己的this对象,内部的this就是定义时上层作用域中的this

function f() {
  setTimeout(() => {
    console.log('name:', this.name);
  }, 100);
}
var name = '李四;

f.call({ name: '张三'});

setTimeout()如果是普通函数，this将指向window，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{name: ‘张三’}），所以打印出来的是 张三

• 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，会抛错。

let Person = ()=>{};

// 报错 TypeError: Person  is not a constructor
let person = new Person ();

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

let f = ()=>console.log(arguments);

//报错
f(); // arguments is not defined

// 使用rest参数
let f = (...args)=>console.log(args)

f(1,2,3,4,5) // [1,2,3,4,5]

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });
// ['outer']

// 箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。

• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

四. 严格模式

ES5 开始，函数内部可以设定为严格模式。

function doSomething(a, b) {
  'use strict';
  // code
}

ES2016 规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

五. name 属性

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

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

六. 函数参数的尾逗号

ES2017 允许函数的最后一个参数有尾逗号

function f(
  param1,
  param2,
) { /* code */ }

// 以前param2后面加','会报错；现在允许了

七. catch 命令的参数省略

JavaScript 语言的try…catch结构，以前明确要求catch命令后面必须跟参数，接受try代码块抛出的错误对象。

try {
  // ...
} catch (err) {
  // 处理错误
}

// catch命令后面带有参数err,以前必须写，ES6允许省略

// 省略参数err
try {
  // ...
} catch {
  // ...
}

参考资料
阮一峰 ES6 入门教程