Using JS to determine the existence of elements in an array in ten minutes

Preface

In front-end development, you often need to determine whether an element exists in an array. In fact, there are many ways to judge. Let’s take a look at them one by one.

Let's first define an array:

const arr = [
 13,
 false,
 'abcd',
 undefined,
 13,
 null,
 NaN,
 [1, 2],
 { a: 123 },
 () => Date.now(),
 new Date('2021/03/04'),
 new RegExp('abc', 'ig'),
 Symbol('sym'),
];

In this array, we include several types: number, boolean, string, undefined, null, array, object, Date, Symbol, etc. The number 13 appears twice.

Come prepared

1. indexOf

The one we are most familiar with is indexOf. After all, it appeared early, has good compatibility, and is easy to use.

If the element exists, it returns the index of the first occurrence; if the element does not exist in the entire array, it returns -1.

1.1 Usage

As long as you determine whether the returned data is -1, you can know whether the array contains the element.

arr.indexOf(13) >= 0; // true, indexOf returns 0
arr.indexOf(2) >= 0; // false, indexOf returns -1

The corresponding function to indexOf is lastIndexOf, which searches for an element from the end to the front. If the element exists, it returns the last index in the array; if the element does not exist, it returns -1.

arr.lastIndexOf(13) >= 0; // true, lastIndexOf returns 4, the index of the last occurrence

The two methods are called in the same way when determining whether a variable exists.

1.2 The second optional parameter

indexOf and lastIndexOf also have a second optional parameter fromIndex, which is used to indicate the index from which to start the search.

In indexOf, if fromIndex exceeds the length of the array, -1 is returned directly. If it is a negative number, count several indexes from the end (arr.length-Math.abs(fromIndex)) and then start searching backwards.

In lastIndexOf, if fromIndex reaches or exceeds the length of the array, the entire array is searched; if it is a negative number, count a few indexes from the end (arr.length-Math.abs(fromIndex)) and then start searching forward. If the absolute value of the negative number exceeds the length of the array, -1 is returned directly.

arr.indexOf(13, 2); // 4, start searching from index 2, the first index of 13 is 4
arr.indexOf(13, -10); // 4, search from index 1 (11-10) forward arr.lastIndexOf(13, 2); // 0, search from index 2 forward arr.lastIndexOf(13, -2); // 4, search from index 9 (11-2) forward

Moreover, indexOf and lastIndexOf use a strict equality method (===) to judge.

arr.indexOf(null); // 5, there are several false values ​​​​before null and undefined, which can also accurately find the index value of null

2. includes

indexOf is mainly used to find the index value of an element, but we can use the returned index value to indirectly determine whether the element exists in the array.

The includes method added in ES7 (ES2016) is specifically used to determine whether an element exists. The return value is true or false, true means existence, false means non-existence, simple and clear.

arr.includes(13); // true
arr.includes('abc'); // false
arr.includes(false); // true, false element exists

At the same time, there is also a second optional parameter fromIndex in the includes method. The usage of fromIndex is the same as that in indexOf. If fromIndex exceeds the length of the array, -1 is returned directly. If it is a negative number, count several indexes from the end (arr.length-Math.abs(fromIndex)) and then start searching backwards.

arr.includes(13, 5); // false, search from index 5 onwards, no result found

So far, we have not judged the following types, such as Array, Object, Date and Symbol. Let's now judge the following elements:

// Use indexOf to judge arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() => Date.now()); // -1
arr.indexOf(new Date('2021/03/04')); // -1
arr.indexOf(new RegExp('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1

// Use includes to judge arr.includes(NaN); // false
arr.includes([1, 2]); // false
arr.includes({ a: 123 }); // false
arr.includes(() => Date.now()); // false
arr.includes(new Date('2021/03/04')); // false
arr.includes(new RegExp('abc', 'ig')); // false
arr.includes(Symbol('sym')); // false

The result is tragic, none of these elements are found in the array. But in fact, they all exist in the array.

This is because indexOf and includes are both determined by strict equality (===).

NaN === NaN; // false, two NaNs are never equal [1, 2] === [1, 2]; // false, each declared array has a separate storage address {a: 123} === {a: 123}; // false, same array new Date('2021/03/04')===new Date('2021/03/04'); // false, the dates look the same, but when compared with the new objects, they are definitely not equal Symbol('sym')===Symbol('sym'); // The Symbol type was created to avoid conflicts. The properties in brackets are only for the convenience of description

For these types that cannot be retrieved, we need to write our own functions to determine the special types.

3. find and findIndex

find() and findIndex() allow us to customize the judgment method through callback functions.

3.1 find method

The find() method returns the value of the first element in an array that satisfies the provided testing function. Otherwise returns undefined.

The find() method cannot detect undefined elements in an array.

Because the find() method will return undefined whether the element does not exist or not. Here we have to consider other methods, which I will talk about later.

arr.find((item) => item === 13); // 13, found element 13
arr.find((item) => item === 3); // undefined, element 3 not found
arr.find((item) => item === undefined); // undefined, I don't know whether it was found or not

For the slightly more complex types above, we need special judgments:

arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN

// When comparing array and object types, the situation is complicated because the type of each element cannot be determined. // If you are sure that they are all basic types, such as string, number, boolean, undefined, null, etc., you can convert them to strings and then compare them. // There are many ways to convert strings, such as JSON.stringify(arr), arr.toString(), arr.split('|'), etc. // For more complicated ones, you can only compare one by one, or use recursion arr.find((item) => item.toString() === [1, 2].toString()); // [1, 2]
arr.find((item) => JSON.stringify(item) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((item) => {
 if (typeof item === 'function') {
 return item.toString() === (() => Date.now()).toString();
 }
 return false;
}); // () => Date.now()
arr.find((item) => {
 if (item instanceof Date) {
 return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // Thu Mar 04 2021 00:00:00 GMT+0800
arr.find((item) => {
 if (item instanceof RegExp) {
 return item.toString() === new RegExp('abc', 'ig').toString();
 }
 return false;
}); // /abc/gi

// Symbols cannot be compared, only whether their descriptions are the same arr.find((item) => {
 if (typeof item === 'symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

The above judgment code will also be used in the following methods.

3.2 Comparing two elements

We compared various types of elements above, let’s summarize them briefly.

Let's define a function first:

const compare = (x, y) => {};

3.2.1 Basic types

For elements of basic types such as string, number, boolean, undefined, null, etc., they can be compared directly:

const compare = (x, y) => {
 return x === y;
};

3.2.2 NaN Data

NaN uses typeof to determine whether it is a number type, but NaN is not equal to any number, including itself.

const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 return x === y;
};

3.2.3 Function, Date and RegExp

These types can be used to convert variables into strings for comparison:

const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 if (
  (typeof x === 'function' && typeof y === 'function') ||
  (x instanceof Date && y instanceof Date) ||
  (x instanceof RegExp && y instanceof RegExp) ||
  (x instanceof String && y instanceof String) ||
  (x instanceof Number && y instanceof Number)
 ) {
  return x.toString() === y.toString();
 }
 return x === y;
};

For object type and array, we can separate each item and then compare them one by one using the above method.

3.3 findIndex method

If we also want to determine whether there is undefined in the array, we can use the findIndex() method.

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no corresponding element is found, -1 is returned.

arr.findIndex((item) => item === undefined); // 3
arr.findIndex((item) => item === 3); // -1, number 3 not found

The judgment of other data formats is the same as find() above.

Rare guest

4. some

The some() method tests whether there is at least one element in the array that passes the test of the provided function. It returns a Boolean value.

Note: If tested with an empty array, it will return false in all cases.

The some() method is used in the same way as the find() method, except that the some() method returns boolean type data.

arr.some((item) => item === false); // true
arr.some((item) => item === undefined); // true
arr.some((item) => typeof item === 'number' && isNaN(item)); // true
arr.some((item) => item === 3); // false, the number 3 does not exist
arr.some((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // true

5. Filter

The filter() method creates a new array containing all elements that pass the test implemented by the provided function.

No matter how many elements are found or no elements are found, the filter() method will return an array, and the data in the array are the elements we want.

arr.filter((item) => item === false); // 1
arr.filter((item) => item === undefined); // 1
arr.filter((item) => typeof item === 'number' && isNaN(item)); // 1
arr.filter((item) => item === 13); // 2
arr.filter((item) => item === 3); // 0
arr.filter((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // 1

Therefore, we can use the length of the array to determine whether the original array contains the elements we want.

slightly

6. Conclusion

There are many ways to find elements in an array. We can choose a more appropriate method based on the format of the elements in the array. If they are all basic types, it is recommended to use the includes() method first; if the format is more complicated, it is recommended to use the some() method. Both methods return boolean type directly, and the result of the method can be used directly without further conversion.

This concludes this article about various ways to use JS to determine if there are elements in an array in ten minutes. For more relevant content on how to use JS to determine if there are elements in an array, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!