minor fixes
This commit is contained in:
parent
bebcbfa134
commit
c3b904def3
1 changed files with 42 additions and 13 deletions
|
@ -234,12 +234,13 @@ Now let's cover methods that search in an array.
|
||||||
|
|
||||||
### indexOf/lastIndexOf and includes
|
### indexOf/lastIndexOf and includes
|
||||||
|
|
||||||
The methods [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) and [arr.includes](mdn:js/Array/includes) have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters:
|
The methods [arr.indexOf](mdn:js/Array/indexOf) and [arr.includes](mdn:js/Array/includes) have the similar syntax and do essentially the same as their string counterparts, but operate on items instead of characters:
|
||||||
|
|
||||||
- `arr.indexOf(item, from)` -- looks for `item` starting from index `from`, and returns the index where it was found, otherwise `-1`.
|
- `arr.indexOf(item, from)` -- looks for `item` starting from index `from`, and returns the index where it was found, otherwise `-1`.
|
||||||
- `arr.lastIndexOf(item, from)` -- same, but looks for from right to left.
|
|
||||||
- `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found.
|
- `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found.
|
||||||
|
|
||||||
|
Usually these methods are used with only one argument: the `item` to search. By default, the search is from the beginning.
|
||||||
|
|
||||||
For instance:
|
For instance:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
|
@ -249,27 +250,34 @@ alert( arr.indexOf(0) ); // 1
|
||||||
alert( arr.indexOf(false) ); // 2
|
alert( arr.indexOf(false) ); // 2
|
||||||
alert( arr.indexOf(null) ); // -1
|
alert( arr.indexOf(null) ); // -1
|
||||||
|
|
||||||
let fruits = ['Plum', 'Apple', 'Orange', 'Plum']
|
|
||||||
// note that the lastIndexOf method looks for from the end, but index counted from beginning
|
|
||||||
alert( fruits.lastIndexOf(Plum)) // 3
|
|
||||||
|
|
||||||
alert( arr.includes(1) ); // true
|
alert( arr.includes(1) ); // true
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that the methods use `===` comparison. So, if we look for `false`, it finds exactly `false` and not the zero.
|
Please note that `indexOf` uses the strict equality `===` for comparison. So, if we look for `false`, it finds exactly `false` and not the zero.
|
||||||
|
|
||||||
If we want to check for inclusion, and don't want to know the exact index, then `arr.includes` is preferred.
|
If we want to check if `item` exists in the array, and don't need the exact index, then `arr.includes` is preferred.
|
||||||
|
|
||||||
Also, a minor, but noteworthy feature of `includes` is that it correctly handles `NaN`, unlike `indexOf/lastIndexOf`:
|
The method [arr.lastIndexOf](mdn:js/Array/lastIndexOf) is the same as `indexOf`, but looks for from right to left.
|
||||||
|
|
||||||
|
```js run
|
||||||
|
let fruits = ['Apple', 'Orange', 'Apple']
|
||||||
|
|
||||||
|
alert( arr.indexOf('Apple') ); // 0 (first Apple)
|
||||||
|
alert( arr.lastIndexOf('Apple') ); // 2 (last Apple)
|
||||||
|
```
|
||||||
|
|
||||||
|
````smart header="The `includes` method handles `NaN` correctly"
|
||||||
|
A minor, but noteworthy feature of `includes` is that it correctly handles `NaN`, unlike `indexOf`:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
const arr = [NaN];
|
const arr = [NaN];
|
||||||
alert( arr.indexOf(NaN) ); // -1 (should be 0, but equality test === doesn't work for NaN)
|
alert( arr.indexOf(NaN) ); // -1 (wrong, should be 0)
|
||||||
alert( arr.includes(NaN) );// true (correct)
|
alert( arr.includes(NaN) );// true (correct)
|
||||||
```
|
```
|
||||||
|
That's because `includes` was added to JavaScript much later and uses the more up to date comparison algorithm internally.
|
||||||
|
````
|
||||||
|
|
||||||
|
### find and findIndex/findLastIndex
|
||||||
### find and findIndex
|
|
||||||
|
|
||||||
Imagine we have an array of objects. How do we find an object with the specific condition?
|
Imagine we have an array of objects. How do we find an object with the specific condition?
|
||||||
|
|
||||||
|
@ -309,7 +317,28 @@ In real life arrays of objects is a common thing, so the `find` method is very u
|
||||||
|
|
||||||
Note that in the example we provide to `find` the function `item => item.id == 1` with one argument. That's typical, other arguments of this function are rarely used.
|
Note that in the example we provide to `find` the function `item => item.id == 1` with one argument. That's typical, other arguments of this function are rarely used.
|
||||||
|
|
||||||
The [arr.findIndex](mdn:js/Array/findIndex) method is essentially the same, but it returns the index where the element was found instead of the element itself and `-1` is returned when nothing is found.
|
The [arr.findIndex](mdn:js/Array/findIndex) method has the same syntax, but returns the index where the element was found instead of the element itself. The value of `-1` is returned if nothing is found.
|
||||||
|
|
||||||
|
The [arr.findLastIndex](mdn:js/Array/findLastIndex) method is like `findIndex`, but searches from right to left, similar to `lastIndexOf`.
|
||||||
|
|
||||||
|
Here's an example:
|
||||||
|
|
||||||
|
```js run
|
||||||
|
let users = [
|
||||||
|
{id: 1, name: "John"},
|
||||||
|
{id: 2, name: "Pete"},
|
||||||
|
{id: 3, name: "Mary"},
|
||||||
|
{id: 4, name: "John"}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Find the index of the first John
|
||||||
|
alert(users.findIndex(user => user.name == 'John')); // 0
|
||||||
|
|
||||||
|
// Find the index of the last John
|
||||||
|
alert(users.findLastIndex(user => user.name == 'John')); // 3
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### filter
|
### filter
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue