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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
微信小程序实现弹框效果
May 26 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安全编程之加密功能
2006/10/09 PHP
PHP网站提速三大“软”招
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
Python函数和模块的使用总结
2019/05/20 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
冰雪公主观后感
2015/06/16 职场文书
贫困证明书范文
2015/06/16 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
Python中requests库的用法详解
2022/06/05 Python