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入门第一课 jQuery选择符
Mar 14 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
一个可复用的vue分页组件
May 15 Javascript
VUE长按事件需求详解
Oct 18 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
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知道与问问的采集插件代码
2010/10/12 PHP
PHP获取文件行数的方法
2015/06/10 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
python与php实现分割文件代码
2017/03/06 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python中Unittest框架的具体使用
2019/08/27 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python十进制转二进制的详解
2020/02/07 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
中文师范生自荐信
2014/01/30 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
思想政治表现评语
2015/01/04 职场文书
小学国庆节活动总结
2015/03/23 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Java实现多文件上传功能
2021/06/30 Java/Android