阿坝州网站建设公司

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

本篇内容主要讲解“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，所以它不能用来做构造函数。

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

  2. 需要使用 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);

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

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

5.2) 作用

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

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

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

5.3) 注意事项

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

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

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

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


网站名称：JavaScript箭头函数与剩余参数怎么使用
文章转载：http://azwzsj.com/article/gcspih.html

其他资讯