push
pushメソッドとは、配列の最後に新しい要素を追加するメソッドです。
pushメソッドの後の()の中に追加したい要素を入力します。
以下の例では、pushメソッドの引数「4」が配列の最後に追加されています。
characters.push(“とりずきん”);
forEach
forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。
以下の例では、配列numbersの要素が順番にすべて出力されています。
次のスライドで、実際にどのような処理がされているか詳しく確認しましょう。
forEachメソッドの引数には、学習Ⅲで学んだアロー関数が入っています。
配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行されます。
これから学ぶメソッドはこのようにアロー関数を使う形が多いので覚えておきましょう。
コールバック関数
引数に入っている関数はコールバック関数と呼びます。
これから学ぶメソッドはコールバック関数を使う形が多いので、覚えておきましょう。
characters.forEach((character) => { console.log(character); });
find
findメソッドとは、コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッドです。
以下の例では、配列numbersの中から、3より大きい1つ目の要素である5が
foundNumberに代入されコンソールに出力されています。
次のスライドで詳しい動きを確認してみましょう。
配列numbersの要素が1つずつ引数numberに代入されて処理が進みます。
コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となります。findメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せません。
const foundCharacter = characters.find((character) => {
return character.id ===1
});
const numbers = [1, 3, 5, 7, 9];
// findメソッドを使って配列numbersから3の倍数を見つけ、定数foundNumberに代入してください
const foundNumber = numbers.find((number) => {
return number % 3 === 0
});
// foundNumberを出力してください
console.log(foundNumber);
const characters = [
{id: 1, name: “にんじゃわんこ”, age: 6},
{id: 2, name: “ベイビーわんこ”, age: 2},
{id: 3, name: “ひつじ仙人”, age: 100},
{id: 4, name: “とりずきん”, age: 21}
];
// 定数charactersからidが3のオブジェクトを見つけ、定数foundCharacterに代入してください
const foundCharacter = characters.find((character) => {
return character.id === 3
});
// foundCharacterを出力してください
console.log(foundCharacter);
filter
filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成するメソッドです。
以下の例では配列numbersから「3より大きい数字」をすべて取り出しています。
const numbers = [1, 2, 3, 4];
// filterメソッドを使ってnumbersから偶数を取り出し、定数evenNumbersに代入してください
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0
});
// evenNumbersを出力してください
console.log(evenNumbers);
const characters = [
{id: 1, name:”にんじゃわんこ”, age: 14},
{id: 2, name:”ベイビーわんこ”, age: 5},
{id: 3, name:”ひつじ仙人”, age: 100}
];
// charactersから20歳未満のキャラクターを取り出し、定数underTwentyに代入してください
const underTwenty = characters.filter((character) => {
return character.age < 20
});
// underTwentyを出力してください
console.log(underTwenty);
map
mapメソッドとは、配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッドです。
以下の例では配列numbersの全ての要素を2倍した要素を持つ、新しい配列を作成しています。
以下の例では、配列numbersの要素が1つずつ引数numberに代入されています。その後、mapメソッド内の 「要素を2倍する処理」 をした配列が新しく作られ、定数doubledNumbersに配列として代入されています。
コールバック関数の中の処理は { return 値 } と書きます。
mapメソッドもこれまでのメソッドと同様に、配列のオブジェクト要素に対しても使うことができます。
以下の例では、mapでfirstNameプロパティとlastNameプロパティを繋げる処理をしています。
const numbers = [1, 2, 3, 4];
// 定数numbersにmapメソッドを使って新しい配列を作り、定数doubledNumbersに代入してください
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
// 定数doubledNumbersを出力してください
console.log(doubledNumbers);
const names = [
{firstName: “Kate”, lastName: “Jones”},
{firstName: “John”, lastName: “Smith”},
{firstName: “Denis”, lastName: “Williams”},
{firstName: “David”, lastName: “Black”}
];
// 定数namesにmapメソッドを使って新しい配列を作り、定数fullNamesに代入してください
const fullNames = names.map((name) => {
return name.firstName + name.lastName ;
});
// 定数fullNamesを出力してください
console.log(fullNames);