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插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 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小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
强制设为首页代码
2006/06/19 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python中的字典操作及字典函数
2018/01/03 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
深入了解Python enumerate和zip
2020/07/16 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
社会工作专业求职信
2014/07/15 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Python办公自动化解决world文件批量转换
2021/09/15 Python