JavaScript 配列のメソッド

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

pushメソッド

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

pushメソッドの後の()の中に追加したい要素を入力する

定数.push(追加したい要素);

//const numbers = [1,2,3];
//console.log(numbers);
numbers.push(4);
//console.log(numbers);

出力結果:[1,2,3,4]

forEachメソッド

配列の中の要素を1つずつ取り出し、全ての要素に繰り返し同じ処理を行うメソッド

配列名.forEach((引数) => {処理内容});

//const numbers = [1,2,3];
//配列名の要素が1つずつ順番に引数に代入される
numbers.forEach((number) => {
//処理内に書いてある内容が繰り返し実行される。
//処理内容
console.log(number);

});

出力結果:1 2 3

findメソッド

条件式に合う1つ目の要素を配列の中から取り出すメソッド

コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となる

const found定数名 = 配列名.find((引数名) => {return 条件}

//const numbers = [1,2,3,5,7];
//配列名の要素が1つずつ引数に代入されて処理される
const foundNumber = numbers.find((number) => {

return number > 3;

});

//console.log(foundNumber);

出力結果：5

配列の要素がオブジェクトの場合もfindメソッドを使うことができる

filterメソッド

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

const filtered定数名 = 配列名.filter((引数名) => {return 条件}

//const numbers = [1,2,3,5,7];
//配列の要素が1つずつ引数numberに代入される
const filteredNumber = numbers.filter((number) => {
//filterメソッド内で「3より大きい数字」かどうかを判定し、条件に合う要素が定数filteredNumbersに配列として代入される
return number > 3;
});

//console.log(filteredNumber);

出力結果：[5,7]

mapメソッド

配列内のすべての要素に処理を行い、新しい配列を作成するメソッド

配列名の要素が1つずつ引数に代入されmapメソッド内の処理をした配列が新しく作られ、定数dに配列として代入される

const 定数名 =　配列名.map((引数名) => {return 条件});

//const numbers = [1, 2, 3, 4];
// 配列numbersの要素が1つずつ引数numberに代入される
const doubledNumbers = numbers.map((number) => {
//↓↓↓配列numbersの全ての要素を2倍した要素を持つ、新しい配列を作成する条件
 return number * 2; 
});

//console.log(doubledNumbers);

出力結果:[2,4,6]