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 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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的日期与时间函数技巧
2008/04/24 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
使用python3构建文件传输的方法
2019/02/13 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
浅谈Python type的使用
2019/11/19 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
工作迟到检讨书
2014/02/21 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
主持人演讲稿
2014/05/13 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2014年实验室工作总结
2014/12/03 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
团委副书记工作总结
2015/08/14 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android