这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 使用 concat 方法对数组进行合并的方法,本文介绍的非常详细,具有参考借鉴价值,需要的朋友一起看看吧
在介绍前,抛出一个问题:如何将多个数组合并为一个数组?
以下的分享会分为如下小节:
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 方法
说完基础的知识,给大家看看我最近遇到的一个题目。原题是这样的。
看例子就能明白是什么意思了。
这道题目中,其中一个解决方案就是:
- 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 方法对数组进行合并的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0625/331992.html