深⼊理解javascript中concat⽅法
最近在恶补js知识的时候，总是会因为js强⼤的语法⽽感到震撼。因为以前对前端⽅⾯的疏忽，导致了⼀些理解的错误。因此痛改前⾮，下定决⼼，不管做什么事情，都要有专研的精神。
在介绍前，抛出⼀个问题：如何将多个数组合并为⼀个数组？
以下的分享会分为如下⼩节：
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);
};
这⼀段简单的函数就可以实现将数组中的元素合并的功能。但是当我在理解这个返回值的时候，出现了⼀个问题。
问题：为什么使⽤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]
javascript全局数组
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]]]
上⾯代码中，从单个元素，到⼀维数组，⼆维数组，三维数组逐渐变化的。
在⽂章中，有提到 apply⽅法的作⽤与call⽅法类似，也是改变某个函数中this指向（函数执⾏时所在的作⽤域），然后在指定的作⽤域中，调⽤该函数。同时也会⽴即执⾏该函数。唯⼀的区别就是，它接收⼀个数组作为函数执⾏时的参数。
apply⽅法的第⼀个参数也是this所要指向的那个对象，如果设为null或undefined或者this，则等同于指定全局对象。第⼆个参数则是⼀个数组，该数组的所有成员依次作为参数，在调⽤时传⼊原函数。原函数的参数，在call⽅法中必须⼀个个添加，但是在apply⽅法中，必须以数组形式添加。
console.log([].concat([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⽅法，将传⼊的参数合并到空数组中。下半段中，调⽤了String对象的实例⽅法apply，将concat()函数内部的this指向了[]，并且在[]作⽤域下，传⼊调⽤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]]]
总结：
1.单独使⽤concat⽅法时，会将新数组的成员，添加到原数组的尾部，然后返回⼀个新数组，原数组不变；如果传⼊的其他类型的值，它们会作为新的元素，添加到数组末尾。
2.数组元素合并的⽅法：
var flatten = function (arr){
return [].concat.apply([],arr);
};
var flatten = function (array){
duce(function(a,b){
at(b);
},[])
}
如果对不理解apply⽅法，可以前往这篇⽂章：
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！

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