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

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

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

添加測試文件

我們通過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）屬性從一個或多個源對象復制到目標對象，返回修改后的對象。

我們首先利用Object.assign將原對象復制一份，然后遍歷復制過后的對象將需要剔除的屬性刪除即可。

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript庫omit源碼解析

相關(guān)文章

js修改元素樣式的九種方式總結(jié)
用慣了vue和react之后可能會慢慢淡忘掉原生的一些操作dom的幾種方式,有的時候確實需要我們通過原生的方式進行操作,下面這篇文章主要給大家介紹了關(guān)于js修改元素樣式的九種方式,需要的朋友可以參考下
2024-04-04
點選TOP后并不是直接跳到頁頂?shù)?，而是滾動上去
滾動至頁頂，比以前的直接跳到頁頂效果好很多，正的很不錯
2008-09-09
BootStrapTable服務器分頁實例解析
項目中經(jīng)常會使用到表格，數(shù)據(jù)量大的時候還需要進行分頁，項目設計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務器端分頁，此篇主要寫的主要是關(guān)于服務器分頁,需要的朋友可以參考下
2016-12-12
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識,包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
2024-01-01
網(wǎng)頁中可關(guān)閉的漂浮窗口實現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口，想必大家并不陌生吧，下面為大家簡單介紹下具體的實現(xiàn)，有需要的朋友可以參考下
2013-08-08
JavaScript中遍歷的十種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中遍歷的十種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
JavaScript判斷變量名是否存在數(shù)組中的實例
下面小編就為大家分享一篇JavaScript判斷變量名是否存在數(shù)組中的實例，具有很的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
判斷訪客終端類型集錦
本文給大家講解的是使用php和javascript實現(xiàn)的判斷訪客終端類型的方法集錦，十分的簡單實用，有需要的小伙伴可以參考下。
2015-06-06
Javascript函數(shù)式編程簡單介紹
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
純js仿淘寶京東商品放大鏡功能
本文主要介紹了純js仿淘寶京東商品放大鏡功能的實例。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03