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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
jQuery实现增删改查
Dec 22 jQuery
如何用JS实现网页瀑布流布局
Apr 24 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
MVC模式的PHP实现
2006/10/09 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英语生日邀请函
2014/01/23 职场文书
秘书英文求职信
2014/04/16 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2014年店长工作总结
2014/11/17 职场文书
通报表扬范文
2015/01/17 职场文书
小学英语复习计划
2015/01/19 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python