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); // 輸出: false
2. hasOwnProperty() 方法:
hasOwnProperty()
是對(duì)象的內(nèi)置方法,用于檢查對(duì)象自身是否具有指定的屬性(不包括原型鏈上的屬性)。
const obj = { name: 'John', age: 25 }; console.log(obj.hasOwnProperty('name')); // 輸出: true console.log(obj.hasOwnProperty('gender')); // 輸出: false
3. 使用 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); // 輸出: false
4. 使用 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'));//false
6、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如何在foreach循環(huán)完成之后執(zhí)行一個(gè)回調(diào)函數(shù)
forEach()是前端開(kāi)發(fā)中操作數(shù)組的一種方法,主要功能是遍歷數(shù)組,其實(shí)就是 for 循環(huán)的升級(jí)版,下面這篇文章主要給大家介紹了關(guān)于javascript如何在foreach循環(huán)完成之后執(zhí)行一個(gè)回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-11-11JavaScript中變量聲明有var和沒(méi)var的區(qū)別示例介紹
在函數(shù)內(nèi)部,有var和沒(méi)var聲明的變量是不一樣的。有var聲明的是局部變量,沒(méi)var的,聲明的全局變量,所以可以借此向外暴露接口東東2014-09-09javascript動(dòng)畫(huà)效果打開(kāi)/關(guān)閉層
用javascript實(shí)現(xiàn)打開(kāi)層和關(guān)閉層的效果,原理不錯(cuò),學(xué)習(xí),記錄好2008-06-06jquery $(document).ready()和window.onload的區(qū)別淺析
這篇文章主要介紹了jquery $(document).ready()和 window.onload的區(qū)別淺析,本文總結(jié)了執(zhí)行時(shí)間、編寫(xiě)個(gè)數(shù)不同、簡(jiǎn)化寫(xiě)法等不同的地方,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
這篇文章主要介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效,結(jié)合已學(xué)知識(shí)進(jìn)行擴(kuò)展性練習(xí),感興趣的朋友可以參考一下2015-12-12p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析
這篇文章主要為大家介紹了p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04javascript 得到文件后綴名的思路及實(shí)現(xiàn)
在上傳文件時(shí),常常要對(duì)文件的類(lèi)型即對(duì)文件的后綴名進(jìn)行判斷,用javascript可以很容易的做到這一點(diǎn)。用Javascript解析一個(gè)帶絕對(duì)路徑的文件名并得到后綴名的方法有很多種,這里列出一種,以供參考。2013-07-07JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案分析
這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問(wèn)題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問(wèn)題的處理技巧,需要的朋友可以參考下2019-08-08