JavaScript中concat复制数组方法浅析


Posted in Javascript onJanuary 20, 2019

我们在需要进行数组复制的时候可能会想到以下的方法

代码

var arr1 = [1,2,3,4,5];

var arr2 = [];

arr2 = arr1;

console.log(arr1);

console.log(arr2);

执行结果如下:

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

在这个例子中,将数组arr1赋值给了另一个数组arr2。

查看执行结果,似乎复制了数组的内容并创建了相同的数组。

但是,由于数组是“引用类型”的数据,因此它不会复制该值,而只是共享存储该值的内存的位置。

因此,我们编写以下代码

arr2.push(6);

 

console.log(arr1);

console.log(arr2);

执行结果如下

[1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5, 6]

根据以上结果可以发现即使我们只给arr2添加新值6,但是数组arr1中也会添加一个6,这就是因为两个

数组都只引用存储值的位置,如果更改任一数组中的数据,两者都会改变。

所以下面我们就来使用concat方法复制数组

我们来看具体示例

var arr1 = [1,2,3,4,5]; 

var arr2 = [];

  

arr2 = arr1.concat();

arr2.push(6);

 

console.log(arr1);

console.log(arr2);

执行结果如下

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5, 6]

要将另一个数组复制到数组arr2,只需要在复制源arr1中执行concat()即可。

Javascript 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue调用语音播放的方法
Sep 27 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
JavaScript中import用法总结
Jan 20 #Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 #Javascript
js序列化和反序列化的使用讲解
Jan 19 #Javascript
vue-router传参用法详解
Jan 19 #Javascript
vue-router实现嵌套路由的讲解
Jan 19 #Javascript
vue-router实现编程式导航的代码实例
Jan 19 #Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
js资料prototype 属性
2007/03/13 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
详解Python验证码识别
2016/01/25 Python
深入浅析python with语句简介
2018/04/11 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
简单了解django文件下载方式
2020/02/10 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
公司董事长职责
2013/12/12 职场文书
竞选演讲稿范文
2013/12/28 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Go并发4种方法简明讲解
2022/04/06 Golang
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js
详解MySQL的内连接和外连接
2023/05/08 MySQL