javascript使用 concat 方法对数组进行合并的方法


Posted in Javascript onSeptember 08, 2016

在介绍前,抛出一个问题:如何将多个数组合并为一个数组?

以下的分享会分为如下小节:

1.concat方法的基础介绍

2.从实例中感受concat方法

1.concat方法的基础介绍

concat方法用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变。

console.log([].concat([1],[2],[3])); // [1, 2, 3]
console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]]
console.log([].concat(4,[[5,6],[7]])); // [4, [5, 6], [7]]

上面代码中,第一个返回值是将一个空数组与三个数组[1],[2],[3]合并为一个数组,因此返回了[1, 2, 3]。第二个是将一个空数组与一个二维数组合并,二维数组的成员为[1],[2],[3],因此返回了[[1], [2], [3]],注意,返回的是二维数组。第三个例子同理。这里对概念的理解很重要,即将新数组的成员,添加到原数组的尾部。

除了接受数组作为参数,concat也可以接受其他类型的值作为参数。它们会作为新的元素,添加数组尾部。

console.log([].concat(1,2,3)); //[1,2,3];
//等同于
console.log([].concat(1,[2,3])); //[1,2,3];
console.log([].concat([1],[2,3])); //[1,2,3];

这里虽然内容较少,看起来挺简单。但是真正理解起来真的不容易。

2.从实例中感受concat方法

说完基础的知识,给大家看看我最近遇到的一个题目。原题是这样的。

javascript使用 concat 方法对数组进行合并的方法

看例子就能明白是什么意思了。

这道题目中,其中一个解决方案就是:

var flatten = function (arr){
return [].concat.apply([],arr);
};

这一段简单的函数就可以实现将数组中的元素合并的功能。但是当我在理解这个返回值的时候,出现了一个问题。

问题:为什么使用apply方法和没有使用apply方法会有区别?

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

 上面代码中,同样是在一个空数组中向尾部添加新数组,第一个返回的是[1,2,3]。第二个却是一个二维数组。

经过一段时间的折腾,终于理解了其中不同的原因所在。

首先,我们在空数组中调用实例方法concat的时候,是传入concat中的参数,在push到数组的末尾。也就是说,会将空数组与传入的数组的最外层数组进行合并,然后返回一个新数组。

console.log([].concat(1,2,3)); //[1, 2, 3]
console.log([].concat([1],[2],[3])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]
console.log([].concat([[[1],[2],[3]]])); // [[[1], [2], [3]]]

上面代码中,从几个数组,到一维数组,二维数组,三维数组逐渐变化的。

在Javascript中call,apply,bind方法的详解与总结 文章中,有提到 apply方法的作用与call方法类似,也是改变this指向(函数执行时所在的作用域),然后在指定的作用域中,调用该函数。同时也会立即执行该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数。

apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined或者this,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,在调用时传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加。

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

从代码可以看出,第一段代码是先在空数组上先调用了concat方法,该方法的作用是将新数组的成员,添加到原数组的尾部。再调用了apply方法,传入第一个参数,指定对象执行时所在的作用域,而第二个参数的作用是将数组中的所有成员一次作为参数,在调用时传入数组中。

因此,在concat,apply方法同时使用的时候,两个方法的作用会叠加,也就出现了与单独使用concat不同的现象。看个例子。

console.log([].concat([1,2,3])); //[1, 2, 3]
console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3]
console.log([].concat([[1],[2],[3]]));//[[1], [2], [3]]
console.log([].concat.apply([],[[[1],[2],[3]]]));//[[1], [2], [3]]
console.log([].concat([[[1],[2],[3]]]));//[[[1], [2], [3]]]
console.log([].concat.apply([],[[[[1],[2],[3]]]]));//[[[1], [2], [3]]]

上面代码中,concat方法将最数组合并,然后在合并的基础上在对下一层数组进行合并。

console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3]
//相当于
console.log([].concat(1,2,3)); //[1,2,3]

  总结:

1.单独使用concat方法时,会将新数组的成员,添加到原数组的尾部。

2.使用apply方法来指定concat方法的this指向时,会让两个方法的作用叠加。

3.数组元素合并的方法:

var flatten = function (arr){
return [].concat.apply([],arr);
}; 
var flatten = function (array){
return array.reduce(function(a,b){
return a.concat(b);
},[])
}

以上所述是小编给大家介绍的javascript使用 concat 方法对数组进行合并的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
js传值 判断
2006/10/26 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python快排算法详解
2019/03/04 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python程序变成软件的实操方法
2019/06/24 Python
python 字典操作提取key,value的方法
2019/06/26 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
extern是什么意思
2016/03/10 面试题
高三体育教学反思
2014/01/29 职场文书
陈欧的广告词
2014/03/18 职场文书
销售顾问工作计划书
2014/08/15 职场文书
公司保洁员管理制度
2015/08/04 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书