数组find函数

2024年11月23日发(作者：)

数组的 find 函数

1. 定义

数组的

find

函数是一个用于查找指定元素的方法。它在 JavaScript 中的作用是

返回数组中满足指定条件的第一个元素。

2. 用途

数组的

find

函数常用于从一组数据中找到满足某个条件的首个元素。它的使用场

景较多，例如：

•

•

•

在一个用户列表中找到第一个满足特定条件的用户信息。

从一组商品中查找第一个满足特定价格范围的商品。

在一个任务列表中找到第一个状态为已完成的任务。

3. 工作方式

数组的

find

函数的工作方式如下：

3.1 参数

find

函数接受一个回调函数作为参数，该回调函数用于定义查找条件。回调函数

可以接受三个参数：

element

（当前元素）、

index

（当前索引）和

array

（原始数

组）。

(callback(element, index, array));

•

•

•

element

：必需，当前正在处理的元素。

index

：可选，当前正在处理的元素的索引。

array

：可选，原始数组。

3.2 返回值

find

函数的返回值是满足条件的第一个元素。如果找不到满足条件的元素，则返

回

undefined

。

3.3 示例

假设有一个数组

nums

，我们想要在其中查找第一个大于 5 的元素，代码如下：

const nums = [1, 3, 7, 4, 9, 2, 6];

const result = ((num) => num > 5);

(result);

// 输出 7

解释代码执行过程：

1. 定义了一个名为

nums

的数组，包含了多个整数。

2. 使用

find

函数查找满足条件的数组元素，其中回调函数

(num) => num > 5

定义了查找条件，即元素大于 5。

3.

find

函数从数组的第一个元素开始遍历，对每个元素都执行回调函数。

4. 当遍历到数组中的第三个元素 7 时，满足条件

num > 5

，因此返回 7。

5. 返回的结果存储在变量

result

中，然后通过打印

(result)

输

出结果 7。

4. 注意事项

在使用数组的

find

函数时，需要注意以下几点：

4.1 用于稀疏数组

find

函数可以用于稀疏数组，也就是数组中包含空缺（非连续索引）的情况。

find

函数会跳过空缺的索引，继续查找后续元素。

const sparseArray = [1, , , 4, 5];

const result = ((num) => num > 3);

(result);

// 输出 4

在上述示例中，

find

函数从索引为 0 的元素开始遍历，直到找到满足条件的第一

个元素为止。

4.2 返回值是元素的浅拷贝

find

函数返回找到的满足条件的第一个元素的浅拷贝。这意味着返回的元素是对

原数组中元素的引用，并且对返回的元素进行修改会改变原数组中的相应元素。

const nums = [{ value: 1 }, { value: 2 }, { value: 3 }];

const result = ((num) => === 2);

= 4;

(nums);

// 输出 [{ value: 1 }, { value: 4 }, { value: 3 }]

在上述示例中，

find

函数返回了满足条件

{ value: 2 }

的元素的引用。通过修改

返回的元素

result

，实际上也修改了原数组中相应位置的元素。

4.3 使用箭头函数时的

this

回调函数可以是箭头函数，但是箭头函数的

this

值会被继承自定义

find

函数的

执行上下文并且无法被修改。

const obj = {

values: [1, 2, 3],

findValue: function() {

return (() => this === obj);

}

};

(lue());

// 输出 [1, 2, 3]

在上述示例中，

findValue

方法使用

(() => this === obj)

查询数组

values

中是否有与

obj

完全相符的元素。由于箭头函数继承了

findValue

方法的

执行上下文，因此

this

在箭头函数内部等同于

obj

。

5. 兼容性

find

函数是在 ECMAScript 2015 (ES6) 标准中引入的新特性，因此在不支持 ES6

的旧版本浏览器中可能会无法使用。为了兼容低版本的浏览器，可以使用如下的

polyfill：

if (!) {

= function(callback, thisArg) {

if (this === null) {

throw new TypeError(' called on null or undefined');

}

if (typeof callback !== 'function') {

throw new TypeError('callback must be a function');

}

const len = >>> 0;

// 取整操作，确保 len 为数值型

for (let i = 0; i < len; i++) {

if ((thisArg, this[i], i, this)) {

return this[i];

}

}

return undefined;

};

}

该 polyfill 会将

find

函数添加到

ype

中，从而使其可用于数组实

例。然后，旧版本的浏览器就可以使用

find

函数了。

6. 总结

数组的

find

函数是用于查找满足指定条件的首个元素的方法。它接受一个回调函

数作为参数，并在数组中对每个元素执行该回调函数，直到找到满足条件的第一个

元素。

find

函数的返回值是满足条件的第一个元素，如果找不到满足条件的元素，

则返回

undefined

。要注意的是，

find

函数返回的是满足条件元素的浅拷贝，并且

回调函数可以是箭头函数。需要注意兼容性问题，对于不支持 ES6 的旧版本浏览

器，可以使用 polyfill 进行兼容处理。