箭头函数的适用场景

最新推荐文章于 2024-07-11 17:17:41 发布
最新推荐文章于 2024-07-11 17:17:41 发布
阅读量229 收藏
点赞数 3
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaowude_boke/article/details/135921088
版权
本文探讨了箭头函数在JavaScript中的优点，如在纯函数场景下的适用性，以及在多层嵌套和对象方法中的局限，强调了其对this和arguments的缺失。作者提醒在使用时注意函数作用范围和this指向问题。
摘要由CSDN通过智能技术生成

1.箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如：用在 map、reduce、filter 的回调函数定义中

2.箭头函数的亮点是简洁，但在有多层函数嵌套的情况下，箭头函数反而影响了函数的作用范围的识别度，这种情况不建议使用箭头函数

3.箭头函数要实现类似纯函数的效果，必须剔除外部状态。所以箭头函数不具备普通函数里常见的 this、arguments 等，当然也就不能用 call()、apply()、bind() 去改变 this 的指向

4.箭头函数不适合定义对象的方法（对象字面量方法、对象原型方法、构造器方法），因为箭头函数没有自己的 this，其内部的 this 指向的是外层作用域的 this

原创作者：吴小糖
创作时间：2024.1.29

小吴吴吴呀
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript 箭头函数究竟是什么？
人生代码 ---- 公众号
11-16 1262
JavaScript 箭头函数大致相当于 python 中的 lambda 函数 或 Ruby 中的 blocks。 这些是匿名函数，它们有自己的特殊语法，接受一定数量的参数，并在其封闭的作用域的上下文（即定义它们的函数或其他代码）中操作。 让我们依次分解这些部分。 箭头函数语法 箭头函数具有单一的总体结构，然后在特殊情况下可以通过多种方式简化它们。 核心结构如下所示： JavaScript 代码...
箭头函数的使用
我是谁的博客
04-11 1647
箭头函数的使用基本用法为什么要有箭头函数和普通函数的区别不绑定this不绑定arguments什么时候不能用箭头函数 基本用法 ES6 允许使用“箭头”（=>）定义函数。 var f = v => v; 上面的箭头函数等同于： var f = function(v) { return v; }; 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f ...
JavaScript：箭头函数与普通函数的区别与适用场景
孙悟空
06-02 1509
本文介绍了js中普通函数与箭头函数的区别与适用场景，并给出示例代码。
箭头函数的适应场景？
HDdgut的博客
01-20 1324
注意事项 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，函数体内没有自己的this，其内部的this指向是外层作用域的this（在箭头函数中this的指向是固定，声明的时候就静态绑定了） 不可以作构造函数，也就是不能使用new命令，否则会报错 不能使用yield命令，所以不能做Generator函数 不可以使用arguments对象，因为对象在箭头函数体内不存在。假如要使用arguments对象，则使用rest参数代替 场景： 箭头函数适合于无复杂逻辑或无副作用的纯函数场景下，
箭头函数，匿名函数，为什么用？怎么用？有什么不一样？使用场景是什么？
热门推荐
githubcurry
05-28 1万+
箭头函数的使用和一些特性 JS中的箭头函数用=>来标识。箭头函数有两个主要的优点: 更简短的函数； 更直观的作用域和this的绑定(不绑定this) 因为这些优点，箭头函数比起其他形式的函数声明更受欢迎。比如，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。 1.　即它允许使用箭头（=>）来定义函数。 如 　　var f = v =>v; 这个箭头函数就等同于: 　　var f = function (v) { 　　
ES6-7【箭头函数的实质、箭头函数的使用场景】
小管打天下的博客
04-10 947
一、箭头函数的实质 this由外层的函数作用域来决定(箭头函数的作用域是父级的作用域，不是父级) =>不能作为构造函数来使用（因为没有this） call、apply、bind无效（因为没有this） 没有arguments对象，用rest（拓展运算符）替代（因为与function不是同一种） yield 命令不能生效，在generator函数中（因为没有this） function foo(){ console.log(this) return (a) =>{
箭头函数的应用场景
stphencurry的博客
03-23 408
案例一 、点击盒子变色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <bo
ES6中的箭头函数实例详解
08-30
ES6中的箭头函数是JavaScript语言的一个重要更新，它提供了一种更为简洁的函数定义方式。箭头函数的出现使得代码...然而，由于其特性限制，箭头函数并不适用于所有场景，开发者需根据实际需求选择合适的函数定义方式。
PHP 7.4 新语法之箭头函数实例详解
10-17
箭头函数适用于那些简单的、单行的回调函数，如数据处理和过滤。在类的 `getters` 和 `setters` 中使用箭头函数也是一个潜在的发展方向，尽管目前 PHP 还不直接支持这样的用法。 ```php class Post { private $...
es6函数之箭头函数用法实例详解
10-15
ES6中的箭头函数是JavaScript语法的一大改进，它...总之，箭头函数提供了更简洁的语法，但它的`this`行为和传统函数不同，这可能导致在某些场景下产生意想不到的结果。因此，在使用时需要根据具体需求和场景谨慎选择。
ES6标准 Arrow Function（箭头函数=>）
10-15
3. **箭头函数的常见使用场景**： - 作为数组方法的回调函数，如`map()`, `filter()`, `reduce()`等。 - 作为事件处理器，由于`this`绑定的特性，箭头函数可以避免在事件处理函数中丢失上下文。 - 在React或其他...
ECMAScript6的新特性箭头函数（Arrow Function）详细介绍
09-04
在实际应用中，箭头函数特别适用于那些不需要重新绑定`this`的场景，如： ```javascript var obj = { id: "123456", handleClick: function(event) { document.addEventListener("click", e => this.doSomething...
ES6笔记 7.箭头函数的实质、箭头函数的使用场景
syhdqdzs的博客
10-24 33
ES6笔记 7
ES6箭头函数技巧
小胡哥的博客
12-08 388
关于ES6箭头函数用法 箭头函数的省略写法 关于箭头函数中的this 不能作为构造函数实例化对象 不能使用arguments对象 箭头函数的使用场景 1、箭头函数的省略写法 箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字, 通常将箭头函数赋值给一个变量,变量名字就是函数名字,通过变量名字调用函数就可以了 // 箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字, // 通常将箭头函数赋值给一个变量,变量名字就是函数名字, // 通过变量名字调用函数就可以了
ES6新特性-箭头函数
weixin_46115791的博客
08-19 1307
ES6新特性的学习一.箭头函数的基础语法二.箭头函数的高级语法三.箭头函数的this指向 一.箭头函数的基础语法 //一般语法： (参数1, 参数2, …, 参数N) => { 函数声明 } //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } (参数1, 参数2, …, 参数N) => 表达式（单一） // 当只有一个参数时，圆括号是省略的： (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参数的函数应该写成一对
【ES6】箭头函数的适用场景
在热爱技术的路上一直前行。
04-25 522
1.箭头函数适合：与this无关的回调，eg、定时器、数组的方法的回调 （1）定时器回调 （2）数组的方法的回调 let array = [11,23,24,34,44,500]; // 过滤出数组中是偶数的元素，组成新的数组 let result = array.filter(item => item % 2 === 0) console.log(result); 2.箭头函数不适合：与this有关的回调，eg、事件的回
【JavaScript进阶之旅 ES6篇 第七章】箭头函数的实质、箭头函数this指向、箭头函数的使用场景
马云
06-24 312
2、剩余参数 3、箭头函数的this指向 箭头函数的this指向根据外层函数或全局函数的作用域来决定 箭头函数的使用场景 箭头函数内部是没有this机制的，this指向是固化的，只能够通过父级作用域来获取this，闭包的this 箭头函数不能作为构造函数来使用：call、apply、bind 没有arguments对象、用rest运算符替代 在generator函数当中yield命令不会生效 二、箭头函数的使用场景 1、箭头函数不是所有场景都适用 普通函数实现： 使用
箭头函数与普通函数，以及使用场景
qq_40944918的博客
10-15 1903
箭头函数和普通函数的区别如下。 普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据所在的环境（我再哪个环境中，this就指向谁） 一针见血式总结: 普通函数中的this: this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 ‘use strict’),没找到直...
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
最新发布
meihusdk的博客
07-11 161
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
js中箭头函数的适用场景
07-12
箭头函数通常用于简化函数的定义和使用。它们适用于以下场景： 1. 简洁的回调函数：当你需要传递一个简单的函数作为回调，箭头函数可以...总之，箭头函数适用于那些简短、简洁、明确的函数，可以使代码更加简洁易懂。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小吴吴吴呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值