Array.prototype.find()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Array
實例的 find()
方法會回傳在提供的陣列中第一個通過所提供測試函式的元素。如果沒有任何值通過測試函式,則回傳 undefined
。
- 如果你需要取得該元素在陣列中的索引,請使用
findIndex()
。 - 如果你需要找出某個特定值的索引,請使用
indexOf()
。(這與findIndex()
類似,但它是透過值的相等性來檢查每個元素,而非使用測試函式。) - 如果你想知道某個值是否存在於陣列中,請使用
includes()
。它同樣是透過值的相等性來檢查每個元素,而非使用測試函式。 - 如果你想知道陣列中是否有任一元素通過所提供的測試函式,請使用
some()
。 - 如果你想取得所有通過測試函式的元素,請使用
filter()
。
嘗試一下
const array1 = [5, 12, 8, 130, 44]; const found = array1.find((element) => element > 10); console.log(found); // 預期輸出:12
語法
js
find(callbackFn) find(callbackFn, thisArg)
參數
callbackFn
會對陣列中的每個元素執行的函式。此函式應回傳真值以指出找到符合條件的元素,否則應回傳假值。此函式被呼叫時可以傳入以下引數:
thisArg
選擇性執行
callbackFn
時用作this
的值。請參見迭代方法。
回傳值
回傳第一個通過測試函式的陣列元素。否則回傳 undefined
。
描述
範例
依物件屬性找出陣列中的某個物件
js
const inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; function isCherries(fruit) { return fruit.name === "cherries"; } console.log(inventory.find(isCherries)); // { name: 'cherries', quantity: 5 }
使用箭頭函式與解構語法
js
const inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; const result = inventory.find(({ name }) => name === "cherries"); console.log(result); // { name: 'cherries', quantity: 5 }
找出陣列中的第一個質數
下例會回傳陣列中第一個質數元素,若找不到質數則回傳 undefined
。
js
function isPrime(element, index, array) { let start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) { return false; } } return element > 1; } console.log([4, 6, 8, 12].find(isPrime)); // undefined,未找到 console.log([4, 5, 8, 12].find(isPrime)); // 5
使用 callbackFn 的第三個引數
array
引數在你沒有另外的變數參照陣列時特別有用,能讓你存取陣列中其他的元素。以下例子中,我們先用 filter()
取出所有正數,再用 find()
找出第一個比其相鄰數值都小的數字。
js
const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6]; const firstTrough = numbers .filter((num) => num > 0) .find((num, idx, arr) => { // 若沒有 arr 引數,就無法存取這個中介陣列,除非先儲存成變數。 if (idx > 0 && num >= arr[idx - 1]) return false; if (idx < arr.length - 1 && num >= arr[idx + 1]) return false; return true; }); console.log(firstTrough); // 1
在稀疏陣列中使用 find()
稀疏陣列中的空槽仍會被訪問,並被視為與 undefined
相同。
js
// 宣告在索引 2、3、4 處無元素的陣列 const array = [0, 1, , , , 5, 6]; // 顯示所有索引,包括未賦值的 array.find((value, index) => { console.log("訪問索引", index, ",值為", value); }); // 訪問索引 0 ,值為 0 // 訪問索引 1 ,值為 1 // 訪問索引 2 ,值為 undefined // 訪問索引 3 ,值為 undefined // 訪問索引 4 ,值為 undefined // 訪問索引 5 ,值為 5 // 訪問索引 6 ,值為 6 // 顯示所有索引,包括被刪除的元素 array.find((value, index) => { // 在第一次迭代時刪除元素 5 if (index === 0) { console.log("刪除 array[5],值為", array[5]); delete array[5]; } // 即使已刪除,索引 5 仍會被訪問 console.log("訪問索引", index, ",值為", value); }); // 刪除 array[5],值為 5 // 訪問索引 0 ,值為 0 // 訪問索引 1 ,值為 1 // 訪問索引 2 ,值為 undefined // 訪問索引 3 ,值為 undefined // 訪問索引 4 ,值為 undefined // 訪問索引 5 ,值為 undefined // 訪問索引 6 ,值為 6
對非陣列物件呼叫 find()
find()
方法會讀取 this
的 length
屬性,然後依據非負整數索引存取對應屬性。
js
const arrayLike = { length: 3, "-1": 0.1, // 因為 -1 < 0,find() 會忽略 0: 2, 1: 7.3, 2: 4, }; console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x))); // 7.3
規範
Specification |
---|
ECMAScript® 2026 Language Specification # sec-array.prototype.find |
瀏覽器相容性
參見
- 在
core-js
中Array.prototype.find
的 polyfill Array.prototype.find
的 es-shims polyfill- 索引集合指南
Array
Array.prototype.findIndex()
Array.prototype.findLast()
Array.prototype.findLastIndex()
Array.prototype.includes()
Array.prototype.filter()
Array.prototype.every()
Array.prototype.some()
TypedArray.prototype.find()