当前位置:网站首页 > Vue.js开发 > 正文

js的深拷贝和浅拷贝(js的深拷贝和浅拷贝哪个好)



在上家公司工作的时候,有一个需求是在前端部分完成筛选功能,一次拿到所有数据,然后根据条件筛选。通常情况下筛选是后台给接口,在数据量不大的情况下,也有人可能会遇到前端筛选这样的情况,特别写了这篇文章分享给大家,有问题请指出,互相学习。

一般情况下的单条件筛选,数组的filter方法就能够满足需求,本文讨论的重点是多条件下的复合筛选,并列出了几个相关知识点。

以下是很多个🌰🌰🌰🌰

 
  

根据单个名字筛选,用filter方法,判断name是否为目标名字即可

 
  

根据多个名字筛选,这里是用for循环遍历目标数组,然后用find方法找到后push到结果数组里,用find方法是重名情况下也能得到想要的结果。for循环可以用数组的一些遍历方法替代,代码可以更简化,示例就是大概表达个意思。

 
  

根据单个名字或者单个年龄筛选,用filter方法,判断条件之间是或的关系。

 
  

我最初是用了很笨的双for循环去做,发现很慢,而且并没有达到预期的效果。具体的心路历程已经太遥远,简单介绍以下这个筛选算法

首先是把筛选条件都塞到一个对象里,用object对象的keys方法获取到筛选的条件名,及需要筛选的是哪个条件,是name?age? gender?

然后使用filter方法对目标数据进行筛选,🌰如下⬇️

根据名字和年龄多元素筛选

 
  

例如这里,判断每条数据的name值是否在filters.name数组里,是的话返回true,判断filters.age是空数组的话直接返回true,空数组是模拟了age条件被清空的情况,我们仍然能得到正确的筛选数据。

 
  

falsy : 0 , false, "", null, undefined, NaN

在判断语句中,只有上面6种情况会是false,其余的都是true

 
  

我的理解是在遍历数组的时候:

Array.every的条件是「与」的关系,全真为真,及条件全为true则为true,有一个false就返回false

Array.some的条件是「或」的关系,有真为真,条件有一个true就返回true,条件全为false的时候才返回false

下面举个🌰

 
  

最近参与一些前端的面试工作,深拷贝与浅拷贝是我最爱问的问题之一。一个问题就考察了数据类型,数组操作,递归算法等。

因为数组是js里的引用类型,单纯复制时复制的是其引用关系。在对获取的数据进行筛选时,我并不希望影响原始数据,所以我要用到「深拷贝」得到与原始数据数据结构完全相同又相互独立的数据,而不是只复制其引用关系。

 
  

这个知识点与本文关系不大。😄 抱歉之前的误导。

这个是看掘金小册前端面试指南看到的,讲算法的时候提了一下递归算法的优化,初见的时候又被惊艳到,还没有在项目里用到。感兴趣的可以试试,这个是斐波那契数列和。可以自己在浏览器里敲一下,试试不用缓存与用缓存的运算次数差别。

 
  

完!

到此这篇js的深拷贝和浅拷贝(js的深拷贝和浅拷贝哪个好)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue2关闭严格模式(vue去掉严格模式)2025-08-11 16:27:08
  • pcie5.0有什么用(pcie5.0最新消息)2025-08-11 16:27:08
  • de4dot反编译vue(vue反编译工具)2025-08-11 16:27:08
  • 安装vue报错(vue install报错)2025-08-11 16:27:08
  • jsj啥意思(jsjx是什么意思)2025-08-11 16:27:08
  • vue的钩子函数是什么(vue中的钩子是什么)2025-08-11 16:27:08
  • 字符串转intjava(字符串转json)2025-08-11 16:27:08
  • swagger2.0(swagger2.0配置输入list)2025-08-11 16:27:08
  • vue.js使用教程(vue.js如何使用)2025-08-11 16:27:08
  • pcie5.0电源接口(pci-e电源接口)2025-08-11 16:27:08
  • 全屏图片