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 获取LI里的内容
Dec 17 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
js+html实现点名系统功能
Nov 05 Javascript
package.json中homepage属性的作用详解
Mar 11 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
vue+eslint+vscode配置教程
2019/08/09 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python抓取网页内容示例分享
2014/02/24 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
会计自我鉴定范文
2013/10/06 职场文书
师范应届生求职信
2013/11/15 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
安全生产责任书范本
2014/04/15 职场文书
给老师的一封感谢信
2015/01/20 职场文书
楚门的世界观后感
2015/06/03 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js