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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 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
php学习笔记之基础知识
2014/11/08 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php筛选不存在的图片资源
2015/04/28 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python查找相似单词的方法
2015/03/05 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
婚前协议书范本
2014/04/15 职场文书
环保建议书400字
2014/05/14 职场文书
计划生育标语
2014/06/23 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
高考1977观后感
2015/06/04 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
党员读书活动心得体会
2016/01/14 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
详解MySQL 联合查询优化机制
2021/05/10 MySQL
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js