Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@keisei_otsuka

javasqriptの便利メソッド等について

More than 1 year has passed since last update.

初めに

現在、ES6のJavaScriptを学習しており、個人的なアウトプットとしたいと思います。

for分では考えることが多い?

まずはこちらを見てください。

const images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
const areas = [];
for (i = 0; i < images.length; i++){
  areas.push(images[i].height * images[i].width)
}
console.log(areas) /* [300, 1800, 1728] */

こちらのfor文でやっていることはオブジェクトが入っているimagesという配列の数だけfor文内で繰り返しをしてareaという面積を求める処理です。

僕はfor文の中で考えることが多いなという印象があります。
・ imageがトータル数を数える。
・ i を ループするたびに足していく。
・ images[i].heightのところが長い。

上記が僕がこの処理の時に考えたり、感じていることです。。

map()を使ってみる

const images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
const areas = images.map(function(image){
  return image.height * image.width /* [300, 1800, 1728] */
});

こちらはmap()を使っています。map()というのはコールバック関数を実行して配列の中の要素に対して好きな処理をして、結果を返り値として新しい配列を作成するといったものです。
for文お決まりの
for (i = 0; i < images.length; i++)
といったことがなくなってスッキリした印象があるのと、要素へアクセスするために添字を使っていないところもいいところなのかなと思っています。
ですがもう少しスッキリしたいですね。

アロー関数を使ってみる

const images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
const areas = images.map(image =>image.height * image.width);
console.log(areas) /* [300, 1800, 1728] */

さらにスッキリして処理の内容が直感的に分かりやすくなった気がします。
ではもう少しいじってみます。

分割代入を使ってみる

const images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
const areas = images.map(({height, width}) => height * width);
/* [300, 1800, 1728] */

これは分割代入というES6から登場した機能を使っているのですが少し難しいかもです。。
コールバック関数の引数となる部分に{height, width}というimagesのオブジェクト内の値を入れることができます。

最後に

最初のfor文に比べたら少しスッキリしましたね。今回は単純なプログラムなのですが、もっと複雑なプログラムを作る際には便利メソッド(forEach、some, map, every, find, some, reduce)などなどを使いこなせるかが鍵になっているのかなと思った今日この頃でございます。
何かもっとこうしたらとかアドバイスや誤った考え方があればご指摘ください。
よろしくお願いいたします。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
keisei_otsuka
Web制作会社でマークアップ ↓ ses企業にてお客様企業でお仕事をさせてもらってます。 比較的にJavaScriptがかける方です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?