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

 更新时间:2023年02月09日 10:02:05   作者:mick  
最近突然有个新的想法,想去看看前端的小库来提升自己的编码能力。但是又不知道怎么去证明自己是否真的看懂了,那就实现一个omit函数吧

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

添加测试文件

我们通过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股票的动态买卖规划实例分析上篇

    JavaScript股票的动态买卖规划实例分析上篇

    这篇文章主要介绍了JavaScript对于动态规划解决股票问题的真题例举讲解。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • stackoverflow常用工具库总结

    stackoverflow常用工具库总结

    这篇文章主要为大家介绍了stackoverflow常用工具库总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序实现瀑布流分页滚动加载

    微信小程序实现瀑布流分页滚动加载

    这篇文章主要为大家详细介绍了微信小程序实现瀑布流分页滚动加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解webpack性能优化——DLL

    详解webpack性能优化——DLL

    本篇文章主要介绍了详解webpack性能优化——DLL,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 跟我学Nodejs(二)--- Node.js事件模块

    跟我学Nodejs(二)--- Node.js事件模块

    events是node.js 最重要的模块,events模块只提供了一个对象events.EventEmitter,EventEmitter 的核心是事件发射与事件监听器。
    2014-05-05
  • PHP自动加载autoload和命名空间的应用小结

    PHP自动加载autoload和命名空间的应用小结

    PHP的自动加载就是我们加载实例化类的时候,不需要手动去写require来导入这个class.php文件,程序自动帮我们加载导入进来这.篇文章主要介绍了PHP自动加载autoload和命名空的应用,需要的朋友可以参考下
    2017-12-12
  • javascript addLoadEvent函数说明

    javascript addLoadEvent函数说明

    网页加载完整后会触发一个onload事件,默认地一个事件只能和一个函数绑定。
    2010-01-01
  • 兼容FF和IE的动态table示例自写

    兼容FF和IE的动态table示例自写

    Js实现的动态增加表格的文章有很多,但大多数都不兼容FF和IE,于是手写了一个,经测试效果还不错,特此与大家分享,感兴趣的朋友不要错过
    2013-10-10
  • js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

    js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

    一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。
    2010-02-02
  • JS实现随机抽选获奖者

    JS实现随机抽选获奖者

    这篇文章主要介绍了JS实现随机抽选获奖者,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论