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 相关文章推荐
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
Validform表单验证总结篇
Oct 31 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
深入了解js原型模式
May 30 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
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
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
JS模板实现方法
2013/04/03 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Python数据类型学习笔记
2016/01/13 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python探索之ModelForm代码详解
2017/10/26 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python 3 判断2个字典相同
2019/08/06 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python的setattr函数实例用法
2020/12/16 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
总经理秘书工作职责
2013/12/26 职场文书
买卖协议书范本
2014/04/21 职场文书
毕业生求职信范文
2014/06/29 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
客房部经理岗位职责
2015/02/02 职场文书