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属性过滤选择器使用示例
Jun 18 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
详解javascript数组去重问题
Nov 06 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
微信小程序云开发实现云数据库读写权限
May 17 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字符串按照单词进行反转的方法
2015/03/14 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python中update的基本使用方法详解
2019/07/17 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
安全隐患整改报告
2014/11/06 职场文书
小学班主任工作随笔
2015/08/15 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
centos7安装mysql5.7经验记录
2022/05/02 Servers
Spring 使用注解开发
2022/05/20 Java/Android