站長資訊網
在es6中，find()用于通過回調函數查找數組中符合條件的第一個元素的值，語法“array.find(function(…),thisValue)”。find()會為數組中的每個元素都調用一次函數執行，當數組中的元素在測試條件時返回true時，find()返回符合條件的該元素，之后的值不會再調用執行函數；如果沒有符合條件的元素返回undefined。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
es6 find()的介紹
find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值。
find() 方法為數組中的每個元素都調用一次函數執行：
-
當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。
-
如果沒有符合條件的元素返回 undefined
語法：
array.find(function(currentValue, index, arr),thisValue)
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必需。數組每個元素需要執行的函數。 函數參數:參數描述currentValue必需。當前元素index可選。當前元素的索引值arr可選。當前元素所屬的數組對象 |
| thisValue | 可選。 傳遞給函數的值一般用 "this" 值。 如果這個參數為空， "undefined" 會傳遞給 "this" 值 |
返回值：返回符合測試條件的第一個數組元素值，如果沒有符合條件的則返回 undefined。
注意:
-
find() 對于空數組，函數是不會執行的。
-
find() 并沒有改變數組的原始值。
基本使用
Array.prototype.find
返回第一個滿足條件的數組元素
const arr = [1, 2, 3, 4, 5]; const item = arr.find(function (item) { return item > 3; }); console.log(item);//4
如果沒有一個元素滿足條件 返回undefined
const arr = [1, 2, 3, 4, 5]; const item = arr.find(function (item) { return item > 5; }); console.log(item); //undefined
返回的元素和數組對應下標的元素是同一個引用
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find((item) => item.name === '李四'); console.log(item);
回調函數的返回值是boolean 第一個返回true的對應數組元素作為find的返回值
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find(function (item) { return item.id > 1; }); console.log(item);
回調的參數
當前遍歷的元素 當前遍歷出的元素對應的下標 當前的數組
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find(function (item, index, arr) { console.log(item, index, arr); });
find的第二個參數
更改回調函數內部的this指向
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find( function (item, index, arr) { console.log(item, index, arr); console.log(this); }, { a: 1 } );
如果沒有第二個參數
非嚴格模式下 this -> window
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find(function (item, index, arr) { console.log(item, index, arr); console.log(this); });
在嚴格模式下
不傳入第二個參數 this為undefined 與嚴格模式規定相同
'use strict'; const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find(function (item, index, arr) { console.log(item, index, arr); console.log(this); });
稀疏數組find
find會遍歷稀疏數組的空隙 empty
具體遍歷出的值 由undefined占位
const arr = Array(5); arr[0] = 1; arr[2] = 3; arr[4] = 5; const item = arr.find(function (item) { console.log(item); return false; });
而ES5數組擴展方法forEach,map,filter,reduce,reduceRight,every,some 只會遍歷有值的數組
find的遍歷效率是低于ES5數組擴展方法的
find不會更改數組
雖然新增了元素 但是find會在第一次執行回調函數的時候 拿到這個數組最初的索引范圍
const arr = [1, 2, 3, 4, 5]; const item = arr.find(function (item) { arr.push(6); console.log(item); }); console.log(arr);
const arr = [1, 2, 3, 4, 5]; const item = arr.find(function (item) { arr.splice(1, 1); console.log(item); }); console.log(arr);
splice 刪除對應項 該項位置不保留 在數據最后補上undefined
const arr = [1, 2, 3, , , , 7, 8, 9]; arr.find(function (item, index) { if (index === 0) { arr.splice(1, 1); } console.log(item); });
delete
刪除該項的值 并填入undefined
const arr = [1, 2, 3, , , , 7, 8, 9]; arr.find(function (item, index) { if (index === 0) { delete arr[2]; } console.log(item); });
pop
刪除該項的值 并填入undefined
const arr = [1, 2, 3, , , , 7, 8, 9]; arr.find(function (item, index) { if (index === 0) { arr.pop(); } console.log(item); });
創建myFind
Array.prototype.myFind = function (cb) { if (this === null) { throw new TypeError('"this" is null'); } if (typeof cb !== 'function') { throw new TypeError('Callback must be a function type'); } var obj = Object(this), len = obj.length >>> 0, arg2 = arguments[1], step = 0; while (step < len) { var value = obj[step]; if (cb.apply(arg2, [value, step, obj])) { return value; } } step++; return undefined; };
【
