Was sind die Unterschiede zwischen den JavaScript-Methoden für Arrays?

In JavaScript gibt es viele Methoden zum Hinzufügen, Entfernen und Ersetzen von Array-Elementen, aber sie sind sehr unterschiedlich. Was ist das Geheimnis der Array-Methode?

JavaScript bietet eine Vielzahl von Methoden zum Hinzufügen, Entfernen und Ersetzen von Array-Elementen, aber einige wirken sich auf das ursprüngliche Array aus, andere nicht, und sie erstellen ein neues Array.

Hinweis: Unterscheiden Sie die Unterschiede zwischen den folgenden beiden Methoden:

array.splice() wirkt sich auf das ursprüngliche Array aus

array.slice() wirkt sich nicht auf das ursprüngliche Array aus

Neu: Auswirkungen auf das ursprüngliche Array

Die Verwendung von array.push() und array.ushift() zum Hinzufügen neuer Elemente wirkt sich auf das ursprüngliche Array aus.

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

Neu: Hat keinen Einfluss auf das ursprüngliche Array

Zwei Möglichkeiten zum Hinzufügen von Elementen haben keinen Einfluss auf das ursprüngliche Array, die erste ist array.concat().

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有误，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

Die zweite Methode besteht darin, den Spread-Operator von JavaScript zu verwenden. Der Spread-Operator besteht aus drei Punkten (…)

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

Der Spread-Operator kopiert das ursprüngliche Array und übernimmt alle Elemente daraus das ursprüngliche Array und speichern Sie sie in der neuen Umgebung.

III. Entfernen: Auswirkungen auf das ursprüngliche Array

Wenn array.pop() und array.shift() zum Entfernen von Array-Elementen verwendet werden, wird das Original entfernt Array wird betroffen sein.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() und array.shift() geben das entfernte Element zurück. Sie können das entfernte Element über eine Variable abrufen.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice() kann auch Elemente eines Arrays löschen.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

Wie array.pop() und array.shift() gibt auch array.splice() die entfernten Elemente zurück.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. Entfernung: Hat keinen Einfluss auf das ursprüngliche Array

JavaScript 的 array.filter() 方法基于原数组创建一个新数组，新数组仅包含匹配特定条件的元素。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）

Die Bedingung des obigen Codes ist „ungleich ‚e‘“, daher ist das neue Array (arr2 ) enthält kein „e“.

Die Einzigartigkeit von Pfeilfunktionen:

Einzeilige Pfeilfunktion, das Schlüsselwort „return“ ist standardmäßig enthalten und muss nicht manuell geschrieben werden.

Mehrzeilige Pfeilfunktionen müssen jedoch explizit einen Wert zurückgeben.

Eine andere Möglichkeit, dies zu tun, ohne das ursprüngliche Array zu beeinträchtigen, ist array.slice() (nicht zu verwechseln mit array.splice()).

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. Ersetzung: wirkt sich auf das ursprüngliche Array aus

Wenn Sie wissen, welches Element ersetzt werden soll, können Sie array.splice() verwenden.

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

Ersetzung: Hat keinen Einfluss auf das ursprüngliche Array

Sie können array.map() verwenden, um ein neues Array zu erstellen, und Sie können jedes Element überprüfen und entsprechend ersetzen spezifische Bedingungen.

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

Verwenden Sie array.map() zum Transformieren von Daten

array.map() ist eine leistungsstarke Methode, mit der Daten transformiert werden können, ohne die ursprüngliche Datenquelle zu verschmutzen.

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

Es gibt so viele Vergleiche über Array-Methoden, ich hoffe, dass sie jedem helfen können, Arrays in JS zu verstehen und zu verwenden.

Verwandte Lektüre:

Über JS-Array-Array-Methodenzusammenfassung

JS-Array-Deduplizierungsmethode Zusammenfassung

Analyse der Parameterübergabemethode des AngularJS-Arrays

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen den JavaScript-Methoden für Arrays?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!