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 核心函数以及jQuery对象
Mar 23 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
js倒计时简单实现代码
Aug 11 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
javascript实现点击产生随机图形
Jan 25 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
3
2006/10/09 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP实现的简单缓存类
2015/07/29 PHP
js的event详解。
2006/09/06 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
react的hooks的用法详解
2020/10/12 Javascript
简单理解Python中的装饰器
2015/07/31 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python用for循环求和的方法总结
2019/07/08 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python是怎样处理json模块的
2020/07/16 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
个人自我鉴定写法
2013/11/30 职场文书
小学生安全保证书
2014/02/01 职场文书
社区工作感言
2014/02/21 职场文书
节约用水倡议书
2014/04/16 职场文书
艺术教育实施方案
2014/05/03 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
运动会闭幕词
2015/01/28 职场文书
遗愿清单观后感
2015/06/09 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
检讨书之工作不认真
2019/08/14 职场文书