箭头函数直接返回对象的简写语法

原创已于 2024-10-09 15:19:02 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#箭头函数 #语法糖 #前端 #es6

于 2021-02-03 14:48:07 首次发布

本文介绍了一种使用箭头函数简化代码的技巧，通过省略 return 和花括号来缩短 [1,2,3,4].map() 的实现长度。这种简写方式可以使代码更加简洁，易于阅读。

// 菜鸟今天才发现的语法，希望更多没注意到人这种简写方式的人看到
[1,2,3,4].map(item => ({a: 1}))
// 之前的写法
[1,2,3,4].map(item => {
	return {a: 1}
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Vgbire

关注关注

3
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

JS中箭头函数写法及5种简写规则

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

02-07

857

通过掌握上述提到的箭头函数的不同写法和应用场景，开发者可以在编写高效、简洁的JavaScript代码方面迈出重要的一步。箭头函数是ES6引入的一种新的函数定义方式，它提供了一种更短的函数书写方式，并且不会创建自己的this, arguments, super或new.target。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。箭头函数没有自己的this绑定，这意味着它的this是从外部作用域继承来的，这一点在处理事件监听器或回调函数时特别有用。

ES6新特性箭头函数ArrowFunction => 案例教程

Otakami的博客

05-13

533

ES6新特性箭头函数ArrowFunction => 案例教程文章目录ES6新特性箭头函数ArrowFunction => 案例教程箭头函数Return传递多个参数返回对象1返回对象2箭头函数中的this作用域箭头函数不能用作构造器，没有prototype属性 IE不支持 Edge支持箭头函数兼容性参考地址 => 是ES6中新加的匿名函数使用基础语法如下 var defFu...

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

箭头函数的简写写法

小多的博客

12-28

2766

箭头函数 函数名 = (参数...) => {函数体} 由于函数较为简单只有一行，可简写为 const fn1 = (data) => { return data } //简写为 const fn1 = data => data 但是如果想返回一个对象直接用{}包括会默认为函数体，但又不想写 return，则可以使用({})包裹 const fn1 = data => ({name: 'Tom', data}) // data同名简写，实际是data:data ...

js箭头函数对象返回值简写问题

weixin_44524243的博客

04-07

911

es6的箭头函数现在用的是越来越多。当使用箭头函数有对象返回值时，可以简写 const func = ()=>({name:''wudada}); //表示return 一个对象{name:'wudada'} //为什么不是这样 const func = ()=>{name:''wudada}; //因为直接{}，会被解析为一系列语句，不是纯对象！！ //所以要用圆括号包裹起来(). ...

箭头函数返回对象简写

07-28

箭头函数返回对象的简写语法是将对象字面量包裹在括号中，并在括号后使用箭头函数的语法。例如： ```javascript const getObject = () => ({ key: value }); ``` 这里的箭头函数 `() => ({ key: value })` 返回一...

JavaScript-函数 箭头函数 对象

李桥桉的博客

03-31

582

当箭头函数主体代码只有一句return 语句时，可以省略。

前端箭头函数深度解读：从语法糖到实战避坑，一文吃透

最新发布

linyuzhizou的博客

09-13

1133

本文深度解析前端箭头函数的核心特性与使用场景，从语法简化到实战避坑指南。文章首先对比箭头函数与普通函数的三大本质差异（arguments对象、构造函数能力和prototype属性），重点剖析箭头函数this绑定的静态特性——继承外层作用域的this且不可修改。通过10+业务代码案例，详细说明推荐使用箭头函数的场景（数组方法回调、异步回调等）和禁止使用的情况（对象方法、构造函数等）。掌握这些关键知识点，可避免90%的常见错误，提升代码质量和开发效率。

箭头函数能创建对象嘛

03-11

另外，引用[5]提到对象可以通过字面量形式创建，所以箭头函数返回对象字面量是可行的。但需要注意，这样的对象不会绑定到箭头函数的this，因为箭头函数的this继承自外围作用域。如果对象方法需要使用this，可能需要...

浅谈Vue中render中的h箭头函数

10-16

Vue官方为了进一步简化代码，提供了一种使用ES6箭头函数的简写方式来声明render函数，即将render函数的参数.createElement简化为变量h。这样做的好处是代码更加简洁明了，特别是当render函数只返回一个元素时，可以...

使用箭头函数 返回对象字面量

业余前端的职业经历

11-09

597

其实箭头函数这个东西已经被人说了再说了基础知识就不再赘述了只是今天发现一个很有趣的现象 var a = () => { name: "zhaoyunchong" } // 返回undefined var b = ()=> { age: function() { return 18 }} // // SyntaxError: function statement requires a name 本意可能看出来可能是想返回一个对象字面量但这样真的可以吗我们只...

2022-05-15 学习记录--es6-箭头函数返回一个对象

weixin_48850734的博客

05-15

1210

es6-箭头函数返回一个对象

箭头函数返回对象字面量

weixin_30950607的博客

02-14

278

1.箭头函数返回对象字面量用params => {object:literal}这种简单的语法返回对象字面量是行不通的。 var func = () => { foo: 1 }; // 调用 func() 返回 undefined! var func = () => { foo: function() {} }; // ...

初学者关于JS引擎解析箭头函数返回单个对象的一个小问题

Running的博客

11-30

667

身为一个菜鸟初学者，写博客主要是为了督促自己好好学习再加上记录自己一些学习心得，找到一些学习的动力。好了，废话不多说，近些天偶然间刷到一道题引起我的注意，代码如下： const getList = ([x, ...y]) => [x, y] const getUser = user => { name: user.name, age: user.age } const list = [1, 2, 3, 4] const u..

es6 箭头函数 返回对象简化

weixin_42448623的博客

11-04

1005

一个参数可省括号无参数写括号一个返回值可省return //正常函数 function fun(age){ return ++age } var num = 18 var age = fun(num ) // 箭头函数 let age2 = (num) => { reuturn num*2 } ...

箭头函数中返回一个对象怎么书写？

qq_42931285的博客

10-16

935

箭头函数中返回一个对象怎么书写？

箭头函数的简写

meteorshower2013的博客

10-22

2006

今天看到这行代码，有点蒙蔽 key => ({ key, val: key }) 首页可以明确这是箭头函数 可是箭头函数不是下面这样的吗，右边怎么是个圆括号？ (params) => { statements } 我们就去查阅资料。发现了箭头函数的简写方式。简写1 参数列表只有单个参数时，左边括号（）可以省去如下 (singleParam) => { statements } // 等价于 singleParam => { statements } 简写2 函数体是返回一

箭头函数直接返回对象的简写语法，

qq_45404003的博客

05-27

364

一、箭头函数直接返回对象的简写语法 // 之前的写法 [1,2,3,4].map(item => { return {a: 1} }) 现在的写法 [1,2,3,4].map(item => ({a: 1})) 二、js中.?、??、??=的用法和含义？？？（记录一下知识点） 1.可选链(.?) 如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么? let a; let b = a.name; 2.空值合并运算...

箭头函数的不使用return 直接返回数据

qq_35859392的博客

01-05

3211

在MDNweb文档中查看Array.from使用方法看到在箭头函数中不使用return就能返回数据，对与一些简单的返回方法，可以简便写法。 Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。 console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] //...