函数扩展

发表于 更新于 分类于

前言

ES6 在函数扩展方面，新增了很多特性。例如：

  • 箭头函数

  • 参数默认值

  • 参数结构赋值

  • 扩展运算符

  • rest 参数

  • this 绑定

  • 尾调用

箭头函数

定义和调用函数：（传统写法）

1
2
3
4
5
function fn1(a, b) {
  return a + b;
}

console.log(fn1(1, 2)); //输出结果：3

定义和调用函数：（ES6 中的写法）

1
2
3
var fn2 = (a, b) => a + b;

console.log(fn2(1, 2)); //输出结果：3

二者的效果是一样的。

在箭头函数中，如果方法体内有两句话，那就需要在方法体外边加上{}括号。如下：

1
2
3
4
5
var fn2 = (a, b) => {
  console.log("haha");
  return a + b;
};
console.log(fn2(1, 2)); //输出结果：3

从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体。

上方代码中：

  • 如果有且仅有 1 个参数，则()可以省略

  • 如果方法体内有且仅有 1 条语句，则{}可以省略，但前提是，这条语句必须是 return。

this 的指向

箭头函数只是为了让函数写起来更优雅吗？当然不是，还有一个很大的作用是与 this 的指向有关。

ES5 中，this 指向的是函数被调用的对象；而 ES6 的箭头函数中，this 指向的是函数被定义时。

简单来说，箭头函数中的 this，是不会变的，是永远绑定在当前的环境下。

参数默认值

传统写法：

1
2
3
4
function fn(param) {
  let p = param || "hello";
  console.log(p);
}

上方代码中，函数体内的写法是：如果 param 不存在，就用 hello字符串做兜底。这样写比较啰嗦。

ES6 写法：（参数默认值的写法，很简洁）

1
2
3
function fn(param = "hello") {
  console.log(param);
}

在 ES6 中定义方法时，我们可以给方法里的参数加一个默认值（缺省值）：

  • 方法被调用时，如果没有给参数赋值，那就是用默认值；

  • 方法被调用时，如果给参数赋值了新的值，那就用新的值。

如下：

1
2
3
4
5
6
7
var fn2 = (a, b = 5) => {
  console.log("haha");
  return a + b;
};
console.log(fn2(1)); //第二个参数使用默认值 5。输出结果：6

console.log(fn2(1, 8)); //输出结果：9

提醒 1：默认值的后面，不能再有没有默认值的变量。比如(a,b,c)这三个参数，如果我给 b 设置了默认值，那么就一定要给 c 设置默认值。

提醒 2：

我们来看下面这段代码：

1
2
3
4
5
let x = "smyh";
function fn(x, y = x) {
  console.log(x, y);
}
fn("vae");

注意第二行代码，我们给 y 赋值为x，这里的x是括号里的第一个参数，并不是第一行代码里定义的x。打印结果：vae vae。

如果我把第一个参数改一下，改成：

1
2
3
4
5
let x = "smyh";
function fn(z, y = x) {
  console.log(z, y);
}
fn("vae");

此时打印结果是：vae smyh。

扩展运算符

注意区分：

  • 扩展运算符的格式为...

  • rest 运算符的格式为...变量名

有了 ES6，当我们在定义一个方法，但是不确定其参数的个数时，我们就可以用扩展运算符作为参数。

以前，我们在定义方法时，参数要确定个数，如下：（程序会报错）

1
2
3
4
5
6
7
8
function fn(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
}

fn(1, 2, 3);

上方代码中，因为方法的参数是三个，但使用时是用到了四个参数，所以会报错：

现在，我们有了扩展运算符，就不用担心报错的问题了。代码可以这样写：

1
2
3
4
5
6
7
8
9
function fn(...arg) {
  //当不确定方法的参数时，可以使用扩展运算符
  console.log(arg[0]);
  console.log(arg[1]);
  console.log(arg[2]);
  console.log(arg[3]);
}

fn(1, 2, 3); //方法中定义了四个参数，但只引用了三个参数，ES6 中并不会报错。

上方代码中注意，arg 参数之后，不能再加别的参数，否则编译报错。

举例：数组赋值的问题

我们来分析一段代码：（将数组 arr1 赋值给 arr2）

1
2
3
4
5
6
7
8
9
let arr1 = ["www", "smyhvae", "com"];
let arr2 = arr1; // 将 arr1 赋值给 arr2，其实是让 arr2 指向 arr1 的内存地址
console.log("arr1:" + arr1);
console.log("arr2:" + arr2);
console.log("---------------------");

arr2.push("你懂得"); //往arr2 里添加一部分内容
console.log("arr1:" + arr1);
console.log("arr2:" + arr2);

运行结果：

上方代码中，我们往往 arr2 里添加了你懂的，却发现，arr1 里也有这个内容。原因是：let arr2 = arr1;其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。

如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做：

1
2
3
4
5
6
7
8
9
let arr1 = ["www", "smyhvae", "com"];
let arr2 = [...arr1]; //arr2 会重新开辟内存地址
console.log("arr1:" + arr1);
console.log("arr2:" + arr2);
console.log("---------------------");

arr2.push("你懂得"); //往arr2 里添加一部分内容
console.log("arr1:" + arr1);
console.log("arr2:" + arr2);

运行结果：

我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。

rest 运算符

rest 在英文中指的是剩余部分（不是指休息）。我们来举个例子，理解剩余部分的含义：

1
2
3
4
5
function fn(first, second, ...arg) {
  console.log(arg.length);
}

fn(0, 1, 2, 3, 4, 5, 6); //调用函数后，输出结果为 5

上方代码的输出结果为 5。 调用fn()时，里面有七个参数，而arg指的是剩下的部分（因为除去了first和second）。

从上方例子中可以看出，rest运算符适用于：知道前面的一部分参数的数量，但对于后面剩余的参数数量未知的情况。

Rest 参数接受函数的多余参数，组成一个数组，放在形参的最后

形式如下：

1
2
3
function func(a, b, ...theArgs) {
  // ...
}

Rest 参数和 arguments 对象的区别

rest 参数只包括那些没有给出名称的参数，arguments 包含所有参数
arguments 对象不是真正的数组，而 rest 参数是数组实例，可以直接应用 sort, map, forEach, pop 等方法
arguments 对象拥有一些自己额外的功能

从 arguments 转向数组

Rest 参数简化了使用 arguments 获取多余参数的方法

1
2
3
4
5
6
7
8
9
10
11
12
// arguments 方法
function func(a, b) {
  var args = Array.prototype.slice.call(arguments);
  console.log(args);
}

func(1, 2);

// Rest 方法
function func(a, b, ...args) {
  // ...
}

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

1
2
3
4
5
6
7
8
9
function func(a, ...b, c) {
// ...
}
// Rest parameter must be last formal parameter
函数的 length 属性，不包括 rest 参数

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

Rest 参数可以被解构

通俗一点，将 rest 参数的数据解析后一一对应
不要忘记参数用[]括起来，因为它是数组

1
2
3
4
5
6
7
function f(...[a, b, c]) {
  return a + b + c;
}

f(1); //NaN 因为只传递一个值，其实需要三个值
f(1, 2, 3); // 6
f(1, 2, 3, 4); // 6 (第四值没有与之对应的变量名)