パラメータ
| 説明 |
|
function(currentValue,index,arr)|
必須。配列の各要素に対して実行する必要がある関数。 | 関数パラメータ: パラメータの説明 currentValue は必須です。現在の要素のインデックスはオプションです。現在の要素のインデックス値 arr はオプションです。現在の要素が属する配列オブジェクト
|
thisValue|
はオプションです。関数に渡される値は通常、「this」値を使用します。 | このパラメータが空の場合、「未定義」が「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 <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>
