#51 JavaScriptの学習 配列の操作push,forEach,find,filter,mapを覚えよう

配列を操作してみましょう。push,forEach,find,filter,mapはどんなメソッドなのか学んでみよう。とても簡単なので是非覚えてくださいね。内容は初心者向けです。

push

push・・・配列の要素を追加します。

配列名.push(追加する要素);　このように記述します。



const moji = ['あ', 'い', 'う'];
console.log(moji);
//→['あ', 'い', 'う']

moji.push('え', 'お');
console.log(moji);
//→['あ', 'い', 'う', 'え', 'お']

「あ、い、う」という配列に「え、お」を追加することが出来ました。

forEach

forEach・・・配列の要素を１つずつ取り出して、処理する

定数名.forEach((引数) => {処理});　このように記述します。



const moji = ['あ', 'い', 'う', 'え', 'お'];
moji.forEach((get) => {
    console.log(get);
});
// →あ
// →い
// →う
// →え
// →お

配列の要素を引数（get）に入れ、1つずつ処理をしています。今回の処理はコンソールして表示しています。

find

find・・・条件に合う、1つ目の要素を取り出します。複数ある場合は最初に見つけた要素を取り出します。

①配列の場合　②オブジェクトの場合　③条件に合う要素が無い場合　について比較してみましょう。

①配列の場合



//  １、配列の場合
const numbers = ['1', '9', '25', '32'];
const result = numbers.find(
    (number)=>{return number > 20} //20より大きい数を取得
);
console.log(result);
// →25 最初の１つだけ取得する

要素　１，９，２５，３２の中で２０より大きい数を取得すると最初の２５のみ取得できます。

②オブジェクトの場合



// ２、オブジェクトの場合
const animals = [
    {name: 'monkey', place: 'tokyo'},
    {name: 'dog', place: 'nagoya'},
    {name: 'cat', place: 'fukuoka'},
];
const result2 = animals.find(
    (animal)=>{return animal.place == 'nagoya'} //'nagoya'と一致するオブジェクトを取得
);
console.log(result2);
// →{name: 'dog', place: 'nagoya'}
// オブジェクトそのものが取り出される

この場合はオブジェクトそのものが取得できる

③条件に合う要素が無い場合



// ３、条件に合う要素が無い場合
const fruits = ['orange', 'apple', 'melon'];
const result3 = fruits.find(
    (fruit)=>{return fruit == 'banana'} //'banana'と一致するオブジェクトを取得しようとするが存在しない
);
console.log(result3);
// →undefined

このように、配列に要素が存在しない場合は「undefined」が返されます。

filter

filter・・・上の「find」は条件に合う要素が１つしか取り出せません。すべて取得したい時に使います。配列の要素やオブジェクトとして取得します。取得後は配列となります。



//  １、配列の場合
const numbers = ['1', '9', '25', '32'];
const result = numbers.filter(
    (number)=>{return number > 20} //20より大きい数を取得
);
console.log(result);
// →['25', '32'] すべて取得する

// ２、オブジェクトの場合
const animals = [
    {name: 'monkey', place: 'tokyo'},
    {name: 'dog', place: 'nagoya'},
    {name: 'cat', place: 'fukuoka'},
    {name: 'lion', place: 'nagoya'},
];
const result2 = animals.filter(
    (animal)=>{return animal.place == 'nagoya'} //'nagoya'と一致するオブジェクトを取得
);
console.log(result2);
// →[{name: 'dog', place: 'nagoya'}, {name: 'lion', place: 'nagoya'}]
// オブジェクトそのものが取り出される

map

map・・・要素を１つずつ取り出して、同じ処理を行い、新しい配列を作る



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];
const result4 = family.map((person)=>{return '私の' + person.name + 'は' + person.age + 'です'});
// ['私のお父さんは40です', '私のお母さんは38です', '私のお兄ちゃんは12です'] このような配列になっています。
result4.forEach((per)=>{return console.log(per)});
// →私のお父さんは40です
// →私のお母さんは38です
// →私のお兄ちゃんは12です

新しい配列を生成しているのがわかりますか？forEachもからめてみました。

配列の操作の基本的なメソッドでした。

#51 JavaScriptの学習配列の操作push,forEach,find,filter,mapを覚えよう