箭头函数和解构赋值混用
发表于|更新于
|浏览量:
一个人的礼貌是一面照出他的肖像的镜子。——歌德
我们在前端对数组进行操作时，如果使用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]) |
相关推荐
2023-03-26
for...in、for...of、for await...of
处世应当谦虚，切忌轻人傲世。——佚名 简单说下区别： for...in遍历出来的是key 12345678910var obj = {a:1, b:2, c:3};for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]);}// Output:// "obj.a = 1"// "obj.b = 2"// "obj.c = 3" for...of遍历出来的是元素 123456789const array1 = ['a', 'b', 'c'];for (const element of array1) { console.log(element);}// Expected output: "a"// Expected output: "b&quo...
2020-12-02
js进行深拷贝
共夸不受污泥染，没有污泥哪有莲。——《赏荷》 对象深拷贝 123456789101112131415161718192021222324252627282930export function deepClone (data) { var type = getObjType(data) var obj if (type === 'array') { obj = [] } else if (type === 'object') { obj = {} } else { // 不再具有下一层次 return data } if (type === 'array') { for (var i = 0, len = data.length; i < len; i++) { data[i] = (function () { if (data...
2021-11-10
css中的&
要在座的人都停止了说话的时候，有了机会，方才可以谦逊地把问题提出，向人学习。—— 约翰·洛克 今天看到一种css写法： 123456789/deep/ .message-list { flex: 1; .message-item { &-text { position: absolute; } } } /deep/我们之前博客提过了，嵌套写法很简单，今天聊聊&这个父选择器 sass中文文档提到了这个父选择器 上方的&-text其实就表示.message-item-text 12345.message-item { &-text { position: absolute; }} 编译后为： 12345.message-item { .message-item-text { position: absolute; }}
2024-09-14
React优化技巧——避免state层级过高
你是非常可爱的人，真应该遇到最好的人，我也希望我就是。——《爱你就像爱生命》 今天从Cory House @housecor看到一个优化技巧随笔记一下，希望下次编写时候可以考虑 原代码： 123456789101112131415161718192021222324function Product() { const [rating, setRating] = useState(null); return ( <> <h1>Product</h1> <ProductRating rating={rating} setRating={setRating} /> </> );}function ProductRating({ rating, setRating }) { return ( <> <label htmlFor="rating"...
2024-05-19
js解析JWT
懂得生命真谛的人，可以使短促的生命延长。——西塞罗 代码如下： 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 当我在解析 jwt 的 token 时，发现 token 中附带的用户 id 存在精度丢失问题，然后用正则改进解析 JWT 的代码： 1const tokenParse = token => token.split(".").slice(0, 2).map(i => JSON.parse(atob(i).replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => Math.abs(p1) > Number.MAX_SAFE_INTEGER ? `:"${p1}"` : `:${p1}`))); 但是还存在 base64 解码时无法正确解码中文问题，继续改进 1const tok...
2025-01-30
readability
我当然不会试图摘月，我要月亮奔我而来。——奥黛丽赫本 https://github.com/mozilla/readability 最近发现了一款由 Mozilla 开发的开源工具 Readability.js，这是一个专注于网页内容提取的库，它能够快速解析网页中的正文内容，过滤掉广告、导航栏等干扰信息。Firefox 的“阅读模式”正是基于 Readability.js 实现的。这款工具对于需要优化网页阅读体验、自动提取文章内容的开发者来说非常实用。 什么是 Readability.jsReadability.js 是 Mozilla 为了提升用户网页阅读体验而开发的一个工具，能够将网页上的主要内容提取出来并生成清爽的 HTML 片段。它非常适合集成到浏览器扩展、阅读器应用、内容聚合平台等项目中。 安装和使用1. 安装在 Node.js 环境中可以通过 npm 直接安装： 1npm install @mozilla/readability 2. 基本使用要使用 Readability.js 提取网页内容，只需传入一个 DOM 文档对象并调用 parse() 方法： 1...