1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptにおける配列の種類と値の取り出し方について

Posted at

JavaScriptにおける配列の種類と値の取り出し方について

配列(一次元配列)とは

  • 複数の変数を格納するための変数のこと。
  • 0番から採番される。
    -値を取り出す時は[]で番号を付けて指定する。
let fruits = [ "apple" , "orange" , "banana" ];
console.log( fruits ) ; // ["apple", "orange", "banana"]
console.log(fruits[0]); //apple
console.log(fruits[1]); //orange
console.log(fruits[2]); //banana

多次元配列とは

  • 配列の中に配列やオブジェクトが格納されており、入れ子状態となっている配列のこと。
  • 0番から採番されるのは配列と同じ。取り出し方も同様。
  • テーブル形式でデータを管理したい時によく使われる。
let likeFruits = [ ["ゴリラ",5,"apple"], ["チンパンジー",3,"orange"] , ["さる",8,"banana"] ];
console.log(likeFruits[1]); // ["チンパンジー", 3, "orange"]

取り出した要素を変数に格納し、更に細かく取り出すことも可能。

let likeFruits = [ ["ゴリラ",5,"apple"], ["チンパンジー",3,"orange"] , ["さる",8,"banana"] ];

let animal = likeFruits[0]; 
console.log(animal);  // ["ゴリラ", 5, "apple"]
console.log(animal[0]); //ゴリラ 
console.log(animal[1]); //5
console.log(animal[2]); //apple

別の変数に格納せず、そのまま取り出すことも可能。

let likeFruits = [ ["ゴリラ",5,"apple"], ["チンパンジー",3,"orange"] , ["さる",8,"banana"] ];

console.log(likeFruits[0][0]); //ゴリラ
console.log(likeFruits[0][1]); //5
console.log(likeFruits[0][2]); //apple

連想配列とは

  • 添え字(キー)と値(バリュー)がセットになっている。
    -キーは好きな文字列を指定出来るl
  • jsでは、値だけではなく関数を収めることも可能なのでオブジェクトとも呼ぶ。
let likeFruits = {name : "ゴリラ" , number : 5 , fruit  : "apple" } ;

上記の例だと「name」が添え字(キー)、「ゴリラ」が値(バリュー)と呼ぶ。

連想配列の値の取り出し方
配列名.キー もしくは 配列名[ "キー" ] で値を取り出すことが可能。

let likeFruits ={name : "ゴリラ" , number : 5 , fruit: "apple" };
console.log(likeFruits.name); //ゴリラ
console.log(likeFruits[ “ fruit ” ]); //apple

配列の中に連想配列を格納することもできる。
配列名[採番] で連想配列全体を取り出すことが可能。
配列名[採番].キー もしくは 配列名[採番][ "キー " ] で個別の値を取り出すことができる。

let likeFruits = [ 
    {name : "ゴリラ" , number : 5 , fruit: "apple" } ,
    {name : "チンパンジー" , number : 3 , fruit: "orange" },
    {name : "さる" , number : 8 , fruit: "banana" } ];

console.log(likeFruits[0]); // {name : "ゴリラ" , number : 5 , fruit: "apple" }
console.log(likeFruits[0].name); //ゴリラ
console.log(likeFruits[0]["fruit"]); //apple

配列の中に配列や連想配列を格納できるように、連想配列の中に連想配列を格納することも可能。

let students = { "3年" :
    { "A組" : {
        "1列目" :  [ { "Aさん" :{
            name :"Aさん",
            age :18,
            h:160,
            w:60,
            sex:"女性",
        }}]
        },Bさん...,Cさん...]
        }
    }
}

余談

jsonとは
連想配列の塊と考えられる。

意外と身近な連想配列の例
キー:値の形になっているものと考えると意外と身近なものにも配列や連想配列が見られる。
例:CSS
width : 100% ;
widthがキー、100%が値…と考えられる。

例:CSV
CSVとは……データをカンマ「,」で区切られたファイル
データを「,」で区切ったデータの塊なので、配列と考えられる。

漠然と「配列」や「json」といった単語に苦手意識があったので、「配列」と「連想配列」と「多次元配列」の基礎を復習がてら改めてまとめてみました。
WEBアプリやGASを使ってToDoアプリやメモアプリを作ろうとするとデータの保持は避けられない問題なので基礎を抑えた上で繰り返し書くことで少しずつ慣れて行こうと思います。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?