五、ES6中函数的扩展

函数参数的默认值

function fn(arg = 0) {
  console.log(arg);
}
fn(); // 0
fn(100); // 100

与解构赋值配合使用

function fn([a, b = 0]) {
  console.log(a + b);
}
fn([1]); // 1

函数参数的作用域

let v = 100;
function fn(arg = v) {
  let v = 1000;
  console.log(arg);
}

fn(); // 100

rest参数

function fn(a, b, ...args) {
  console.log(a, b, args);
}
fn(1, 2, 3, 4, 5); // 1 2 [ 3, 4, 5 ]

rest参数会将多余的参数放入到一个数组。

rest参数只能放在最后。
函数的length属性不包含rest参数

箭头函数

基本语法

let fn1 = () => 2;
console.log(fn1()); // 2
let fn2 = (a, b) => a + b;
console.log(fn2(1, 2)); // 3
let fn3 = () => {
  console.log("log");
  return 1;
};
console.log(fn3());
// log
// 1

在ES5中，this取决于当前调用环境的上下文对象。而在ES6中，this取决于定义时的上下文对象。

注意事项

不能作为构造函数

// 1. 不能作为构造函数
var fn = () => {
  this.name = "张无忌";
};
var f = new fn();
console.log(f);

可以作为对象的方法出现

let obj = {
  name: "张无忌",
  sayMe: () => {
    console.log("我是张无忌");
  },
};
obj.sayMe(); // 我是张无忌

箭头函数中不能使用arguments参数，需要使用rest参数代替

var fn = (...args) => {
  console.log(args);
};
fn(1, 2, 3); //[ 1, 2, 3 ]

尾调用

function g(x) {
  return x + 2;
}
function fn(x) {
  return g(x); // 表示尾调用
}

console.log(fn(3)); // 5