#52 JavaScriptの学習　オブジェクト取得・更新　超基本！初心者は必ず覚えましょう

プログラミング

2023.02.272023.11.05

オブジェクト

JavaScriptにおけるオブジェクトとは

配列　[値1, 値2, ・・・]

オブジェクト　[プロパティ値1: 値1, プロパティ値2: 値2, ・・・]

というように、配列の値に「プロパティ値」をくっつけたものが「オブジェクト」です。どのように使うかコードをみてみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];

このように「name」や「age」がプロパティ値で、「お父さん」や「40」が値です。

取得

では、取得してみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];
console.log(family);
// →[{name: 'お父さん', age: '40'}, {name: 'お母さん', age: '38'}, {name: 'お兄ちゃん', age: '12'}]
// すべて取得します。
console.log(family[0].name);
// →お父さん

familyという定数名だけであれば、すべてオブジェクトを取得します。値を取得する場合は「定数名[番号].プロパティ値」とします。番号にはオブジェクトの0~振り当てられた番号で、その番号のオブジェクトのプロパティ値を指定することで値を取り出すことが出来ます。

更新

値の更新は「定数名.プロパティ値 = 値」というように記述します。オブジェクトごと更新することも出来るのでみてみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];
family[0] = {name: 'おじいちゃん', age: '65'}

family[2].name = 'お姉ちゃん';
family[2].age = '10';

console.log(family[0]);
// →{name: 'おじいちゃん', age: '65'}
console.log(family[2]);
// →{name: 'お姉ちゃん', age: '10'}