javascript使⽤concat⽅法对数组进⾏合并的⽅法
在介绍前,抛出⼀个问题:如何将多个数组合并为⼀个数组?
以下的分享会分为如下⼩节:
2.从实例中感受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);
javascript全局数组};
  这⼀段简单的函数就可以实现将数组中的元素合并的功能。但是当我在理解这个返回值的时候,出现了⼀个问题。
  问题:为什么使⽤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){
duce(function(a,b){
at(b);
},[])
}
以上所述是⼩编给⼤家介绍的javascript使⽤ concat ⽅法对数组进⾏合并的⽅法,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。