JavaScript数组的find()使用特征和应用小结

const array = [5, 12, 8, 130, 44];
const result = array.find(element => element > 10);
console.log(result); // 12 (第一个大于10的元素)

arr.find(callback(element[, index[, array]])[, thisArg])

// 查找第一个大于 100 的元素
const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(num => num > 100);
console.log(found); // 130

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

// 查找第一个库存为0的商品
const outOfStock = inventory.find(item => item.quantity === 0);
console.log(outOfStock); // {name: "bananas", quantity: 0}

// 查找第一个大于其后一位值的元素
const values = [2, 7, 5, 9, 8];
const result = values.find((value, index, arr) => {
  if (index < arr.length - 1) {
    return value > arr[index + 1];
  }
  return false;
});
console.log(result); // 7 (因为7 > 5)

// 在 arguments 对象上使用 find()
function findFirstEven() {
  return Array.prototype.find.call(arguments, num => num % 2 === 0);
}
const firstEven = findFirstEven(1, 3, 5, 4, 6, 2);
console.log(firstEven); // 4

if (!Array.prototype.find) {
  Array.prototype.find = function(callback, thisArg) {
    if (this == null) throw new TypeError('"this" is null or not defined');
    if (typeof callback !== 'function') throw new TypeError('callback must be a function');
    
    const array = Object(this);
    const length = array.length >>> 0;
    
    for (let i = 0; i < length; i++) {
      if (callback.call(thisArg, array[i], i, array)) {
        return array[i];
      }
    }
    return undefined;
  };
}

// 查找第一个符合条件的DOM元素
const elements = [...document.querySelectorAll('div')];
const blueDiv = elements.find(div => div.classList.contains('blue'));
if (blueDiv) blueDiv.style.border = '2px solid red';
// 表单验证 - 检查是否有未填写的字段
const fields = [
  {id: 'name', value: 'John'},
  {id: 'email', value: ''},
  {id: 'password', value: 'secure'}
];
const emptyField = fields.find(field => !field.value);
if (emptyField) console.log(`请填写 ${emptyField.id} 字段`);
// 从数组中查找最近的位置
const locations = [
  {name: '地点A', distance: 12},
  {name: '地点B', distance: 5},
  {name: '地点C', distance: 8}
];
const closest = locations.find(loc => loc.distance < 6);
console.log(closest ? closest.name : '没有足够近的地点'); // 地点B