Js中pick函數(shù)的具體使用
pick 函數(shù)用于從對(duì)象中提取特定屬性,并返回一個(gè)新對(duì)象。它在處理大型對(duì)象時(shí)非常有用,能夠幫助提取所需的數(shù)據(jù)。以下是 pick 函數(shù)的詳細(xì)使用說(shuō)明和示例。
1. 自定義 pick 函數(shù)
首先,您可以自己實(shí)現(xiàn)一個(gè) pick 函數(shù):
function pick(obj, keys) {
// 使用 reduce 方法遍歷 keys 數(shù)組
return keys.reduce((result, key) => {
// 檢查當(dāng)前屬性名 key 是否存在于對(duì)象 obj 中
if (key in obj) {
// 如果存在,將該屬性及其值添加到 result 對(duì)象中
result[key] = obj[key];
} // 返回當(dāng)前的 result 對(duì)象,以便下一次迭代使用
return result; // 初始化累加器 result 為一個(gè)空對(duì)象
}, {});
}2. 使用示例
假設(shè)您有一個(gè)包含多個(gè)屬性的對(duì)象:
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. 使用第三方庫(kù)
如果您不想自己實(shí)現(xiàn) pick 函數(shù),可以使用 Lodash 或 Underscore.js 這樣的庫(kù),它們提供了現(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è)對(duì)象中不存在的屬性,pick 函數(shù)不會(huì)拋出錯(cuò)誤,它只會(huì)忽略這些屬性:
const userInfo = pick(user, ['username', 'nonexistentProperty']);
console.log(userInfo); // 輸出: { username: 'john_doe' }到此這篇關(guān)于Js中pick函數(shù)的具體使用的文章就介紹到這了,更多相關(guān)Js pick函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法
最近在使用JS動(dòng)畫(huà)做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動(dòng)畫(huà)執(zhí)行時(shí)間內(nèi)快速移開(kāi)鼠標(biāo)時(shí)會(huì)出現(xiàn)動(dòng)畫(huà)因鼠標(biāo)移動(dòng)過(guò)快從而導(dǎo)致代碼沖突讓畫(huà)面抖動(dòng)的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法,需要的朋友可以參考下2022-06-06
JS解決Date對(duì)象在IOS中的“大坑” 以及時(shí)間格式兼容問(wèn)題
這篇文章主要介紹了JS解決Date對(duì)象在IOS中的“大坑” 以及時(shí)間格式兼容問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
JavaScript中Async/Await通過(guò)同步的方式實(shí)現(xiàn)異步的方法介紹
在JavaScript的異步編程中,我們經(jīng)常使用回調(diào)函數(shù)、Promise和 Async/Await來(lái)解決異步操作的問(wèn)題,Async/Await 又是Promise的語(yǔ)法糖,它的出現(xiàn)讓異步編程變得更加直觀和易于理解,本文將詳細(xì)講解Async/Await如何通過(guò)同步的方式實(shí)現(xiàn)異步2023-06-06
antd-mobile ListView長(zhǎng)列表的數(shù)據(jù)更新遇到的坑
這篇文章主要介紹了antd-mobile ListView長(zhǎng)列表的數(shù)據(jù)更新遇到的坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
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
javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法,涉及javascript針對(duì)頁(yè)面查找與替換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07

