Compréhension approfondie de la méthode concat en javascript

Avant l'introduction, permettez-moi de poser une question : comment fusionner plusieurs tableaux en un seul ?

Le partage suivant sera divisé en sections suivantes :

1 Introduction de base à la méthode concat

2. Découvrez la méthode concat à partir d'exemples

1. Introduction de base à la méthode concat

La méthode concat est utilisée pour fusionner plusieurs tableaux. Il ajoute les membres du nouveau tableau à la fin du tableau d'origine, puis renvoie un nouveau tableau, laissant le tableau d'origine inchangé.

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

Dans le code ci-dessus, la première valeur de retour consiste à fusionner un tableau vide et trois tableaux [1], [2], [3] en un seul tableau, donc renvoyé [1, 2, 3]. La seconde consiste à fusionner un tableau vide avec un tableau à deux dimensions. Les membres du tableau à deux dimensions sont [1], [2], [3], donc [[1], [2], [3]. ] est renvoyé. Notez que ce qui est renvoyé est un tableau à deux dimensions. Il en va de même pour le troisième exemple. Il est important de comprendre le concept ici, c'est-à-dire ajouter les membres du nouveau tableau à la fin du tableau d'origine.

En plus d'accepter des tableaux comme paramètres, concat peut également accepter d'autres types de valeurs comme paramètres. Ils seront ajoutés à la fin du tableau en tant que nouveaux éléments.

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

Bien qu'il y ait moins de contenu ici, cela semble assez simple. Mais ce n’est vraiment pas facile à comprendre.

2. Découvrez la méthode concat à partir d'exemples

Après avoir parlé des connaissances de base, laissez-moi vous montrer un problème que j'ai rencontré récemment. La question initiale est la suivante.

Vous pouvez comprendre ce que cela signifie en regardant l'exemple.

Dans cette question, l'une des solutions est :

var flatten = function (arr){
 return [].concat.apply([],arr);
};

Cette fonction simple peut combiner les éléments du tableau. Mais lorsque j’ai compris cette valeur de retour, un problème est survenu.

Question : Pourquoi y a-t-il une différence entre utiliser la méthode apply et ne pas utiliser la méthode apply ?

console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]

Dans le code ci-dessus, un nouveau tableau est également ajouté à la fin d'un tableau vide, et le premier renvoyé est [1,2,3]. Le second est un tableau à deux dimensions.

Après une période d'agitation, j'ai enfin compris les raisons des différences.

Tout d'abord, lorsque nous appelons la méthode d'instance concat dans un tableau vide, nous passons les paramètres dans concat et les poussons à la fin du tableau.

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

Dans le code ci-dessus, il passe progressivement d'un élément unique à un tableau unidimensionnel, un tableau bidimensionnel et un tableau tridimensionnel.

Explication détaillée et résumé des méthodes d'appel, d'application et de liaison en Javascript, il est mentionné dans l'article que la méthode d'application a une fonction similaire à la méthode d'appel. Elle modifie également le pointeur this dans un. fonction (la portée dans laquelle la fonction est exécutée), puis appelez la fonction dans la portée spécifiée. La fonction sera également exécutée immédiatement. La seule différence est qu'il reçoit un tableau en paramètre lors de l'exécution de la fonction.

Le premier paramètre de la méthode apply est également l'objet vers lequel cela pointe. S'il est défini sur null ou undefined ou this, cela équivaut à spécifier l'objet global. Le deuxième paramètre est un tableau, et tous les membres du tableau sont utilisés tour à tour comme paramètres et transmis à la fonction d'origine lors de l'appel. Les paramètres de la fonction d'origine doivent être ajoutés un par un dans la méthode call, mais dans la méthode apply, ils doivent être ajoutés sous forme de tableau.

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]

Dans le code ci-dessus, la méthode concat est utilisée directement dans la première moitié pour fusionner les paramètres entrants dans un tableau vide. Dans la seconde moitié, la méthode d'instance apply de l'objet String est appelée, celle-ci à l'intérieur de la fonction concat() est pointée vers [], et sous la portée [], les paramètres requis pour appeler concat sont transmis sous forme de tableau. Regardons quelques exemples supplémentaires.

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

Résumé :

1 Lorsque la méthode concat est utilisée seule, les membres du nouveau tableau seront ajoutés à la fin du tableau d'origine, puis un nouveau tableau sera renvoyé, le tableau d'origine reste inchangé ; si d'autres types de valeurs sont transmis, elles seront ajoutées à la fin du tableau en tant que nouveaux éléments.

2. Méthode de fusion des éléments du tableau :

var flatten = function (arr){
 return [].concat.apply([],arr);
};

var flatten = function (array){
 return array.reduce(function(a,b){
 return a.concat(b);
 },[])
}

Si vous ne comprenez pas la méthode apply, vous pouvez consulter cet article : Explication détaillée et résumé des méthodes call, apply et bind en Javascript