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 相关文章推荐
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
js 图片等比例缩放代码
May 13 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
js实现继承的5种方式
Dec 01 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
理解JavaScript原型链
Oct 25 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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 魔术方法使用说明
2009/10/20 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python实现实时监控文件的方法
2016/08/26 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python调用C语言程序方法解析
2020/07/07 Python
python线程优先级队列知识点总结
2021/02/28 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
三年级小学生评语
2014/04/22 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技