JavaScriptの配列操作メソッド（ES6)

ES6で追加された配列を操作するときのメソッドをまとめてみました。

目次

1. push
2. forEach
3. find
4. filter
5. map

push

pushメソッドは、配列の最後に新しい要素を追加するメソッド。

const 配列 = [要素1, 要素2];
console.log(配列);
animals.push(要素3);
console.log(配列);

//コンソール
[要素1, 要素2]
//新しく追加された要素
[要素1, 要素2, 要素3]

forEach

forEachメソッドは、配列の要素を一つずつ取り出して、全ての要素に繰り返し処理を行うメソッド。

const 配列 = [要素1, 要素2, 要素3];
配列.forEach((引数) => {処理});
//引数にアロー関数が入っていてる。
//使い方：配列の要素が一つづつ引数に代入されて、処理が実行される

//例
const numbers = [1, 2, 3]
numbers.forEach((number) => {
	console.log(number);
});

//コンソール
1 //引数に1が渡され、関数処理実行
2
3

findメソッド

findメソッドとは、条件に合う一つ目の要素を配列の中から取り出すメソッド。

const 配列　= [1, 2, 10]
const 変数 = 配列.find((引数) => {
	return 引数 > 3;//条件
})
console.log(変数);

//コンソール
10

//使い方2

const 変数1 = [
	{id: 1, name:'Kei'},
	{id:2, name:'Max'}
];
const 変数2 = 変数1.find((オブジェクト) => {
	//オブジェクトのプロパティ
	return オブジェクト.id ===2;
});
console.log(変数2）

//コンソール
{id:1, name:'Kei'}
	

filterメソッド

filterは、条件に合う要素のみを取り出して新しい配列を作るメソッド。

const 変数1 = [
	{name:'Max', height:150},
	{name:'Kei', height:190},
	{name:'BigThunder', height:170}
const 変数2 = 変数1.filter((オブジェクト) => {
	return オブジェクト.height > 160;
});

console.log(変数2);

//コンソール
[
	{name:'Kei', height:190},
	{name:'BigThunder', height:170}
]

mapメソッド

mapメソッドは、配列内の全ての要素に処理を行い、戻り値から新しい配列を作成する。

const 変数1　= [1, 2, 3]

const 変数2 = 変数1.map((引数) => {
	return 引数*5;
console.log(変数2);

//コンソール
[5, 10, 15]