Javascript 配列とオブジェクト 備忘録

概要

1. オブジェクトとは
2. オブジェクトの操作
3. 配列とは
4. 配列の操作

---

オブジェクトとは

• プロパティの集合
  ※プロパティとはキーとバリューが対になっているもの

# プロパティを持たない空のオブジェクト
const obj = {}

# プロパティを持つオブジェクト
const obj = {
    name: 'yamada', # key:name, value:yamada
    age: 20, # key:age, value:20
    gender: 'man' # key:gender, value:man
}
console.log(obj)  
# => { name: 'yamada', age: 20, gender: 'man' }

---

オブジェクトの操作

# キーへのアクセス
console.log(Object.keys(obj))
# => [ 'name', 'age', 'gender' ]

# バリューへのアクセス
console.log(Object.values(obj))
# => [ 'yamada', 20, 'man' ]

# プロパティの追加
const key = "add"
obj[key] = 'addValue'
console.log(obj)
# => { name: 'yamada', age: 20, gender: 'man', add: 'addValue' }

# プロパティの削除
delete obj.add # 「オブジェクト名.プロパティ名」
console.log(obj)
# => { name: 'yamada', age: 20, gender: 'man' }

上記の考え方をベースに、キーに配列や関数も指定できる
詳細はMDNを参照したい

---

配列とは

• 値に順序をつけて要素を格納する構造
• 要素には文字列、数字、変数、オブジェクト等が格納できる
• インデックス（要素に振る番号）は0から始まる

# 文字列
const msgs = ['a', 'b', 'c']

# 数字
const nums = [1, 2, 3 ]

# オブジェクト
    # 要素の準備
const obj1 = {
    name: 'tanaka',
    age: 30,
    gender: 'woman'
}
const obj2 = {
    name: 'sato',
    age: 35,
    gender: 'man'
}
const obj3 = {
    name: 'suzuki',
    age: 18,
    gender: 'man'
}
    # 配列の生成
const objs = [obj1, obj2, obj3 ]

---

配列の操作

# 配列の生成
const nums = [1, 2, 3 ]
# 要素数の取得
console.log(nums.length)　# => 3
# 並び替え
nums.sort((a,b) => b - a)
console.log(nums) # => [3,2,1]

# 以下、各要素それぞれに対して関数を適用するケース

# ループ処理
nums.forEach(v => console.log(v))
# => 3
# => 2
# => 1

# 配列から新しい配列を生成
const nums2 = nums.map(v => {
    return v * 2
})
console.log(nums2)
# =>  [ 6, 4, 2 ]
# 絞り込み（複数要素）
console.log(nums2.filter(v => {
    return v > 3
}))
# => [ 6, 4 ]

mapメソッドの詳細はMDNを参照したい。

---

以上。
jsonを扱う際はネスト構造を意識する必要があるのでそちらについての記事も作成予定。