Heim > Web-Frontend > Front-End-Fragen und Antworten > Ist concat eine es6-Syntax?

Ist concat eine es6-Syntax?

青灯夜游
Freigeben: 2022-10-18 17:02:47
Original
1531 Leute haben es durchsucht

concat ist keine es6-Syntax. Es ist in es5 verfügbar. Der Vorteil besteht darin, dass es eine hohe Kompatibilität aufweist und keine Übersetzung erfordert. Die Concat-Methode wird zum Zusammenführen mehrerer Arrays verwendet. Dabei wird die Syntax „ursprüngliches Array-Objekt.concat (neuer Wert)“ verwendet. Diese Methode kann Array-Parameter und andere Arten von Werten als Parameter akzeptieren. Die Concat-Methode fügt die Mitglieder des neuen Arrays am Ende der ursprünglichen Array-Mitglieder hinzu und gibt dann ein neues Array zurück, wobei das ursprüngliche Array unverändert bleibt.

Ist concat eine es6-Syntax?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

concat ist keine ES6-Syntax, Es ist in ES5 verfügbar.

ES5-Array-Methode concat()

concat-Methode wird zum 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}]
Nach dem Login kopieren

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

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]
Nach dem Login kopieren
  • 实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里。即如果要进行concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
Nach dem Login kopieren

注意:concat只会拉平数组参数一次,不会拉平两次

arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]
Nach dem Login kopieren
  • 如果数组成员包括对象,concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”,指的是新数组拷贝的是对象的引用
var obj = { a: 1 };
var oldArray = [obj];

var newArray = oldArray.concat();

obj.a = 2;
newArray[0].a // 2
Nach dem Login kopieren

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

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

使用ES6扩展运算符合并

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

Ist concat eine es6-Syntax?

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

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

...Zusammenführen

mehrerer Arrays

verwendet. Es fügt die Mitglieder des neuen Arrays am Ende der Mitglieder des ursprünglichen Arrays hinzu und gibt dann ein neues Array zurück, wobei das ursprüngliche Array unverändert bleibt.

  • Bitte beachten Sie, dass die Methode concat() nicht das aktuelle Array ändert, sondern ein neues Array zurückgibt.
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);
Nach dem Login kopieren
Neben Arrays als Parameter akzeptiert concat auch andere Arten von Werten als Parameter, die am Ende des Zielarrays hinzugefügt werden. rrreee
  • Tatsächlich kann die concat()-Methode eine beliebige Anzahl von Elementen und Array empfangen und das Array automatisch zerlegen > und fügen Sie sie dann alle dem neuen Array hinzu. Das heißt, wenn der Parameter für die Operation concat() ein Array ist, werden die Elemente im Array hinzugefügt, nicht das Array.
rrreeeHinweis: concat reduziert die Array-Parameter nur einmal, nicht zweimal🎜rrreee
  • Wenn die Array-Mitglieder Objekte enthalten, concat Die Die Methode gibt eine 🎜flache Kopie🎜 des aktuellen Arrays zurück. Die sogenannte „flache Kopie“ bedeutet, dass das neue Array die Referenz des 🎜Objekts🎜 kopiert.
rrreee🎜Im obigen Code enthält das ursprüngliche Array ein Objekt und das neue Array, das von der Methode concat generiert wird, enthält einen Verweis auf dieses Objekt. Daher ändert sich das neue Array entsprechend, nachdem 🎜das ursprüngliche Objekt geändert wurde🎜. 🎜🎜🎜🎜Erweitertes Wissen: Eine andere Möglichkeit, Arrays zusammenzuführen 🎜🎜🎜🎜🎜Verwenden Sie den ES6-Spread-Operator zum Zusammenführen 🎜🎜rrreee🎜Ist concat eine es6-Syntax?🎜🎜🎜Vergleich: ES6-Spread-Operator... vs. ES5-concat🎜🎜 🎜 concat ist in es5 verfügbar. Der Vorteil besteht darin, dass es eine hohe Kompatibilität aufweist und keine Übersetzung erfordert. 🎜🎜... ist eine neue Syntax in es6, die die Schreibmethode vereinfacht und den Code prägnanter aussehen lässt und intuitiv, aber tatsächlich ist es nur gekapselt, aber unten wird immer noch die ursprüngliche Methode verwendet. Das Folgende ist das Ergebnis der Babel-Übersetzung🎜rrreee🎜 [Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Programmiervideo🎜]🎜

Das obige ist der detaillierte Inhalt vonIst concat eine es6-Syntax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage