JavaScript选取(picking)和反选(rejecting)对象的属性方法


Posted in Javascript onAugust 16, 2017

有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段:

function pick(obj, keys) {
  return keys.map(k => k in obj ? {[k]: obj[k]} : {})
        .reduce((res, o) => Object.assign(res, o), {});
}
const row = {
  'accounts.id': 1,
  'client.name': 'John Doe',
  'bank.code': 'MDAKW213'
};
const table = [
  row,
  {'accounts.id': 3, 'client.name': 'Steve Doe', 'bank.code': 'STV12JB'}
];
pick(row, ['client.name']); // 取到了 client name
table.map(row => pick(row, ['client.name'])); // 取到了一系列 client name

在 pick 函数中用到了一点小技巧。首先,我们用 map 遍历了键名数组(keys), 每次都会返回一个包含当前键名(key)的对象(如果在目标对象(obj)中没有当前键名,就会返回空对象)。然后我们用 reduce 把返回的所有单个键-值对象和合并到一个对象中。

但是,如果我们想反选( reject )属性/键名呢?改造一下我们的函数就好了:

function reject(obj, keys) {
  return Object.keys(obj)
    .filter(k => !keys.includes(k))
    .map(k => ({[k]: obj[k]}))
    .reduce((res, o) => Object.assign(res, o), {});
}
// 或者, 利用 pick
function reject(obj, keys) {
  const vkeys = Object.keys(obj)
    .filter(k => !keys.includes(k));
  return pick(obj, vkeys);
}
reject({a: 2, b: 3, c: 4}, ['a', 'b']); // => {c: 4}

总结

以上所述是小编给大家介绍的JavaScript选取(picking)和反选(rejecting)对象的属性方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
js中this对象用法分析
Jan 05 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 #Javascript
vue实现留言板todolist功能
Aug 16 #Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 #Javascript
vue的事件绑定与方法详解
Aug 16 #Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 #Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
You might like
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
概述BootStrap中role="form"及role作用角色
2016/12/08 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python绘制3D图形
2018/05/03 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python3.6数独问题的解决
2019/01/21 Python
python连接PostgreSQL过程解析
2020/02/09 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
护士岗位职责
2014/02/16 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
行政处罚事先告知书
2015/07/01 职场文书
毕业班工作总结
2015/08/10 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电