JavaScript箭头函数与剩余参数怎么使用

本篇内容主要讲解“JavaScript箭头函数与剩余参数怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript箭头函数与剩余参数怎么使用”吧!

网站制作、成都做网站服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。创新互联把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！

1. 什么是箭头函数？

箭头函数表达式语法比函数表达式更简洁，即函数的一种简化形式。
它的写法：

() => {};   // 可以用来写一个匿名函数

它的结构：

const / let 函数名 参数 => 函数体

比如现在有一个一般形式的函数表达式

let add = function(x, y) {
	return x + y;};

可以用箭头函数来写：

let add = (x, y) => {
	return x + y;};

---

2. 箭头函数的化简写法

• 单个参数

// 对于单个参数，我们可以省略外面的圆括号let addOne = x => {
	return x + 1;}

• 单行函数体

// 对于单行返回函数体，可以同时省略 {} 和  returnlet add (x, y) => x + y;

• 单行对象

// 对于返回单行对象，在外面加个 ()let add (x, y) => ({
	value: x + y;});

---

3. 箭头函数的基础知识

箭头函数没有 this，它会根据作用域链在外层中寻找 this。
举个例子：

var A = 1;let fun = {
    A: 2,
    printA: () => {
        console.log(this.A);
    },
    printAA: function() {
        let print = () => {
            console.log(this.A);
        }
        print();
    }};fun.printA();  // 1fun.printAA();  // 2

调用 printA，里面是输出 this.A，由于箭头函数没有 this，所以在外层寻找，外层是 fun。在这里，fun.printA()是在全局作用域中调用的，所以外层的 this 指向的是 window，由于之前用 var 定义了一个 A = 1，所以输出的是 1。

调用 printAA，在里面调用了 print()，输出 this.A，看 print 这个函数，是个箭头函数，他没有 this，所以找外层，它的外层是 printAA，它是由 fun 调用的，所以它的 this 指向 fun，所以输出 fun 中定义的 A，也就是 2。

---

4. 箭头函数不适用的场景

1. 作为构造函数

实例化构造函数之后，它的 this 指向实例化的对像，而箭头函数没有 this，所以它不能用来做构造函数。

2. 需要 this 指向调用对象的时候

3. 需要使用 arguments 的时候

箭头函数中没有 arguments，可以使用剩余参数来存参数。

---

5. 剩余参数

5.1) 什么是剩余参数 ？

举个例子：

let add = (x, y, z, ...args) => {
	console.log(x, y, z, args);};

args 就是剩余参数。
剩余参数是个数组，它即使没有值，也是以一个空数组形式存在。
比如：

let add = (x, y, z, ...args) => {
    console.log(x, y, z, args);}add(1, 2, 3);

x, y, z 对应参数 1， 2， 3，由于剩余参数没有值，所以空数组形式存在。

5.2) 作用

由于箭头函数没有 arguments，所以我们可以使用剩余参数替代 arguments 获取实际参数
举个例子：

const print = (...args) => {
    console.log(args);};print(1, 2);

5.3) 注意事项

• 在箭头函数中，即使只有一个剩余参数，也不能省略圆括号

let add = (...args) => {};

• 剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

到此，相信大家对“JavaScript箭头函数与剩余参数怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

网页标题：JavaScript箭头函数与剩余参数怎么使用
当前网址：http://shouzuofang.com/article/gcspih.html