こんにちはフロントエンドエンジニアのまさにょんです!
今回は、JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法について解説していきます。
目次
JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法
Dataが、配列かどうかの判定方法を解説してから、Objectかどうかの判定方法を紹介します。
配列かどうかの判定方法
Dataが、配列かどうかの判定方法は、Array.isArray()
で簡単に判定できます。
const obj = { id: 1, val: "Gunmar" };
const arr = [
{ id: 1, val: "Gunmar" },
{ id: 2, val: "Saitamar" },
];
// 1. Array.isArray() で、配列かどうか判定できる
console.group("Array_判定");
console.log("Array.isArray(obj)", Array.isArray(obj));
console.log("Array.isArray(arr)", Array.isArray(arr));
console.groupEnd();
Objectかどうかの判定方法
JavaScriptで、Objectかどうかの判定方法には、注意する必要があります。
JavaScriptでは、typeof val === "object"
の判定に、配列やnull
も引っかかります。
( null
が引っかかるのは、JavaScriptの歴史的な経緯が関係あるとかないとか。。。 )
上記のような状況であるため、JavaScriptでの Object の判定は、
typeof val === "object" && val !== null && !Array.isArray(val)
のような判定文を記述しないと判定できないのです。
const obj = { id: 1, val: "Gunmar" };
const arr = [
{ id: 1, val: "Gunmar" },
{ id: 2, val: "Saitamar" },
];
// 2. Object の判定は、typeof val === "object" && val !== null && !Array.isArray(val) をしないと判定できない。
// 配列も null も typeof では 'object' なので。。。
function isObject(val) {
return typeof val === "object" && val !== null && !Array.isArray(val);
}
console.group("Object_判定");
console.log("isObject(obj)", isObject(obj));
console.log("isObject(arr)", isObject(arr));
console.groupEnd();
SampleCode全文
SampleCodeの全文は、次のとおりです。
const obj = { id: 1, val: "Gunmar" };
const arr = [
{ id: 1, val: "Gunmar" },
{ id: 2, val: "Saitamar" },
];
// 1. Array.isArray() で、配列かどうか判定できる
console.group("Array_判定");
console.log("Array.isArray(obj)", Array.isArray(obj));
console.log("Array.isArray(arr)", Array.isArray(arr));
console.groupEnd();
// 2. Object の判定は、typeof val === "object" && val !== null && !Array.isArray(val) をしないと判定できない。
// 配列も null も typeof では 'object' なので。。。
function isObject(val) {
return typeof val === "object" && val !== null && !Array.isArray(val);
}
console.group("Object_判定");
console.log("isObject(obj)", isObject(obj));
console.log("isObject(arr)", isObject(arr));
console.groupEnd();
実行結果は、次のとおりです。
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!