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 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
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 短链接算法收集与分析
2011/12/30 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue + axios get下载文件功能
2019/09/25 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python实现类继承实例
2014/07/04 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
一张图带我们入门Python基础教程
2017/02/05 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Pandas的Apply函数具体使用
2020/07/21 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
2014年班务工作总结
2014/12/02 职场文书
新郎结婚保证书
2015/02/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书