Vergleichszusammenfassung von Array-Slice und Splice in JavaScript

Vorwort

Heute habe ich Javascript überprüft und gesehen, dass es zwei ähnliche Methoden gibt: Splice und Splice. Sie sehen sehr ähnlich aus, aber es gibt ein zusätzliches p, aber die Verwendung ist ziemlich unterschiedlich.

Bei der Verwendung können Sie das Auftreten von Verwirrung reduzieren, indem Sie eine API mit starker semantischer Ausdruckskraft wählen.

1. Slice

Slice gibt die Elemente in einem Array an, um ein neues Array zu erstellen, d. h. das ursprüngliche Array ändert sich nicht

Slice des Arrays (ECMAScript 5.1 Standard 15.4 .4.10) ist einem String-Slice sehr ähnlich. Gemäß der Spezifikation erfordert Slice zwei Parameter, den Startpunkt und den Endpunkt. Es gibt ein neues Array zurück, das alle Elemente vom Startpunkt bis zum Endpunkt enthält.

Es ist nicht allzu schwierig, die Funktion von Slice zu verstehen:

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

Es ist wichtig zu beachten, dass das ursprüngliche Array dadurch nicht verändert wird.

Der folgende Codeausschnitt beschreibt dieses Verhalten. Der Wert von x hat sich nicht geändert und y ist der abgefangene Teil.

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2. splice

splice ist die leistungsstärkste Array-Methode in JS. Sie kann Array-Elemente löschen, einfügen und ersetzen, und der Rückgabewert ist der manipulierte Wert.

Spleißlöschung: color.splice(1,2) (zwei Elemente 1 und 2 in Farbe löschen);

Spleißeinfügung: color.splice(1,0,'brown', ' pink') (fügen Sie zwei Werte vor dem Element mit Farbschlüsselwert 1 ein);

Spleißersatz: color.splice(1,2,'brown','pink') (in Farbe 1 ersetzen, 2 Elemente);

Obwohl splice (Abschnitt 15.4.4.12) auch (mindestens) zwei Parameter erfordert, ist seine Bedeutung völlig anders.

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

Darüber hinaus wird durch Splice auch das ursprüngliche Array geändert.

Seien Sie nicht zu überrascht, genau das soll Splice tun.

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

Wenn Sie Ihr eigenes Modul schreiben, ist es wichtig, eine API zu wählen, die am wenigsten zu Verwirrungen führt. Theoretisch sollten Ihre Benutzer nicht immer in der Lage sein, anhand der Dokumentation herauszufinden, welches sie benötigen. Welche Namenskonvention sollten wir also befolgen?

Die Konvention, mit der ich am besten vertraut bin (im Zusammenhang mit meiner früheren Erfahrung mit QT), besteht darin, das Verb richtig zu wählen: Präsens zeigt mögliches Änderungsverhalten an, Vergangenheitsform modifiziert nicht das ursprüngliche Objekt, sondern gibt ein neues zurück Version. Wenn möglich, stellen Sie beide Versionen bereit.

Beziehen Sie sich auf das folgende Beispiel:

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

Beachten Sie, dass (in einem zweidimensionalen kartesischen Koordinatensystem) translator(), das die Position verschiebt, sich von translator() unterscheidet, das nur eine erstellt verschobene Koordinatendifferenz zwischen. Der Aufruf von Translate ändert den Wert von Punkt p. Da jedoch translator() das Originalobjekt nicht verändert, wird Objekt q nicht verändert, sondern es wird nur eine neue Kopie s zurückgegeben.

Zusammenfassung

Wenn diese Spezifikation in Ihren Anwendungen sehr konsistent bereitgestellt werden kann, wird die oben erwähnte Verwirrung minimiert. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann jedem beim Lernen oder bei der Arbeit helfen.

Weitere verwandte Artikel zum Vergleich von Array-Slice und Splice in JavaScript finden Sie auf der chinesischen PHP-Website!