Help us understand the problem. What is going on with this article?

【初心者】JavaScript 配列を操作するメソッド(push,forEach,find,filter,map)【備忘録14】

11/10~11/11に勉強したこと

push

既にある配列の最後に新しい要素を追加するメソッド。
【例】

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

numbers.push(4);
console.log(numbers);

【出力】
[1,2,3]
[1,2,3,4]

【!】
numbers.push(4)を書く際に「=」を付けないように気を付ける!

forEach

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

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

【出力】
1
2
3

【!】
- {console.log...}の箇所で改行をすることで見やすくなるので癖づける。
- forEachの後の()の中のことをコールバック関数と呼ぶ。
- 一番最後の「;」を忘れやすいので、()や{}を書いたときに先に「;」を書く。

find

コールバック関数に記した条件に合う<1つ目の要素>を取り出す。
【例1】

const numbers=[1,3,5,7];
const foundNumber=numbers.find((number)=>{
    return number > 4 ;
});

【出力】
5 (1つ目のみなので7は出力されない)

【例2】

const animals=[
 {id:1,name:""},
 {id:2,name:""}
];

const foundAnimal=animals.find((animal)=>{
   return animal.id ===1;
});

console.log(foundAnimal);

【出力】
{id:1,name:"犬"} (オブジェクトそのものが出力される)

【!】
- animals.findの「.」を忘れやすいので気を付ける!
- return の後を「animal」だけにしてしまわない!「animal.id」or「animal.name」
- 条件式の語尾に「;」の付け忘れがあったので気を付ける!

filter

findの全要素ver. (記した条件に合う要素すべてを取り出す)
【例】

const numbers=[1,2,3,4,5];
const filteredNumbers=numbers.filter((number)=>{
  return number % 2 === 0;
});

console.log(filteredNumbers);

【出力】
[2,4]

map

配列内のすべての要素に処理⇒その戻り値から新しい配列を作る。
【例1】

const numbers=[1,2,3];
const doubledNumbers = numbers.map((number)=>{
  return number * 2;
});

console.log(doubledNumbers);

【出力】
[2,4,6]

【例2】

const names=[
 {firstName="Misa",lastName="Yamada"},
 {firstName="Hana",lastName="Tanaka"}
];

const fullNames=names.map((name)=>{
  return name.firstName + name.lastName ;
});

console.log(fullNames);

【出力】
[Misa Yamada,Hana Tanaka]

【!】
returnの後の「name.firstName」を「names.firstName」と何度か
してしまったのでコールバック関数の引数でしっかり書くよう気を付ける。

振り返り・今後について

まだJavaScriptの章が一つ残っていますが、今までしてきたことが
すべて覚えきれているかとても不安です。
できるだけリセットして復習をしたり、ここで出力したり
別ノートでまとめを見直したりはしていますが
もし他に何か良い復習法があれば教えてほしいです。

一人で勉強しているので、めげないように此処に書き記して
行くのが当面の目標です。毎日時間を作って今後も頑張ります!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away