JavaScriptにおける配列スライスとスプライスの比較まとめ

前書き

今日は Javascript を見直して、比較的似た 2 つのメソッド、splice と splice があることを確認しました。見た目は非常に似ていますが、余分な p がありますが、使用法はまったく異なります。

使用時に、強力なセマンティック表現力を持つ API を選択することで、混乱の発生を減らすことができます。

1. スライス

スライスは、配列内の要素を指定して新しい配列を作成することです。つまり、元の配列は変更されません

配列のスライス (ECMAScript 5.1 標準セクション 15.4.4.10) は非常によく似ています。文字列のスライスに。仕様によれば、スライスには開始点と終了点の 2 つのパラメータが必要です。開始点から終了点までのすべての要素を含む新しい配列を返します。

slice の関数を理解するのはそれほど難しいことではありません:

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

元の配列を変更しないことに注意することが重要です。

次のコード スニペットは、この動作を説明しています。x の値は変更されておらず、y はインターセプトされた部分です。

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

2. splice

splice は、配列要素に対する削除、挿入、置換の操作を実装できる最も強力な配列メソッドであり、戻り値は操作された値です。

スプライスの削除: color.splice(1,2) (カラーの 2 つのアイテム 1 と 2 を削除);

スプライスの挿入: color.splice(1,0,'brown','pink') (カラー キー内)値 1 の要素の前に 2 つの値を挿入します);

スプライス置換: color.splice(1,2,'brown','pink') (要素 1 と 2 を color で置き換えます); .4.12）でも（少なくとも）2つの引数が必要ですが、その意味はまったく異なります。

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

さらに、スプライスにより元の配列も変更されます。

あまり驚かないでください。これがまさにスプライスの目的です。

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

独自のモジュールを作成するときは、混乱する可能性が最も低い API を選択することが重要です。理論的には、ユーザーはドキュメントを読んでもどれが必要かを常に理解できるわけではありません。それでは、どの命名規則に従えばよいのでしょうか?

私が最もよく知っている規則 (QT での以前の経験に関連して) は、動詞を正しく選択することです。現在形は可能な変更アクションを示し、過去形は元のオブジェクトを変更せず、新しいバージョンを返します。可能であれば、両方のバージョンを提供してください。

以下の例を参照してください:

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 }

(2D デカルト座標系で) 位置を移動するtranslate() と、シフトされた座標を作成するだけのtranslation() の違いに注意してください。 translation を呼び出すと、点 p の値が変更されます。ただし、translation() は元のオブジェクトを変更しないため、オブジェクト q は変更されず、新しいコピー s のみが返されます。

まとめ

この仕様をアプリケーションに非常に一貫して導入できれば、上記の混乱は最小限に抑えられます。以上がこの記事の全内容ですが、皆さんの勉強や仕事に少しでもお役に立てれば幸いです。

JavaScript での配列のスライスとスプライスの比較に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。