你必须了解JavaScript箭头函数与剩余参数

2025-05-16 02:15:08 3
  • 收藏
  • 管理
    本篇文章给大家带来了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. 箭头函数不适用的场景作为构造函数 实例化构造函数之后,它的 this 指向实例化的对像,而箭头函数没有 this,所以它不能用来做构造函数。 需要 this 指向调用对象的时候 需要使用 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学习教程】
    上一页:你必须了解SEO推广的优势 下一页:你对社区网站推广了解多少?
    全部评论(0)