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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
node省市区三级数据性能测评实例分析
Nov 06 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中for循环语句的几种变型
2007/03/16 PHP
php中autoload的用法总结
2013/11/08 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
NET程序员上机面试题
2015/05/23 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
财务个人年度总结范文
2015/02/26 职场文书
教师自荐信范文
2015/03/06 职场文书
保护校园环境倡议书
2015/04/28 职场文书
农村老人去世追悼词
2015/06/23 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript