es6没有说的数组对象如何拷贝

最新推荐文章于 2022-07-20 16:01:05 发布
最新推荐文章于 2022-07-20 16:01:05 发布
阅读量192 收藏
点赞数
原文链接：https://juejin.im/post/5c811ecd6fb9a049c2333894
版权

最近做项目需要拷贝数组对象，遇到的问题 ，直接看代码废话不多说



拷贝后的copyArr 的地址address 应为“广东”，“贵州”才是期望得到的数据，但是看控制台输出arr、copyArr、changeArr这三个数组里面每个对象的address 都为“广东（深圳）”

由此得出他们指针都指向了同一个内存地址，[...copyArr]拷贝并没有开辟新的内存空间，当时也很纳闷，而且也思考了很久，然后再去亲手试，直接上图



可以看出这次拷贝copyArr,确实是期望的数据，说明es6 [...] 拷贝确实是开辟了新的内存空间，但是上面的数组对象也是这样拷贝的为什么又不行？，当初觉得很纳闷，而且 这个问题自己也找了好久，感觉代码木有错呀！

后来想到了Object.assign()拷贝对象，Object.assign()直接拷贝整个数组也不行，但是它可以拷贝数组里面的每个对象呀！因此用遍历去拷贝数组里面每个对象不就ok了？通过代码实践，确实能拷贝，直接上代码如下图



通过代码及控制台输出信息可以看到确实是能拷贝成功！

到这里肯定还有人问那还有没有别的方法了？对应我这种菜鸟来说也希望有其他的方法或者是更好的方法，因此我也查先资料，也有如下的方法，



直接看代码及控制台信息，这种方式也是可以拷贝的，而且看起来代码好像比上面的更少更简洁，但是这种方法也有缺陷的，如果你对象里面某个属性的值是undefined或者function的话这种方法是拷贝不到这这种类型的属性，或者你对象里面的某个属性的值是NaN的话拷贝出来的这个属性值会变成null,通过自己代码实践如下



因此可以根据业务的复杂性及对象的复杂程度来进行选择用那种方法更好，可能还会有其他更好的方法只是我这菜鸟不知道，如果你也有遇到这问题，或者正在解决这个问题的，或者有更好的方法的说出来让我或者大家也学习学习，有写的不好或者不对的地方希望大家多多指教。



转载于:https://juejin.im/post/5c811ecd6fb9a049c2333894

weixin_33691700
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6数组之扩展运算符操作实例分析
11-21
4. 替代`Array.from()`：对于某些非数组对象，如类数组对象，可以使用扩展运算符转换为真正的数组，如`const divs = [...document.querySelectorAll('div')]`。 5. 处理函数参数：扩展运算符可以方便地处理不定数量...
js数组的深拷贝
04-21
这是一种简单但有限的深拷贝方法，只适用于没有循环引用和函数的纯JSON对象的数组。示例代码如下： ```javascript function deepCopy(arr) { return JSON.parse(JSON.stringify(arr)); } var originalArray = [1,...
es6数组常用的方法
Mr___YangYang的博客
06-29 1376
filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素（注意：它不会对空数组检测，它不会改变原数组）1、Array.from( )：将对象或字符串转成数组，注意得有length。2、Array.of( )： 将一组值转换为数组。3、copyWithin(target，start(可选)，end(可选))：数组内数据的复制替换target：从该位置开始替换数据；start：从该位置开始读取数据，默认为0；end：到该位置停止数据的读取，默认为数组的长度4、find( )：用于
ES6复制数组
总结前端开发中遇到的问题，分享前端知识
05-18 1955
（1）复制数组 数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。 const a1 = [1, 2]; const a2 = a1; a2[0] = 2; a1 // [2, 2] 上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。 ES5 来复制数组： const a1 = [1, 2]; const a2 = a1.concat(); a2[0] = 2; a1 // [1, 2] 上面代
JS ES6对象或数组深拷贝详细教程
dingdingdandan
06-10 4373
拷贝就是把父对像的属性，全部拷贝给子对象，改变引用地址。 `本案例包含：` - 对象实现深拷贝 - 数组实现深拷贝
ES6深浅拷贝/数组的扩展/对象的拓展
你还有我
02-25 1245
目录数组的扩展forEach遍历map方法Array.form()Array.of()copyWithin()find()和findIndex()keys(),values(),entries()配合for...of循环includes()includes方法与indexOf()方法的区别对象扩展方法Object.assign()浅拷贝深拷贝用在数组上 数组的扩展 forEach遍历 //第一个参数为函数 //函数的第一个参数 是遍历的当前元素 //函数的第二个参数 当前元素的下标
JavaScript中十个一步拷贝数组的方法
weixin_34009794的博客
04-22 445
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下。 1、扩展运算符（浅拷贝） 自从ES6出现以来，这已经成为最流行的方法。它是一个很简单的语法，但是当你在使用类似于React和Redux这类库时，你会发现它是非常非常有用的。 numbers = [1, 2, 3]; numbersCopy = [...numbers]; 复制代码 这个方法不能...
js代码-改造数组对象内部对象属性结构
07-16
在JavaScript编程中，数组对象是常见的数据结构，用于存储一系列有序的数据。然而，有时我们可能需要根据业务需求改变数组中对象的属性结构。这通常涉及到遍历数组，修改每个对象，甚至可能涉及到创建新的对象来适应...
详解js中的对象的深浅拷贝
01-08
2. **`Object.assign()`**：这是ES6引入的方法，可以合并多个对象到一个新对象上，但它是浅拷贝。 3. **扩展运算符（`...`）**：与`Object.assign()`类似，扩展运算符也可以实现浅拷贝，将一个对象的属性复制到另一...
JavaScript 中对象的深拷贝
11-29
4. ES6 提供的 `Object.assign()` 方法只能实现浅拷贝，但可以结合其他方法来实现深拷贝，例如结合 `Object.keys()` 或 `Array.prototype.slice.call()` 来递归处理嵌套对象。 理解深拷贝和浅拷贝的概念对于避免...
ES6的数组、对象拷贝
rocklee的专栏
07-20 1294
备忘一下es6的数组、对象拷贝
深浅拷贝(es6)
helongzhi的博客
07-12 2332
深浅拷贝(es6)
es6中对象数组的拷贝方法
weixin_45343326的博客
03-04 3647
// es6数组的深拷贝方法 let arr = [1, 2, 3, 4, 5] let [...arr2] = arr; console.log(arr2); arr2[2] = 'zlc'; // 修改数组arr2之后的内容互不影响； console.log(arr2, 'arr2'); console.log(arr, ...
Es6 中快速复制数组几种方式
IT_Top
07-03 1万+
1、第一种通过for循环方式var arr = [1,2,3] var arr2 = []; for(var i =0; i<arr.length; i++){ arr2[i] = arr[i] } arr.push(4) arr2.pop() console.log(arr, arr2) //[1,2,3,4], [1,2]2、第二种通过Es6 Array.from() 方式v...
ES6 对象数组的深拷贝
Banterise的博客
04-02 2484
对于数组的深拷贝，习惯性的使用 […arr] 建立新地址，偶然间对某份对象数组数据进行同样的深拷贝时，发现修改新数组内部对象的元素依旧会影响到原数组对象 例如 let a = [ { name: "小李" } ]; let b = [...a]; b[0].name = "小张"; console.log(a[0].name); // 输出结果为"小张" 所以对于对象数组的整体深拷贝，其内部对...
ES6复制拷贝数组，对象，json数组
weixin_30312557的博客
05-06 507
扩展运算符的应用spread打散数组[...] （1）复制数组 数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。 const a1 = [1, 2]; const a2 = a1; a2[0] = 2; a1 // [2, 2] 上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。 ...
ES6复制数组//合并数组concat()和rest
qq_36641107的博客
03-02 7万+
如果只是用=号连接数组的话,就是一个指向的复制,这两个数组会同时变化的 //复制数组 (方法一:) var arr1=['a','b','c','d']; var cc=arr1.concat(); cc[1]='yy'; console.log(arr1);//["a", "b", "c", "d"] console.log(cc);//["a", "yy", "c&q
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法
热门推荐
FungLeo's Blog
02-08 13万+
javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法前言在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示： 如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。 因此，数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马，实现数组的深拷贝，是有好几种方法的。举例如下：for 循环
ES6(JavaScript)的深复制和浅复制
非完美世界
12-06 2万+
React中，我们会遇到一个有趣的问题，那就是对象的复制，为什么说有趣，是因为直觉和结果差距很大。 我们看一下这个例子： let a={tile:'深复制'}; let b=a; a.title='浅复制'; 那么我们会获得两个对象，一个a，一个b，a的title是浅复制，b的title是深复制。 但结果真是这样吗？ 我们console.log一下 咦，为啥嘞！！！！！！为啥两
js 对象数组深拷贝
最新发布
09-13
要对 JavaScript 对象数组进行深拷贝，可以使用一些方法。以下是常见的几种方法： 1. 使用 JSON 序列化和反序列化：将对象数组先通过 JSON.stringify() 方法转换为字符串，再通过 JSON.parse() 方法将字符串转换回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值