JavaScript手寫(xiě)源碼之omit函數(shù)的實(shí)現(xiàn)

更新時(shí)間：2023年02月09日 10:02:05 作者：mick

最近突然有個(gè)新的想法，想去看看前端的小庫(kù)來(lái)提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實(shí)現(xiàn)一個(gè)omit函數(shù)吧

添加測(cè)試文件

我們通過(guò)vitest來(lái)實(shí)現(xiàn)測(cè)試的功能。

pnpm add -D vitest

然后再package.json文件中添加我們的執(zhí)行腳本

 "scripts": {
    "test": "vitest"
  }

接著我們就可以編寫(xiě)測(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手寫(xiě)源碼之omit函數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript omit函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript庫(kù)omit源碼解析

相關(guān)文章

深入理解js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程,結(jié)合實(shí)例形式詳細(xì)分析了A*尋路算法的具體概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
bootstrap-table實(shí)現(xiàn)表頭固定以及列固定的方法示例
這篇文章主要介紹了bootstrap-table實(shí)現(xiàn)表頭固定以及列固定的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JS插件clipboard.js實(shí)現(xiàn)一鍵復(fù)制粘貼功能
這篇文章主要介紹了JS插件clipboard.js實(shí)現(xiàn)一鍵復(fù)制粘貼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JS數(shù)據(jù)類型分類及常用判斷方法
這篇文章主要介紹了JS數(shù)據(jù)類型分類及常用判斷方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
JavaScript模擬實(shí)現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下
2022-04-04
JS面向?qū)ο缶幊讨畬?duì)象使用分析
在AJAX興起以前，很多人寫(xiě)JS可以說(shuō)都是毫無(wú)章法可言的，基本上是想到什么就寫(xiě)什么，就是一個(gè)接一個(gè)的函數(shù)function，遇到重復(fù)的還得copy，如果一不小心函數(shù)重名了，還真不知道從何開(kāi)始查找錯(cuò)誤
2010-08-08
Array的push與unshift方法性能比較分析
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開(kāi)頭添加。
2011-03-03
JavaScript防抖案例講解
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
javascript 精確獲取樣式屬性（上）
設(shè)置與獲取樣式屬性是UI控件與特效庫(kù)非常關(guān)鍵的部分，設(shè)置樣式我們基本可以用cssText來(lái)包打天下，但獲取樣式就不是這回事了。
2010-01-01