Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

JavaScript サイト構築

配列

投稿日:

                                                                                                                                 

Javascriptの配列

今までにでてきた変数は1つのデータしかいれることができません。
1変数につき1データです。
でも例えば類似した分類で変数を指定したいとき、いくつも指定するのは面倒だったりします。

<script>
var favorite01 = 5000;
var favorite02 = 3000;
var favorite03 = 4000;
var favorite04 = 2000;
console.log(favorite01)
</script>

変数だとこんな風に長々と書かなくてはいけませんが、配列を使うことですっきりした命令になります。

<script>
var favorite = [5000,3000,4000,2000];
console.log(favorite)
</script>

つまり変数をグループ化することを配列といいます。
配列で大切なのは変数を[ ]でくくることです。

任意の値を取り出す

配列で変数を指定したとき、ある特定の値を取り出したいときが出てきます。
そうしたときはそれぞれの値に紐付けられた添字を指定して取り出します。
添字というのはさきほどの例で言うと
5000→0
3000→1
4000→2
2000→3
というふうに前から順番に1ずつ増えていくそれぞれに割り当てられた数字です。
最初が0から始まるということを忘れないようにしましょう。


では実際に値を取り出す方法です。

<script>
  var favorite = [5000,3000,4000,2000];
  console.log(favorite[2])
</script>

console.log(favorite[2])の[2]の部分が添え字になります。
つまり3番目の値を取り出すことになるのでコンソールツールには4000と表示されます。

値の代入

次は値を代入する方法について見ていきます。
3000の部分に10000を代入したいと思います。

<script>
  var favorite = [5000,3000,4000,2000];
  favorite[1] = 10000
</script>

これで添字の1が示している値3000が10000にかわりました。

コードをダラダラ長く書くよりも、短くスッキリさせたほうが間違いに気づきやすくなるんじゃないかと思う今日このごろです。
今回はここまでです。
へば!

-JavaScript, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS基礎編 vol.07

FlexBox 今日の今日まで存在をしらなかったFlexBox レスポンシブデザインを作る時にとても便利そうなので使い方を調べてまとめてみます。 最初に設定方法です。 FlexBoxはFlexBoxコ …

no image

【jQuery】フィルタ

フィルタ 前回はセレクタの指定方法を見ていきました。 今回はフィルタを使って特定の値を指定方法を見ていきます。 html、CSSで:first-childなどの指定方法がありましたが、わりとそれと似て …

no image

【Javascript】組み込みオブジェクト〜StringオブジェクトとArrayオブジェクト〜

組み込みオブジェクト 今日は組み込みオブジェクトについて見ていきます。 昨日書いた記事ではオブジェクトを自分で作りましたが、今日まとめていく組み込みオブジェクトというのは、JavaScripがあらかじ …

no image

【wordpress】オリジナルテーマを作る〜テーマファイルの構造〜

オリジナルテーマを作る 初心者でも簡単に扱えるというWordPressですが、それは既存テーマを使う場合です。 初心者がWordpressでオリジナルテーマを作ろうってなると結構やっかいです。 php …

no image

オリジナルテーマを作る〜固定ページを作る〜

第9回目のWordPressのサイト作り 今回が最終回になります。 前回の記事までの記事はこちらから WordPress オリジナルテーマを作る〜ヘッダー〜 WordPress オリジナルテーマを作る …