有用なJS配列メソッドpt : 1

今日の記事では、いくつかの一般的なJavaScript配列メソッドを使用します.ほとんどの場合、これらの配列メソッドを使用するよりも頻繁に使用されます.私たちは、語彙的な環境、関数、変数、コールバックのような例については、この記事の前にいくつかの基本的なJavaScriptの知識があると仮定するつもりです.

テーブルの内容

フィルタメソッド

Mapメソッド

は、方法

を減らします

foreachメソッド

濾過方法
フィルタメソッドは、配列オブジェクトから特定のデータを取得するのに役立ちます.このメソッドをArrayオブジェクトに渡し、条件付きのコールバック関数で指定されたデータを使用して新しい配列オブジェクトを返します.最初は少し複雑に見えるかもしれませんが、いくつかのコードを見てみましょう.
そこで、以下のような変数に格納されたいくつかの単純なハードコードデータを使用してコードを開始します.const words = ['dog', 'cat', 'apple', 'cheetah', 'whale']いくつかのデータを配列にしたので、以下のようにしてフィルタ変数を使用することができます.const result = words.filter(word => word.length > 3);フィルタ変数の結果を結果変数の中に格納して、簡単にアクセスできます.
フィルタメソッドは何ですか?
フィルターメソッドを使用するには、配列の最後に追加しますwords.filter()次に、メソッドを追加した後、メソッドの内部にコールバック関数を追加します.この例では、各単語の長さをチェックし、3文字以上の文字列を返します.
例えば

const words = ['dog', 'cat', 'apple', 'cheetah', 'whale']

const result = words.filter(word => word.length > 3);

console.log(result);
// expected output: array: ['apple', 'cheetah', 'whale']

一度我々はコンソール.我々の結果変数を記録します、我々は我々のコールバック関数から予想される出力で新しい配列オブジェクトを得ます.

マップ法
配列メソッドのさまざまな方法を再生しようとすると、マップメソッドは非常に新人のトリッキーです.また、コールバックを受け取るため、フィルタメソッドと非常によく似ていますが、代わりに各要素とは少し異なります.
いくつかのコードを見て、配列を操作したいときにマップメソッドが何をするかを理解し始めましょう.
最初にいくつかのデータを配列に格納し、変数を格納します.const prices = [2, 10, 15, 20]次に、私たちの価格をマップし、マップメソッドは、配列内のすべての要素で呼び出されるコールバック引数を受け取ります.const mapPrices = prices.map( price => {
price * 2
}ご覧の通り、価格は私たちの配列をマッピングするとき、各要素として機能するでしょう、ここで、我々は2で各々の価格を掛けて、以下の出力を予想しなければなりません.

console.log(mapPrices)
// newArray : [4, 20, 30, 40]

Since map builds a new array, using it when you aren't using the returned array is an anti-pattern; use forEach or for...of instead.

還元法
Reductionメソッドは、開始時に取得するタフな方法ではありますが、どのような型(つまり、オブジェクト、配列、文字列、整数)を返すことができるので、どのように使用するかを知ると、非常に強力です.
他の配列メソッドと同様に、データの配列が必要です.前のものを使いましょう.

const arrayList = [1, 2, 3, 4];

還元子メソッドは、配列要素を追跡し、配列を蓄積するコールバック引数を受け取ります.コールバック関数を変数内に格納することにより、reduceメソッド内の変数を渡すことができます.

const reducer = (accumulator, currentValue) => accumulator + currentValue

今のように、我々の還元法パラメータの中で還元器変数をテストすることができます.

console.log(arrayList.reduce(reducer));
// expected output: 10
// 1 + 2 + 3 + 4 

各要素を反復処理すると、アキュムレータはコールバックの最後の呼び出しで以前に返された値として動作します.currentValueは配列内のプロセスである要素を返します.
私たちが私たちの配列により深く得る必要があるならば、縮小関数/変数は4つの引数を取ることができます.あなたが還元方法が複雑なコードで働く方法についてもっと学びたいならば、MDNをチェックしてください

The reduce() method executes the callback once for each assigned value present in the array, taking four arguments:

1. accumulator
2. currentValue
3. currentIndex
4. array

foreachメソッド
foreachメソッドは、私たちが演奏した他のメソッドよりも配列上で少し異なります.foreachメソッドで、配列の各要素にコールバック関数を呼び出します.
我々は、単にもちろん我々の配列データで始めます.const arrayList = ['a', 'b', 'c']今、foreachメソッドを使用して、配列内の各要素を反復処理します.arrayList.forEach(element => console.log(element))もし我々が我々のコンソールまたは我々の端末で我々のコンソールでチェックするならば、我々は以下の出力を見ます.

'a'
'b'
'c'

各要素はログアウトされ、他のメソッドとして新しい配列を返しません.どのようにデータ、フィルタ、検索などを操作する方法を学ぶには、他の人のコードを越えて来るときに多くの問題であなたを助ける.

結論
この記事の最後までに、どのようにコードのすべての行で何が起こっているのかを理解し、理解することができました.それはあなたのコードが完全に動作する方法を理解することは非常に重要です、それはあなたがより良い開発者になるのを助けるだけでなく、あなたがより効率的で作業しているツールを使用するのに役立つこともできます.
これらの記事は、主により良いプログラマ、作家になるための個人的な使用のために意図され、私のプログラミングスキルを成長させる.あなたが私と他を助けるためになされるべきであると思うどんなフィードバックまたは訂正も落すこと自由に感じてください.これまで貼り付けてくれてありがとう!