箭头函数和解构赋值混用

发表于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])

相关推荐

越年轻，就越不能跟丑事妥协——纪德分享个前端的JSON.stringify以及parse小技巧 MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON 例如我们此处使用JSON.stringify({name:'VampireAchao',age:21})可以将对象转为json 如果我们只想要name值，则可以传入第二个参数，可以接受一个数组类型 1JSON.stringify({name:'VampireAchao',age:21},['name']) 转出来则是'{"name":"VampireAchao"}' 如果我们要自定义规则，则可以传入一个函数类型，第一次调用时value为我们的数据对象，属于由外向内调用 1234567891011121314let times = 0;const json = JSON....

jquery根据属性选择

有信仰的人不会孤独。——阿列克谢耶维奇分享一个jquery选择器的小技巧我们可以通过自定义属性键值选中一个元素例如如下元素： 1<div ruben="vampire">阿超</div> 然后我们通过ruben=vampire选中这个div 就可以如下写法： 1let vampire = $('div[ruben="vampire"]') 我们可以简单测试一下输出里面的内容 12345<div ruben="vampire">阿超</div><script type="text/javascript"> let vampire = $('div[ruben="vampire"]') console.log("vampire: ", vampire.text());</script> 效果

uniapp播放音频

人们不太看重自己的力量——这就是他们软弱的原因。——高尔基播放音频的代码很简单： 123const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/img/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); 官方文档： https://uniapp.dcloud.io/api/media/audio-context 除了播放、暂停、停止等也都能实现完整代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<template> <view class=...

勤奋是一种可以吸引一切美好事物的天然磁石。 ——罗•伯顿前端除了localStorage还有sessionStorage localStorage即便关闭了浏览器，再次打开该页面仍然存在但sessionStorage的作用于仅仅局限于当前标签页或通过当前标签页中的点击事件打开的新页面 localStorage一般用于用户token储存、主题设置等需要稍微长期持久化的场景 sessionStorage一般用于刷新页面记住分页页码、记住检索条件等关闭标签页即销毁的场景 sessionStorage的api和localStorage的api非常相似： 12// 存sessionStorage.setItem("ruben","ruben") 取出来： 12// 取sessionStorage.getItem("ruben")

uniapp导入样式坑

街灯已经燃起来了，方形的玻璃罩子里，清油灯的灯光在寒风中显得更孤寂，灯柱的影子淡淡地躺在雪地上。——巴金今天在进行H5开发，遇到一个坑我在style这里引入css样式文件但注意不能在@import上方写css代码当我在@import写完css代码可以明显看出样式失效了之后大家务必注意这个坑。。。

js让光标选择节点中部分文本

我走得很慢，但我从不后退。——林肯如题，代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id="container">ruben</div> <button>r</button> <button>u</button> <button>b</button> <button>e</button> <button>n</button> &...

阿超

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

数据加载中