对箭头函数的了解,箭头函数的优点?

已于 2022-03-15 20:05:12 修改
阅读量841 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-03-15 20:04:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59634149/article/details/123409374
版权

箭头函数:

箭头函数都是匿名函数,ES5匿名函数的语法糖,并且没有自己的this,arguments,super或new.target。

它的优点是:

(1)简洁的语法。

(2)隐式返回,如 下面的代码可以去掉return,代码一到一行,减少代码量numbers.map((number)=>number*2)

(3)解决了this的指向问题,原生的写法this指向的是调用者,箭头函数this绑定的是定义时的那个对象。如果有对象嵌套的情况下,则this绑定到最近的一层对象上

它的缺点是:

(1)做为构造函数的时候不能使用箭头函数

(2)真正需要this的时候如给元素绑定click事件的时候,执行的回调函数不能使用箭头函数。

(3)我们需要使用arguments对象的时候不能使箭头函数。箭头函数中没有arguments对象。

(4)对象的方法也不可以使用箭头函数

温柔的小新
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
箭头函数的特点/作用
lan128lan的博客
04-09 7136
一、箭头函数的特点 箭头函数是匿名函数 1. 箭头函数使表达更加简洁，隐式返回值 const isEven = n => n % 2 === 0; const square = n => n * n; 箭头函数的一个用处是简化回调函数，如下： // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数...
箭头函数在vue中的妙用
qyp_1的博客
10-09 1236
前言 这篇文章是带大家认识一个非常好用的小技巧，是对箭头函数的理解，我是在进行vue项目开发的时候碰到的，所以在这里整理一下分享给大家，如果有不对或者不恰当的地方，大家可以在下方评论，我们一起交流。 举几个例子 1、在对象中，看图 没有用箭头函数的情况下是还是指向这个对象中ccc，如果我们用上箭头函数的话 那么指向的就是data里面的值了 2、使用回调函数的时候 用普通函数的话就是找不到，报错，当然这里可以声明that对this的一个保存，但是箭头函数也可以解决这个问题，会让代码变得更加的简洁、
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 7952
常规遍历方法 for i forEach 箭头函数=> for of 遍历 for in 遍历 for in 遍历的 是 数组下表 ,适合 遍历集合 箭头函数=> ES6标准新增了一种新的函数：Arrow Function（箭头函数） 基础语法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“func
ES6箭头函数
T3165919332的博客
04-21 241
不绑定 arguments 对象：在箭头函数中，arguments 对象被绑定到父级函数的 arguments 对象。明确的 this 值：在普通函数中，this 的值取决于函数的调用方式。但是，在箭头函数中，this 的值被设置为创建该函数的上下文的 this 值。使用箭头函数可以让代码简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有this，this指向父级。总之，使用箭头函数可以使代码更加简洁、易于阅读和理解，并且避免了由于 this 值错误导致的常见问题。
vue2.0使用ES6语法的箭头函数对this作用域的理解
若晨工作室
09-19 1万+
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，导致浏览器报错。 部分代码： test:function(){                 let _self = this;//在外层函数内定义变量存储当前vue实例。 this.$axios.post("url",{ }).then(function(res){
js代码-JS 函数柯里化demo
07-16
可以使用`bind`或箭头函数来解决这个问题。 - **性能影响**：由于柯里化涉及函数的嵌套调用，可能会对性能产生一定影响，尤其是在大量参数传递时。 在实际开发中，像Lodash和Ramda这样的库提供了内置的柯里化函数，...
面向Java开发者的函数式编程
04-11
了解并掌握这些函数式编程概念和实践，对于Java开发者来说，不仅可以提升代码质量，还能适应现代软件开发的需求，尤其是在大数据、云计算等领域。通过阅读《面向Java开发者的函数式编程》这本书，你可以深入理解如何...
matlab开发-增强箭头框
08-24
标题“matlab开发-增强箭头框”指向了对MATLAB中标准箭头功能的扩展或优化，旨在提供更强大的功能和更好的视觉效果。描述中提到，“更好的替代方法是使用ErrorBar（）来实现灵活性和避免使用Legend（）时出错”，这...
JQ 最少代码实现带数字和箭头的焦点图
04-26
首先，让我们了解焦点图的基本结构。它通常包含一个容器（如div）来容纳所有的图片或内容，以及两个箭头按钮（一个用于向前，一个用于向后）和一组数字指示器。每个数字对应于焦点图中的一个项目，用户可以点击这些...
JS性能优化实现方法及优点进行
10-14
- 利用ES6及更高版本的新特性，如箭头函数、模板字符串、let和const等，可以提高代码可读性和性能。 9. **模块化和按需加载**： - 使用模块系统（如CommonJS、ES6模块或Webpack）将代码分割成小块，按需加载，...
vue中的箭头函数的作用
Ying_yy的博客
08-08 1907
首先，在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory以及destoyed）里使用this，this指向调用它的Vue实例，即（new Vue）。 其次，箭头函数没有自己的this，它的this是继承而来；默认指向在定义它时所处的对象（宿主对象），而不是执行时的...
vue——箭头函数
weixin_42457563的博客
08-31 4004
//第一个例子： function a(b) { return b+1; } //等同于下面这个箭头函数（去掉function函数，参数只有一个可以省略小括号，小括号与大括号之间有一个箭头，如果没有大括号则直接是返回值，有大括号必须写return） let a = b => b+1; //第二个例子： function a(b) { return function (c)...
vue中的箭头函数 =>
热门推荐
qq_39990827的博客
05-31 4万+
基本语法： ES6允许使用“箭头”（=>）定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 //无形参 var f = () => 5; // 等同于 var f = function () { return 5 }; //多...
Es6箭头函数的好处
露露
09-10 1万+
（1）简明的语法如下： const numbers=[1,2,3,4,5]; const double=numbers.map(function(number){ returnnumber*2 }) console.log(double); //[2, 4, 6, 8, 10] 使用箭头函数改写： let numbers1=[1,2,3,4,5]; let double1=nu...
Javascript箭头函数的优势在哪里
Fundebug博客
11-07 2553
译者按: 看上去只是语法的变动，其实也影响了this的作用域。 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性，本文采用意译而非直译。 本文我们介绍箭头(arrow)函数的优点。 更简洁的语法 我们先来按常规语法定义函数： function funcName(params) { return param...
箭头函数有哪些特点?
weixin_50004028的博客
08-25 1068
箭头函数有哪些特点? 箭头函数是匿名函数 箭头函数的this指向外层作用域的this的值 箭头函数不绑定argument是，而用剩余参数…rest解决 箭头函数不能用作构造函数 箭头函数没有原型属性
JS箭头函数的优势在哪里
qq_43621905的博客
03-27 285
本文我们介绍箭头(arrow)函数的优点。 更简洁的语法 我们先来按常规语法定义函数： function funcName(params) { return params + 2; } funcName(2);// 4 该函数使用箭头函数可以使用仅仅一行代码搞定！ var funcName = (params) => params + 2; funcName(2);// 4 是不是很酷！虽...
箭头函数和普通函数的区别
work hard
07-25 1万+
面试时被问到箭头函数和普通函数的区别。。。 -_-|| 借用别人的一个栗子： function make () { return ()=>{ console.log(this); } } var testFunc = make.call({ name:'foo' }); testFunc(); testFunc.call({ name:'bar' }); Object
ES6折腾记- 箭头函数【Arrow function】要点及脱坑点
CRPER
09-06 9697
ES6的箭头函数的特点：永远是匿名函数，This指向于obj内部；
react 箭头函数
最新发布
06-13
React中的箭头函数是ES6引入的一种简洁的函数定义方式，特别适合用在JavaScript的回调和表达式中，因为它们提供了一种更直观、简洁的语法。在React中，箭头函数常用于作为组件的方法，或者作为事件处理函数。 使用箭头函数的优点包括： 1. **简洁**：箭头函数的语法比传统的函数定义更简短，如 `(params) => { statements }`，没有`function`关键字，也没有`return`关键字（如果函数体只有一条返回语句）。 2. **this指向明确**：箭头函数内部的`this`值不会绑定到定义它的上下文，而是绑定到调用它的地方，这在处理异步回调时避免了`this`指向的混乱。 3. **不需要arguments对象**：箭头函数没有自己的`arguments`对象，可以直接使用`...rest`语法来获取剩余参数。 在React中，箭头函数经常用于短小、不需要访问作用域外部`this`的场景，例如在`render()`方法中： ```jsx render() { return ( <div> {items.map(item => <p key={item.id}>{item.name}</p>)} </div> ); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值