摘要:看完本文,希望可以写出更加漂亮简洁函数式的代码可以用来汇总数据的初始值把一个对象数组变成一个以数组中各个对象的为属性名,对象本身为属性值的对象。
Handle javascript data structures with map/reduce
看完本文,希望可以写出更加漂亮、简洁、函数式的代码?
reducereduce 可以用来汇总数据
const customer = [ {id: 1, count: 2}, {id: 2, count: 89}, {id: 3, count: 1} ]; const totalCount = customer.reduce((total, item) => total + item.count, 0 // total 的初始值 ); // now totalCount = 92
把一个对象数组变成一个以数组中各个对象的 id 为属性名,对象本身为属性值的对象。haoduoshipin
let products = [ { id: "123", name: "苹果" }, { id: "345", name: "橘子" } ]; const productsById = products.reduce( (obj, product) => { obj[product.id] = product return obj }, {} ); console.log("result", productsById);map
map 可以理解为是数组的转换器,依次对数组中的每个元素做变换进而得到一个新的数组。
const integers = [1, 2, 3, 4, 6, 7]; const twoXIntegers = integers.map(i => i*2); // twoXIntegers are now [2, 4, 6, 8, 12, 14] // integers数组并不会受到影响find?
筛选出数组中的个别元素
const posts = [ {id: 1, title: "Title 1"}, {id: 2, title: "Title 2"}, ]; // find the title of post whose id is 1 const title = posts.find(p => p.id === 1).title;
唉~ 使用了半年的 es6才发现有这么好用的东西,译者傻缺还像下面这么写过呢
const posts = [ {id: 1, title: "Title 1"}, {id: 2, title: "Title 2"}, ]; const title = posts.filter(item => item.id === 1)[0].title;filter
筛选出数组中某些符合条件的元素组成新的数组
const integers = [1, 2, 3, 4, 6, 7]; const evenIntegers = integers.filter(i => i % 2 === 0); // evenIntegers are [2, 4, 6]
请大家自行思考下filter和find的区别
数组concatconst arr1 = [1, 2, 3, 4, 5]; const arr2 = [6, 7, 8, 9, 0]; const arrTarget = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]对象操作
function operation(query, option = {}) { const param = {...query, ...option}; // .... return param; } let opt = {startTime: 123455555, endTime: 113345555}; let q = {name: "一步", age: "xxx"}; operation(q, opt); // {name: "一步", age: "xxx", startTime: 123455555, endTime: 113345555}
对象是引用传参的,所以函数内部应该尽可能的保证传入的参数不受到污染。
为对象动态地添加字段const dynamicKey = "wearsSpectacles"; const user = {name: "Shivek Khurana"}; const updatedUser = {...user, [dynamicKey]: true}; // updatedUser is {name: "Shivek Khurana", wearsSpectacles: true}将对象转换为query字符串?
const params = {color: "red", minPrice: 8000, maxPrice: 10000}; const query = "?" + Object.keys(params) .map(k => encodeURIComponent(k) + "=" + encodeURIComponent(params[k]) ) .join("&") ; // encodeURIComponent encodes special characters like spaces, hashes // query is now "color=red&minPrice=8000&maxPrice=10000"得到对象数组的元素 index
const posts = [ {id: 13, title: "Title 221"}, {id: 5, title: "Title 102"}, {id: 131, title: "Title 18"}, {id: 55, title: "Title 234"} ]; // to find index of element with id 131 const requiredIndex = posts.map(p => p.id).indexOf(131);
更加优雅的写法呱呱呱提供:
const posts = [ {id: 13, title: "Title 221"}, {id: 5, title: "Title 102"}, {id: 131, title: "Title 18"}, {id: 55, title: "Title 234"} ]; const index = posts.findIndex(p => p.id === 131)删除对象的某个字段
const user = { name: "Shivek Khurana", age: 23, password: "SantaCl@use" }; const userWithoutPassword = Object.keys(user) .filter(key => key !== "password") .map(key => ({[key]: user[key]})) .reduce((accumulator, current) => ({ ...accumulator, ...current }), {});
这里我认为原作者有点为了函数式编程而函数式了,下面是我的解决方案:
const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"}; const newUser = {...user}; delete newUser.password; // {name: "Shivek Khurana", age: 23}
更现代的写法YiHzo提供: ?????
const user = {name: "Shivek Khurana", age: 23, password: "SantaCl@use"}; // 利用对象的解构,取出非password的所有字段 const {password, ...newUser} = user
以上代码片段的共同原则:不改变原数据。希望大家的代码都可以尽可能的简洁,可维护?。
【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107177.html
摘要:操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。 前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题:...
摘要:查找原因无法获取到是因为同源策略和标记的原因。在同一个站点下使用属性是无效的。此外,这个指示也会被用做响应中被忽视的标示。而通过设置为获得的第三方,将会依旧享受同源策略,因此不能被通过或者从头部相应请求的脚本等访问。 作者:codexu _ showImg(https://segmentfault.com/img/remote/1460000020161476); 浏览器里明明存在的c...
摘要:思路上次换工作,面试遇到一道面试题,如下请设计数据库,用来存放老师学生等人员的信息,尽量满足以后的扩展。 ————因为懒惰,所以思索 场景 我们有多种类型订单:实物订单、特享商户订单、核销订单、生活缴费订单、电影票订单、机票订单、以及以后会持续新增的未知类型订单,它们都存放在不同的订单类型表中 影响 导致有些业务做起来会比较痛苦 比如: 统计当前用户未付...
阅读 3145·2021-10-08 10:04
阅读 1082·2021-09-30 09:48
阅读 3450·2021-09-22 10:53
阅读 1667·2021-09-10 11:22
阅读 1685·2021-09-06 15:00
阅读 2143·2019-08-30 15:56
阅读 706·2019-08-30 15:53
阅读 2274·2019-08-30 13:04