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实现简单的ajax
Jul 08 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jquery获取radio值实例
Oct 16 Javascript
javascript中this的四种用法
May 11 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
VueJS实现用户管理系统
May 29 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php 猴子摘桃的算法
2017/06/20 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python3.6数独问题的解决
2019/01/21 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
详解Django中异步任务之django-celery
2020/11/05 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
《小松树和大松树》教学反思
2014/02/20 职场文书
签约仪式主持词
2014/03/19 职场文书
关于童年的读书笔记
2015/06/26 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
php实现自动生成验证码的实例讲解
2021/11/17 PHP
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL