JavaScriptのオブジェクト操作まとめ
今回はJavaScriptのオブジェクト操作について。これのループ処理が順序不定になるのでよく戸惑います。(^-^;
定義
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
console.log(object[2]); // BB
console.log(object); // { '1': 'A', '2': 'BB', '3': 'B', '4': 'B', '5': 'C' }要素数を取得
Object.keys()メソッドでキー(メンバ名)の配列を取得し、lengthで数を取得します。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
console.log(Object.keys(object).length); // 5ループ
for...in 文
順序不定でキー(メンバ名)を取得します。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
for (let key in object) {
console.log("%s: %s", key, object[key]);
}> 1: A
> 2: BB
> 3: B
> 4: B
> 5: Cfor...of 文
順序不定で要素を取得します。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
// キーを取得.
for (let key of Object.keys(object)) {
console.log(key);
}
// 値を取得.
for (let value of Object.values(object)) {
console.log(value);
}
// キーと値を取得.
for (let [key, value] of Object.entries(object)) {
console.log("%s: %s", key, value);
}> 1
> 2
> 3
> 4
> 5
> A
> BB
> B
> B
> C
> 1: A
> 2: BB
> 3: B
> 4: B
> 5: CforEach() メソッド
順序不定でキー(メンバ名)を取得し、キー(メンバ名)を元に関数を実行します。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
Object.keys(object).forEach(function(key) {
console.log("%s: %s", key, object[key]);
});> 1: A
> 2: BB
> 3: B
> 4: B
> 5: Cプロパティの追加
キー(メンバ名)を指定して追加します。既にあるキー(メンバ名)を指定した場合は値の変更になります。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
object[10] = "Z";
console.log(object); // { '1': 'A', '2': 'BB', '3': 'B', '4': 'B', '5': 'C', '10': 'Z' }
object[4] = "D";
console.log(object); // { '1': 'A', '2': 'BB', '3': 'B', '4': 'D', '5': 'C', '10': 'Z' }
object.a = "ABC";
console.log(object["a"]); // ABCプロパティの削除
deleteを使用します。
let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
delete object[1];
console.log(object); // { '2': 'BB', '3': 'B', '4': 'B', '5': 'C' }プロパティの確認
in演算子を使うと指定されたプロパティがオブジェクトに存在するかチェックできます。
プロパティ名は文字列で指定する必要があります。(下記でyear in objectだとエラーになる)
ただし、数値の場合はそのままでも判定できます。
const object = { year: '2021', month: '01', 1: 'one' };
console.log(object.year); // 2021
console.log('year' in object); // true
console.log(object.day); // undefined
console.log('day' in object); // false
console.log(1 in object); // true
console.log('1' in object); // truein演算子は指定されたプロパティがオブジェクトに存在するかどうかを判定するため、その値がfalseやnullでもtrueを返します。
値がfalseやnullの場合も含めて判定したい場合は、オブジェクト.プロパティ名やオブジェクト[プロパティ名]で判定します。
const json = { result1: false, result2: null };
console.log('result1' in json);
console.log(json.result1);
console.log(json['result1']);
if (json.result1) {
console.log(`json.result1 value is ${json.result1}`);
}
console.log('result2' in json);
console.log(json.result2);
console.log(json['result2']);
if (json.result2) {
console.log(`json.result2 value is ${json.result2}`);
}
console.log('result3' in json);
console.log(json.result3);
console.log(json['result3']);
if (json.result3) {
console.log(`json.result3 value is ${json.result3}`);
}> true
> false
> false
> true
> null
> null
> false
> undefined
> undefined判定例２
const json = { 12221: [], 12222: ['a'], 12224: false, 12225: false };
if (json['12221']) {
console.log('12221');
}
if (json['12222']) {
console.log('12222');
}
// プロパティがないので通らない.
if (json['12223']) {
console.log('12223');
}
// プロパティはあるが、値が false なので通らない.
if (json['12224']) {
console.log('12224');
}
// プロパティがあるので、値に関係なく通る.
if ('12225' in json) {
console.log('12225');
}> "12221"
> "12222"
> "12225"
