箭头函数和解构赋值混用
发表于|更新于
|浏览量:
一个人的礼貌是一面照出他的肖像的镜子。——歌德
我们在前端对数组进行操作时,如果使用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]) |

相关推荐
2026-04-04
twenty
学习是劳动,是充满思想的劳动。——乌申斯基 Twenty:社区驱动的“现代 Salesforce 替代品”,一位把 CRM 做成开源作品的理想主义者Twenty 走进来时,先把名片递给你: Building a modern alternative to Salesforce, powered by the community. 它不是冷冰冰的销售系统,更像一位有脾气、有追求的“客户关系管家”:不想再让 CRM 变成昂贵的牢笼,也不愿意让用户的数据被锁在黑箱里。它想做的是——用开源和社区把 CRM 这件事重新写一遍。 它还会抬起头,认真地补一句身份宣言: The #1 Open-Source CRM Why Twenty:它为什么非要“重做 CRM”?Twenty 讲理由时不绕弯,三句话,像三根钉子钉在桌面上。 1)CRMs 太贵了,而且用户被困住了传统 CRM 的套路太熟练:把客户数据锁住,然后涨价。Twenty 不认这个理,它的态度是:不该这样。 2)体验需要一次真正的“重启”Twenty 觉得老世界的 CRM 已经背了太多历史包袱。它要一个 fresh sta...
2024-08-18
Apache-ShenYu支持namespace功能(二)
我曾踏足山巅,也曾进入低谷,二者都让我受益良多。——《英雄联盟》瓦洛兰之盾塔里克 上一期:Apache-ShenYu支持namespace功能 喜闻乐见,这是个连续系列,今天主要是给shenyu-dashboard的selector部分添加namespace适配 PR连接: https://github.com/apache/shenyu-dashboard/pull/471 这里有一个知识点 123456import { connect } from "dva";@connect(({ global }) => ({ currentNamespaceId: global.currentNamespaceId,}))class RuleCopy extends Component {} 装饰器语法 @connect 来连接组件与 dva 的状态管理。@connect 是一个高阶函数,通常用于将 Redux store(在 dva 中表现为 model)中的状态映射到组...
2024-08-14
TinyVue组件库
君子不隐其短,不知则问,不能则学。——董仲舒 文档: TinyVue:一套跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 Vue 3,支持 PC 端和移动端 代码: https://github.com/opentiny/tiny-vue 在项目的根目录中,打开控制台,执行以下命令,为 Vue 3.0 的项目安装 TinyVue 组件库 : 123yarn add @opentiny/vue@3# 或者npm install @opentiny/vue@3 或者执行以下命令,为 Vue 2.0 的项目安装 TinyVue 组件库 : 123yarn add @opentiny/vue@2# 或者npm install @opentiny/vue@2 如果是Vite 工程,安装完依赖后,修改项目的 vite.config.js ,添加以下代码突出显示的部分: 1234567891011// vite.config.jsimport { defineConfig } from 'vite'import vue from ...
2025-03-26
astro
真理的范围在大炮射程之内。——俾斯麦 https://astro.build/ https://github.com/withastro/astro Astro:为内容驱动的网站打造的现代前端框架在前端框架百花齐放的今天,React、Vue、Svelte 等已经牢牢占据开发者的视野。而 Astro,则以一种“反潮流”的方式切入了战场——它不试图成为全能框架,而是专注于一个核心场景:内容驱动的静态网站。 什么是 Astro?Astro 是一个现代的静态网站构建工具,主打“少 JavaScript,多性能”。它允许开发者使用多种框架(React、Vue、Svelte、Solid 等)构建组件,但最终构建时,只会输出最小的 HTML、CSS 和必要的 JS,实现几乎“零 JS 运行时”。 一句话总结:Astro 是为了构建快如闪电的内容网站而生的静态站点生成器。 核心特性1. 零 JS 默认输出Astro 默认不会给你的页面添加任何 JavaScript,除非你显式启用交互。这种“按需加载”策略,让页面加载速度大幅提升,非常适合博客、文档、企业官网等。 2. 跨框架组件支持在一个项...
2023-06-21
hexo-bilibili-bangumi
练习是良好的老师。——贺拉斯 分享一个hexo插件: https://github.com/HCLonely/hexo-bilibili-bangumi hexo 番剧页面插件,可选数据源:Bilibili, Bangumi Demo 安装 1$ npm install hexo-bilibili-bangumi --save 配置 将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件). 12345678910111213141516171819202122232425262728293031323334353637383940414243bangumi: # 追番设置 enable: true source: bili bgmInfoSource: 'bgmApi' path: vmid: title: '追番列表' quote: '生命不息,追番不止!' show: 1 lazyload: true srcValue: '__image__'...
2024-08-13
小程序框架vue-mini
即使对于君主,研究学问的道路也是没有捷径的。——阿基米德 分享一个基于 Vue 3 的小程序框架 https://vuemini.org/ https://github.com/vue-mini/vue-mini Vue Mini 是一个基于 Vue 3 的小程序框架,它能让你用组合式 API 写小程序。与某些小程序开发方案不同的是 Vue Mini 核心仅仅是一个轻量的运行时库,它既不依赖任何编译步骤,也不涉及任何 Virtual DOM。并且 Vue Mini 从一开始就被设计为能跟小程序原生语法协同工作,你甚至能在同一个页面或组件内混用原生语法与 Vue Mini,这能让你很轻松的将其整合进既有项目中。当然,你也能完全使用 Vue Mini 开发一个小程序。 Vue Mini 仅聚焦于小程序逻辑部分,也就是 JS 部分,它并不影响小程序的模版、样式及配置。 快速创建 1234npm create vue-mini@latestcd <your-project-name>npm installnpm run dev 然后就可以用微信开发者工具打开

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