首頁  >  文章  >  web前端  >  JS 物件屬性相關(檢查屬性、枚舉屬性等)_javascript技巧

JS 物件屬性相關(檢查屬性、枚舉屬性等)_javascript技巧

WBOY
WBOY原創
2016-05-16 16:05:531405瀏覽

1.刪除屬性

delete運算子可以刪除物件的屬性

複製程式碼 程式碼如下:

delete person.age //即person不再有屬性age
delete person['age'] //或這樣

delete只是斷開屬性和宿主物件的聯繫,而不會去操作屬性中的屬性 看到delete a.p之後b.x仍然為1

var a = {p:{x:1}};
var b = a.p;
console.log(a.p.x); //1
delete a.p;
console.log(a.p.x); //TypeError a.p is undefined
console.log(a.p); //undefined
console.log(b.x); //1

delete只能刪除自有屬性,不能刪除繼承屬性(要刪除繼承屬性必須從定義這個屬性的原型物件上刪除它,當然,這會影響到所有繼承來自這個原型的物件)

function inherit(p){ 
  if(p == null){  // 不能从null中继承
    throw TypeError();
  }
  if(Object.create){  //如果有这个方法就直接使用
    return Object.create(p);
  }
  var t = typeof p;
  if(t !== "object" || t !== "function"){  //要继承的对象 类型要符合
    throw TypeError();
  }
  function f(){ }; //定义一个空的构造函数
  f.prototype = p; //原型指向要继承的对象p
  return new f();  //创建f对象,此对象继承自p
}

var obj = {x:1};
var obj1 = inherit(obj);
obj1.y = 2;
console.log("x = "+obj1.x+" y = "+obj1.y); //x = 1 y = 2
delete obj1.x;
delete obj1.y;
console.log("x = "+obj1.x+" y = "+obj1.y); //x = 1 y = undefined

當然了,可配置的屬性才能用到delete

delete Object.prototype; // 不能删除 不可配置

var x = 1;
delete this.x; //不能删除
this.y = 1;
delete y; //这样可以删除

function f(){ }
delete this.f; //不能删除

2.偵測屬性

使用 “in"

in 運算子希望它的左操作數是一個字串或可以轉換為字串,希望它的右操作數是一個物件

var data = [5,6,7];
console.log("0" in data); //有下标0
console.log(1 in data);  //1可以转换成"1"
console.log("4" in data); //下标只有 1 2 3
 
var obj = {x:1};
console.log("x" in obj); //true
console.log("y" in obj); //false
console.log("toString" in obj); //true 因为obj继承了这个方法

使用hasOwnProperty()或propertyIsEnumerable() --- 後者是前者的增強
顧明思議

var obj = {x:1};
console.log(obj.hasOwnProperty("x")); //true
console.log(obj.hasOwnProperty("y")); //false
console.log(obj.hasOwnProperty("toString")); //false 因为obj继承了这个方法,但不是它自己的

只有偵測到是自由屬性且是可列舉的屬性時,後者才會回傳true

var obj = {x:1};
console.log(obj.propertyIsEnumerable("x")); //true
console.log(obj.propertyIsEnumerable("y")); //false
console.log(obj.propertyIsEnumerable("toString")); //false 因为obj继承了这个方法,但不是它自己的
console.log(Object.prototype.propertyIsEnumerable("toString")); //false 因为最原始的的 toString就是不可枚举的

當然,也可以直接用 ”!=="運算子判斷

var obj = {x:1};
console.log(obj.x !== undefined);//true
console.log(obj.y !== undefined);//false
console.log(obj.toString !== undefined); //true 

3.枚舉屬性

var obj = {x:1,y:2};
for(p in obj){
 console.log(p);//x y
 console.log(obj.p);// undefined undefined
 console.log(obj[p]);//1 2
} 

拓展1:

每個物件都有與之相關的原型(prototype)、類別(class)、可擴展性(extensible)
要偵測一個物件是否為另一個物件的原型(或處於原型鏈中),可以使用isPrototypeOf()方法

var p = {x:1}; //p原型对象继承自Object.prototype
var o = Object.create(p); //o对象继承自p

console.log(p.isPrototypeOf(o));//true
console.log(Object.prototype.isPrototypeOf(o));//true
console.log(Object.prototype.isPrototypeOf(p));//true

當然,isPrototypeOf()方法和instanceof運算子非常類似
instanceof運算子希望它的左操作數是一個對象,右操作數標識對象的類別。如果左側的物件是右側類別的實例,則表達式傳回true,否則傳回false

var p = {x:1}; 
console.log(p instanceof Object);//true

var d = new Date();
console.log(d instanceof Date);//true
console.log(d instanceof Object);//true
console.log(d instanceof Number);//false

拓展2:

物件的類別屬性是一個字串,用以表示物件的類型資訊

一般呼叫toString()方法後回傳形如 [object class]的形式

複製程式碼 程式碼如下:

var obj = {x:1,y:2};
console.log(obj.toString());//[object Object]

所以要想取得物件的類,就可以透過傳回的字串中找出 「class"欄位  使用 slice(8,-1)

function classOf(obj){ // 找出类名
 if(obj === null){
  return "Null";
 }
 if(obj === undefined){
  return "Undefined";
 }
 return Object.prototype.toString.call(obj).slice(8,-1);
}

console.log(classOf(1)); //Number
//注意,实际上是这些类型的变量调用toString()方法,而不是通过他们自身直接调用
//console.log(1.toString()); //会报错
var a = 1;
console.log(Number(1).toString()); //1
console.log(a.toString()); //1
console.log({x:1}.toString()); //[object Object]

console.log(classOf(1)); //Number
console.log(classOf("")); //String
console.log(classOf("str")); //String
console.log(classOf(null)); //Null
console.log(classOf(false)); //Boolean
console.log(classOf({})); //Object
console.log(classOf([])); //Array
console.log(classOf(new Date())); //Date
function f(){}
console.log(classOf(new f())); //Object
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn