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

相关推荐
2022-07-17
vue3中css里的v-bind
一旦别人问起自己想要什么,那一刹那反倒什么都不想要了。——太宰治 官方文档:状态驱动的动态 CSS 编写一个组件: 123456789101112131415161718192021222324252627<template> <div class="ruben"> <p>You clicked {{ count }} times</p> <button @click="increment">Click me</button> </div></template><script>export default { data() { return { count: 1 } }, methods: { increment...
2025-08-08
JSONStream
好学近乎知,力行近乎仁,知耻近乎勇。一一《中庸》 https://github.com/dominictarr/JSONStream 轻松处理超大 JSON 数据流!—— 走进 @dominictarr/JSONStream 的流式解析世界 在现代 Web 和 Node.js 开发中,JSON 是数据交换的事实标准。然而,当我们面对海量 JSON 文件或数据流时,如何才能既高效又优雅地处理它们?这正是 @dominictarr/JSONStream 的魅力所在! 项目简介@dominictarr/JSONStream 是一款专为 Node.js 设计的流式 JSON 解析与生成工具。它让你能够像操作水管一样,顺畅地“串联”各种数据流,无论是处理本地超大 JSON 文件,还是应对高并发的 API 响应,都能游刃有余。 你可以用最简洁的方式将其与 Node.js 的 stream 体系结合: 1rawStream.pipe(JSONStream.parse()).pipe(streamOfObjects) JSONStream 支持从流中解析...
2026-02-14
chrome-devtools-mcp
你热爱生命吗?那幺别浪费时间,因为时间是组成生命的材料——富兰克林 让你的 AI 助手真正“看见”浏览器:Chrome DevTools MCP 深度介绍与上手指南如果你正在用 Gemini、Claude、Cursor 或 Copilot 这样的编码助手进行自动化、调试或性能分析,你很快就会遇到一个难题:如何让 AI 真正地“连接”到一个真实的 Chrome 浏览器,稳定地执行操作、读取页面状态,并且跑出可信的性能结果? 来自 ChromeDevTools/chrome-devtools-mcp 的 Chrome DevTools MCP(Model Context Protocol)服务器,正是为此而生。它以 MCP 服务器的形式,向你的 AI 编码助手暴露 Chrome DevTools 的能力:自动化操作、网络与控制台调试、截图与快照、性能追踪与洞察……并且由 Puppeteer 提供可等待、可重试的可靠自动化基底。 仓库简介(Description):Chrome DevTools for coding agents主语言:TypeScript许可协议:Ap...
2021-11-03
vue项目启动后自动打开
我见青山多妩媚,料青山见我应如是。――辛弃疾《贺新郎》 找到项目路径下的package.json 在scripts下的serve后面加上--open即可
2025-02-07
css循环淡入淡出播放(二)
让自己忙一点,忙到没有时间去思考无关紧要的事,很多事就这样悄悄地淡忘了。时间不一定能证明很多东西,但是一定能看透很多东西。坚信自己的选择,不动摇,使劲跑,明天会更好。——静好 之前在docusaurus实现了css的循环淡入淡出播放,发现效果有一点局限,遂还是用js结合css实现了,目前代码为: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778import React, {useEffect, useState} from "react";import clsx from "clsx";import styles from './index.module.css';import Layout from "@theme/Layout";l...
2024-07-07
css的透视效果perspective
有两件事我最憎恶:没有信仰的博才多学和充满信仰的愚昧无知。——爱默生 我们知道css中我们的transform可以调整z轴,这说明css是有3d能力的 但是我们通常看一个3d的物体,是近的地方大,远的地方小甚至被遮挡,要实现这样的透视效果其实只需要一个css属性即可 https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective 就比如这个正方体: .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff } .front { background: rgba(90,90,90,.7); transform: translateZ(50px)...

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