JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個(gè)新的想法，想去看看前端的小庫(kù)來(lái)提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實(shí)現(xiàn)一個(gè)mini的吧。
添加測(cè)試文件
我們通過(guò)vitest來(lái)實(shí)現(xiàn)測(cè)試的功能。
pnpm add -D vitest
然后再package.json文件中添加我們的執(zhí)行腳本
"scripts": {
"test": "vitest"
}接著我們就可以編寫測(cè)試文件了
import { describe, expect, test } from "vitest"
import { myOmit } from "."
describe("omit", () => {
test("should create a shallow copy", () => {
const mick = { name: "mick" }
const copy = myOmit(mick, [])
expect(copy).toEqual({ name: "mick" })
})
test("should drop fields which are passed in ", () => {
const mick = { name: "mick", age: 18 }
const copy = myOmit(mick, ["age"])
expect(copy).toEqual({ name: "mick" })
expect(mick).toEqual({ name: "mick", age: 18 })
expect(myOmit(mick, ["name", "age"])).toEqual({})
})
})實(shí)現(xiàn)omit函數(shù)
我們要做的肯定是是要將測(cè)試文件通過(guò)。如果測(cè)試通過(guò)了，那就說(shuō)明我們的功能基本上是已經(jīng)實(shí)現(xiàn)了，剩下的是代碼重構(gòu)了。
根據(jù)測(cè)試文件我們可以看到，提出對(duì)象中的屬性生成一個(gè)新的對(duì)象，但是原對(duì)象是不發(fā)生改變的。那可以用Object.assign,下面介紹一個(gè)Object.assign
Object.assign() 方法將所有可枚舉（Object.propertyIsEnumerable() 返回 true）和自有（Object.hasOwnProperty() 返回 true）屬性從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象，返回修改后的對(duì)象。
我們首先利用Object.assign將原對(duì)象復(fù)制一份，然后遍歷復(fù)制過(guò)后的對(duì)象將需要剔除的屬性刪除即可。
export function myOmit(value, args) {
const shallowCopy = Object.assign({}, value)
for (let i = 0; i < args.length; i++) {
const key = args[i]
if (key in shallowCopy) {
delete shallowCopy[key]
}
}
return shallowCopy
}執(zhí)行測(cè)試文件
到此這篇關(guān)于JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript omit函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用慣了vue和react之后可能會(huì)慢慢淡忘掉原生的一些操作dom的幾種方式,有的時(shí)候確實(shí)需要我們通過(guò)原生的方式進(jìn)行操作,下面這篇文章主要給大家介紹了關(guān)于js修改元素樣式的九種方式,需要的朋友可以參考下2024-04-04
點(diǎn)選TOP后并不是直接跳到頁(yè)頂?shù)?，而是滾動(dòng)上去
滾動(dòng)至頁(yè)頂，比以前的直接跳到頁(yè)頂效果好很多，正的很不錯(cuò)2008-09-09
BootStrapTable服務(wù)器分頁(yè)實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁(yè)，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺得這個(gè)框架非常好用，支持服務(wù)器端分頁(yè)，此篇主要寫的主要是關(guān)于服務(wù)器分頁(yè),需要的朋友可以參考下2016-12-12
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識(shí),包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
網(wǎng)頁(yè)中可關(guān)閉的漂浮窗口實(shí)現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口，想必大家并不陌生吧，下面為大家簡(jiǎn)單介紹下具體的實(shí)現(xiàn)，有需要的朋友可以參考下2013-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript中遍歷的十種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript判斷變量名是否存在數(shù)組中的實(shí)例
下面小編就為大家分享一篇JavaScript判斷變量名是否存在數(shù)組中的實(shí)例，具有很的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本文給大家講解的是使用php和javascript實(shí)現(xiàn)的判斷訪客終端類型的方法集錦，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-06-06
Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
本文主要介紹了純js仿淘寶京東商品放大鏡功能的實(shí)例。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03最新評(píng)論