javascript練習問題(連想配列)

前提知識 : 連想配列とは？
問題1 : 連想配列の値取得
問題2: 連想配列の要素追加
問題3: 連想配列の値の上書き
問題4: 連想配列の要素の削除
問題5 : 連想配列の全ての値の取得
問題6 : 配列の中に連想配列をつくる
問題7 : 配列の中にある連想配列の値取得

前提知識 : 連想配列とは？

通常の配列と何が異なるか。

簡単に言えば、添え字(キー)に好きな名前を付けることのできる配列です。

連想配列のサンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

サンプルを題材にすると、nameがkey、テスト太郎がvalueになります。

また通常の配列の場合は[]で囲いますが、連想配列は{}で囲います。

問題1 : 連想配列の値取得

下記の連想配列の趣味(hobby)の値を取得して、コンソールログに出力してください。

連想配列サンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  console.log(array['hobby']);
</script>
</html>

コンソールログ出力内容

baseball

問題2: 連想配列の要素追加

下記の連想配列の末尾にキー名がfavorite_food、値がhamburgerの要素を追加してください。

連想配列サンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

参考ソース①

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  array.favorite_food = "hamburger";
  console.log(array);
</script>

参考ソース②

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  array["favorite_food"] = "hamburger";
  console.log(array);
</script>

コンソールログ出力内容

 {name : "テスト太郎", address : "tokyo", hobby : "baseball", favorite_food : "hamburger"};

問題3: 連想配列の値の上書き

下記の連想配列のテスト太郎をテスト次郎に変更して、コンソールログに出力してください。

連想配列サンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

参考ソース

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  array["name"] = "テスト次郎";
  console.log(array);
</script>

コンソールログ出力内容

{name : "テスト次郎", address : "tokyo", hobby : "baseball"};

問題4: 連想配列の要素の削除

下記の連想配列の要素である「趣味：野球」を削除し、コンソールログに出力してください。

連想配列サンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

参考ソース①

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  delete array.hobby;
  console.log(array);
</script>

参考ソース②

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  delete array["hobby"];
  console.log(array);
</script>

コンソールログ出力内容

{name : "テスト次郎", address : "tokyo"};

問題5 : 連想配列の全ての値の取得

下記連想配列の全ての値を取得し、コンソールログに出力してください。

連想配列サンプル

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

参考ソース

<script>
  let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};
  for (key in array) {
    console.log(array[key]);
  }
</script>

コンソールログ出力内容

テスト太郎
tokyo
baseball

問題6 : 配列の中に連想配列をつくる

実践で使えるように、ちょっと応用問題です。

下記の連想配列サンプルがあります。

let array = {name : "テスト太郎", address : "tokyo", hobby : "baseball"};

では、テスト次郎とテスト三郎の情報も保持したいと思った場合どうするか。

というのが今回の問題です。

問題6：テスト太郎、テスト次郎、テスト三郎の情報を定義してください。キー項目はサンプルと同じにしてください。値は適当なもので良いです。

参考ソース

<script>
let personalInfo = [
  {
    name : "テスト太郎",
    address : "tokyo",
    hobby : "baseball"
  },
  {
    name : "テスト次郎",
    address : "osaka",
    hobby : "music"
  },
  {
    name : "テスト三郎",
    address : "kyoto",
    hobby : "running"
  },
];
console.log(personalInfo);
</script>

コンソールログ出力内容

personalInfo配列の中に連想配列を複数作成することで、実現できます。

まとめて配列を定義したい時に、便利な方法です。

どんな時に使用するかの例を他に知りたい場合は、こちらの「おみくじ」で実践しているので参考にしてください。

問題7 : 配列の中にある連想配列の値取得

問題6で作成した配列の、全てのaddressを取得しコンソールログに出力してください。

参考ソース

<script>
let personalInfo = [
  {
    name : "テスト太郎",
    address : "tokyo",
    hobby : "baseball"
  },
  {
    name : "テスト次郎",
    address : "osaka",
    hobby : "music"
  },
  {
    name : "テスト三郎",
    address : "kyoto",
    hobby : "running"
  },
];
for (i=0; i<personalInfo.length; i++) {
  console.log(personalInfo[i]['address']);
}
</script>

コンソールログ出力内容