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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
Express框架之connect-flash详解
May 31 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
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中输出转义JavaScript代码的实现代码
2011/04/22 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python虚拟环境virualenv的安装与使用
2016/12/18 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
在python shell中运行python文件的实现
2019/12/21 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
个人简历自我评价八例
2013/10/31 职场文书
规划编制实施方案
2014/03/15 职场文书
校园环保建议书
2014/05/14 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL