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编程的10个实用小技巧
Apr 18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
javascript填充默认头像方法
Feb 22 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
express.js中间件说明详解
Mar 19 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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面向对象之工作单元(实例讲解)
2017/06/26 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
python类继承用法实例分析
2014/10/10 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
浅谈Python peewee 使用经验
2017/10/20 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python list格式数据excel导出方法
2018/10/31 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
合作协议书怎么写
2014/04/18 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
酒店前台辞职书
2015/02/26 职场文书
工程款催款函
2015/06/24 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
python如何进行基准测试
2021/04/26 Python
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
处理canvas绘制图片模糊问题
2022/05/11 Javascript