JavaScript 数组方法：find 与 findIndex 用法详解

JavaScript 数组方法：find 与 findIndex

在 JavaScript 中，find() 和 findIndex() 是用于遍历数组并查找元素的方法。两者的主要区别在于返回值：find() 返回匹配的第一个元素对象，而 findIndex() 返回对应的索引下标。

基础用法

const stu = [{ name: '李四', gender: '男', age: 20 }];

// find() 返回匹配的元素对象
stu.find((element) => element.name === '李四'); 
// 返回 {name: "李四", gender: "男", age: 20}

// findIndex() 返回匹配元素的索引下标
stu.findIndex((element) => element.name === '李四'); 
// 返回 0

对象数组查找示例

在实际业务中，常需根据特定字段（如省份名称）从对象数组中获取数据。以下示例展示了如何结合 findIndex() 判断是否存在目标数据。

var arr = [
  { provCode: null, count: "16", rgnname: "宁夏" },
  { provCode: null, count: "158", rgnname: "山东" },
  { provCode: null, count: "8", rgnname: "北京" },
  { provCode: null, count: "13", rgnname: "天津" },
  { provCode: null, count: "114", rgnname: "河北" },
  { provCode: null, count: "66", rgnname: "辽宁" },
  { provCode: null, count: "3", rgnname: "西藏" },
  { provCode: null, count: "123", rgnname: "河南" },
  { provCode: null, count: "56", rgnname: "浙江" },
  { provCode: null, count: "126", rgnname: "广西" },
  { provCode: null, count: "273", rgnname: "广东" },
  { provCode: null, count: "115", rgnname: "云南" },
  { provCode: null, count: "23", rgnname: "海南" },
  { provCode: null, count: "1", rgnname: "四川" },
  { provCode: null, count: "1094", rgnname: "count" }
];

// 假设 provinceName 为外部传入的变量
var provinceName = "广东";

// 定义查找条件函数
function getIndex(params) {
  return params.rgnname === provinceName;
}

// 使用 findIndex 获取索引
var e = arr.findIndex(getIndex);

if (e !== -1) {
  var count = Number(arr[e].count);
  console.log(count, "count");
  // 模拟格式转化及 DOM 操作
  // var ct = format(count);
  // $("#saleSt span:eq(0)").html(ct);
} else {
  // $("#saleSt span:eq(0)").html("0");
  console.log("未找到对应省份");
}

回调函数与 this 绑定

find() 和 findIndex() 支持传入第二个参数来指定回调函数中的 this 指向。

var arr = [-8, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// find 返回第一个小于 0 的值
var ce = arr.find((n) => n < 0); 

// 使用 function 语法访问 value, index, arr
var AAA = arr.find(function(value, index, arr) {
  return value === -8;
});

var BBB = arr.findIndex(function(value, index, arr) {
  return value === -8;
});

console.log(AAA, BBB); // -8, 0

// this 绑定示例
function f(v) {
  return v > this.age;
}
let person = { name: 'John', age: 20 };

var CCC = [10, 12, 26, 15].find(f, person);   // 26
var DDD = [10, 12, 26, 15].findIndex(f, person); // 2

console.log(CCC, DDD);