詳解JS如何判斷對象上是否存在某個屬性

更新時間：2023年05月31日 08:30:58 作者：只會番茄炒蛋

判斷某一個對象里面是否存在某個屬性，是常見錯誤場景排查，但是你真的知道該如何使用嘛，本文為大家整理了常用的三種方法，希望對大家有所幫助

關于這個問題，大家第一眼看到腦海中肯定會有多種方案去實現(xiàn)，但你有具體想過每個方案的實現(xiàn)有哪些其他問題存在嘛，這樣的寫法是否錯誤等，實際上在實現(xiàn)這個需求的的時候大家都會犯很多常見的問題。這個問題也是往往能考察出大家基礎知識掌握的熟練不熟練。

以下列出幾種錯誤的寫法，方便大家去思考錯在哪里，為什么錯了

第一種

判斷這個屬性是否有值

/**
 * @method hasProperty 判斷對象中是否存在某個屬性
 * @param {Object} obj
 * @param {String} key
 * @returns Boolean
 */
function hasProperty(obj, key) {
  return obj[key] !== undefined;
}

以上的方法有個明顯的錯誤，假如我這個對象剛好有個屬性的值就是undefined的話

const obj = { a: undefined };
hasProperty(obj, "a"); // false

所以不能用undefined去做判斷

第二種

通過Object.keys()方法得到對象里所有屬性形成的數(shù)組，然后使用includes方法判斷該屬性存不存在

/**
 * @method hasProperty 判斷對象中是否存在某個屬性
 * @param {Object} obj
 * @param {String} key
 * @returns Boolean
 */
function hasProperty(obj, key) {
  return Object.keys(obj).includes(key);
}

const obj = { a: undefined };
hasProperty(obj, "a"); // true

通過上述方法，我們發(fā)現(xiàn)它實現(xiàn)了第一種方式不能判斷undefined的方法，感覺這個方法好像可以，但是有另外的一種情況它又不能判斷了

const obj = { a: undefined, b: 1 };

Object.defineProperty(obj, "c", {
  value: 2,
  enumerable: false,
});

console.log(obj.c); // 2

hasProperty(obj, "c"); // false

我們通過Object.defineProperty給該對象添加一個c屬性值為2，但是不可遍歷，這時候發(fā)現(xiàn)判斷c屬性是否存在時是拿不到c的，說明這種方案也存在缺陷。

第三種

使用js提供的一個函數(shù)hasOwnProperty，這是js專門提供的一個用來判斷對象里面是否存在某一個屬性的方法

/**
 * @method hasProperty 判斷對象中是否存在某個屬性
 * @param {Object} obj
 * @param {String} key
 * @returns Boolean
 */
function hasProperty(obj, key) {
  return obj.hasOwnProperty(key);
}

const obj = { a: undefined, b: 1 };

Object.defineProperty(obj, "c", {
  value: 2,
  enumerable: false,
});

hasProperty(obj, "c"); // true

我們發(fā)現(xiàn)這個方案實現(xiàn)了上述兩種方案缺陷的部分，也能正確的判斷了，但是問題來了，這個方法有沒有缺陷呢？沒錯它也有缺陷

console.log(hasProperty(obj, "toString")); // false
console.log(obj.toString); // [Function: toString]

沒錯，如果你基礎知識掌握的可以的話你會知道，對象的原型鏈上存在一個toString方法，但是上述的方案就沒辦法判斷了，因為hasOwnProperty只能判斷自身的屬性，沒有辦法判斷原型鏈上的屬性，但通常我們能說到這個方案也基本可以了。那有沒有最終的解決方案呢

最佳方案

通過 in 關鍵判斷，它不單單能判斷屬性是否在對象身上，它還可以通過原型鏈去查找

/**
 * @method hasProperty 判斷對象中是否存在某個屬性
 * @param {Object} obj
 * @param {String} key
 * @returns Boolean
 */
function hasProperty(obj, key) {
  return key in obj;
}

const obj = { a: undefined, b: 1 };

Object.defineProperty(obj, "c", {
  value: 2,
  enumerable: false,
});

hasProperty(obj, "toString"); // true

通過上述的幾種方案我想大家應該知道為什么會采用最后一種方案來判斷對象上是否存在某個屬性，當然在某些業(yè)務場景下可能上述的幾種方案都能滿足需求，但我們一定是熟練掌握基礎知識后才能知道在哪種業(yè)務場景下使用哪種方案。

到此這篇關于詳解JS如何判斷對象上是否存在某個屬性的文章就介紹到這了,更多相關JS判斷對象是否存在屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: