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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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中cookies使用指南
2007/03/16 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Django进阶之CSRF的解决
2018/08/01 Python
详解Python3 基本数据类型
2019/04/19 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
委托书怎么写
2014/07/31 职场文书
歌剧魅影观后感
2015/06/05 职场文书
从事会计工作年限证明
2015/06/23 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Vue详细的入门笔记
2021/05/10 Vue.js