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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
jquery 选择器部分整理
Oct 28 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 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使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
PHP之header函数详解
2021/03/02 PHP
js showModalDialog参数的使用详解
2014/01/07 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Less 安装及基本用法
2018/05/05 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Django与JS交互的示例代码
2017/08/23 Python
python读取文件名称生成list的方法
2018/04/27 Python
python实现电子产品商店
2019/02/26 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python 如何创建一个线程池
2020/07/28 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
什么是继承
2013/12/07 面试题
优良学风班申请材料
2014/02/13 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫