站長資訊網(wǎng)
在es6中，find()用于通過回調(diào)函數(shù)查找數(shù)組中符合條件的第一個元素的值，語法“array.find(function(…),thisValue)”。find()會為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行，當(dāng)數(shù)組中的元素在測試條件時返回true時，find()返回符合條件的該元素，之后的值不會再調(diào)用執(zhí)行函數(shù)；如果沒有符合條件的元素返回undefined。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
es6 find()的介紹
find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。
find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
-
當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。
-
如果沒有符合條件的元素返回 undefined
語法：
array.find(function(currentValue, index, arr),thisValue)
| 參數(shù) | 描述 |
|---|---|
| function(currentValue, index,arr) | 必需。數(shù)組每個元素需要執(zhí)行的函數(shù)。 函數(shù)參數(shù):參數(shù)描述currentValue必需。當(dāng)前元素index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素所屬的數(shù)組對象 |
| thisValue | 可選。 傳遞給函數(shù)的值一般用 "this" 值。 如果這個參數(shù)為空， "undefined" 會傳遞給 "this" 值 |
返回值：返回符合測試條件的第一個數(shù)組元素值，如果沒有符合條件的則返回 undefined。
注意:
-
find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。
-
find() 并沒有改變數(shù)組的原始值。
基本使用
Array.prototype.find
返回第一個滿足條件的數(shù)組元素
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
返回的元素和數(shù)組對應(yīng)下標(biāo)的元素是同一個引用
const arr = [ { id: 1, name: '張三', }, { id: 2, name: '李四', }, { id: 3, name: '王五', }, ]; const item = arr.find((item) => item.name === '李四'); console.log(item);
回調(diào)函數(shù)的返回值是boolean 第一個返回true的對應(yīng)數(shù)組元素作為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);
回調(diào)的參數(shù)
當(dāng)前遍歷的元素 當(dāng)前遍歷出的元素對應(yīng)的下標(biāo) 當(dāng)前的數(shù)組
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的第二個參數(shù)
更改回調(diào)函數(shù)內(nèi)部的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 } );
如果沒有第二個參數(shù)
非嚴(yán)格模式下 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); });
在嚴(yán)格模式下
不傳入第二個參數(shù) this為undefined 與嚴(yán)格模式規(guī)定相同
'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); });
稀疏數(shù)組find
find會遍歷稀疏數(shù)組的空隙 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數(shù)組擴(kuò)展方法forEach,map,filter,reduce,reduceRight,every,some 只會遍歷有值的數(shù)組
find的遍歷效率是低于ES5數(shù)組擴(kuò)展方法的
find不會更改數(shù)組
雖然新增了元素 但是find會在第一次執(zhí)行回調(diào)函數(shù)的時候 拿到這個數(shù)組最初的索引范圍
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 刪除對應(yīng)項 該項位置不保留 在數(shù)據(jù)最后補(bǔ)上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); });
創(chuàng)建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; };
【
