初めに
- 参考にしたサイトはこちら
- 各メソッドの型は参考サイトに記載があるのでこの記事ではコードを用いて各メソッドの説明を行います。
記事にする機能
- map
- filter
- reduce
map
mapは与えられた関数を配列のすべての要素に対して呼び出しを行います。
- newArrayにはarrayが持っている値が一つづつ格納されます。indexには受け取った値が元の配列の何番目物なのか数値で格納されます。
function App() {
const array = [{ name: 'Bob', age: 10 }, { name: 'Tom', age: 11 }, { name: 'Sum', age: 12 }];
return (
<>
{array.map((newArray, index) => {
return (
<div key={index}>
<h1>{index}:{newArray.name}は{newArray.age}です</h1>
</div>
)
})}
</>
);
}
実行結果はは下記のようになります。
0:Bobは10です
1:Tomは11です
2:Sumは12です
#filter
filterは指定した値だけ配列から取り出します。
-
一つ目はarrayからfilterメソッドを使用しarrayの1番目の値を取り出しfirstArrayに格納しています。
-
二つ目はarrayからfilterメソッドを使用しarrayの1番目以外の値を取り出secondArrayに格納しています。
const array = [{ name: 'Bob', age: 10 }, { name: 'Tom', age: 11 }, { name: 'Sum', age: 12 }];
const firstArray=array.filter(value => value === array[0])
const secondArray=array.filter(value => value !== array[0])
console.log(firstArray)
//[{name:'Bob' ,age:10 }]
console.log(secondArray)
//[{name:'Tom' ,age:11 },{name:'Sum' ,age:12 }]
reduce
reduce() メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の出力値を生成します。
説明が難しいのでコードを用いて説明します。
- reduceは二つの引数を取り一つ目はコールバック関数で二つ目は初期値の値となります。
- prevには前のコールバックの戻り値が格納されます。初回だけ初期値が格納されます。（prevは任意の文字）
- currentには配列の要素が順番に格納されていきます。（currentは任意の文字）
- この処理を配列の要素の数行います。
const array = [{ name: 'Bob', age: 10 }, { name: 'Tom', age: 11 }, { name: 'Sum', age: 12 }];
const total = array.reduce((prev, current) => prev + current.age, 0)
//出力結果
0+10
10+11
21+13
33