不変の配列メソッド：クリーナーJavaScriptコードを書き込みます

この記事は、JavaScript変数の割り当ておよび突然変異ガイドに従い、変異アレイ法によってもたらされる問題と解決策について説明します。多くのJavaScriptアレイメソッドは、元のアレイを直接変更します。これにより、大規模なアプリケーションでトレースが困難なバグに簡単につながる可能性があります。ただし、すべての方法がArray.prototype.slice()、Array.prototype.concat()、Array.prototype.map()などのメソッドのようなものではありません。また、元の配列は同じままです。予期しない突然変異を避けるために、元の配列を変更する代わりに新しい配列オブジェクトを返す独自の不変の配列メソッドを作成できます。この記事では、Array.prototype.filter()、pop、push、shift、unshift、reverse、spliceなどのメソッドの不変のバージョンについて説明します。不変の配列メソッドを使用すると、副作用によるバグを避けるために、コードをより明確かつ容易に書くことができます。

JavaScriptのアレイ突然変異

javaScriptアレイはオブジェクトであるため、変更できます。多くの組み込みアレイメソッドは、プログラミングのベストプラクティスに違反する配列自体を直接変更します。次の例は、潜在的な問題を示しています

このコードは正常と思われます。表面的には、それは機能します：

const numbers = [1,2,3];
const countdown = numbers.reverse();

しかし、numbersメソッドもcountdown配列を変更しましたが、これは必要な結果ではありません。 numbers

さらに悪いことに、両方の変数が同じ配列を参照しているため、1つの配列の変更が他方に影響を与えることです。

countdown // [3, 2, 1]

メソッドを使用して、

配列の最後まで値が0の要素を追加する場合、reverse()配列も同じ方法で変更されます（すべて同じ配列を参照するため）<<numbers

numbers // [3, 2, 1]

この副作用は、大規模なアプリケーションでは簡単に見落とされ、追跡が困難なバグにつながります。

JavaScript < Array.prototype.push()countdownに加えて、この突然変異を引き起こす他の多くの配列メソッドがあります：numbers

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

reverse()

• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.shift()
• Array.prototype.unshift() 対照的に、いくつかの方法では元の配列を変更するのではなく、新しい配列を返します：
• Array.prototype.slice()
• Array.prototype.concat()
• Array.prototype.map()
• Array.prototype.filter()

これらのメソッドは、実行されたアクションに基づいて新しい配列を返します。たとえば、map()メソッドを使用して、配列内のすべての数値を2倍にすることができます。

const numbers = [1,2,3];
const countdown = numbers.reverse();

さて、

配列をチェックすると、メソッドコールの影響を受けていないことがわかります。 numbers

なぜいくつかのメソッドが配列を変更するのに、他の方法はアレイを変更するのですか？これには明確な理由はないようですが、最近追加された方法はそれを不変にする傾向があります。どのメソッドが配列を変更し、どのメソッドが配列を変更しないかを覚えておくのは難しい場合があります。

countdown // [3, 2, 1]

不変の配列法：突然変異問題を修正

突然変異が問題を引き起こす可能性があり、多くのアレイ方法が突然変異を引き起こすと判断しました。それらの使用を避ける方法を見てみましょう。元の配列を変更する代わりに、新しい配列オブジェクトを返す関数を記述することは難しくありません。これらの機能は、不変の配列メソッドです。

を変更しないため、これらの関数は常にアレイ自体を最初のパラメーターとして使用します。 Array.prototype

pop

元のアレイのコピーを返すが、最後のアイテムは含まれていない新しい

関数を作成することから始めましょう。 popは、配列の端からポップされた値を返すことに注意してください：Array.prototype.pop()

この関数は

numbers // [3, 2, 1]

を使用して配列のコピーを返しますが、最後のアイテムを削除します。 2番目のパラメーター-1は、「スライスを停止、終了前の1位置」を意味します。次の例でそれがどのように機能するかを見ることができます：

Array.prototype.slice()

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

push 次に、新しい配列を返すが、最後に新しい要素を追加する

関数を作成しましょう。

push()これにより、拡張機能を使用して配列のコピーが作成されます。次に、新しい配列の最後に2番目のパラメーターとして提供される値を追加します。例は次のとおりです。

const numbers = [1,2,3];
const evens = numbers.map(number => number * 2);

numbers // [1, 2, 3]

および

shift unshiftと

の代替手段を書くことができます：

Array.prototype.shift() Array.prototype.unshift()

関数の場合、最後の要素の代わりにアレイから最初の要素をカットするだけです。これは、次の例で見ることができます：

const pop = array => array.slice(0,-1);

shift()私たちの

メソッドは新しい配列を返し、配列の先頭に新しい値を追加します：

const food = ['?','?','?','?'];
pop(food) // ['?','?','?']

unshift()拡張演算子を使用すると、任意の順序で値を配列に配置できます。アレイの元のコピーの前に新しい値を配置する必要があります。次の例でそれがどのように機能するかを見ることができます：

const push = (array, value) => [...array,value];

const food = ['?','?','?','?'];
push(food,'?') // ['?','?','?','?','?']

次に、Array.prototype.reverse()メソッドの代替案を作成してみましょう。元の配列を変更するのではなく、逆順序で配置された配列のコピーを返します。

const numbers = [1,2,3];
const countdown = numbers.reverse();

このメソッドは引き続き

メソッドを使用していますが、拡張機能オペレーターを使用して作成した元の配列のコピーに適用されます。オブジェクトが作成された直後に変更に問題はありません。それがここで行うことです。次の例でそれがどのように機能するかを見ることができます：Array.prototype.reverse()

countdown // [3, 2, 1]

splice

最後に、

に対処しましょう。これは非常に一般的な機能であるため、その機能を完全に書き直すことはありません（興味深い演習ですが）。代わりに、アレイからアイテムを削除し、アイテムを配列に挿入する2つの主要な用途に焦点を当てます。 Array.prototype.splice() slice

配列項目を削除

新しい配列を返す関数から始めましょうが、指定されたインデックスでアイテムを削除します。

これにより、

を使用して、削除するアイテムの両側に配列を半分にカットします。最初のスライスは新しい配列を返し、インデックスがパラメーターのインデックスとして指定されるまで元の配列の要素をコピーします。 2番目のスライスは、削除する要素を含む配列を返し、元の配列の端までずっと削除します。次に、拡張オペレーターを使用して、それらすべてを新しい配列に入れます。これが機能するかどうかを確認できます。以下の

numbers // [3, 2, 1]

配列のインデックス2でアイテムを削除しようとすることができます。

Array.prototype.slice()food配列項目を追加

countdown.push(0)
countdown // [3, 2, 1, 0]
numbers // [3, 2, 1, 0]

最後に、新しい配列を返し、特定のインデックスに新しい値を挿入する関数を書きましょう。 これは、

関数の仕組みに似ています。アレイの2つのスライスが作成されますが、今回は提供されたインデックスの要素が含まれます。 2つのスライスを一緒に再編成すると、それらの間のパラメーターとして提供される値を挿入します。これが機能するかどうかを確認できます。
元の配列を変更しない不変の配列メソッドセットがあります。それらを1か所に保存して、プロジェクトで使用できます。それらを単一のオブジェクトメソッドとして使用して、名前を挙げたり、必要に応じて使用したりすることができます。これらの方法は、ほとんどの配列操作に十分でなければなりません。さまざまなことをする必要がある場合は、ゴールデンルールを覚えておいてください。最初に拡張機能を使用して、元の配列のコピーを作成します。次に、このコピーに変数メソッドをすぐに適用します。

const numbers = [1,2,3];
const evens = numbers.map(number => number * 2);

remove()結論food

この記事では、言語の一部として元の配列を変更する配列メソッドを変更することにより、JavaScriptがどのように人生を困難にするかを調べます。次に、これらの機能を置き換えるために独自の不変の配列メソッドを書きました。

numbers // [1, 2, 3]

不変のバージョンを持っていることで利益を得ることができる他のどのアレイメソッドを考えることができますか？

JavaScriptで不変のアレイメソッドの作成と使用に関する

JavaScriptの不変性の概念は何ですか？

不変性は、プログラミングの基本概念であり、作成後に変更できないオブジェクトの状態を指します。 JavaScriptでは、不変性はデフォルトで強制されません。ただし、これは強力な概念であり、コードをより予測可能で容易に書くのに役立ちます。これは、変化する状態によって引き起こされるエラーと複雑さを不変で防止する機能プログラミングで特に役立ちます。

なぜJavaScriptで不変の配列メソッドを使用する必要があるのですか？

JavaScriptで不変の配列メソッドを使用すると、コードをより明確かつ容易に書くことができます。これらのメソッドは元の配列を変更しないため、エラーを引き起こす可能性のある副作用を防ぐことができます。これは、大規模なコードベースまたは複雑なデータ構造を扱う場合に特に重要です。不変の方法は新しい配列を返しますが、元の配列は変更されません。これにより、コードがより予測可能でデバッグを容易にします。

JavaScriptの不変のアレイメソッドの例は何ですか？

JavaScriptは、元の配列を変更しない不変のアレイメソッドを提供します。いくつかの例には、

、

、map()、およびfilter()メソッドが含まれます。 reduce()メソッドは、配列内の各要素に提供される関数の結果を含む新しい配列を作成します。 concat()メソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。 map()メソッドは、アキュムレータと配列の各要素に関数を適用して、単一の出力値に減らします。 filter()メソッドは、2つ以上の配列をマージし、新しい配列を返すために使用されます。 reduce() concat() JavaScriptで私の配列を不変にする方法は？

JavaScriptは、配列を不変にするための組み込みの方法を提供しません。ただし、元の配列を変更しない方法を使用して不変性を達成できます（

、

、map()、およびfilter()）。別のアプローチは、オブジェクトへの新しいプロパティの追加を防ぎ、既存のプロパティの除去を防ぎ、既存のプロパティの列挙、構成可能性、またはライター能力を防ぎ、reduce()メソッドを使用することです。 concat() Object.freeze() JavaScriptの可変化と不変の方法の違いは何ですか？

JavaScriptの可変化と不変の方法の主な違いは、元の配列をどのように処理するかです。可変メソッドは元の配列を変更しますが、不変の方法ではそうではありません。代わりに、不変の方法は新しい配列を返します。これにより、コードはエラーを引き起こす可能性のある副作用を防ぐため、コードがより予測可能でデバッグしやすくなります。

JavaScriptの他のデータ型で不変のアレイを使用できますか？

はい、JavaScriptの他のデータ型とともに不変のアレイを使用できます。不変性の概念は、配列だけでなく、すべてのデータ型に適用されます。たとえば、文字列、数字、オブジェクトなどを備えた不変の方法を使用できます。これにより、コードをより明確かつ容易に書くことができます。

不変のアレイメソッドを使用したパフォーマンスへの影響はありますか？

不変の配列メソッドを使用すると、通常は元の配列を変更する代わりに新しい配列を作成するため、パフォーマンスに影響を与える可能性があります。これにより、特に大きな配列では、メモリ使用量が増加する可能性があります。ただし、ほとんどの場合、より明確なコードやバグの減少などの不変の方法を使用することの利点は、潜在的なパフォーマンスコストを上回ります。

javaScriptでreduce()メソッドを使用する方法は？

JavaScriptのメソッドは、アキュムレータと配列の各要素に関数を適用して単一の出力値に減らす不変の方法です。使用方法の例は次のとおりです。

この例では、この例では、reduce()メソッドは、配列内のすべての要素の合計を計算します。

const numbers = [1,2,3];
const countdown = numbers.reverse();

javascriptの

メソッドは何ですか？ reduce() JavaScriptの

メソッドは、2つ以上の配列をマージするために使用されます。この方法では、既存の配列は変更されませんが、新しい配列を返します。例は次のとおりです。concat()

この例では、

メソッドはconcat()と

を新しい配列

countdown // [3, 2, 1]

にマージします。

concat() javaScriptでarray1メソッドを使用する方法は？ array2 JavaScriptのメソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。使用方法の例は次のとおりです。 array3 この例では、メソッドは、3を超える数値を含む新しい配列を作成します。

以上が不変の配列メソッド：クリーナーJavaScriptコードを書き込みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。