判斷某一個(gè)對(duì)象里面是否存在某個(gè)屬性，常見錯(cuò)誤場(chǎng)景排查，但是你真的知道該如何使用嘛。

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

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

第一種

判斷這個(gè)屬性是否有值

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

以上的方法有個(gè)明顯的錯(cuò)誤，假如我這個(gè)對(duì)象剛好有個(gè)屬性的值就是undefined的話

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

所以不能用undefined去做判斷

第二種

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

/**
 * @method hasProperty 判斷對(duì)象中是否存在某個(gè)屬性
 * @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)它實(shí)現(xiàn)了第一種方式不能判斷undefined的方法，感覺這個(gè)方法好像可以，但是有另外的一種情況它又不能判斷了

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給該對(duì)象添加一個(gè)c屬性值為2，但是不可遍歷，這時(shí)候發(fā)現(xiàn)判斷c屬性是否存在時(shí)是拿不到c的，說明這種方案也存在缺陷。

第三種

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

/**
 * @method hasProperty 判斷對(duì)象中是否存在某個(gè)屬性
 * @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)這個(gè)方案實(shí)現(xiàn)了上述兩種方案缺陷的部分，也能正確的判斷了，但是問題來了，這個(gè)方法有沒有缺陷呢？沒錯(cuò)它也有缺陷

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

沒錯(cuò)，如果你基礎(chǔ)知識(shí)掌握的可以的話你會(huì)知道，對(duì)象的原型鏈上存在一個(gè)toString方法，但是上述的方案就沒辦法判斷了，因?yàn)閔asOwnProperty只能判斷自身的屬性，沒有辦法判斷原型鏈上的屬性，但通常我們能說到這個(gè)方案也基本可以了。那有沒有最終的解決方案呢

最佳方案

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

/**
 * @method hasProperty 判斷對(duì)象中是否存在某個(gè)屬性
 * @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īng)該知道為什么會(huì)采用最后一種方案來判斷對(duì)象上是否存在某個(gè)屬性，當(dāng)然在某些業(yè)務(wù)場(chǎng)景下可能上述的幾種方案都能滿足需求，但我們一定是熟練掌握基礎(chǔ)知識(shí)后才能知道在哪種業(yè)務(wù)場(chǎng)景下使用哪種方案。

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

最新評(píng)論