Js中pick函數(shù)的具體使用

更新時(shí)間：2025年09月04日 09:57:20 作者：自信的飛

本文主要介紹了Js中pick函數(shù)的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 自定義 pick 函數(shù)

首先，您可以自己實(shí)現(xiàn)一個(gè) pick 函數(shù)：

function pick(obj, keys) {
  // 使用 reduce 方法遍歷 keys 數(shù)組
  return keys.reduce((result, key) => {
    // 檢查當(dāng)前屬性名 key 是否存在于對象 obj 中
    if (key in obj) {
      // 如果存在，將該屬性及其值添加到 result 對象中
      result[key] = obj[key];
    } // 返回當(dāng)前的 result 對象，以便下一次迭代使用
    return result; // 初始化累加器 result 為一個(gè)空對象
  }, {});
}

2. 使用示例

假設(shè)您有一個(gè)包含多個(gè)屬性的對象：

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

提取特定屬性

您可以使用 pick 函數(shù)提取 username 和 email 屬性：

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

3. 使用第三方庫

如果您不想自己實(shí)現(xiàn) pick 函數(shù)，可以使用 Lodash 或 Underscore.js 這樣的庫，它們提供了現(xiàn)成的 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' }

處理不存在的屬性

如果您嘗試提取一個(gè)對象中不存在的屬性，pick 函數(shù)不會拋出錯(cuò)誤，它只會忽略這些屬性：

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

到此這篇關(guān)于Js中pick函數(shù)的具體使用的文章就介紹到這了,更多相關(guān)Js pick函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Js
pick

相關(guān)文章

關(guān)于JavaScript實(shí)現(xiàn)動畫時(shí)動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動畫執(zhí)行時(shí)間內(nèi)快速移開鼠標(biāo)時(shí)會出現(xiàn)動畫因鼠標(biāo)移動過快從而導(dǎo)致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動畫時(shí)動畫抖動的原因與解決方法,需要的朋友可以參考下
2022-06-06
JS解決Date對象在IOS中的“大坑” 以及時(shí)間格式兼容問題
這篇文章主要介紹了JS解決Date對象在IOS中的“大坑” 以及時(shí)間格式兼容問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
JavaScript中Async/Await通過同步的方式實(shí)現(xiàn)異步的方法介紹
在JavaScript的異步編程中，我們經(jīng)常使用回調(diào)函數(shù)、Promise和 Async/Await來解決異步操作的問題，Async/Await 又是Promise的語法糖，它的出現(xiàn)讓異步編程變得更加直觀和易于理解，本文將詳細(xì)講解Async/Await如何通過同步的方式實(shí)現(xiàn)異步
2023-06-06
antd-mobile ListView長列表的數(shù)據(jù)更新遇到的坑
這篇文章主要介紹了antd-mobile ListView長列表的數(shù)據(jù)更新遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
JavaScript中將一個(gè)值轉(zhuǎn)換為字符串的方法分析[譯]
在JavaScript中,主要有三種方法能讓任意值轉(zhuǎn)換為字符串.本文講解了每種方法以及各自的優(yōu)缺點(diǎn)
2012-09-09
JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級菜單代碼,可實(shí)現(xiàn)針對鼠標(biāo)事件的響應(yīng)動態(tài)修改頁面元素屬性的功能,非常簡單實(shí)用,需要的朋友可以參考下
2015-09-09
RxJS的入門指引和初步應(yīng)用
這篇文章主要介紹了RxJS的入門指引和初步應(yīng)用，RxJS是一個(gè)強(qiáng)大的Reactive編程庫，提供了強(qiáng)大的數(shù)據(jù)流組合與控制能力，但是其學(xué)習(xí)門檻一直很高，本次分享期望從一些特別的角度解讀它在業(yè)務(wù)中的使用，而不是從API角度去講解。,需要的朋友可以參考下
2019-06-06
JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作示例
這篇文章主要介紹了JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作,結(jié)合實(shí)例形式分析了棧與隊(duì)列的操作原理及javascript使用數(shù)組實(shí)現(xiàn)棧與隊(duì)列的相關(guān)技巧,需要的朋友可以參考下
2018-12-12
淺談js 閉包引起的內(nèi)存泄露問題
這篇文章主要介紹了淺談js 閉包引起的內(nèi)存泄露問題的相關(guān)資料,需要的朋友可以參考下
2015-06-06
javascript實(shí)現(xiàn)簡單查找與替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)簡單查找與替換的方法,涉及javascript針對頁面查找與替換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07