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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php中的观察者模式简单实例
2015/01/20 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python实现清屏的方法
2015/04/30 Python
简单实现python进度条脚本
2017/12/18 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
大型活动策划方案
2014/01/12 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
先进班集体事迹材料
2014/12/25 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android