find数组方法详解||Vue3 + uni-app + Wot Design（wd-picker）使用自定义插槽内容写一个下拉选择器

介绍一个 Vue3 + uni-app + Wot Design（wd-picker） 的组件片段，功能是一个下拉选择器，用于选择"市场"，选择后会触发数据更新。

html 复制代码

<wd-picker
  :columns="marketColumns"   <!-- 下拉数据源 -->
  v-model="value"            <!-- 当前选中值 -->
  use-default-slot           <!-- 启用自定义触发区 -->
  @confirm="onMarketChange"> <!-- 点"确定"后回调 -->
  <!-- 自定义触发区：显示文字 + 下拉图标 -->
  <view class="market-name">
    <view class="market-name__txt">{{ getLabel(value) }}</view>
    <img class="pull-icon" src="xxx.png"/>
  </view>
</wd-picker>

javascript 复制代码

const { sc: dictSc } = useDict(['sc']);   // 拿到原始市场字典
const marketColumns = computed(() => [               // 拼"全部"选项
  { label: '全部市场', value: '' },
  ...dictNcpSc.value
]);

javascript 复制代码

function onMarketChange(e) {   // e = { value, label ... }
  marketId.value = e.value;    // 保存 id
  getListData(e.value);        // 重新拉接口数据
}

javascript 复制代码

const getLabel = val =>
  marketColumns.value.find(item => item.value === val)?.label   // 可选链
  || '全部市场';                                           // 兜底

要点

columns 必须是 { label, value }[] 格式。
v-model 只存 value，不存 label。
用 use-default-slot 才能完全自定义外观。
字典里没有"全部市场"，所以用计算属性拼接。
回显的时候使用find方法查找到匹配的市场。

Array.prototype.find详解

1.Array.find 精讲

javascript 复制代码

const elem = arr.find((element, index, array) => {
  /* 返回布尔值 */
}, thisArg);

返回值 ：第一个使回调返回 true 的元素，否则 undefined
时间复杂度 ：O(n)，早停
原数组 ：不变
thisArg ：可选，绑定回调内 this（箭头函数无效）

find 返回第一个满足条件的元素；找不到返回 undefined；回调参数 (element（谁）, index（排第几）, array（一共多少人）)；thisArg 绑定 this

① 只用 element（90% 场景）

按主键查找，返回对象

javascript 复制代码

const users = [{id: 3, name: 'Bob'}, {id: 5, name: 'Alice'}];
const alice = users.find(u => u.id === 5);

② 用到 index

index ≥ 2 且值 > 8

javascript 复制代码

const arr = [7, 4, 9, 12];
const first = arr.find((n, i) => n > 8 && i >= 2); // 9

③ 用到原数组引用

利用 a[i+1] 看后一项

javascript 复制代码

const arr = [1, 3, 5, 7];
const hit = arr.find((n, i, a) => i < a.length - 1 && a[i + 1] === n + 2);
// 返回 5，因为 5 后面是 7，差 2

④ thisArg 场景

回调内 this 指向 m

javascript 复制代码

class Threshold {
  constructor(t) { this.t = t; }
  ok(n) { return n > this.t; }
}
const m = new Threshold(10);
const arr = [4, 11, 6, 20];
const res = arr.find(function (n) { return this.ok(n); }, m);
// 返回 11