你可能不知道的JS函数

期权梦想家
• 阅读 660

1 前言

日常业务写的太多已经麻痹了神经,很多本该知道的知识早已抛之脑后,大家都知道在JS中函数是一等公民,但是竟然{有人|zuo zhe}连它的特性都不清楚,真是惭愧。

2 起因

在日常业务开发中,通常都会在数据中给一个默认值,然后在请求后端数据后替换掉默认值,如果完全替换整个对象肯能并不是我们想要的,也可能会出现一些为止的错误,又或者需要对一些数据做修改,这个时候就需要我们写一个函数去替换每个key对应的value,就在昨天我也遇到了同样的事情,废话就不多说了,直接上代码。

// form1为原始数据
// form2为后端返回数据
const mapForm = (form1, form2) => {
  for (let key in form1) {
    if (key in form2) {
      form1[key] = form2[key]
    }
  }
}

const form1 = {
  name: '',
  age: 0
}
const form2 = {
  name: 'mazi',
  age: 26
}
mapForm(form1, form2)
console.log(form1) // { name: 'mazi', age: 26 }

3 问题

上面代码很明显可以看出在调用mapForm函数后form1的值已经和form2完全一致,其实这也正是我想要看到的,只是当时比较疑惑,因为之前并不知道js中函数如果传递复杂类型的话,形式参数和实际参数存在弱引用,所以这会导致form1的数据改变。

4 解决

如果在你的代码中也存在类似的情况,并且你不希望form1的对象改变,有个比较方便的办法就是直接使用JSON.parse(JSON.stringify(obj)的方式处理,代码修改如下:

...
- mapForm(form1, form2)
+ mapForm(JSON.parse(JSON.stringify(form1), form2)
console.log(form1) // { name: '', age: 0 }

因为直接使用JSON.parse(JSON.stringify(obj)的方式并不安全,某些数据类型并不会如愿,所以可以尝试使用lodash库提供的cloneDeep函数,方式如下:

const objects = [{ 'a': 1 }, { 'b': 2 }]

const deep = _.cloneDeep(objects)
console.log(deep[0] === objects[0]) // false

如果觉得这篇文章对你有帮助,帮忙点个关注,谢谢,后续会陆续更新文章。
你可能不知道的JS函数

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
11个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
JavaScript 的面向切面编程
我们都知道面向对象编程,或者至少听说过JavaScript领域的函数式编程,但是,你听说过面向切面编程吗?我知道,它听起来像是《魔法战队》中某一集出现的东西。然而,AOP是实际存在的。此外,虽然我们现在没有使用它,但它却可以被应用于我们日常会见到的一些用例中。它最大的优势在于,你可以毫不费力的将AOP与FP或OOP结合使用,就像J
Stella981 Stella981
3年前
Intellij IDEA神器居然还有这些小技巧
概述IntellijIDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜。出于对IntellijIDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的IntellijIDEA技巧分享给大家。本文是这个系列的第一篇,主要介绍一些你可能不知道的但是又实用的小技巧。我最爱
Stella981 Stella981
3年前
JavaScript面向对象编程的15种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念,面向对象编程不是基于类,而是基于原型去面向对象编程,JS中的函数属于一等对象,而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同。ps:本文之讲述面向对象编程的设计模式策略,JavaScript原型的基础请参考阮一峰面向
Wesley13 Wesley13
3年前
JBolt开发平台入门(13)
在开发中,有些业务简单的select可以满足,在复杂点AutoSelect组件可以满足AutoSelect组件已经可以满足配置几个html属性就能完成数据自动加载、组装、显示、个性化、校验、自动选中默认值等最近JFinal开发者计划成员群里有人喊需要autocomplete组件,在input上输入个关键字,希望通过关键字去数据库里查询相关数据
Wesley13 Wesley13
3年前
mysql学习 索引
  在平时开发过程中写sql时,我们通常都不太关心sql的性能,只有能给查出来数据,sql的执行速度不是太慢就不会去管它了。但是开发时期的数据量往往都不是太大,很多性能问题只有在生产环境中才会发现,如:数据过多、sql关联了太多的表,使用了太多的join、或者建立了索引,但是索引失效的问题。所以要解决这些性能上的难题,就要去研究mysql最为重要的特性索
Stella981 Stella981
3年前
JavaScript函数式编程,“香”吗?
总说函数是JavaScript的一等公民,很多人就问了,它凭什么?其实凭的就是对于JS这种没有明确归类的“多范式语言”,函数式编程拥有着天然的优势。在JS里,函数本身就被视作对象,可以有属性,能作为参数传给函数,也能作为函数的返回结果,十分便利。而这种特性对于代码日益庞大,业务逻辑逐渐复杂的前端来说称得上是至关重要。
Stella981 Stella981
3年前
JavaScript 系列
一、前言有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。实现一个目的有多种途径,俗话说,条条大路通罗马。发散一下大家的思维以及拓展一下知识面。二、实现一个简短的sleep函数sleep函数主要用来做延迟执行的,很多编程语言都有sleep函数,但是javascript没有这个函数,我们实现一下:
待兔 待兔
11个月前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望