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 树形结构的选择器
Feb 15 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python定时执行指定函数的方法
2015/05/27 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
Linux的文件类型
2012/03/07 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
运动会致辞稿50字
2014/02/04 职场文书
书法比赛获奖感言
2014/02/10 职场文书
六查六看自查材料
2014/02/17 职场文书
仓库主管岗位职责
2014/03/02 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
高中生旷课检讨书
2014/10/08 职场文书
小学教育见习报告
2014/10/31 职场文书
资金申请报告范文
2015/05/14 职场文书
南极大冒险观后感
2015/06/05 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL