箭头函数和解构赋值混用

发表于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://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. 跨框架组件支持在一个项...

threejs+vite+ts实现官网基础部分

一个温柔的目光，一句由衷的话语，能使人忍受生活给他的许多磨难。——高尔基官方文档：three.js manual 源代码从这里改进： GitHub - PacktPublishing/Learn-Three.js-Fourth-edition: Learn Three.js, Fourth edition, published by Packt 我本地进行了一些修改，首先package.json 12345678910111213141516171819{ "name": "three-ts", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc &...

文本精准对齐

即使饱含泪水，我仍旧将它们擦干；即使不被信任，我仍旧相信。就是这样，也将是这样。——保罗·科埃略的《阿莱夫》 CSS 如何让文本随背景图等比例缩放？背景在响应式布局中，我们经常需要让文本标注准确地贴合背景图，并且在窗口缩放时，文本应保持相对位置不变，同时等比例缩放。然而，传统的 position: absolute 方式往往会导致文本发生偏移，影响对齐。最佳实践：position + transform在 CSS 中，最简单且稳定的方法是结合： 1234position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); 这能确保文本始终居中，不随容器缩放而偏移。原理解析 position: absolute 确定参考点文本相对于 position: relative 的父元素进行绝对定位。 left: 50%; top: 50% 让文本的左上角位于背景图 50% 的位置。 transform: translate(-50%, -50%) 精准居中向左移动自身宽度 50% (t...

页面滚动事件

有些路是非要单独一人去跋涉，路再远再长，也得独自默默走下去。——席慕蓉 HTML DOM事件大全：https://www.runoob.com/jsref/dom-obj-event.html 可以如下写法： 12345window.onscroll = function() { console.log("滚动上下距离" + document.documentElement.scrollTop || document.body.scrollTop); console.log("滚动左右距离" + document.documentElement.scrollLeft || document.body.scrollLeft);}// jquery $(window).scroll(()=>{}) uniapp页面生命周期文档：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%...

懒惰——它是一种对待劳动态度的特殊作风。它以难以卷入工作而易于离开工作为其特点。 —— 杰普莉茨卡娅有时我们需要在js中触发打开新标签页、或者是在当前页面跳转以及在iframe中替换父页面使用window.open即可，关于它的参数，为以下四个： URL：需要打开的页面URL 1window.open("https://VampireAchao.github.io/") name：打开页面的方式或名称 12345678// 新窗口打开，默认window.open("https://VampireAchao.github.io/","_blank")// 父窗口打开，ifame中使用window.open("https://VampireAchao.github.io/","_parent")// 当前窗口中打开window.open("https://VampireAchao.github.io/","_self")// 顶层窗口...

今天公司实习生问我jQuery的ajax怎么写，这玩意不是很简单吗 12345678910111213$.ajax({ url: "/cowBeer", //url method: "post", //请求方式 contentType: "application/json", //参数类型 data: JSON.stringify({ //这里面是参数 "name":"cowBeer" }), success: function (res) { console.log(res); //处理返回的数据 }, error: function (res) { //错误处...

阿超

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

数据加载中