箭头函数的{}和()是不同的

最新推荐文章于 2025-02-21 12:00:00 发布

原创最新推荐文章于 2025-02-21 12:00:00 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

14 篇文章

订阅专栏

es6

4 篇文章

订阅专栏

探讨JavaScript中数组map方法的使用，特别是结合条件语句进行元素修改的应用场景。通过具体示例，对比不同语法糖在功能实现上的细微差别。

users.map( user => { user.isVIP ? {...user, balance: user.balance + 10} : user } )
users.map( user => ( user.isVIP ? {...user, balance: user.balance + 10} : user ) )

上面两者是不同的，一个是运算，一个是直接返回

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guolinengineer

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

深度剖析 JS 的箭头函数 = ＞与普通函数 function 的区别

czjl6886的博客

02-11

5705

ES6 中添加了箭头函数的规范，在常用的前端框架，如 Vue，也会经常使用到箭头函数，今天我们就来深度学习箭头函数(arrow function)。本文主要介绍箭头函数的概念，重点介绍它与普通函数(function)的区别，包括基本语法、this指向、使用场景等。

「经典题」箭头函数和普通函数的区别

王春燕的博客

05-09

719

目录一.外形不同：二.箭头函数都是匿名函数三.箭头函数不能用于构造函数，不能使用new 四.箭头函数中this的指向不同 1.箭头函数本身不创建this 2.结合call()，apply()方法使用 3.箭头函数不绑定arguments，取而代之用rest参数…解决 4.其他区别 5、总结：五、箭头函数的注意事项及不适用场景一.外形不同： 箭头函数使用箭头定义，普通函数中没有代码如下： // 普通函数 function func(){ // code }

1 条评论您还未登录，请先登录后发表或查看评论

详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

weixin_34347651的博客

03-21

674

箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API，大部分同学却对它的了解程度还是不够深... 普通函数和箭头函数的区别： 箭头函数的this指向规则： 1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype...

箭头函数

weixin_68258851的博客

07-12

231

箭头函数

普通函数function和箭头函数ES6 ()=」{}的区别

kjssjj12的博客

07-03

400

~~ 普通函数function和箭头函数ES6 ()=>{}的区别 ~~ 箭头函数： let fun = () => { console.log('lalalala'); } 普通函数： function fun() { console.log('lalla'); } 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。（1）箭头函数

箭头函数（）=>（）

weixin_30621711的博客

07-26

168

在javscript中，关于this最困惑的应该是，同一个函数，当在不同的上下文进行调用的时候，this的值就可能会不同。也就是说，this的值是通过函数调用表达式（也就是函数被调用的方式）的caller所提供的说通俗点 this 是在函数运行时自动生成的一个内部指针，它指向函数的调用者。　　 箭头函数有些不同，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)，...

js代码-014面试题--普通函数与箭头函数的区别

07-16

箭头函数有几个显著的不同点： 1. `this`值：箭头函数并没有自己的`this`，它会继承外层作用域的`this`。这意味着在箭头函数内部，`this`总是指向定义时所在的作用域，而不是调用时的作用域。 2. `arguments`对象：...

深入理解JavaScript 箭头函数

10-16

这意味着在箭头函数中，this值是在函数定义时确定的，与普通函数不同，普通函数的this值是在调用时确定的。这就解决了传统JavaScript中函数的this指向问题，因为函数在不同的上下文中被调用时，其this值可能会有所...

在 Vue3 中使用箭头函数，不同场景下的用法说明

繁若华尘的博客

02-21

731

合理选择函数类型，可以避免 this 指向错误，同时保持代码简洁性。

PHP 7.4 新语法之箭头函数实例详解

10-17

箭头函数提供了一种更加简洁的方式来定义闭包，减少了冗余的 `function` 和 `return` 关键字。 ### 箭头函数的定义 箭头函数以 `fn` 关键字开始，后跟参数列表，参数和返回类型可以进行类型暗示。接着是一个 `=>` ...

箭头函数和普通函数

khadijiah的博客

11-11

163

箭头函数可以让setTimeout里面的this绑定定义时所在的作用域，而不是指向运行时所在的作用域，举个栗子： functionTimer(){ this.s1=0; this.s2=0; setInterval(()=>{ this.s1++; },1000); setInterval(function(){ th...

箭头函数箭头后面使用(), 还是({}), 还是什么括号都不使用

棠樾的博客

03-15

782

1.使用()，当箭头后面跟的是JSX表达式时，只需要使用() 2.使用 ({})，当箭头后面返回的是一个对象时，需要使用({}) 3.什么括号都不使用，当箭头后面只有一条语句时，可以直接将该语句写在 => 后面总结：在箭头函数中(xxx) 相当于 { return (xxx)} ...

es6 的箭头函数 =>

热门推荐

现在学习也不晚

11-29

1万+

1 基本用法ES6 允许使用 “ 箭头 ” （=>）定义函数。var f = v => v; //上面的箭头函数等同于： var f = function(v) { return v; }; //如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f = () => 5; // 等同于 var f = function () { return 5 }...

箭头函数和普通函数的区别

weixin_45677987的博客

05-11

371

1： 箭头函数和普通函数区别？构造函数（function）可以使用new 生成实例，那么箭头函数可以吗？为什么？ 1.1： 1： // (ES6 中每一个函数都可以使用形参赋默认值和剩余运算符) // 普通函数 function fn (x) { return function (y) { return x + y } } // 箭头函数 let fn = x => { return y => { return x + y } }...

箭头函数和普通函数的区别

qq_51677397的博客

09-05

1632

箭头函数和普通函数的区别一.外形不同：箭头函数使用箭头定义，普通函数中没有代码实例如下： // 普通函数 function func(){ // code } // 箭头函数 let func=()=>{ // code } 1 2 3 4 5 6 7 8 二.箭头函数都是匿名函数普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。代码实例如下： // 具名函数 function func(){ // code } // 匿名函数 let func=function(){

ES6特性：箭头函数

Jester的博客

03-12

473

ES6允许使用"箭头"（=>）定义函数。基本语法：参数=>函数体 var f = v => v; //等价于 var f = function(v){ return v; }; 如果箭头函数不需要参数或需要多个参数，需要使用（）括起来 var f = () => 1; //等价于 var f = function () { return 1 }...

js中箭头函数和普通函数区别

weixin_43190804的博客

05-25

5017

一.箭头函数和普通函数 箭头函数相当于匿名函数，并且简化了函数定义。 箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。 let fun = () => { console.log('111'); } function fun() { //普通函数 console.log('123'); } 二、箭头函数和普通函数的区别 1. 箭头函数不能作为构造函数，而普通函数可以：箭头函

一篇讲透：箭头函数、普通函数有什么区别

~~~

12-25

1万+

本文主要总结了箭头函数和普通函数的几大区别，箭头函数是ES6（ECMAScript 6）新增的使用箭头（=>）语法定义函数表达式的能力。任何可以使用函数表达式的地方，都可以使用箭头函数，并且它的语法比传统的函数表达式更加简洁。箭头函数虽然语法简洁，但也有一些场合不适用，需要根据不同的场景选择使用合适的函数。

js箭头函数和普通函数

最新发布

09-06

JavaScript 中箭头函数和普通函数在定义、语法、特性等方面存在诸多差异，具体对比如下： ### 定义与语法 - **箭头函数**：相当于匿名函数，简化了函数定义。有两种格式，一种只包含一个表达式，可省略 `{ … }` 和 `return`；另一种包含多条语句时，不能省略 `{ … }` 和 `return`。例如： ```javascript // 单个表达式 const add1 = (a, b) => a + b; // 多条语句 const fun = () => { console.log('111'); } ``` - **普通函数**：使用 `function` 关键字定义。例如： ```javascript function add2(a, b) { return a + b; } ``` ### 特性对比 - **构造函数使用**：箭头函数不能作为构造函数，即不能使用 `new` 关键字调用；普通函数可以作为构造函数。例如使用普通函数创建构造函数： ```javascript function Person(name) { this.name = name; } const person = new Person('John'); ``` 而箭头函数不能这样使用，因为它没有自己的 `this` 绑定机制为新对象分配属性 [^1][^3]。 - **`this` 指向**：普通函数的 `this` 依赖于调用方式，并在不同上下文中表现出不同的绑定行为；箭头函数则根据定义时的词法作用域来绑定 `this`，没有自己的 `this` 绑定，会捕获其所在上下文的 `this` 值，在箭头函数中，`this` 始终指向定义时所在的对象，而不是调用时的对象 [^2][^5]。 - **`arguments` 对象**：普通函数有 `arguments` 对象，它是一个类数组对象，包含了函数调用时的所有参数；箭头函数没有 `arguments` 对象 [^3]。 - **作为 `Generator` 函数**：普通函数可以通过 `function*` 语法定义为 `Generator` 函数；箭头函数不能用作 `Generator` 函数 [^3]。 ### 特点总结 - **箭头函数**：语法简洁，适合简单的逻辑处理，特别是在回调函数中使用能使代码更简洁。但由于其 `this` 指向和缺少 `arguments` 对象等特性，使用场景相对受限，不适合用于需要动态 `this` 绑定、作为构造函数或使用 `arguments` 对象的情况。 - **普通函数**：功能全面，可作为构造函数、`Generator` 函数，有自己的 `this` 绑定和 `arguments` 对象，适用于各种复杂的场景，但语法相对繁琐。