1, the find ()

The find method of an array instance, used to find the first array member that matches the criteria. Its argument is a callback function that all array members execute in turn until the first return value is found

Member that is true, and then returns that member. If there is no qualified member, undefined is returned.


[1, 4, -5, 10].find((n) => n < 0)

// -5
Copy the code

The above code finds the first member of the array that is less than 0.

[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) / / 10Copy the code

In the code above, the find callback can take three arguments: the current value, the current position, and the original array.

2, findIndex ()

The findIndex method on an array instance is used much like the find method, returning the location of the first qualified array member, or -1 if all members fail.

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; / / 2})Copy the code

Both methods can take a second argument that binds the this object of the callback function.

In addition, both methods can find nans, compensating for the IndexOf methods of arrays.

[NaN].indexOf(NaN)

// -1

[NaN].findIndex(y => Object.is(NaN, y))

// 0
Copy the code

In the above code, the indexOf method cannot recognize NaN members of the array, but the findIndex method can do so with the object. is method

3.fill()

The fill method fills an array with the given value.


['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new Array(3).fill(7)

// [7, 7, 7]
Copy the code

As the code above shows, the fill method is handy for initializing an empty array. Any existing elements in the array will be erased.

The fill method can also accept a second and third parameters that specify where the fill starts and ends.

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']
Copy the code

The code above shows that the fill method starts at bit 1, fills the original array with 7, and ends just before bit 2.

4.includes()

The array.prototype. includes method returns a Boolean value indicating whether an Array contains a given value, similar to the includes method of strings.


[1, 2, 3].includes(2); // true

[1, 2, 3].includes(4); // false

[1, 2, NaN].includes(NaN); // true
Copy the code

The second argument to this method represents the starting position of the search, which defaults to 0. If the second argument is negative, it represents the reciprocal position, and if it is greater than the array length (for example, if the second argument is -4, but the array length is 3), it is reset to start at 0.


[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true
Copy the code

In the absence of this method, we usually use the indexOf method of arrays to check for the inclusion of a value.

if (arr.indexOf(el) ! == -1) {// }Copy the code

The indexOf method has two drawbacks:

  • It is not semantic enough. It means to find the first occurrence position of the parameter value, so we need to compare whether it is not equal to -1, which is not intuitive enough.
  • Internally, the strict equivalence operator (===) is used for judgment, which leads to misjudgment of NaN.
[NaN].indexOf(NaN)

// -1
Copy the code

Includes does not have this problem because it uses a different determination algorithm.

[NaN].includes(NaN)

// true
Copy the code

The code below checks to see if the current environment supports this method, and if not, deploy a simple alternative version.

const contains = (() =>

Array.prototype.includes

? (arr, value) => arr.includes(value)

: (arr, value) => arr.some(el => el === value)

)();

contains(["foo", "bar"], "baz"); // => false
Copy the code

Map and Set data structures have a HAS method that needs to be distinguished from includes.

Has (key), Weakmap.prototype. has(key), reflect.has (target, propertyKey).

The has method of Set structure is used to find values, such as set.prototype. has(value), weakSet.prototype. has(value).