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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
js正则相关知识点专题
May 10 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
Html5生成验证码的示例代码
May 10 Javascript
小程序实现侧滑删除功能
Jun 25 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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
详解从Vue-router到html5的pushState
2018/07/21 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python处理xml文件的方法小结
2017/05/02 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python装饰器结合递归原理解析
2020/07/02 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
毕业评语大全
2014/05/04 职场文书
建材投资建议书
2014/05/16 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
户外活动总结
2015/02/04 职场文书
自荐信格式范文
2015/03/04 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书