JavaScript判断对象、数组是否包含某个属性、某个值的方法
一、判断对象是否包含某个属性
可以使用以下几种方法来判断对象是否包含某个属性:
1. in 操作符:
使用 in
操作符可以检查对象是否包含指定的属性。它会检查对象及其原型链上的所有属性。
const obj = { name: 'John', age: 25 }; console.log('name' in obj); // 输出: true console.log('gender' in obj); // 输出: false
2. hasOwnProperty() 方法:
hasOwnProperty()
是对象的内置方法,用于检查对象自身是否具有指定的属性(不包括原型链上的属性)。
const obj = { name: 'John', age: 25 }; console.log(obj.hasOwnProperty('name')); // 输出: true console.log(obj.hasOwnProperty('gender')); // 输出: false
3. 使用 undefined 进行判断:
通过访问对象的属性并与 undefined
进行比较,可以判断对象是否包含该属性。
但当 obj 为null 或 undefined 时会报错。
const obj = { name: 'John', age: 25 }; console.log(obj.name !== undefined); // 输出: true console.log(obj.gender !== undefined); // 输出: false
4. 使用 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方法对应name in obj里面的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'));//false
6、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一样
以上方法都可以判断出对象是否包含某个属性,工作中可以根据不同情况采用不同的方法。
二、判断数组中是否包含某个值
可以使用以下几种方法来判断数组中是否包含某个值:
1. includes() 方法:
includes()
方法用于检查数组是否包含指定的值,并返回一个布尔值。
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // 输出: true console.log(arr.includes(6)); // 输出: false
2. indexOf() 方法:
indexOf()
方法返回指定值在数组中的第一个匹配项的索引,如果不存在则返回 -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()
方法返回数组中满足提供的测试函数的第一个元素的值,如果不存在则返回 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()
方法测试数组中是否至少有一个元素通过了提供的测试函数,返回一个布尔值。
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判断包含某个属性某个值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
这篇文章主要介绍了javascript数据结构之多叉树经典操作,简单描述了多叉树的概念,并结合实例形式分析了javascript多叉树的创建、添加、遍历、移除等常见操作方法,需要的朋友可以参考下2018-08-08JavaScript 复制对象与Object.assign方法无法实现深复制
这篇文章主要介绍了JavaScript 复制对象与Object.assign方法无法实现深复制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11JavaScript和jQuery获取input框的绝对位置实现方法
下面小编就为大家带来一篇JavaScript和jQuery获取input框的绝对位置实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论