30秒学会 JavaScript 片段 · 2023年4月10日

30秒学会 JavaScript 片段 – Get elements from the start or end of a JavaScript array by condition

We’ve previously covered how to get the first or last n elements of a JavaScript array. This time, we’ll be looking at how to get elements from the start or end of an array based on a given condition.

Get elements from the start of the array while condition is met

Modern JavaScript is full of useful array methods, which help us avoid writing for...of loops, which I personally find to be a bit old-fashioned. At the core of the problem we want to solve is a very simple task – find the index of the first element in the array that doesn’t meet the condition. This is exactly what Array.prototype.findIndex() is for.

Having found the index, we can use Array.prototype.slice() to get the elements from the start of the array up to that index. There’s a small caveat, though. Array.prototype.findIndex() returns -1 if no element in the array meets the condition. This means that we need to check for that value and return the entire array if that’s the case.

代码实现

const takeWhile = (arr, fn) => {
  const index = arr.findIndex(n => !fn(n));
  return index === -1 ? arr : arr.slice(0, index);
};

takeWhile([1, 2, 3, 4], n => n < 0); // []
takeWhile([1, 2, 3, 4], n => n < 3); // [1, 2]
takeWhile([1, 2, 3, 4], n => n < 5); // [1, 2, 3, 4]

Get elements from the end of the array while condition is met

Getting elements from the end of the array is pretty similar. To find the index, we’ll have to use Array.prototype.findLastIndex(). Additionally, we have to add 1 to the index, to account for the behavior of Array.prototype.slice().

使用样例

const takeRightWhile = (arr, fn) => {
  const index = arr.findLastIndex(n => !fn(n));
  return index === -1 ? arr : arr.slice(index + 1);
};

takeRightWhile([1, 2, 3, 4], n => n > 5); // []
takeRightWhile([1, 2, 3, 4], n => n > 2); // [3, 4]
takeRightWhile([1, 2, 3, 4], n => n > 0); // [1, 2, 3, 4]

翻译自:https://www.30secondsofcode.org/js/s/take-elements-by-condition-from-array-start-or-end