JavaScript中concat方法详解与apply结合使用技巧

JavaScript中concat方法详解与apply结合使用技巧

近期在补充JavaScript基础知识时，常被其语法的灵活性所折服。由于过往前端学习的疏漏，曾产生过一些认知偏差。为此决定重新审视，无论从事何种工作，都需保持钻研精神。

在展开介绍之前，先提出一个问题：如何将多个数组合并为单个数组？

接下来的内容将分为以下几个部分进行阐述：

1.concat方法的基础介绍

2.从实例中感受concat方法

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];

虽然这部分内容看似简单，但深入理解其内部机制并非易事。

从实例中感受concat方法

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接收一个数组作为函数执行时的参数。

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（注：此处原文表述可能有误，通常指Function.prototype.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){
 return array.reduce(function(a,b){
 return a.concat(b);
 },[])
}

如果对apply方法不理解，可以前往这篇文章：Javascript中call，apply，bind方法的详解与总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！