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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
js有关元素内容操作小结
Dec 20 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP中header用法小结
2016/05/23 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
原生js实现购物车功能
2020/09/23 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
司机辞职报告范文
2014/01/20 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
平安工地建设方案
2014/05/06 职场文书
入党推优材料
2014/06/02 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript