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 相关文章推荐
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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编写daemon process详解及实例代码
2016/09/30 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python读取注册表中值的方法
2013/04/08 Python
python循环监控远程端口的方法
2015/03/14 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
SQL Server面试题
2016/10/17 面试题
Java面试题汇总
2015/12/06 面试题
材料采购员岗位职责
2013/12/17 职场文书
模范家庭事迹材料
2014/02/10 职场文书
生态养殖创业计划书
2014/05/06 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2015年度保密工作总结
2015/04/24 职场文书
大队委员竞选稿
2015/11/20 职场文书
python爬虫--selenium模块
2021/03/31 Python