JavaScript模拟数组合并concat


Posted in Javascript onMarch 06, 2016

定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

参数 描述
arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
返回值

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组

我们有两个这样的数组

var arr1 = [1,2,3];
var arr2 = [4,5,6];

任务:合并成这样,请至少提供两种思路。

var arr1 = [1,2,3,4,5,6];

思路一:我们可以把第二个数组里面的值挨个添加到第一个数组的末尾。

1:数组怎么添加内容 ?[] || push || shift

2:怎么向数组最后一个索引添加值? push || [数组.length]

3:怎么挨个向数组一添加内容? for

4: for循环多少次? 你要添加多少就循环多少次,也就是arr2的长度

5: 要添加什么内容?arr2里面的值,怎么获取,arr[?]

代码实现:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
for(var i=0;i<arr2.length;i++){
arr1.push(arr2[i]);
}
console.log(arr1); //[1, 2, 3, 4, 5, 6]

问题来了,原生js提供的concat方法不会修改原数组(arr1)的内容,而是返回一个新数组。

分析:既然是要返回值,那我们可以定义一个函数,然后再定义一个变量,这个变量来接收我们添加好的值,但是我们会一个问题,那就是不能在arr1上面push内容了,不然还是会修改原数组的内容。于是我觉得要把原数组复制一份,但是又有一个问题,就是对象是引用类型,简单来说虽然我们可以把数组1复制到一个变量中,但是如果我用push或者[]的形式修改里面的值,或者添加,那么我们的原数组也会被修改,(如果你不知道什么是引用类型,可以去看我博客的第一页或者在第二页)这不是我们想要的结果,但是我们必须复制一份arr1。此时你有什么解决方法?

解决数组引用问题:

for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}

我的思路是把数组1的值挨个的添加到arr3这个数组中,此时的arr3是这样的

console.log(arr3) //[1, 2, 3]

任务:在这个新的数组arr3中添加arr2的所以值,方法和第一步一样,如果忘记了回头看看。

代码实现:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [];
for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}
for(var i=0;i<arr2.length;i++){
arr3.push(arr2[i]);
}
console.log(arr3);

问题:虽然这个已经实现了数组的合并,但是我每次合并都要重新写一份,那样太麻烦,于是我们得想个办法把它封装成一个函数,下次我们要用的时候调用它就行。

var arr1 = [1,2,3];
var arr2 = [4,5,6,7];
function Concat(arr1,arr2){
var arr3 = [];
for(var i=0;i<arr1.length;i++){
arr3[i] = arr1[i];
}
for(var i=0;i<arr2.length;i++){
arr3.push(arr2[i]);
}
return arr3;
}
console.log(Concat(arr1,arr2));

思路二:

分析:把arr1和arr2都转换成字符串,然后将这两段字符串相加得到一个组合,然后再把这个字符串转成数组。

代码实现:

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
var arr3 = (arr1.join(",")+","+arr2.join(",")).split(",");

出了点小问题,这个这个数组里面的值是字符串了。

["1", "2", "3", "4", "5", "6", "7", "8", "9"]

解决思路:遍历这个数组,挨个把他们转换成数字。

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
var arr3 = (arr1.join(",")+","+arr2.join(",")).split(",");
for(var i=0;i<arr3.length;i++){
arr3[i] = +arr3[i];
}
console.log(arr3);

课外扩展:继承版

var arr1 = [1,2,3];
var arr2 = [4,5,6,7,8,9];
Array.prototype.Concat = function(arr){
var arr3 = [];
for(var i=0;i<this.length;i++){
arr3[i] = this[i];
}
for(var i=0;i<arr.length;i++){
arr3.push(arr[i]);
}
return arr3;
}
console.log(arr1.Concat(arr2));

以上所述是小编给大家介绍的JavaScript模拟数组合并concat的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JS实现页面打印功能
Mar 16 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
JavaScript模拟push
Mar 06 #Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 #Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 #Javascript
JS面向对象编程详解
Mar 06 #Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 #Javascript
You might like
php正则
2006/07/07 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Js动态创建div
2008/09/25 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
TensorFlow变量管理详解
2018/03/10 Python
Python File readlines() 使用方法
2018/03/19 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python绘制多个曲线的折线图
2020/03/23 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python实现简单井字棋游戏
2020/03/04 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
高校教师个人总结
2015/02/10 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers