プログラミングの勉強日記
2020年6月12日 Progate Lv.87
JavaScript Ⅵ
配列を操作するメソッドとしてpushメソッド、forEachメソッド、find メソッド、filterメソッド、mapメソッドについて消化する。
##pushメソッド
配列の最後に新しい要素を追加するメソッド。pushメソッドのあとの()の中に追加したい要素を入れる。
const numbers = [1,2,3];
console.log(numbers); //コンソール結果は「[1,2,3];」
numbers.push(4);
console.log(numbers); //コンソール結果は「[1,2,3,4];」
##forEachメソッド
配列の中の要素を1つずつ取り出して、すべての要素に繰り返し同じ処理を行うメソッド。
const numbers = [1,2,3];
numbers.forEach((number) => {
console.log(number)
});
コンソール結果は
「 1
2
3 」
この例では引数numberに配列の値それぞれが代入されて、関数の処理が実行される。
()=>の書き方をアロー関数という。
このプログラムの(number) => { console.log(number); }の部分をコールバック関数という。コールバック関数は引数に入っている関数のことである。
##findメソッド
コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッド。条件にあう最初の要素を取り出せる。そのため、条件に合う最初の1つの要素しか取り出せない。
const numbers = [1,3,5,7];
const foundNumber = numbers.find((number) => {
return number>3; //条件に合う要素が戻り値となる
});
console.log(foundNumber); //コンソール結果は「5」
この例では、1と3は条件に合っていないので出力されず、5で条件に合う要素が見つかったので、出力されて、これ以降の要素は出力されない。
配列の要素がオブジェクトであってもfindメソッドは使うことができる。
const characters = [
{id:1, name:"田中太郎"},
{id:2, name:"山本花子"}
];
const foundCharacter = characters.find((character) => {
return character.id === 1; //character.idはオブジェクトプロパティ
});
console.log(foundCharacter); //コンソール結果は「{id:1, name="田中太郎"}」
##filterメソッド
記述した条件にあう要素のみを取り出して新しい配列を作成するメソッド。条件に合う要素がすべて取り出されて配列を作成する。
const numbers = [1,3,5,7];
const filteredNumbers = numbers.filter((number) => {
return number>3;
});
console.log(filteredNumbers); //コンソール結果は「[5,7]」
findメソッド同様に配列の要素がオブジェクトの場合でも使用できる。
const characters = [
{name:"田中太郎", age:14},
{name:"山本花子" age:26},
{name:"斎藤一郎" age:8}
];
const filteredCharacters = characters.filter((character) => {
return character.age>10;
});
console.log(filteredCharacters);
コンソール結果は
[
{name:"田中太郎", age:14}
{name:"山本花子" age:26}
]
となる。
##mapメソッド
配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド。
const numbers = [1.2.3];
const doubledNumbers =numbers.map((number) => {
return number*2;
});
console.log(doubledNumbers); //コンソール結果は「[2,4,6]」
配列の要素がオブジェクトの場合でも使用できる。
const names = [
{firstName:"Taro", lastName:"Tanaka"},
{firstName:"Hanako", lastName:"Yamada"}
];
const fullNames = names.map((name) => {
return name.firstName+name.lastName;
});
console.log(fullNames); //コンソール結果は「["TaroTanaka","HanakoYamada"]」