es6箭头函数_ES6之箭头函数

最新推荐文章于 2023-09-13 12:05:41 发布
最新推荐文章于 2023-09-13 12:05:41 发布
阅读量183 收藏
点赞数
文章标签： es6箭头函数 箭头函数可被打印却不能调用
本文介绍了ES6箭头函数的简化写法、注意事项，包括形参、代码体的特殊处理，以及它在this指向上的区别。通过实例演示，展示了箭头函数在回调中的优势和限制，适合与this无关场景，但需注意其对事件处理和对象方法的影响。
摘要由CSDN通过智能技术生成

ef5da6566d0fdeba5d5414e20f97a68b.png

箭头函数简化了原生写法，让代码更加简洁，来看一下基础的写法

箭头函数写法

基础写法

b77fe535eca20a6a073ef2776b4d98ab.png

函数的写法也就是比原生的写法少了function多了箭头，所以这可能就是箭头函数的由来吧！

简化写法

1) 当形参有且只有一个的时候,可以省略小括号

0e820f6eb89a553d63e363e9db852f8f.png

2)当代码体只有一条语句的时候可以省略花括号

注意：此时return必须省略，而且语句的执行结果就是函数的返回值

0d2c64df72d0f32c0726d8ef0dd4809d.png

使用箭头函数注意事项

1.不能作为构造实例化对象

11cc6f08db90e0a2477be9894ddffc94.png

此时会报错

7535e94164d56fd98775e9e28318fdb0.png

2.不能使用arguments变量

0327dd6e921d172bbf03c6d6231de7c8.png

此时会显示arguments未定义

f6f5c90d4e99798528cdefc19d0c398c.png

this相关问题

可以看一下对this指向的介绍全面解析this指向问题，更方便理解。

箭头函数不适用this的四种标准规则，而是根据外层（函数或全局）作用域来决定this的

this是静态的。this始终指向函数声明时所在作用域下的this的值。

4a7ab2f6e0c863cb8fe175f5a6df0d78.png

我们直接调用的话，this指向window，则会打印angula，而使用call对this进行绑定之后，我们会发现，普通的写法this发生了改变，打印obj name,但是箭头函数的this并未发生改变，依旧打印angula。

来进行一个小实践

1.实现一个小功能，点击div之后，将div块的背景颜色设置为red

e8625b625581d4a0f1997e21008a9b40.png

这是我们原本的写法，不使用箭头函数，这时候需要保存一下this，不然直接使用this会指向window。

箭头函数写法

88f71ad5e8d37537fc605d1d616744bd.png

这时候就不需要再对this进行保存了。这时候是不是感觉简化了好多呢？

2.从数组中返会偶数的元素

17485f3c477c4a56dad7df1a2b2f0b06.png

是不是感觉这么简单的东西写起来要这么多东西，那么来看一下箭头函数的写法

9e2979e08bfc9170d028f822ed0a21c7.png

这时候会简单一点点，那么我们来看一下箭头函数简化之后的写法

a1a35794fb05a41526b1a2fe15a492f6.png

这时候是不是感觉一切努力都不会白费，箭头函数可以使得代码变得更加的简洁呢？

总结：

箭头函数适合与this无关的回调，如定时器，数组的方法回调
不适合与this有关的回调，如事件回调，对象的方法，当然不适合并不是说不能使用箭头函数

————————————————

版权声明：本文为CSDN博主「web_angula」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：

ES6之箭头函数_前端~米老鼠的博客-CSDN博客​blog.csdn.net
7af936f04cb2f314d5f8a21d07a4c644.png
weixin_39545805
关注
【Day2】js高级：箭头函数（涉及如何简写、this指向相关知识点）
m0_46339022的博客
12-12 408
本篇文章是关于js高级知识点梳理的第二篇，会谈到有关于箭头函数的知识点。箭头函数如何简写，以及箭头函数中的this指向，都是在应用中非常值得我们注意的问题。这就是本篇文章对箭头函数的简单讲解和分析了。今天其实还需要整理一下Promise对象的相关知识点，但以前已经整理过了，故在这篇文章不再赘述。详情可见Promise对象详解（涉及回调地狱的解决、async&await的使用）。
ES6箭头函数、箭头函数与普通函数的区别
d_agege的博客
03-26 773
一、基本语法 ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子： // 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函数体 return `Hello ${name} !`; }; 可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采
箭头函数与普通函数的区别
Tiger's blog
10-08 297
1.箭头函数是匿名函数，不能作为构造函数，不能使用new 2.箭头函数不能绑定arguments，取而代之用rest参数…解决 function A(a){ console.log(arguments); } A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] let C = (...c) => { console.log(c); } C(3,82,32,11323); // [3, 82,
箭头函数写法_代码规范-箭头函数的四种写法
weixin_39909859的博客
12-21 412
在JS中箭头函数根据是否书写大小括号可分为以下四种情况。// 不省略const fun = (value) => {return value;};// 省略小括号const fun = value => {return value;};// 省略大括号const fun = (value) => value;// 省略大括号与小括号const fun = value => ...
es6-箭头函数的写法
lxs19930928的博客
12-11 297
函数有两种 函数声明(存在函数提升) function f1() { return 10 } 函数表达式(存在变量提升) let f2 = function() { return 11 } 箭头函数其实是函数表达式的简写形式 箭头函数没有自己的this,this是捕获上下文的this 箭头函数没有自己的arguments,es6的剩余参数 rest代替arguments 箭头函数没有自己的实例化对象，也就没有自己的原型 箭头函数不可以使用call apply bind，因
es6 箭头函数
boonyaxnn的博客
06-12 759
1、箭头函数一般定义匿名函数时使用： 2、写法简化： ① () => {} function (){ } ②(a,b) => a+b // 不加大括号，表示return返回值 function(a,b){ ...
JavaScript ES6箭头函数使用指南
10-17
JavaScript ES6箭头函数是ECMAScript 2015引入的一个重要特性，它提供了更加简洁的函数定义方式，同时也改变了传统函数中`this`的指向规则。箭头函数的出现，部分原因是受到CoffeeScript的影响，其核心在于简化代码...
关于ES6箭头函数中的this问题
08-27
ES6箭头函数中的this问题 ES6中新增了箭头函数这种语法，箭头函数以其简洁性和方便获取this的特性。然而，在箭头函数中this的指向却与一般函数定义的函数不同。箭头函数中的this是在定义函数的时候绑定，而不是在...
es6箭头函数this指向及优缺点
xzbqd的博客
12-17 310
es6箭头函数this指向及优缺点
ES6箭头函数和扩展实例分析
10-15
**ES6箭头函数**是JavaScript的一个重要更新，它提供了更简洁的语法来定义函数，尤其是在处理回调函数和匿名函数时。箭头函数的主要特点包括： 1. **语法简洁**： 箭头函数的基本形式是 `(参数列表) => 表达式`。...
ES6中的箭头函数
qq_64970126的博客
07-07 2509
es6中的箭头函数
【ES6】箭头函数
qq_45677671的博客
05-08 1160
箭头函数 箭头函数是ES6里面有个简写函数的语法方式 重点：箭头函数只能简写函数表达式，不能简写声明式函数 function fn(){}; //不能简写 const fun = function(){}; //可以简写 let obj = { fn :function(){}; //可以简写 } 语法：(函数的形参) => {函数体内要执行的代码} const fn = function(a,b){ console.log(a); console.log(b); } //可以使用箭
ES6——箭头函数
瓜冬瓜的博客
08-03 1173
箭头函数 ES6 允许使用“箭头”（=>）定义函数。 var fun = a => a; // 等同于 var fun = function (a) { return a; }; 用法 //有关参数的情况 var fun1 = () => alert("hello"); //没有参数的话括号不能省略 var fun2 = (a,b) => a; ...
缩短箭头函数的技巧
web前端开发
07-15 154
来源 | https://dmitripavlutin.com/JavaScript-arrow-functions-shortening-recipes/使用箭头语法，你可以定义比函数...
箭头函数写法
最新发布
weixin_63681863的博客
09-13 562
这些是箭头函数的几个常见写法，你可以根据需要选择适合的写法。需要注意的是，箭头函数有一些特殊的行为，例如绑定了词法作用域的。值，以及无法用作构造函数等。在使用箭头函数时，请确保理解其特性和适用场景。希望以上示例对你有帮助。如果还有其他问题，请随时提问。这个例子中，箭头函数包含了多行代码块，使用了大括号。当箭头函数只有一个参数时，可以省略参数周围的括号。当箭头函数没有参数时，需要使用空括号。这个例子中，箭头函数接收两个参数。来定义函数体，并且需要使用。
箭头函数的简写形式、特点、基本用法
z142536x的博客
08-17 673
箭头函数（Arrow Function）是ES6中引入的一种新的函数定义方式，它提供了一种更简洁的语法形式和更方便的作用域绑定。箭头函数通常用于简化函数的定义和使用，特别是在回调函数、数组方法（如。这是箭头函数的最基本形式，参数用括号包裹起来，后跟一个箭头（简写形式： 当箭头函数只有一个参数时，可以省略参数的括号。当箭头函数的函数体只有一条返回语句时，可以省略花括号和。箭头函数的语法形式有两种：基本形式和简写形式。
箭头函数详解
ct5211314的博客
10-25 4655
在前端项目中箭头函数是一种函数的简写方式，简化了代码，让代码看起来更加优雅，同时也是面试中被经常问到的问题。你知道ES6的新特性？...箭头函数...，那请你说一下箭头函数吧，箭头函数是ES6的新增代码，可以简化代码，解决了this的指向问题，不用再去that去接收函数外面的this了。还有呢？不知道了，下面就针对箭头函数就行一个简单的说明。 一、箭头函数的写法 var d = ( )=>9 var a = (b, c) => b+c console.log(d());//...
ES6-11箭头函数：简化回调函数，使得表达更加简洁
chenjunxing1992的博客
06-30 770
两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目
es6箭头函数--基础的this指向
caipital的博客
08-24 385
第一组比较： const obj = { name: '张三' } function fn() { console.log(this);//{ name: '张三' } return () => { console.log(this);//{ name: '张三' } } } const resFn = fn.call(obj);//改变了fn的this指向，指向obj这个对象 resFn(); 结果显示：两次打印的this都指向obj这个对象，输出结果都是{
ES6箭头函数：简化编程与减少错误
2. 代码简洁性：ES6箭头函数语法允许在函数体中只有一条返回语句时，省略`return`关键字和花括号`{}`，使得代码量明显减少。例如，对于简单的求和函数，ES5的写法是： ```javascript var sum = function(x, y) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值