箭头函数和解构赋值混用

发表于2021-10-25|更新于2026-02-24

|浏览量:

一个人的礼貌是一面照出他的肖像的镜子。——歌德

我们在前端对数组进行操作时，如果使用map函数，编写的箭头函数其实也是可以解构的

例如经常遇到的，将一个对象数组中的属性，更换另一个属性名，用于给vue组件传值

写法如下：

1	[{name:'achao',id:1},{name:'阿超',id:2}].map(({name:username,id:userId})=>({username,userId}))

注意的是，结构赋值需要打括号，下方再举一个例子，这里用flatMap收集全部的name和id直接变为一个数组

1	[{name:'achao',id:1},{name:'阿超',id:2}].flatMap(({name,id})=>[name,id])

相关推荐

在创作家的事业中，每一步都要深思而后行，而不是盲目瞎碰。 —— 米丘林 https://github.com/yanzhenjie/NoHttp NoHttp：为 Android 提供高效 HTTP 协议支持的框架在 Android 应用开发中，网络请求是不可或缺的一部分。虽然 Android 提供了基本的网络请求工具（如 HttpURLConnection 和 OkHttp），但它们的使用复杂性较高。NoHttp 是一个轻量级的 HTTP 框架，旨在简化网络请求的实现，同时提供丰富的功能和灵活性。什么是 NoHttp？NoHttp 是一个为 Android 平台设计的网络请求框架，支持标准的 HTTP 协议，并提供多种缓存模式。它的底层架构允许动态切换不同的网络请求实现，如 OkHttp 和 HttpURLConnection，从而为开发者提供了高效且灵活的网络请求解决方案。核心特点：支持多种缓存模式：包括不缓存、仅缓存、网络优先等模式。动态底层切换：可以在 OkHttp 和 HttpURLConnection 之间自由切换。轻量级：专为 Android 设计，...

模板字符串

生活不是苦难，也不是享乐，而是我们应当为之奋斗并坚持到底的事业。——托克维尔这种东西那是相当的简单啊 1234567891011# JavaScript模板字符串使用var name = "achao";console.log(`我是${name}`);var number = 0;console.log(`今年${(number + 38) / 2}`);var word = "模板字符串";console.log(`${name}说：\'${word}\'那不是一般的香\n${rubenSaid()}`);function rubenSaid() { return `ruben说：${name}说的对!`;} 代码执行结果

很奇怪，我们不屑与他人为伍，却害怕自己与众不同。——保罗·科埃略的《韦罗妮卡决定去死》今天又来分享个好东西：https://browserify.org/ 这个玩意儿可以帮我们把npm下载的依赖，使用script标签引入：先安装： 1pnpm install -g browserify 比如我们引入一个outils 1pnpm i outils 然后编写一个main.js 12345const outils = require('模块名')window.模块名 = 模块名// 例如const outils = require('outils')window.outils = outils 生成 123browserify main.js -o [文件名]# 例如browserify main.js -o bundle.js 然后我们引入这个js试试 1<script src="bundle.js"></script> 运行一下，可以看到我们能在控制台拿到，说明引入成功有朋...

vue结合elementUI进行快速开发

人生最重要的不是努力，不是奋斗，而是抉择。我们引入一个elementUI 1cnpm i element-ui 然后在main.js中引入我们来做个测试，首先在页面中的methods中定义个welcome方法 123456789methods: { welcome() { this.$message({ showClose: true, message: "欢迎", type: "success", }); },}, 然后在created中调用该方法进入home页面，刷新可以看到效果了那我们再引入个导航栏首先创建header.vue 然后编写导航栏 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<...

一个人能在鼠疫和生活的赌博中所赢得的全部东西，就是知识和记忆。——《鼠疫》我们除了使用indexOf判断字符串/数组是否包含某字符/元素还可以使用includes 区别在于数组判断中indexOf对NaN值处理会错误，而includes不会，例如：这里显示-1说明没有匹配到而使用includes：可以看到成功匹配字符串也可以使用includes 非常的方便我们可以用prototype获取原型对象然后再调用 1Array.prototype.includes.call([1,2,3,4],1) 还是蛮方便的

前端传递参数后端接收不到的坑

前两天跟小伙伴一起做项目的时候遇到一个问题我们前端同志传递过来的参数无论如何也接收不到，debug发现根本没有传进来，而前端明明传了后来在哥们儿的帮助下发现原来是参数名的问题…. 用的是代码生成器，生成的javabean的属性名是这样的uname 而生成的getter/setter方法名是这样的… 123456789101112131415161718/** * 获取活动名称 * * @return 活动名称 */public String getEName() { return this.eName;}/** * 设置活动名称 * * @param eName * 活动名称 */public void setEName(String eName) { this.eName = eName;} 直接导致参数接收不到解决办法是用 12345@PostMapping("/event/add")public AjaxJson addEvent(@RequestBody Map...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中