箭头函数和解构赋值混用
发表于|更新于
|浏览量:
一个人的礼貌是一面照出他的肖像的镜子。——歌德
我们在前端对数组进行操作时，如果使用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]) |
相关推荐
2021-06-04
appendTo
人类经常把一个生涯发生的事，撰写成历史，在从那里看人生；其实，那不过是衣服，人生是内在的——罗曼。罗兰 我们可以使用jquery中的appendTo函数在一个标签追加到另一个标签内部的结尾 例如我博客这里 我们再执行 1$("<span>ruben</span>").appendTo(".navbar-brand") 执行完成后效果如下 <span>ruben</span>追加到我们的”阿超”后面了
2023-09-04
mdit-vue
睡在哪里都是睡在夜里。 ——贾平凹《废都》 分享一个开源项目： GitHub - mdit-vue/mdit-vue: markdown-it plugins for Vue.js 这个项目在这里为 markdown-it 提供一些统一的插件，这是 JS 世界中最受欢迎的 markdown 解析器之一，以使其更好地与 Vue 配合使用 它是markdown-it的vue插件 GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed https://markdown-it.github.io/
2021-09-03
css超出省略号
攀登科学高峰，就像登山运动员攀登珠穆朗玛峰一样，要克服无数艰难险阻，懦夫和懒汉是不可能享受到胜利的喜悦和幸福的。——陈景润 注意使用的时候要指定宽度width 123456789101112131415/* 单行 */.text-omit-one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/* 多行 */.text-omit-more-line { word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
2025-04-29
vue-countTo
从工作里爱了生命，就是通彻了生命最深的秘密。 —— 纪伯伦 https://github.com/PanJiaChen/vue-countTo/https://panjiachen.github.io/countTo/demo/ vue-countTo：一个简单高效的数字递增动画组件在前端开发中，数字递增动画是一种常见的交互效果，通常用于数据展示和统计页面。vue-countTo 是一个轻量级的 Vue 组件，可以快速实现目标数字递增的动画效果，让你的项目更加生动和吸引人。 什么是 vue-countTo？vue-countTo 是由 PanJiaChen 开发的一个 Vue.js 组件，用于在指定的时间内将数字从起始值递增到目标值。它简单易用，且支持高度定制化，适合各种场景的数字动画需求。 核心特点： 轻量化：组件体积小，性能优异。 易于使用：通过简单的配置即可实现数字递增动画。 高度定制：支持设置起始值、目标值、持续时间以及动画的回调函数。 Vue.js 集成：无缝嵌入 Vue 项目，兼容性强。 使用场景vue-countTo 适用于以下常见场景： 数据统计展示在...
2020-08-25
简单CSS实现图片旋转
图片旋转~ 代码 12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; height: auto; margin: 20% auto; animation: myrotate 3s linear infinite...
2024-09-04
web组件库lion
君子耻不修，不耻见污；耻不信，不耻不见信；耻不能，不耻不见用。——荀子 github： https://github.com/ing-bank/lion 官方文档： https://lion-web.netlify.app/ Lion 是一组高性能、可访问且灵活的 Web 组件 它们提供了一个无主见的白标签层，可以扩展到您自己的组件层 高性能：专注于在所有相关浏览器中实现出色的性能，具有最少的依赖项 可及性：旨在符合 WCAG 2.2 AA 标准，以创建每个人都可以使用的组件 灵活性：通过 Web Components 和 JavaScript 类提供解决方案，这些类可以使用、采用和扩展以满足所有需求 现代代码：Lion 以纯 es 模块的形式分发 公开函数/类和 Web 组件：以最合适的形式提供功能 注意：我们的演示可能看起来有点平淡无奇，但这是故意的。它们仅带有功能性样式。这是有道理的，因为主要用例是扩展这些组件，如果您这样做，则不想覆盖现有样式。 Guides: Lion 安装： 1npm i @lion/ui 使用： 1234567891011121314...