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

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

<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>

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

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

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

要点

1. columns 必须是 { label, value }[] 格式。

2. v-model 只存 value，不存 label。

3. 用 use-default-slot 才能完全自定义外观。

4. 字典里没有“全部市场”，所以用计算属性拼接。

5. 回显的时候使用find方法查找到匹配的市场。

Array.prototype.find详解

1.Array.find 精讲

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

• 返回值：第一个使回调返回 true 的元素，否则 undefined

• 时间复杂度：O(n)，早停

• 原数组：不变

• thisArg：可选，绑定回调内 this（箭头函数无效）

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

① 只用 element（90% 场景）

按主键查找，返回对象

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

② 用到 index

index ≥ 2 且值 > 8

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

③ 用到原数组引用

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

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

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