JavaScript手寫源碼之omit函數(shù)的實現(xiàn)
最近突然有個新的想法,想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了,那就實現(xiàn)一個mini的吧。
添加測試文件
我們通過vitest來實現(xiàn)測試的功能。
pnpm add -D vitest
然后再package.json文件中添加我們的執(zhí)行腳本
"scripts": {
"test": "vitest"
}接著我們就可以編寫測試文件了
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({})
})
})實現(xiàn)omit函數(shù)
我們要做的肯定是是要將測試文件通過。如果測試通過了,那就說明我們的功能基本上是已經(jīng)實現(xiàn)了,剩下的是代碼重構(gòu)了。
根據(jù)測試文件我們可以看到,提出對象中的屬性生成一個新的對象,但是原對象是不發(fā)生改變的。那可以用Object.assign,下面介紹一個Object.assign
Object.assign() 方法將所有可枚舉(Object.propertyIsEnumerable() 返回 true)和自有(Object.hasOwnProperty() 返回 true)屬性從一個或多個源對象復(fù)制到目標對象,返回修改后的對象。
我們首先利用Object.assign將原對象復(fù)制一份,然后遍歷復(fù)制過后的對象將需要剔除的屬性刪除即可。
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í)行測試文件

到此這篇關(guān)于JavaScript手寫源碼之omit函數(shù)的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript omit函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例
這篇文章主要介紹了bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-03-03
JS插件clipboard.js實現(xiàn)一鍵復(fù)制粘貼功能
這篇文章主要介紹了JS插件clipboard.js實現(xiàn)一鍵復(fù)制粘貼功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08
JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
JavaScript模擬實現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實現(xiàn),文中的示例代碼講解詳細,對我們學(xué)習有一定幫助,需要的可以參考一下2022-04-04

