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 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
Js动态创建div
2008/09/25 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
简单了解django orm中介模型
2019/07/30 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
接口可以包含哪些成员
2012/09/30 面试题
销售人员获奖感言
2014/02/05 职场文书
2014年清明节寄语
2014/04/03 职场文书
小学老师寄语大全
2014/04/04 职场文书
惊天动地观后感
2015/06/10 职场文书