在es6中,find()用於透過回呼函數找出陣列中符合條件的第一個元素的值,語法「array.find(function(...),thisValue)」。 find()會為數組中的每個元素都呼叫一次函數執行,當數組中的元素在測試條件時傳回true時,find()傳回符合條件的該元素,之後的值不會再呼叫執行函數;如果沒有符合條件的元素回傳undefined。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
find() 方法傳回通過測試(函數內判斷)的陣列的第一個元素的值。
find() 方法為數組中的每個元素都呼叫一次函數執行:
#當數組中的元素在測試條件時傳回true 時, find( ) 傳回符合條件的元素,之後的值不會再呼叫執行函數。
如果沒有符合條件的元素回傳undefined
#語法:
array.find(function(currentValue, index, arr),thisValue)
參數 |
返回值:返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 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); });
更改回调函数内部的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会遍历稀疏数组的空隙 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会在第一次执行回调函数的时候 拿到这个数组最初的索引范围
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); });
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 <p>【相关推荐:<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">编程视频</a>】</p>
以上是es6中find()怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!