8
New In JavaScript: findLast() and findLastIndex() array methods
source link: https://lyty.dev/blog/findlast-findlastindex-javascript/#
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The
The first example was straightforward, reversing the array and returning the first match element according to the test function. However, in the second example which finds the last element index, we had to perform a little more calculation in order to get the accurate result. This is because we needed the last element index according to the array's original order, not the reversed order. Finding just the reversed array element index will result in
findLast() and findLastIndex() array methods are here! We all know about JavaScript find() and findIndex() array methods that accept a test function and return the first found element and element index respectively. Unless you don't make use of this function as a JavaScript developer, you would have also thought about a way to find last element and the last element index in JavaScript. Let's look at how to do that.
Finding The Last Element and Element Index Using reverse()
Earlier than now, there are no specific array methods to find last index and last element index in JavaScript, so, one way to do this is to make use of thereverse() array method to reverse the order of the elements in the array, then use the find() and findIndex() method respectively. See the examples below:
Find Last Element
const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastGreaterThan5 = arrayElements.reverse().find((element) => element.length > 5);
console.log(lastGreaterThan5); // "Orange"JavaScript
Find Last Element Index
const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const reversedIndexGreaterThan5 = arrayElements.reverse().findIndex((element) => element.length > 5); // 0
const lastIndexGreaterThan5 = (arrayElements.length - 1) - reversedIndexGreaterThan5;
console.log(lastIndexGreaterThan5); // 4JavaScript
0 because this is the reversed element index, we had to subtract the found index from the array length to get the accurate index.
const lastIndexGreaterThan5 = (arrayElements.length - 1) - reversedIndexGreaterThan5; // 4JavaScript
Finding The Last Element with findLast() array method
The newfindLast() array method now lets you find the last element in an array, without any further logic.
const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastGreaterThan5 = arrayElements.findLast((element) => element.length > 5); // "Orange"JavaScript
Live Example
Finding The Last Element Index with findLastIndex() array method
The newfindLastIndex() array method now lets you find the last element in an array, without any further logic.
const arrayElements = ["Strawberry", "Pineapple", "Banana", "Apple", "Orange"];
const lastIndexGreaterThan5 = arrayElements.findLastIndex((element) => element.length > 5); // 4JavaScript
Live Example
View examples in DIY editorBrowser Support
findLast() and findLastIndex() methods were proposed in the ECMAScript Draft and are now in stage 3. Google announces the full support for findLast() and findLastIndex() methods in Chrome 97. Below is the image from CanIUse, showing the map of the findLast() and findLastIndex() browser support. As at the time of this writing, Chrome 97 and Edge 97 are both included.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK