La concatération est-elle une syntaxe es6 ?

concat n'est pas une syntaxe es6. Il est disponible en es5. L'avantage est qu'il a une compatibilité élevée et ne nécessite pas de traduction. La méthode concat est utilisée pour fusionner plusieurs tableaux, en utilisant la syntaxe « original array object.concat(new value) » ; cette méthode peut accepter des paramètres de tableau et d'autres types de valeurs comme paramètres. La méthode concat ajoutera les membres du nouveau tableau à la fin des membres du tableau d'origine, puis renverra un nouveau tableau, laissant le tableau d'origine inchangé.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

concat n'est pas la syntaxe es6, il est disponible en es5.

Méthode de tableau ES5 concat()

La méthode concat est utilisée pour concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

• 请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

• 实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里。即如果要进行concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

注意：concat只会拉平数组参数一次，不会拉平两次

arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]

• 如果数组成员包括对象，concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是新数组拷贝的是对象的引用。

var obj = { a: 1 };
var oldArray = [obj];

var newArray = oldArray.concat();

obj.a = 2;
newArray[0].a // 2

上面代码中，原数组包含一个对象，concat方法生成的新数组包含这个对象的引用。所以，改变原对象以后，新数组跟着改变。

扩展知识：数组合并的另一种方法

使用ES6扩展运算符…合并

const name1 = ['A','B','C'];
        const name2 = ['D','E','F'];
        const name = [...name1,...name2]
        console.log(name);

对比：ES6扩展运算符...与ES5-concat

concat是es5时就有的，优点是兼容性高，不需要转译

...fusionner

plusieurs tableaux

. Il ajoute les membres du nouveau tableau à la fin des membres du tableau d'origine, puis renvoie un nouveau tableau, laissant le tableau d'origine inchangé.

• Veuillez noter que la méthode concat() ne modifie pas le Array actuel, mais renvoie un nouveau Array.

arr1 = [...arr1, ...arr2];
  ↓ 相当于
function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
   for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; 
   } else { return Array.from(arr); }
}
arr1 = [].concat(_toConsumableArray(arr1), arr2);

En plus des tableaux comme paramètres, concat accepte également d'autres types de valeurs comme paramètres, qui sont ajoutés à la fin du tableau cible. rrreee

• En fait, la méthode concat() peut recevoir n'importe quel nombre d'éléments et de Array, et désassembler automatiquement le Array , puis ajoutez-les tous au nouveau Array. Autrement dit, si le paramètre de l'opération concat() est un tableau, alors les éléments du tableau sont ajoutés, pas le tableau.

rrreeeRemarque : concat n'aplatira les paramètres du tableau qu'une seule fois, pas deux fois🎜rrreee

• Si les membres du tableau incluent des objets, concat Le La méthode renvoie une 🎜copie superficielle🎜 du tableau actuel. La "copie superficielle" signifie que le nouveau tableau copie la référence du 🎜objet🎜.

rrreee🎜Dans le code ci-dessus, le tableau d'origine contient un objet et le nouveau tableau généré par la méthode concat contient une référence à cet objet. Par conséquent, après 🎜modification de l'objet d'origine, le nouveau tableau changera également🎜. 🎜🎜🎜🎜Connaissances étendues : une autre façon de fusionner des tableaux 🎜🎜🎜🎜🎜Utilisez l'opérateur de propagation ES6 … pour fusionner 🎜🎜rrreee🎜🎜🎜🎜Comparaison : opérateur de propagation ES6... vs ES5-concat🎜🎜 🎜 concat est disponible dans es5. L'avantage est qu'il a une compatibilité élevée et ne nécessite pas de traduction 🎜🎜... est une nouvelle syntaxe dans es6, qui simplifie la méthode d'écriture et le code semble plus concis. et intuitif, mais en fait C'est juste encapsulé, mais la méthode originale est toujours utilisée en bas. Ce qui suit est le résultat de la traduction babel🎜rrreee🎜 [Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜vidéo de programmation🎜]🎜.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!