JS judges whether an object or an array contains a certain attribute or a certain value

1. Determine whether an object contains a certain attribute

You can use the following methods to determine whether an object contains a property:

1. inOperator:

Use inthe operator to check whether an object contains a specified property. It checks all properties on the object and its prototype chain.

const obj = {
    
     name: 'John', age: 25 };
console.log('name' in obj); // 输出: true
console.log('gender' in obj); // 输出: false

2. hasOwnProperty()Method:

hasOwnProperty()Is an object's built-in method, which is used to check whether the object itself has the specified properties (excluding properties on the prototype chain).

const obj = {
    
     name: 'John', age: 25 };
console.log(obj.hasOwnProperty('name')); // 输出: true
console.log(obj.hasOwnProperty('gender')); // 输出: false

3. Use undefinedto judge:

By accessing an object's property and undefinedcomparing it to , you can tell whether an object contains that property.

But when obj is null or undefined, an error will be reported.

const obj = {
    
     name: 'John', age: 25 };
console.log(obj.name !== undefined); // 输出: true
console.log(obj.gender !== undefined); // 输出: false

4. Object.keys()How to use:

Object.keys()method returns an array containing the object's own enumerable properties. You can use this method to get all the properties of an object and determine whether the specified property exists in the returned array.

const obj = {
    
     name: 'John', age: 25 };
console.log(Object.keys(obj).includes('name')); // 输出: true
console.log(Object.keys(obj).includes('gender')); // 输出: false

Remarks: These methods can be used according to your needs to determine whether an object contains a certain attribute.Note that the first three methods undefinedalso return when the property value is true, while the last method does not undefinedtreat the as an existing property.

5. Reflect.has(obj , keyName)How to use:

Reflect.has(obj, name)
The Reflect.has method corresponds to the in operator in name in obj.
If the first parameter of the Reflect.has() method is not an object, an error will be reported.

 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()Equivalent to an enhanced version of hasOwnProperty()

The usage of this method is the same as hasOwnProperty(), but only returns true when the detected property is an own property (non-inherited) and the property is enumerable.

Convenient memory can be understood as:

  1. in: returns true as long as the object contains a property, including properties on the prototype chain
  2. hasOwnProperty: first satisfy in, and second, the property does not belong to the prototype chain
  3. propertyIsEnumerable: Firstly, hasOwnProperty is satisfied, and secondly, the property is not defined as non-enumerable by 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一样

The above methods can determine whether an object contains a certain attribute, and different methods can be used in the work according to different situations.

2. Determine whether an array contains a certain value

There are several ways to check whether an array contains a value:

1. includes()Method:

includes()method is used to check whether the array contains the specified value and returns a Boolean value.

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出: true
console.log(arr.includes(6)); // 输出: false

2. indexOf()Method:

indexOf()Method returns the index of the first occurrence of the specified value in the array, or -1 if it does not exist.

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3) !== -1); // 输出: true
console.log(arr.indexOf(6) !== -1); // 输出: false

3. find()Method:

find()Method returns the value of the first element in the array that satisfies the provided test function, or returns if none exists 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()Method:

some()method tests whether at least one element in the array passes the provided test function, returning a boolean value.

const arr = [1, 2, 3, 4, 5];
console.log(arr.some(element => element === 3)); // 输出: true
console.log(arr.some(element => element === 6)); // 输出: false

Remarks: These methods can be used according to your needs to determine whether an array contains a certain value. Note that the first three methods use the strict equality operator ( ===) when comparing values, while some()the method does so by testing the function.

5. findIndex()Method:

Return value: If an element meeting the condition is found, the index of the element (greater than or equal to 0) is returned; if no element meeting the condition is found, -1 is returned.
Judgment method: by providingtest functionEach element in the array is judged until an element that satisfies the condition is found.
Example:

const arr = [1, 2, 3, 4, 5];
console.log(arr.findIndex(element => element === 3)); // 输出: 2
console.log(arr.findIndex(element => element === 6)); // 输出: -1

The above 5 kinds are allES6Increased.

Guess you like

Origin blog.csdn.net/m0_37577465/article/details/131889375