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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
Jquery 效果使用详解
Nov 23 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 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/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python getopt详解及简单实例
2016/12/30 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Django logging配置及使用详解
2019/07/23 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python解析微信dat文件的方法
2020/11/30 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
高三语文教学反思
2014/01/15 职场文书
目标管理责任书
2014/04/15 职场文书
学风建设演讲稿
2014/09/12 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年教师节活动总结
2015/03/20 职场文书