前端箭头函数的使用

最新推荐文章于 2025-09-13 19:19:33 发布
原创 最新推荐文章于 2025-09-13 19:19:33 发布 · 1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #箭头函数学习 #js遇到箭头函数 #es6中箭头函数

箭头函数

1、箭头函数介绍

在这里插入图片描述

2、写法

在这里插入图片描述

3.箭头函数注意事项

在这里插入图片描述在这里插入图片描述

学习链接
-----------------------欢迎大家学习！

前端开发：ES6箭头函数使用
全沾软贱开发攻城狮
10-27 1万+
在前端开发过程中，函数的使用是家常便饭，那么本篇博文就来谈一下关于ES6里面的箭头函数的使用方法以及原理，方便记录和学习使用。 箭头图片来源于网络，如有侵权请联系作者删除 首先了解一下箭头函数的定义：用一个箭头来表示的函数，即用箭头“=>”定义函数。箭头函数的基本语法：函数名称 = (函数参数) => 函数体。 举一个简单的例子，let fun = () => 111 等同于 function fun() { return 111; } 接着再用普通常规函数和箭头函数.
重构之道：识别并替换不合适使用的箭头函数
九天的专栏
05-02 1610
JavaScript 自 ES6 引入了箭头函数（Arrow Function）后，因其简洁的语法和对 `this` 的词法绑定机制，迅速成为开发者喜爱的写法之一。然而，**并不是所有场景都适合使用箭头函数**。
前端箭头函数深度解读：从语法糖到实战避坑，一文吃透
最新发布
linyuzhizou的博客
09-13 1130
本文深度解析前端箭头函数的核心特性与使用场景，从语法简化到实战避坑指南。文章首先对比箭头函数与普通函数的三大本质差异（arguments对象、构造函数能力和prototype属性），重点剖析箭头函数this绑定的静态特性——继承外层作用域的this且不可修改。通过10+业务代码案例，详细说明推荐使用箭头函数的场景（数组方法回调、异步回调等）和禁止使用的情况（对象方法、构造函数等）。掌握这些关键知识点，可避免90%的常见错误，提升代码质量和开发效率。
前端（箭头函数详解）
weixin_50027754的博客
03-15 1442
1.语法格式 //普通函数 function fun1(num1,num2){ //code } //箭头函数 let fun2 = (num1,num2) =>{ //code } 住： 一.箭头函数只能用赋值式写法，不能用声明式写法 二.如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号 三.如果函数体只有一句话，可以不加花括号 四.如果函数体没有括号，可以不写return，箭头函数会帮你return 2.箭头函数中的this默认绑定外层this 当我们使用箭头函数
前端知识点---箭头函数详解(javascript)(ES6)
2302_80171619的博客
11-23 942
那如何把aaa bbb ccc创建成li并插入到页面的ul里面。把aaa bbb ccc创建成li并插入到页面的ul里面。上面将的是数组 , 如果是返回值是一个对象还能这样写吗。满足了 return只有一句话的标准 试着改写。上面说了只有一个形参的时候可以省略大括号。
前端开发--箭头函数
weixin_51059952的博客
08-23 1621
但是上面的写法是错误的，因为这时大括号被解释为代码块，解决的办法是：在对象外面加上小括号,上面我们写的代码中，发现函数体中只有一条语句，那么这时是可以省略大括号的。通过上面的代码，可以发现在箭头函数中直接使用this是没有问题的。把上面的代码转换成ES5的写法，发现和我们前面写的代码是一样的。通过上面的代码，可以发现传统方式来定义函数的时候，比较麻烦。将上面的代码修改一下，要求延迟1秒钟以后，再输出用户名的名称。在给构造函数添加原型函数时，如果使用箭头函数，其中的。,所以箭头函数中使用的this指的就是。
箭头函数
前端-黎姿
03-15 451
一、箭头函数好处： 简便 this指向 箭头函数与包围他的代码共享一个this,比如var self=this或var that=this类似这种引用外围this的模式，如果借助=>箭头函数，就不需要引用这种模式了。箭头函数相当于匿名函数，简化了函数定义。 二、格式 3. 箭头函数只包含了一个表达式，所以可以省略{}和return x=>x+1; function(x){re...
前端面试题：箭头函数和普通函数的区别？ 箭头函数为什么不能用作构造函数？
薇z的博客
06-29 920
前端面试题：箭头函数和普通函数的区别？ 箭头函数为什么不能用作构造函数？
前端面试系列-JavaScript-箭头函数(与普通函数的区别)
LYFlied的博客
03-25 5315
文章目录一、箭头函数二、与普通函数的区别1.箭头函数不会创建自己的this2.箭头函数继承而来的this指向永远不变（重要）3.call()、apply()、bind()无法改变箭头函数中this的指向4.箭头函数不绑定arguments,取而代之用rest参数…解决5.不能使用new操作符(作为构造函数使用)6.不能使用原型属性7.不能简单返回对象字面量8.箭头函数不能换行 一、箭头函数 // 箭头函数 let fun = (name) => { // 函数体 return `Hel
每日一个前端小知识之箭头函数
m0_74924621的博客
10-11 400
arguments式函数内部的一个类似数组的特殊对象，但是箭头函数没有arguments对象（1）箭头函数语法更简洁清晰，快捷。（2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this（3）箭头函数的this在定义时就定了，继承外一层的普通函数（4）如果箭头函数外一层再外一层都不能找到普通函数，在严格和非严格情况下都会指向window对象（5）箭头函数的this指向全局，使用arguments会报未声明的错误。
个人学习-前端相关（2）:ECMAScript 6-箭头函数、rest、spread
dopapapa的博客
04-27 217
rest参数，在形参上使用，和java中的可变参数几乎一样；spread参数，在实参上使用rest，可以理解为rest的逆运算。一个简单测试Demo，主要验证箭头函数中的this是外层上下文环境中的this，页面点击后依次变红、绿，但不会黄。ES6允许使用箭头函数，语法类似java中的lambda表达式。以下案例介绍了基本使用，其中合并对象比较常用。
前端学习笔记（箭头函数）
welkin_fyds的博客
11-29 687
有关js中箭头函数的学习笔记
【前端每日基础】day23——箭头函数
modaoshi51991的博客
05-27 631
箭头函数是ES6（ECMAScript 2015）引入的一种新的函数表达式语法。相比传统函数，箭头函数有简洁的语法，并且不绑定自己的this、arguments、super或new.target。箭头函数最显著的特点之一是它不会创建自己的this上下文，而是从其外层上下文中继承this。简洁的函数表达式：当需要简洁的函数表达式时，箭头函数提供了更为简便的语法。保持this的上下文：在需要访问外层this的情况下，箭头函数非常适合。简化回调函数：箭头函数在编写简短的回调函数时特别有用。
【前端】（三）ES6新特性之箭头函数
tiandaochouqin_1的博客
08-20 275
这里写目录标题箭头函数写法好处箭头函数的this指向拓展：this指向问题（1）默认绑定规则（2）隐式绑定（3）隐式绑定丢失的情况推荐 箭头函数 箭头函数即使用箭头表示的函数。 匿名函数才能改写为箭头函数。 写法 常见的函数写程箭头函数： let num = function (a) { return a*2; } //写成箭头函数形式，function(a) 变成 =(a)=> let num = (a) => { return a*2 } //当只有一个参数的时候，省略()， let
WEB前端：ES6（3）：箭头函数
weixin_43731793的博客
11-11 575
// // 原来的函数使用 // let fn = function(a, b) { // console.log(a + b); // } // fn(4, 6); // 箭头函数 无function关键字 在函数参数与函数体之间用箭头连接 let fn = (a, b) => { console.log(a + b); } fn(1, 2); // 当函数只有一个...
前端JavaScript篇之箭头函数与普通函数的区别、如果new一个箭头函数的会怎么样、箭头函数的this指向哪⾥？
星辰迷上大海的博客
02-02 1534
箭头函数和普通函数是 JavaScript 中的两种不同的函数形式，它们在语法和行为上存在一些区别。
JS中this的指向，箭头函数this的指向
qq_43303102的博客
01-22 661
除箭头函数外函数的this在其执行时才被确定，指向其调用者。 1. 当函数作为方法被调用时指向它的调用者 例如 let obj = { a: 2, b: function() { console.log(this); console.log(this.a); } } let fn = obj.b; obj.b(); //obj 2 fn(); //window undefined 等价window.fn() 第一种情况下该函数是被obj对象调用的
简单说 JavaScript的箭头函数
FEWY的博客
11-12 3114
说明 箭头函数本质还是函数，我们来看看他与JavaScript中普通函数的区别，先看看写法上的区别。 解释 写箭头函数，我们记住一个顺序就好，参数、箭头、函数体、这个顺序记住就足够了，参数、箭头、函数体、这三个是必须的，函数名可以没有，但这三项必须有，一些简写的方式也是简写这三项里的东西。 简写 1、只有一个参数时，() 可省略 //不简写 va...
前端箭头函数
09-13
在前端开发中，箭头函数是 ES6 引入的一种简洁的函数表达式语法，广泛应用于 React 开发等场景，具有独特的特性和用途。 ### 介绍 箭头函数是现代 JavaScript（ES6）中的一种简洁的函数表达式语法。它不仅语法简洁，还具有独特的上下文绑定特性，在处理事件、回调和组合函数时非常有用[^1]。 ### 用法 - **单行语句**：当箭头函数只有一个参数且函数体只有一条语句时，可省略括号和 `return` 关键字。例如： ```javascript const square = num => num * num; console.log(square(5)); // 输出 25 ``` - **多行语句**：若函数体包含多条语句，则需使用花括号 `{}` 包裹，并显式使用 `return` 语句。例如： ```javascript const sum = (a, b) => { const result = a + b; return result; }; console.log(sum(3, 4)); // 输出 7 ``` - **在对象方法中使用**：在对象方法里使用箭头函数可以避免 `this` 指向问题。例如： ```javascript let person = { userName: 'wangwu', getUserName() { setTimeout(() => { console.log(this.userName); }, 1000); } }; person.getUserName(); // 一秒后输出 'wangwu' ``` ### 特点 - **简洁的语法**：与传统函数相比，箭头函数的语法更加简洁，能通过一行代码实现简单功能，简化了函数定义[^1][^3]。 - **上下文绑定特性**：箭头函数没有自己的 `this`，它的 `this` 继承自父级作用域，在处理事件、回调时能保持 `this` 指向不变，避免了传统函数中 `this` 指向问题带来的困扰[^1][^2]。 - **无 `arguments` 对象**：箭头函数没有自己的 `arguments` 对象，如果需要访问参数，可使用剩余参数语法。例如： ```javascript const printArgs = (...args) => { console.log(args); }; printArgs(1, 2, 3); // 输出 [1, 2, 3] ``` - **不能作为构造函数**：箭头函数不能使用 `new` 关键字来创建对象，因为它没有自己的 `this` 和 `prototype` 属性[^2]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值