JavaScript手写源码之omit函数的实现

更新时间：2023年02月09日 10:02:05 作者：mick

最近突然有个新的想法，想去看看前端的小库来提升自己的编码能力。但是又不知道怎么去证明自己是否真的看懂了，那就实现一个omit函数吧

添加测试文件

我们通过vitest来实现测试的功能。

pnpm add -D vitest

然后再package.json文件中添加我们的执行脚本

 "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({})
  })
})

实现omit函数

我们要做的肯定是是要将测试文件通过。如果测试通过了，那就说明我们的功能基本上是已经实现了，剩下的是代码重构了。

根据测试文件我们可以看到，提出对象中的属性生成一个新的对象，但是原对象是不发生改变的。那可以用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
}

执行测试文件

到此这篇关于JavaScript手写源码之omit函数的实现的文章就介绍到这了,更多相关JavaScript omit函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript库omit源码解析

js修改元素样式的九种方式总结
用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式,有的时候确实需要我们通过原生的方式进行操作,下面这篇文章主要给大家介绍了关于js修改元素样式的九种方式,需要的朋友可以参考下
2024-04-04
点选TOP后并不是直接跳到页顶的，而是滚动上去
滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错
2008-09-09
BootStrapTable服务器分页实例解析
项目中经常会使用到表格，数据量大的时候还需要进行分页，项目设计阶段，我选择了bootstrapTable的js插件，个人觉得这个框架非常好用，支持服务器端分页，此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
2016-12-12
老生常谈document.ready和window.onload
这篇文章主要介绍了document.ready和window.onload的相关知识,包括document.ready和window.onload的区别,要使用document.ready()或者document.onload()的原因分析,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2024-01-01
网页中可关闭的漂浮窗口实现可自行调节
广告式的漂浮窗口，想必大家并不陌生吧，下面为大家简单介绍下具体的实现，有需要的朋友可以参考下
2013-08-08
JavaScript中遍历的十种方法总结
这篇文章主要给大家介绍了关于JavaScript中遍历的十种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
JavaScript判断变量名是否存在数组中的实例
下面小编就为大家分享一篇JavaScript判断变量名是否存在数组中的实例，具有很的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
判断访客终端类型集锦
本文给大家讲解的是使用php和javascript实现的判断访客终端类型的方法集锦，十分的简单实用，有需要的小伙伴可以参考下。
2015-06-06
Javascript函数式编程简单介绍
什么是函数式编程？根据百度百科的描述，“函数式编程是种编程典范，它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算（lambda calculus）。而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。”
2015-10-10
纯js仿淘宝京东商品放大镜功能
本文主要介绍了纯js仿淘宝京东商品放大镜功能的实例。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03

JavaScript手写源码之omit函数的实现

目录

添加测试文件

实现omit函数

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具