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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
php模板原理讲解
2013/11/13 PHP
帝国cms目录结构分享
2015/07/06 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jsonp原理及使用
2013/10/28 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
企业口号大全
2014/06/12 职场文书
个人委托书范本
2014/09/13 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
研究生简历自我评
2015/03/11 职场文书
退货证明模板
2015/06/23 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis