JavaScript判断对象、数组是否包含某个属性、某个值的方法

 更新时间:2023年09月18日 09:47:02   作者:DiuWang  
这篇文章主要给大家介绍了关于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的作用是操作DOM,这就决定了它只能是单线程的,否则会带来很复杂的问题,这篇文章主要介绍了JavaScript单线程实现异步的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-08-08
  • Summernote实现图片上传功能的简单方法

    Summernote实现图片上传功能的简单方法

    下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript实现自动填写表单实例简析

    javascript实现自动填写表单实例简析

    这篇文章主要介绍了javascript实现自动填写表单的方法,以一个简单实例形式分析了JavaScript结合浏览器设置实现自动保存表单的相关技巧,需要的朋友可以参考下
    2015-12-12
  • javascript中BOM基础知识总结

    javascript中BOM基础知识总结

    本文主要对javascript中BOM基础知识进行总结。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript前端中实现本地储存的常用方式绘制

    JavaScript前端中实现本地储存的常用方式绘制

    JavaScript本地存储是Web开发中用于在客户端存储数据的重要技术,本文为大家整理了一些常见方式及其区别和应用场景,大家可以根据需求进行选择
    2025-03-03
  • 微信小程序中富文本编辑器的实现

    微信小程序中富文本编辑器的实现

    富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里。本文将详解一下微信小程序中富文本编辑器的实现与使用,需要的可以参考一下
    2022-06-06
  • JavaScript 继承详解(五)

    JavaScript 继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance,需要的朋友可以参考下
    2016-10-10
  • JavaScript实现类继承的方法最全讲解

    JavaScript实现类继承的方法最全讲解

    JavaScript 类继承通过extends和super关键字提供了一种直观的面向对象编程方式,基于原型链实现,这篇文章主要介绍了JavaScript实现类继承的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-09-09
  • Web制作验证码功能实例代码

    Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧
    2017-06-06
  • Bootstrap入门书籍之(零)Bootstrap简介

    Bootstrap入门书籍之(零)Bootstrap简介

    Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之(零)Bootstrap简介,需要的朋友参考下
    2016-02-02

最新评论