箭头函数和解构赋值混用

发表于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/galaxy-s10/billd-live Billd Live：基于 WebRTC 的开源在线互动直播系统@galaxy-s10/billd-live 是一个开源、高可定制性的在线互动直播系统。它采用现代前端技术栈，结合 WebRTC 实时音视频传输和 Node.js 服务端，支持多人连麦、弹幕互动、屏幕共享、录制回放等丰富功能，适用于教育培训、在线会议、远程协作、娱乐直播等多种场景。项目简介Billd Live 致力于为开发者和团队提供一套可自由扩展、二次开发友好的 Web 端直播解决方案。项目结构清晰，模块化强，既适合用作生产环境的直播/会议系统，也适合用作学习 WebRTC、Socket.io、前后端分离架构的技术参考。技术栈前端：Vue3、Vite、TypeScript、Element Plus 实时音视频：WebRTC 通信：Socket.io（信令服务器） ...

安全密码正则

当你回首往事时，不因碌碌无为而悔恨，不为虚度年华而羞耻，那你就可以很骄傲地和自己讲，你不负此生! 今天分享一个密码的正则，密码必须包含大、小写字母、数字、特殊符号至少三种,且长度为8-20 1^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$ javascript代码 123if (!(/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8...

天可补，海可填，南山可移。日月既往，不可复追。——曾国藩本篇博客针对新vue2项目，老项目就先不说了哈哈(坑太多) 首先新建一个vue2项目 1vue create simple-vue2-vite 选择Default ([Vue 2] babel, eslint) 1234567891011success Saved lockfile.Done in 3.92s.⚓ Running completion hooks...📄 Generating README.md...🎉 Successfully created project simple-vue2-vite.👉 Get started with the following commands: $ cd simple-vue2-vite $ yarn serve 安装完毕后我们进入，执行 12cd simple-vue2-viteyarn serve 可以看到正常运行：我们首先安装vite 1pnpm i -D vite vite-plugin-vue2 根目录新建一个vite.config....

如何给博客添加看板娘（二）

只有跨越了来自人类自身恐惧的人，才有资格被称为站在顶峰的人。我是这样认为的。——迪奥·布兰度这次就非常简单啦首先你得准备模型文件然后把这段代码粘贴过去 1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="https://VampireAchao.github.io/js/live2dcubismcore.js"></script><script src="https://VampireAchao.github.io/j...

export default和module.exports

我期望理解，但是也慢慢地感受到了一种责任，给予比接受伟大，去爱比被爱伟大。 ——海明威我们在vue项目中创建两个js 在util.js中写入 123export default { ruben: 'ruben'} 在api.js中写入 123module.exports = { vampire: 'vampire'} 我们再来一个页面中使用两种方式引用 123456789101112131415<script>import util from '@/common/util.js';import api from '@/common/api.js'const util1 = require('@/common/util.js')const api1 = require('@/common/api.js')export default{ created(){ co...

vue2使用vite过渡

君子藏器与身，待时而动。——佚名项目介绍 vite-plugin-vue2 是一个 Vite 插件，专门用于在 Vite 项目中支持 Vue 2。Vite 是一个基于 ES Module 的现代构建工具，它以极速启动、模块热替换（HMR）和极快的构建速度而闻名。然而，Vite 最初只支持 Vue 3，而 vite-plugin-vue2 插件使得开发者能够在不升级到 Vue 3 的情况下，继续享受 Vite 的高效开发体验。通过这个插件，开发者可以在 Vue 2 项目中体验到 Vite 的快速启动、热重载和高效打包，而无需迁移到 Vue 3。这为那些已经深度使用 Vue 2 的项目提供了极大的便利。主要特点： Vue 2 支持：在 Vite 项目中使用 Vue 2，无需进行复杂的配置或迁移。现代开发体验：支持 Vite 的快速启动、热模块替换（HMR）、高效的编译和打包。兼容性：与现有的 Vue 2 项目无缝集成，不影响现有代码库的运行。 GitHub地址 GitHub 仓库：vitejs/vite-plugin-vue2 官方文档提供了详...

阿超

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

数据加载中