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栏目列表隐藏/显示简单实现
Apr 03 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
Bootstrap基础学习
Jun 16 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue v-model动态生成详解
Jun 30 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
ES6中的类(Class)示例详解
Dec 09 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
动态加载script文件的两种方法
2013/08/15 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
详解Python中类的定义与使用
2017/04/11 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python安装requests库的实例代码
2019/06/25 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python3注册全局热键的实现
2020/03/22 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
好军嫂事迹材料
2014/01/15 职场文书
医院辞职信范文
2014/01/17 职场文书
国庆促销活动总结
2014/08/29 职场文书
送达通知书
2015/04/25 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
Python中的pprint模块
2021/11/27 Python