本文详解JavaScript中判断对象是否包含属性及数组是否包含值的多种方法。对象部分涵盖in、hasOwnProperty、Object.keys、Reflect.has及propertyIsEnumerable，解析原型链与可枚举性差异；数组部分介绍includes、indexOf、find、some及findIndex，对比严格相等与测试函数的使用场景。
一、判断对象是否包含某个属性
在JavaScript中，有多种方式可以检测对象是否拥有特定的属性。
1. in 操作符：
利用 in 操作符可以检测对象中是否存在指定的属性名。该操作符不仅检查对象自身的属性，还会向上追溯检查原型链上的所有属性。
const obj = { name: 'John', age: 25 };
console.log('name' in obj); // 输出: true
console.log('gender' in obj); // 输出: false2. hasOwnProperty() 方法：
hasOwnProperty() 是对象内置的方法，专门用于判断对象自身是否拥有指定的属性，它不会检查原型链上的属性。
const obj = { name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // 输出: true
console.log(obj.hasOwnProperty('gender')); // 输出: false3. 使用 undefined 进行判断：
通过直接访问对象属性并将其与 undefined 进行比较，可以判断该属性是否存在。
需要注意的是，如果对象本身为 null 或 undefined，直接访问属性会引发错误。
const obj = { name: 'John', age: 25 };
console.log(obj.name !== undefined); // 输出: true
console.log(obj.gender !== undefined); // 输出: false4. 使用 Object.keys() 方法：
Object.keys() 方法会返回一个包含对象自身所有可枚举属性名的数组。通过检查指定属性是否存在于该返回数组中，即可判断属性是否存在。
const obj = { name: 'John', age: 25 };
console.log(Object.keys(obj).includes('name')); // 输出: true
console.log(Object.keys(obj).includes('gender')); // 输出: false备注：上述方法可根据具体需求选用。前三种方法在属性值本身为 undefined 时，也会返回 true；而最后一种方法不会将 undefined 视为存在的属性，因此更具区分度。
5. 使用 Reflect.has(obj , keyName) 方法：
Reflect.has(obj, name)
Reflect.has 方法的功能等同于 in 运算符，用于判断对象中是否包含指定名称的属性。
如果 Reflect.has 方法的第一个参数不是对象类型，将会抛出错误。
let obj = {
name: '再努力些吧',
age: 18,
work: '前端',
}
// 旧写法
console.log('age' in obj);//true
console.log('sex' in obj);//false
// 新写法
console.log(Reflect.has(obj, 'age'));//true
console.log(Reflect.has(obj, 'sex'));//false6、propertyIsEnumerable() 相当于 hasOwnProperty() 的增强版
该方法的用法与 hasOwnProperty 类似，但只有当属性是对象自身的（非继承）且该属性是可枚举的（未被定义为不可列举）时，才会返回 true。
为了方便记忆，可以这样理解：
- in: 只要对象包含某个属性就返回true, 包含原型链上的属性
- hasOwnProperty: 首先满足in, 其次属性不属于原型链
- propertyIsEnumerable: 首先满足hasOwnProperty，其次该属性未经由Object.defineProperty定义为不可列举
/* 如下例子我就不写了引用别人的。作者：Netmad,来源：知乎,
链接：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看上去没啥差别
// 通过Object.defineProperty定义新的属性
Object.defineProperty(o, 'prop', {
value: 'valueOfProp',
enumerable: false
});
o.prop; // valueOfProp
o.hasOwnProperty('prop'); // true
o.propertyIsEnumerable('prop'); //false
// 如果defineProperty时enumerable为true, 那么这里依然和hasOwnProperty一样以上方法均能判断对象是否包含某个属性，实际开发中可根据具体场景选择最合适的方法。
二、判断数组中是否包含某个值
在JavaScript中，检测数组是否包含特定值也有多种实现方式。
1. includes() 方法：
includes() 方法用于检查数组中是否包含指定的值，并直接返回一个布尔值。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出: true
console.log(arr.includes(6)); // 输出: false2. indexOf() 方法：
indexOf() 方法返回指定值在数组中首次出现的索引，如果未找到该值，则返回 -1。
const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3) !== -1); // 输出: true
console.log(arr.indexOf(6) !== -1); // 输出: false3. find() 方法：
find() 方法返回数组中满足测试函数的第一个元素的值，如果找不到满足条件的元素，则返回 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); // 输出: false4. some() 方法：
some() 方法用于测试数组中是否至少有一个元素通过了提供的测试函数，最终返回一个布尔值。
const arr = [1, 2, 3, 4, 5];
console.log(arr.some(element => element === 3)); // 输出: true
console.log(arr.some(element => element === 6)); // 输出: false备注：这些方法可根据需求选择。前三种方法在比较值时使用严格相等运算符（===），而 some() 方法则是通过测试函数来进行逻辑判断。
5. findIndex() 方法：
返回值：如果找到满足条件的元素，则返回该元素的索引（大于等于 0）；如果没有找到满足条件的元素，则返回 -1。
判断方式：通过提供的测试函数对数组中的每个元素进行判断，直到找到满足条件的元素为止。
示例：
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增加的。
总结
到此这篇关于JavaScript判断对象、数组是否包含某个属性、某个值的文章就介绍到这了,更多相关JS判断包含某个属性某个值内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！