Js中pick函数的具体使用

更新时间：2025年09月04日 09:57:20 作者：自信的飞

本文主要介绍了Js中pick函数的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1. 自定义 pick 函数

首先，您可以自己实现一个 pick 函数：

function pick(obj, keys) {
  // 使用 reduce 方法遍历 keys 数组
  return keys.reduce((result, key) => {
    // 检查当前属性名 key 是否存在于对象 obj 中
    if (key in obj) {
      // 如果存在，将该属性及其值添加到 result 对象中
      result[key] = obj[key];
    } // 返回当前的 result 对象，以便下一次迭代使用
    return result; // 初始化累加器 result 为一个空对象
  }, {});
}

2. 使用示例

假设您有一个包含多个属性的对象：

const user = {
  id: 1, username: 'john_doe',
  password: 'secret', email: 'john@example.com',
  age: 30,
};

提取特定属性

您可以使用 pick 函数提取 username 和 email 属性：

const userInfo = pick(user, ['username', 'email']); 
console.log(userInfo); // 输出: { username: 'john_doe', email: 'john@example.com' }

3. 使用第三方库

如果您不想自己实现 pick 函数，可以使用 Lodash 或 Underscore.js 这样的库，它们提供了现成的 pick 方法。

使用 Lodash

首先，安装 Lodash：

npm install lodash

使用:

import { pick } from 'lodash'; 
const userInfo = pick(user, ['username', 'email']); 
console.log(userInfo); // 输出: { username: 'john_doe', email: 'john@example.com' }

处理不存在的属性

如果您尝试提取一个对象中不存在的属性，pick 函数不会抛出错误，它只会忽略这些属性：

const userInfo = pick(user, ['username', 'nonexistentProperty']); 
console.log(userInfo); // 输出: { username: 'john_doe' }

到此这篇关于Js中pick函数的具体使用的文章就介绍到这了,更多相关Js pick函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Js
pick

微信小程序云开发如何使用云函数生成二维码
这篇文章主要为大家详细介绍了微信小程序云开发如何使用云函数生成二维码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
详解JavaScript对象序列化
这篇文章主要为大家介绍了JavaScript对象序列化的相关资料,需要的朋友可以参考下
2016-01-01
JavaScript中剩余参数的使用详解
JavaScript中的剩余参数一般使用在**赋值号右侧,或具有迭代属性的数组、函数和对象,这篇文章主要为大家介绍了JavaScript中剩余参数的具体应用,需要的可以参考下
2023-11-11
Bootstrap CDN和本地化环境搭建
这篇文章主要介绍了Bootstrap CDN和本地化环境搭建的方法，非常不错具有参考借鉴价值，感兴趣的朋友跟着小编一起学习吧
2016-10-10
前端请求并发和请求覆盖的解决方法
最近在开发一些大屏,涉及到比较多的数据来源,接口也没有做聚合,导致页面需要调很多接口来填充页面数据,那么就会有接口并发的问题出现,所以本文给大家介绍了如何解决前端请求并发和请求覆盖,需要的朋友可以参考下
2024-10-10
详解JavaScript 异步编程
这篇文章主要介绍了JavaScript 异步编程的相关资料，文中讲解非常细致，帮助大家更好的理解学习JS，感兴趣的朋友可以了解下
2020-07-07
JavaScript操作URL的相关内容集锦
这篇文章主要介绍了JavaScript操作URL的相关内容集锦的相关资料,需要的朋友可以参考下
2015-10-10
Chrome Form多次提交表单问题的解决方法
第一次提交可以，第二次提交就没有任何响应了。需要重新加载页面后才可以提交，而这个问题在Firefox,IE下没有出现。
2011-05-05
JavaScript数组分组groupBy示例详解
JavaScript 最近发布了一个方法 Object.groupBy,可以对可迭代对象中的元素进行分组,这篇文章主要介绍了JavaScript数组分组groupBy示例,需要的朋友可以参考下
2023-12-12
js实现的仿新浪微博完美的时间组件升级版
本博客没有华丽的布局,只求朴实的js的代码,只为js代码爱好者提供,一周大概会出1-2篇js前沿代码的文章.只是代码,不说技术
2011-12-12