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 String 的扩展方法集合
Jun 01 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python 可爱的大小写
2008/09/06 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
python多重继承实例
2014/10/11 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
python 瀑布线指标编写实例
2020/06/03 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
园艺专业毕业生求职信
2014/09/02 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
施工安全员岗位职责
2015/04/11 职场文书
二婚主持词
2015/06/30 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书