转载于:https://blog.51cto.com/11871779/2118099

目录

根据业务不同选择不同的方式来判断对象上是否有该属性

一、对象.hasOwnProperty('属性')

二、点( . )或者方括号( [ ] )

三、 in 运算符

根据业务不同选择不同的方式来判断对象上是否有该属性

一、对象.hasOwnProperty('属性')

语法：

        对象.hasOwnProperty('属性');    返回值为  布尔值

let obj = { name: 'll', age: 189 };

console.log(obj.hasOwnProperty('age'));        //  true

console.log(obj.hasOwnProperty('name'));        // true

console.log(obj.hasOwnProperty('sex'));         // false

注意：

1. 和原型没关系 ，不会查找原型上的属性。
2. 只判断自身属性的场景。 

二、点( . )或者方括号( [ ] )

使用 

        对象.属性 != undefined   来判断对象是否含有某个属性。

或者

         对象['属性'] != undefined  来判断对象是否含有某个属性。

通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。

不存在只的是对象和对象的原型链上都不存在，如果原型链上有该属性则返回原型链上的属性。 

var obj = {
    name: 'll',
    age: 189,
};
console.log(obj['name']);   // ll
console.log(obj.age);   // 189
console.log(obj.sex);   // undefined
// 可以查找原型上的属性
console.log(obj.toString); // ƒ toString() { [native code] }
obj.data = undefined;
console.log(obj.data);  // undefined

注意：

1. 会查找原型链上的属性。
2. 不能用在对象的属性值存在，属性值为 undefined 的场景下。

三、 in 运算符

对in运算符详细了解：in - JavaScript | MDN

语法：

        属性 in 对象;

返回值：

        布尔值

// 数组
var arr = ['blue', 'pink', 'yellow'];
console.log(0 in arr);    //  true
console.log(1 in arr);    //  true
console.log(3 in arr);     //  falae 
// 必须使用索引号,而不是数组元素的值
console.log('pink' in arr);  // false
// 数组上有 length 属性
console.log(length in arr);  // true
// 也可以判断数组原型上的属性
console.log('concat' in arr);  // true

// Symbol.iterator in trees // 返回true 
console.log(Symbol.iterator in arr) // 返回true (数组可迭代，只在ES2015+上有效)

// 内置对象
console.log("PI" in Math);  // 返回true

// 自定义对象
var mycar = { make: "Honda", model: "Accord", year: 1998 };
console.log("make" in mycar);   // 返回true
console.log("model" in mycar);  // 返回true

// in右操作数必须是一个对象值。例如，你可以指定使用String构造函数创建的字符串，但不能指定字符串文字。
var color1 = new String("green");
console.log("length" in color1); // 返回true
var color2 = "coral";
console.log("length" in color2) // 报错(color2不是对象)Cannot use 'in' operator to search for 'length' in coral

// 使用 delete 运算符删除了一个属性，则 in 运算符对所删除属性返回 false。
var mycar = { make: "Honda", model: "Accord", year: 1998 };
delete mycar.make;
"make" in mycar;  // 返回false
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
3 in trees;  // 返回false

// 只是将一个属性的值赋值为undefined，而没有删除它，则 in 运算仍然会返回true
var mycar = { make: "Honda", model: "Accord", year: 1998 };
mycar.make = undefined;
"make" in mycar;  // 返回true
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
3 in trees; // 返回true

// 如果一个属性是从原型链上继承来的，in 运算符也会返回 true。
"toString" in {}; // 返回true

注意：

1. 如果指定的属性在指定的对象或其原型链中，则 in 运算符 返回true。 
2. 数组使用时，可以使用 数组下标 来判断，但是不能使用数组元素来判断。

3. Symbol.iterator in 数组;     返回true (数组可迭代，只在ES2015+上有效).

4. 也可以判断内置对象上的属性。

5. 使用 delete 运算符删除了一个属性，则 in 运算符对所删除属性返回 false。

6. 只是将一个属性的值赋值为 undefined，而没有删除它，则 in 运算仍然会返回true。

7. 对于字符串的属性也可以判断，只是必须是字符串对象 new String() 创建的字符串。

JavaScript判断对象是否存在某个属性或者方法，常用方法有两种hasOwnProperty和in

hasOwnProperty是Object原型对象上的一个方法，用来判断对象自身属性中是否具有指定的属性。

这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

// eslint-disable-next-line no-new-object
const obj = new Object();
obj.name = 'myObject';

console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('toString')); // false
console.log(obj.hasOwnProperty('hasOwnProperty')); // false

console.log('name' in obj); // true
console.log('toString' in obj); // true

MDN上指出，JavaScript 并没有保护 hasOwnProperty 这个属性名，可以将任意对象的一个属性命名为hasOwnProperty，这样一来就无法使用原型对象上的hasOwnProperty方法了。解决办法，直接使用原型链上的hasOwnProperty方法：

// 可以直接使用原型链上真正的 hasOwnProperty 方法
({}).hasOwnProperty.call(obj, 'name'); // true
// 也可以使用 Object 原型上的 hasOwnProperty 属性
Object.prototype.hasOwnProperty.call(obj, 'name'); // true

推荐使用第二种方式。