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中链式调用之研习
Apr 07 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
javascript RegExp 使用说明
May 21 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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/08/08 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Django实现快速分页的方法实例
2017/10/22 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
演讲开场白和结束语
2015/05/29 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Pytest中conftest.py的用法
2021/06/27 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技