卡卡網(wǎng)

在JS實(shí)際編程中，有時(shí)我們需要判斷某個(gè)屬性是否在指定對(duì)象里，本文將介紹5種方法判斷某屬性是否在指定對(duì)象中，所有方法均有實(shí)例演示。

1. in運(yùn)算符
2. Reflect.has() 方法
3. hasOwnProperty() 方法
4. Object.prototype.hasOwnProperty() 方法
5. Object.hasOwn() 方法

1、in運(yùn)算符

如果指定的屬性在指定的對(duì)象或其原??型鏈中，則in運(yùn)算符返回true，否則返回false。

實(shí)例：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log('name' in obj);

返回：

true

但是in操作符有一個(gè)缺點(diǎn)，那就是：如果屬性來(lái)自對(duì)象的原型，它仍然會(huì)返回true，例如：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log('toString' in obj);

返回：

true

JS中in的用法

我們常常用in來(lái)查詢數(shù)組獲取數(shù)據(jù)。在JS中in可以用來(lái)查尋一個(gè)值是否存在數(shù)組中，存在為ture否則為flase。如：

var arr=[1,2,3,4,5]
console.log(1 in arr)

返回：

true

存在，所以結(jié)果為ture。

也可以將數(shù)組進(jìn)行for/in 循環(huán)枚舉出來(lái)。如：

var arr=[1,2,3,4,5]
for (var i in arr) {
  console.log(i)
}

說(shuō)明，如下寫法效果一樣。

for(var i=0;i<arr.length;i++) 與 for (var i in arr)

結(jié)果為：

1
2
3
4
5

2、Reflect.has() 方法

Reflect.has方法允許你檢查屬性是否在對(duì)象中。它就像in操作符一樣工作。如：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log(Reflect.has(obj,'name'));

返回：

true

但是，Reflect.has()也存在跟in一樣的一個(gè)缺點(diǎn)，那就是如果屬性來(lái)自對(duì)象的原型，它仍然會(huì)返回true。如：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log(Reflect.has(obj,'toString'));

返回：

true

示例，使用 Reflect.has() ：

Reflect.has({x: 0}, "x"); // true
Reflect.has({x: 0}, "y"); // false

// 如果該屬性存在于原型鏈中，返回true
Reflect.has({x: 0}, "toString");

// Proxy 對(duì)象的 .has() 句柄方法
obj = new Proxy({}, {
  has(t, k) { return k.startsWith("door"); }
});
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false

3、hasOwnProperty() 方法

hasOwnProperty()方法返回一個(gè)布爾值，指示對(duì)象是否具有指定的屬性作為它自己的屬性（而不是繼承它）。

用法：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log(obj.hasOwnProperty('name'));

返回：

true

它比前面介紹的in和Reflect.has()好用的地方在于，它可以正確地區(qū)分對(duì)象本身的屬性和其原型的屬性。 如：

let obj = {name: "卡卡測(cè)速網(wǎng) webkaka.com"}
console.log(obj.hasOwnProperty('toString'));

返回：

false

示例：

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

即使屬性的值是 null 或 undefined，只要屬性存在，hasOwnProperty 依舊會(huì)返回 true。如：

o = new Object();
o.propOne = null;
o.hasOwnProperty('propOne'); // 返回 true
o.propTwo = undefined;
o.hasOwnProperty('propTwo'); // 返回 true

自身屬性與繼承屬性

下面的例子演示了 hasOwnProperty 方法對(duì)待自身屬性和繼承屬性的區(qū)別： 

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

但是這種寫法有個(gè)缺點(diǎn)，就是如果對(duì)象是由 創(chuàng)造的Object.create(null)，那么就不能使用這種方法了。

4、Object.prototype.hasOwnProperty() 方法

解決前面的問(wèn)題很簡(jiǎn)單，我們只需要使用Object.prototype.hasOwnProperty. 該方法是直接調(diào)用內(nèi)置的效用函數(shù)，跳過(guò)原型鏈。如：

let obj = Object.create(null);
obj.name = "卡卡測(cè)速網(wǎng) webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'name'));

返回：

true

而如下代碼則返回false。

let obj = Object.create(null);
obj.name = "卡卡測(cè)速網(wǎng) webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'toString'));

5、 Object.hasOwn() 方法

由于前面的幾種方式都不優(yōu)雅，所以有了一個(gè)新的提議：Object.hasOwn。

如果指定的對(duì)象具有指定的屬性作為其自己的Object.hasOwn()屬性，則靜態(tài)方法返回true。如果該屬性被繼承或不存在，則該方法返回false。 如：

let obj = Object.create(null);
obj.name = "卡卡測(cè)速網(wǎng) webkaka.com";
console.log(Object.hasOwn(obj,'name'));

返回：

true

而下面代碼則返回false。

let obj = Object.create(null);
obj.name = "卡卡測(cè)速網(wǎng) webkaka.com";
console.log(Object.hasOwn(obj,'toString'));

示例：

const object1 = {
  prop: 'exists'
};

console.log(Object.hasOwn(object1, 'prop'));
// expected output: true

console.log(Object.hasOwn(object1, 'toString'));
// expected output: false

console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// expected output: false

直接屬性與繼承屬性

以下示例區(qū)分了直接屬性和通過(guò)原型鏈繼承的屬性：

let example = {}
example.prop = 'exists';

// `hasOwn` will only return true for direct properties:
Object.hasOwn(example, 'prop');             // returns true
Object.hasOwn(example, 'toString');         // returns false
Object.hasOwn(example, 'hasOwnProperty');   // returns false

// The `in` operator will return true for direct or inherited properties:
'prop' in example;                          // returns true
'toString' in example;                      // returns true
'hasOwnProperty' in example;                // returns true

總結(jié)

本文通過(guò)大量示例詳細(xì)介紹了 JS 5種方法判斷某屬性是否在指定對(duì)象中，它們之間的用法不用，功能也有所區(qū)別，所以在實(shí)際編程中要特別注意哪些情況下不能用哪些方法。

相關(guān)文章

• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡(jiǎn)繁體轉(zhuǎn)換【演示-源碼下載】
• jQuery find("#id")與find(".class")實(shí)例分析與比較
• JQuery計(jì)算HTML元素子元素(child elements)
• 鼠標(biāo)點(diǎn)擊輸入框時(shí)高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】
• JQuery使用append()函數(shù)動(dòng)態(tài)創(chuàng)建和應(yīng)用CSS樣式
• JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
• $.ajax() data{} 傳參三種常見(jiàn)寫法及ajax()方法參數(shù)詳解
• 表單序列化插件serializeJSON.js下載及使用示例
• JQuery如何把JSON字符串轉(zhuǎn)為JSON對(duì)象

• 使用HTML5和JQuery讀取CSV(Text)文件的實(shí)例
• HTML5和JQuery裁剪圖像實(shí)時(shí)預(yù)覽縮略圖并上傳
• HTML5和JQuery實(shí)現(xiàn)多圖片上傳預(yù)覽
• 使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）
• 下拉菜單/下拉列表鼠標(biāo)提示ToolTip【JQuery實(shí)現(xiàn)】
• 如何用JQuery刪除或清空下拉列表的選項(xiàng)
• 怎樣使用JQuery動(dòng)態(tài)增加下拉列表選項(xiàng)（option）
• 如何使用JQuery動(dòng)態(tài)填充下拉列表（DropDownList）或下拉菜單
• 使用jQuery計(jì)算子元素(child elements)
• 使用jQuery setInterval函數(shù)延遲5秒后跳轉(zhuǎn)到另一個(gè)頁(yè)面

標(biāo)簽: 對(duì)象屬性  in運(yùn)算符  Reflect.has方法