JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法
一、判斷對(duì)象是否包含某個(gè)屬性
可以使用以下幾種方法來(lái)判斷對(duì)象是否包含某個(gè)屬性：
1. in 操作符：
使用 in 操作符可以檢查對(duì)象是否包含指定的屬性。它會(huì)檢查對(duì)象及其原型鏈上的所有屬性。
const obj = { name: 'John', age: 25 };
console.log('name' in obj); // 輸出: true
console.log('gender' in obj); // 輸出: false2. hasOwnProperty() 方法：
hasOwnProperty() 是對(duì)象的內(nèi)置方法，用于檢查對(duì)象自身是否具有指定的屬性（不包括原型鏈上的屬性）。
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // 輸出: true
console.log(obj.hasOwnProperty('gender')); // 輸出: false3. 使用 undefined 進(jìn)行判斷：
通過(guò)訪問(wèn)對(duì)象的屬性并與 undefined 進(jìn)行比較，可以判斷對(duì)象是否包含該屬性。
但當(dāng) obj 為null 或 undefined 時(shí)會(huì)報(bào)錯(cuò)。
const obj = { name: 'John', age: 25 };
console.log(obj.name !== undefined); // 輸出: true
console.log(obj.gender !== undefined); // 輸出: false4. 使用 Object.keys() 方法：
Object.keys() 方法返回一個(gè)包含對(duì)象自身可枚舉屬性的數(shù)組。您可以使用該方法來(lái)獲取對(duì)象的所有屬性，并判斷指定屬性是否存在于返回的數(shù)組中。
const obj = { name: 'John', age: 25 };
console.log(Object.keys(obj).includes('name')); // 輸出: true
console.log(Object.keys(obj).includes('gender')); // 輸出: false備注：這些方法可以根據(jù)您的需求選擇使用，以判斷對(duì)象是否包含某個(gè)屬性。請(qǐng)注意，前三種方法在屬性值為 undefined 時(shí)也會(huì)返回 true，而最后一種方法不會(huì)將 undefined 視為存在的屬性。
5. 使用 Reflect.has(obj , keyName) 方法：
Reflect.has(obj, name)
Reflect.has方法對(duì)應(yīng)name in obj里面的in運(yùn)算符。
如果Reflect.has()方法的第一個(gè)參數(shù)不是對(duì)象，會(huì)報(bào)錯(cuò)。
let obj = {
name: '再努力些吧',
age: 18,
work: '前端',
}
// 舊寫(xiě)法
console.log('age' in obj);//true
console.log('sex' in obj);//false
// 新寫(xiě)法
console.log(Reflect.has(obj, 'age'));//true
console.log(Reflect.has(obj, 'sex'));//false6、propertyIsEnumerable() 相當(dāng)于 hasOwnProperty() 的增強(qiáng)版
這個(gè)方法的用法與hasOwnProperty()相同，但當(dāng)檢測(cè)屬性是自有屬性(非繼承)且這個(gè)屬性是可枚舉的，才會(huì)返回true。
方便記憶可以理解為：
- in: 只要對(duì)象包含某個(gè)屬性就返回true, 包含原型鏈上的屬性
- hasOwnProperty: 首先滿(mǎn)足in, 其次屬性不屬于原型鏈
- propertyIsEnumerable: 首先滿(mǎn)足hasOwnProperty，其次該屬性未經(jīng)由Object.defineProperty定義為不可列舉
/* 如下例子我就不寫(xiě)了引用別人的。作者：Netmad,來(lái)源：知乎,
鏈接：https://www.zhihu.com/question/21907133/answer/378501127 */
function foo() {
this.id = 'id';
}
foo.prototype.common = 'common';
var o = new foo();
'id' in o; // true
'common' in o; // true
'whatever' in o; // false
o.hasOwnProperty('id'); //true
o.hasOwnProperty('common'); //false
o.propertyIsEnumerable('id'); //true
o.propertyIsEnumerable('common'); //false
// 目前為止, hasOwnPerproty和propertyIsEnumerable看上去沒(méi)啥差別
// 通過(guò)Object.defineProperty定義新的屬性
Object.defineProperty(o, 'prop', {
value: 'valueOfProp',
enumerable: false
});
o.prop; // valueOfProp
o.hasOwnProperty('prop'); // true
o.propertyIsEnumerable('prop'); //false
// 如果defineProperty時(shí)enumerable為true, 那么這里依然和hasOwnProperty一樣以上方法都可以判斷出對(duì)象是否包含某個(gè)屬性，工作中可以根據(jù)不同情況采用不同的方法。
二、判斷數(shù)組中是否包含某個(gè)值
可以使用以下幾種方法來(lái)判斷數(shù)組中是否包含某個(gè)值：
1. includes() 方法：
includes() 方法用于檢查數(shù)組是否包含指定的值，并返回一個(gè)布爾值。
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // 輸出: true console.log(arr.includes(6)); // 輸出: false
2. indexOf() 方法：
indexOf() 方法返回指定值在數(shù)組中的第一個(gè)匹配項(xiàng)的索引，如果不存在則返回 -1。
const arr = [1, 2, 3, 4, 5]; console.log(arr.indexOf(3) !== -1); // 輸出: true console.log(arr.indexOf(6) !== -1); // 輸出: false
3. find() 方法：
find() 方法返回?cái)?shù)組中滿(mǎn)足提供的測(cè)試函數(shù)的第一個(gè)元素的值，如果不存在則返回 undefined。
const arr = [1, 2, 3, 4, 5]; console.log(arr.find(element => element === 3) !== undefined); // 輸出: true console.log(arr.find(element => element === 6) !== undefined); // 輸出: false
4. some() 方法：
some() 方法測(cè)試數(shù)組中是否至少有一個(gè)元素通過(guò)了提供的測(cè)試函數(shù)，返回一個(gè)布爾值。
const arr = [1, 2, 3, 4, 5]; console.log(arr.some(element => element === 3)); // 輸出: true console.log(arr.some(element => element === 6)); // 輸出: false
備注：這些方法可以根據(jù)您的需求選擇使用，以判斷數(shù)組中是否包含某個(gè)值。請(qǐng)注意，前三種方法在比較值時(shí)使用的是嚴(yán)格相等運(yùn)算符（===），而 some() 方法則通過(guò)測(cè)試函數(shù)來(lái)進(jìn)行判斷。
5. findIndex() 方法：
返回值：如果找到滿(mǎn)足條件的元素，則返回該元素的索引（大于等于 0）；如果沒(méi)有找到滿(mǎn)足條件的元素，則返回 -1。
判斷方式：通過(guò)提供的測(cè)試函數(shù)對(duì)數(shù)組中的每個(gè)元素進(jìn)行判斷，直到找到滿(mǎn)足條件的元素為止。
示例：
const arr = [1, 2, 3, 4, 5]; console.log(arr.findIndex(element => element === 3)); // 輸出: 2 console.log(arr.findIndex(element => element === 6)); // 輸出: -1
以上5種都是ES6增加的。
總結(jié)
到此這篇關(guān)于JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的文章就介紹到這了,更多相關(guān)JS判斷包含某個(gè)屬性某個(gè)值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript單線程實(shí)現(xiàn)異步的詳細(xì)代碼示例
瀏覽器JavaScript的作用是操作DOM,這就決定了它只能是單線程的,否則會(huì)帶來(lái)很復(fù)雜的問(wèn)題,這篇文章主要介紹了JavaScript單線程實(shí)現(xiàn)異步的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
Summernote實(shí)現(xiàn)圖片上傳功能的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇Summernote實(shí)現(xiàn)圖片上傳功能的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
javascript實(shí)現(xiàn)自動(dòng)填寫(xiě)表單實(shí)例簡(jiǎn)析
這篇文章主要介紹了javascript實(shí)現(xiàn)自動(dòng)填寫(xiě)表單的方法,以一個(gè)簡(jiǎn)單實(shí)例形式分析了JavaScript結(jié)合瀏覽器設(shè)置實(shí)現(xiàn)自動(dòng)保存表單的相關(guān)技巧,需要的朋友可以參考下2015-12-12
javascript中BOM基礎(chǔ)知識(shí)總結(jié)
本文主要對(duì)javascript中BOM基礎(chǔ)知識(shí)進(jìn)行總結(jié)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript前端中實(shí)現(xiàn)本地儲(chǔ)存的常用方式繪制
JavaScript本地存儲(chǔ)是Web開(kāi)發(fā)中用于在客戶(hù)端存儲(chǔ)數(shù)據(jù)的重要技術(shù),本文為大家整理了一些常見(jiàn)方式及其區(qū)別和應(yīng)用場(chǎng)景,大家可以根據(jù)需求進(jìn)行選擇2025-03-03
富文本編輯器不同于文本編輯器，程序員可到網(wǎng)上下載免費(fèi)的富文本編輯器內(nèi)嵌于自己的網(wǎng)站或程序里。本文將詳解一下微信小程序中富文本編輯器的實(shí)現(xiàn)與使用，需要的可以參考一下2022-06-06
在本章中，我們將分析John Resig關(guān)于JavaScript繼承的一個(gè)實(shí)現(xiàn) - Simple JavaScript Inheritance,需要的朋友可以參考下2016-10-10
JavaScript實(shí)現(xiàn)類(lèi)繼承的方法最全講解
JavaScript 類(lèi)繼承通過(guò)extends和super關(guān)鍵字提供了一種直觀的面向?qū)ο缶幊谭绞?基于原型鏈實(shí)現(xiàn),這篇文章主要介紹了JavaScript實(shí)現(xiàn)類(lèi)繼承的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
web開(kāi)發(fā)中，經(jīng)常會(huì)使用驗(yàn)證碼功能，例如登錄、注冊(cè)，或其他關(guān)鍵功能之前經(jīng)常會(huì)使用。下面通過(guò)實(shí)例代碼給大家介紹Web制作驗(yàn)證碼功能實(shí)例代碼，感興趣的朋友一起看看吧2017-06-06
Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介
Bootstrap是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介，需要的朋友參考下2016-02-02