1. 程式人生 > >JavaScript 物件屬性檢查方法

JavaScript 物件屬性檢查方法

     JS 物件可以看做屬性的集合,我們經常會檢測集合中成員的屬性關係——判斷某個屬性是否存在於物件中。可以通過in運算子、hasOwnPreperty() propertyIsEnumerable() 方法來完成這個工作,甚至僅通過屬性查詢也可以做到這一點。

    in運算子的左側是屬性名(字串),右側是物件。如果物件的自有屬性或繼承屬性中包含這個屬性則返回true。

let o = {x: 1}
'x' in o; // true 'x'是0的屬性
'y' in o; // false 'y'不是o的屬性
'toString' in o; // true 'o' 繼承 'toString'屬性

    物件的hasOwnProperty() 方法用來檢測給定的名字是否是物件的自有屬性。對於繼承屬性他將返回false;

let b = {x: 1}
b.hasOwnProperty('x'); // true; b有一個自有屬性x
b.hasOwnProperty('y'); // false; b中不存在屬性y
b.hasOwnProperty('toString'); // false; toString是繼承屬性

    propertyIsEnumerable() hasOwnProperty()是增強版,只有檢測到是自有屬性且這個屬性的可列舉為true是才返回true。某些內建屬性是不可列舉的。通過由JavaScript程式碼建立的屬性都是可列舉的,除非在ECMAScript 5 中使用一個特殊的方法來改變屬性的可列舉性;

let f = {p: 1}
let p = f.prototype = {z: 2};
p.x = 1;
console.log(p.propertyIsEnumerable('x')); // true; p中有一個可列舉的自有屬性x;
console.log(p.propertyIsEnumerable('p')); // false; y是繼承來的
console.log(Object.prototype.propertyIsEnumerable('toString')); //false; 不可列舉

    除了使用in運算子之外,另一種更為簡便的方法是使用 ‘!==’ 判斷一個屬性是否是undefined;

let j = {x: 1}
console.log(j.x !== undefined); // true; j中有屬性x
console.log(j.y !== undefined); // false; j中沒有屬性y
console.log(j.toString !== undefined); // true; o繼承了toString屬性

然而有一種場景只能使用in運算子而不能使用上述屬性的方法。in可以區分不存在的屬性和存在但值為undefined的值。例如下面的程式碼;

let i = {x: undefined}
console.log(i.x !== undefined); //false; 屬性存在,但值為undefined;
console.log(i.y !== undefined); // false; 屬性不存在
console.log('x' in j); // true; 屬性存在
console.log('y' in j); // false; 屬性不存在
delete j.x; // 刪除屬性x
console.log('x' in j); // false; 屬性不存在

注意,上述程式碼中使用的是‘!==’ 運算子,而不是 ‘!=’。 '!=='可以區分undefined和null。有時則不必作這種區分;

// 如果j中含有屬性x,且x的值不是null或undefined,j.x乘以2.
if (j.x != null) j.x *= 2;
// 如果j中含有屬性x,且x的值不能轉換為false, j.x乘以2.
// 如果x是undefined、null、false、''、0或NAN, 則他保持不變
if (j.x) j.x *= 2