Vue中判断数组是否存在name为Apple元素的简化写法咨询

你当前的判断代码是逐个指定数组索引进行校验，当数组元素较多时确实会非常繁琐：

<div v-if=" items[items.length - 1].name === 'Apple' || items[items.length - 2].name === 'Apple'  || items[1].name === 'Apple'">

要实现判断数组任意位置是否存在name为Apple的元素，可以用以下简化写法：

最推荐的写法：使用数组some()方法 #

some()是JavaScript数组原生方法，会遍历数组并检测是否有元素满足指定条件，只要找到符合条件的元素就会停止遍历并返回true，完美替代逐个索引判断的逻辑：

<div v-if="items.some(item => item.name === 'Apple')">

兼容旧环境的写法（不使用箭头函数） #

如果项目需要兼容不支持ES6箭头函数的环境，可以改用普通函数写法：

<div v-if="items.some(function(item) {
  return item.name === 'Apple';
})">

额外注意：处理空数组情况 #

如果items可能为空数组或者未定义，为了避免访问item.name时出现报错，可以先增加数组有效性判断：

<div v-if="items && items.length > 0 && items.some(item => item.name === 'Apple')">

内容的提问来源于stack exchange，提问作者jmozzart