さて今回は連想配列、JSON?と呼ばれる？の基礎的な部分を書いていきます。ではいきなり定義方法から。

let item = {
  name: "パソコン",
  price: 100000000000000,
  sale: true,
  parts: ["CPU","HDD","SSD","メモリ"],
  merker: {
    direction: "多次元配列",
    sinbole: "Apple",
    popular: true,
  }
}
item["c"] = "追加した内容";

上記のように{キー：’値’,}という形式で記述することが出来ます

parts: [“CPU”,”HDD”,”SSD”,”メモリ”],のように

配列を入れることや

merker: {
direction: “多次元配列”,
sinbole: “Apple”,
popular: true,
}

のようにさらにオブジェクトを突っ込むこともできます

ＨＴＭＬタグを用意して呼び出してみる

<div id="array"></div>
    <div id="array2"></div>

タグを書いておいてからの、、

呼び出し方です。

document.getElementById("array").textContent = '商品名は' + item.name + 'です。';
document.getElementById("array2").textContent = '値段は' + item["price"] + '円です。';//[""]の中にキーを入れて出力

documentなどと同じオブジェクトとなるためitem.nameのように.で連結して呼び出します。また、

item[“price”]のようにカッコでくくる書き方もあり、こちらはキーを変数にする際などに有用です。for文などでpriceという変数を回してこちらに入れるというような使い方をしたい時はこちらです。

またオブジェクトの中身を書き換える際はこうです。

またタグを追加しまして、、

<div id="parts"></div>
    <div id="array_direction"></div>
    <div id="add_array"></div>

このタグに条件分岐を入れてこうです。

item["sale"] = false;//配列の中身を書き換える
if (item["sale"]) {//saleがtrueなら実行
  document.getElementById("array3").textContent = item["name"] + 'はセール中です。';
}

そしてオブジェクトの中のオブジェクト（多次元配列）の取り出し方と、追加した部分のオブジェクトの値を取り出す。

//多次元配列を取り出す
document.getElementById("array_direction").textContent = item["a"]["direction"];
// 追加した値を取り出す。
document.getElementById("add_array").textContent = item["c"];

こんな感じですね。基本的な使いかたとなります。

また、オブジェクトの中に関数を持つことも出来ます

連想配列の中の関数をオブジェクトの「メソッド」と言います

const ojako = {
  name: 'おジャコ丸',
  age: 'お年頃',
  work(dream) {
    return 'Web Site'
  }
}

そしてこのメソッドの中でthisを使用すると対象となるのは、

そのメソッドを持っているオブジェクトそのものになります。

const downtown = {
  name: 'ダウンタウン',
  boke: '松本人志',
  tsukkomi: '浜田雅功',
  manzai(args) {
    return '爆笑';
  },
  introduce: function() {
    console.log(`コンビ名は${this.name}です。ボケは${this.boke}、ツッコミは${this.tsukkomi}です。`);
  }
}
downtown.introduce();

上記の様に関数を呼び出します。

配列の中身がわからなくて確認する際にはconsole.log()かconsole.tableもみやすくていいです。

console.log(item);
console.table(item)

通常の配列メソッド紹介

.push（配列に値を追加する）

const items = [
  'ひのきのぼう',
  'とがったホネ',
  'しあわせのぼうし',
  'こんぼう',
  'のこぎりがたな',
];
items.push('この中に追加の値を入れる');

.pushで値を追加します。

.slice() 配列を切り取って新しくコピーする

const smap = [
  '中居正広',
  '木村拓哉',
  '稲垣吾郎',
  '草彅剛',
  '香取慎吾',
  '森くん'
];
const newSmap = smap.slice(2,5);
console.log(newSmap);

.slice(2,5)で配列の中の内容を切り取る範囲を指定しています。

すなわち、稲垣吾郎”, “草彅剛”, “香取慎吾”が実行結果になります。

また、.slice(2)と、引数を一つ指定した場合は二番目以降が全て切り取られます

引数をしていない場合はそのままコピーします

.concat（）配列の結合

const first = ['中澤裕子','安倍なつみ','飯田圭織','石黒彩'];
const second = ['保田圭','矢口真里','市井紗耶香'];
const morningDaughters = first.concat(second);
console.log(morningDaughters);

first.concat(second);とすることで

配列に（）の中の配列を連結することが出来ます

多次元配列を作る　array[[壱の段],[二ノ段],[三の段],・・・・]

const kuku = [];           //根幹の配列を用意
for (let i = 0; i < 9; i++) {
  kuku.push([]);           //○○の段となるループ
  for (let j = 0; j < 9; j++) {
    kuku[i].push((i + 1) * (j + 1));
  }                 //〇〇の段の中の九九を計算するループ
}
console.log(kuku);

const kuku = [];で配列を用意します

for文の一周目で配列の中に配列を作りkuku.push([]);

さらにfor文を回し作成した計算を作成した配列に格納します

配列のループ処理について

const array = [5,7,2,4,3,1,0,];
const value = 6;

const search = (value,array) => {
  let included = false;
  for (const target of array) {
    if (target === value) {
      included = true;
      break;
    }
  }
  const message = included ? `${value}は見つかりました。` : `${value}はありませんでした。`;
  console.log(message);
}
search(value,array);

上記はある配列の中からvalueを探し出す関数ですが

const message = included ? ‘Yes’:’No’;の部分は

三項演算子といって

真偽値 ? ‘trueの場合’ : ‘falseの場合’;

という書き方をします。

reverse() と配列のミュータブルとイミュータブルについて

配列などは中の内容を書き換えることができるため

ミュータブルな性質を持つと言われます

一方でプリミティブ型と言われる7大型は全て

イミュータブル（内容を再代入出来ない）と言われていますが

その解釈はやや難しく、

const arr = [1,2,3,4,5];
const reversed = arr.reverse();
console.log(reversed);

.reverse();で配列の中身が逆になる関数ですが

これを使用した後はconstで定義したにも関わらず

値がかわってしまいます。

const arr = [1,2,3,4,5];
const reversed = arr.reverse();
console.log(reversed);
console.log(arr);  //実行すると逆転したままになる

これにより.reverse();は破壊的なメソッドということです

値が書き換わることなく実行される関数を非破壊的なメソッドといいます。

ちなみに上の例を解消するためには、

const reversed = arr.slice().reverse();

.slice()で引数をなしでコピーさせてから.reverse()することで

値の書き換えを防ぐことが出来ます

.map()は非破壊的なおしゃれメソッド

配列全体に対して何かしらの処理を行う場合に使用する関数です

const f = (x) => {
  return 100 * x;
}
const mapped= arr.map(f);   //コールバック関数を受け取る
console.log(mapped);

こうすることで上の関数が実行された配列が返ります

アロー関数の省略について

まず引数が一つの場合引数のカッコを省略できます。

更に波括弧野中が一行の場合は波括弧とreturnを省略することが出来ます

const mapped= arr.map( x =>  100 * x );

.filter()関数について

.filter()関数は.map関数と同じく引数は一つだけで

boolean型のコールバック関数関数を受け取ります

実際に書いてみます

const arr = [1,2,3,4,5,6];
const filtered= arr.filter( x =>  x % 2 === 0 );
console.log(filtered);  //実行結果 [2, 4, 6]

.filter()関数も.map関数と同じく非破壊的なメソッドです

処理内容はコールバック関数の真偽値でtrueになる箇所だけ取り除くという処理になります。

配列からある条件で中の要素を取り除きたいときなどに使用します

reduce() 畳み込み計算をする

const arr = [1,2,3,4,5,6];
const reduceed= arr.reduce( (x,y) =>  x * y );
console.log(reduceed);

reduce()は2つの引数を取り

配列の1番目と二番目で演算をします

その結果と三番目の値でまた演算を行い

またその結果で四番目と、、、

この様に計算する方法を「畳込み」といいます

ちなみに他の言語だとfoldやaccumelateなどと呼ばれています