【JavaScript】some方法的详解与实战

一、some 方法核心概念

1.1 定义与本质

JavaScript 的some()方法是数组原型上的迭代方法，用于检测数组中是否存在至少一个满足指定条件的元素。其本质是通过遍历数组执行回调函数，根据回调返回结果判断是否符合条件，属于 “存在性检测” 工具。

1.2 核心特性

• 短路执行：一旦找到满足条件的元素，立即停止遍历并返回true，剩余元素不再处理

• 返回布尔值：仅返回true或false，不返回匹配元素本身

• 不改变原数组：遍历过程中不会修改原始数组的元素

• 稀疏数组兼容：会跳过数组中的空槽（empty），仅处理已初始化的元素

1.3 与 “遍历” 的本质区别

some()并非单纯的遍历工具，而是以 “条件验证” 为核心目标。当需求是 “判断是否存在符合条件的元素” 时，some()是最优选择，相比for循环或forEach能减少不必要的计算。

二、some 方法语法与参数解析

2.1 基本语法

array.some(callback(element[, index[, array]])[, thisArg])

2.2 参数详解

2.2.1 回调函数（callback）

必传参数，用于检测数组元素是否符合条件，返回布尔值（true/false）。回调函数包含三个可选参数：

• element：当前正在处理的数组元素（必选）

• index：当前元素的索引值（可选）

• array：调用some()方法的原数组（可选）

代码示例：参数使用演示

const numbers = [10, 20, 30, 40];// 同时使用三个参数const hasEvenOverIndex1 = numbers.some((element, index, array) => {console.log(`元素：${element}，索引：${index}，原数组长度：${array.length}`);return element % 2 === 0 && index > 1;});console.log(hasEvenOverIndex1); // true（30满足条件）

2.2.2 thisArg（可选）

指定回调函数中this关键字的指向。若未传入，非严格模式下this指向window，严格模式下为undefined。

代码示例：thisArg 使用场景

const validator = {min: 18,checkAge: function(age) {return age >= this.min; // this指向validator对象}};const users = [{ name: "张三", age: 17 },{ name: "李四", age: 20 },{ name: "王五", age: 16 }];// 传入thisArg为validatorconst hasAdult = users.some(validator.checkAge, validator);console.log(hasAdult); // true

2.3 返回值说明

• 当数组中存在至少一个元素使回调函数返回true时，立即返回true

• 当数组中所有元素都使回调函数返回false时，返回false

• 若数组为空，无论条件如何，始终返回false

2.4 兼容性说明

• 支持环境：ES5 及以上版本浏览器（IE9+）、Node.js 0.10+

• 低版本兼容：IE8 及以下需使用 polyfill（见第八章节）

三、some 方法基础用法全解析

3.1 检测数组中的原始类型元素

3.1.1 检测是否存在符合条件的数值

场景：判断数组中是否有大于 50 的数字

const scores = [85, 42, 91, 33, 67];// 检测是否有分数超过90const hasHighScore = scores.some(score => score > 90);console.log(hasHighScore); // true（91满足条件）

3.1.2 检测是否存在指定字符串

场景：判断水果列表中是否包含 “芒果”

const fruits = ["苹果", "香蕉", "橙子", "葡萄"];const target = "芒果";const hasMango = fruits.some(fruit => fruit === target);console.log(hasMango); // false

3.1.3 检测布尔值数组

场景：判断权限列表中是否有 “管理员” 权限

const permissions = [{ name: "查看", isAdmin: false },{ name: "编辑", isAdmin: false },{ name: "删除", isAdmin: true }];const hasAdminPerm = permissions.some(perm => perm.isAdmin);console.log(hasAdminPerm); // true

3.2 处理对象数组的常见场景

3.2.1 检测对象属性是否符合条件

场景：判断用户列表中是否有来自 “北京” 的用户

const users = [{ id: 1, name: "张三", city: "上海" },{ id: 2, name: "李四", city: "北京" },{ id: 3, name: "王五", city: "广州" }];// 检测城市属性const hasBeijingUser = users.some(user => user.city === "北京");console.log(hasBeijingUser); // true

3.2.2 结合多个属性进行条件检测

场景：判断商品中是否有 “家电” 分类且价格低于 1000 元的商品

const products = [{ name: "手机", category: "数码", price: 3999 },{ name: "微波炉", category: "家电", price: 899 },{ name: "衬衫", category: "服饰", price: 199 }];const hasCheapAppliance = products.some(product =>    product.category === "家电" && product.price < 1000);console.log(hasCheapAppliance); // true

3.3 空数组与稀疏数组的处理

3.3.1 空数组的返回结果

const emptyArray = [];// 空数组调用some始终返回falseconst result = emptyArray.some(item => item > 0);console.log(result); // false

3.3.2 稀疏数组的遍历特性

some()会跳过稀疏数组中的空槽，仅处理已赋值的元素

// 创建稀疏数组（索引1为空）const sparseArray = [10, , 30, 40];// 检测是否有大于25的元素const hasLargeNum = sparseArray.some(num => {console.log(num); // 输出10、30、40（跳过空槽）return num > 25;});console.log(hasLargeNum); // true

3.4 配合类型判断的用法

3.4.1 检测数组中是否包含特定类型元素

场景：判断数组中是否有对象类型元素

const mixedArray = [123, "hello", true, { name: "张三" }, null];// 检测是否存在对象const hasObject = mixedArray.some(item => typeof item === "object" && item!== null);console.log(hasObject); // true

3.4.2 检测数组中是否包含数组元素

场景：判断多维数组中是否有子数组长度为 3

const multiArray = [[1,2], [3,4,5], [6]];const hasLength3 = multiArray.some(subArray => subArray.length === 3);console.log(hasLength3); // true

四、some 方法高级用法与场景拓展

4.1 链式调用与组合使用

4.1.1 与 map 方法结合

场景：先转换数据格式，再检测条件

const orders = [{ id: 1, amount: 150 },{ id: 2, amount: 200 },{ id: 3, amount: 80 }];// 先提取金额并乘以税率，再检测是否有超过200的税费后金额const hasHighTaxAmount = orders.map(order => order.amount * 1.13) // 加13%税费.some(taxedAmount => taxedAmount > 200);console.log(hasHighTaxAmount); // true（200*1.13=226）

4.1.2 与 filter 方法配合

场景：先筛选数据范围，再进行存在性检测

const products = [{ name: "笔记本", category: "数码", price: 4999 },{ name: "耳机", category: "数码", price: 799 },{ name: "冰箱", category: "家电", price: 2999 }];// 先筛选数码类商品，再检测是否有价格低于1000的const hasCheapDigital = products.filter(product => product.category === "数码").some(product => product.price < 1000);console.log(hasCheapDigital); // true（耳机799元）

4.2 处理类数组对象

some()不仅可用于数组，还可通过call()/apply()用于类数组对象（如arguments、NodeList）

4.2.1 处理 arguments 对象

场景：检测函数参数中是否有负数

function checkNegativeArgs() {// 将arguments转为可迭代对象并调用somereturn Array.prototype.some.call(arguments, arg => arg < 0);}console.log(checkNegativeArgs(1, 3, -2)); // trueconsole.log(checkNegativeArgs(5, 7, 9)); // false

4.2.2 处理 DOM 元素集合

场景：检测页面中是否有隐藏的按钮

// 获取所有按钮元素（NodeList类数组）const buttons = document.getElementsByTagName("button");// 检测是否有display为none的按钮const hasHiddenButton = Array.prototype.some.call(buttons, button => {return window.getComputedStyle(button).display === "none";});console.log(hasHiddenButton); // 布尔值，取决于页面元素

4.3 嵌套数组的深度检测

场景：检测多维数组中是否包含特定值

const nestedArray = [[1, 2, 3],[4, [5, 6], 7],[8, 9]];// 递归检测嵌套数组function hasValueInNestedArray(arr, target) {return arr.some(item => {// 若元素是数组则递归检测，否则直接比较return Array.isArray(item)? hasValueInNestedArray(item, target) : item === target;});}console.log(hasValueInNestedArray(nestedArray, 6)); // trueconsole.log(hasValueInNestedArray(nestedArray, 10)); // false

4.4 异步操作中的 some 应用

some()本身不支持异步，但可结合Promise实现异步条件检测

4.4.1 检测多个异步请求是否有成功

场景：判断多个接口请求中是否有成功返回数据的

// 模拟异步请求函数function fetchData(id) {return new Promise((resolve) => {setTimeout(() => {// 模拟id=2的请求成功，其他失败if (id === 2) resolve({ success: true, data: {} });else resolve({ success: false });}, 1000);});}// 异步some实现async function asyncSome(arr, asyncCallback) {for (const item of arr) {const result = await asyncCallback(item);if (result) return true; // 找到满足条件的立即返回}return false;}// 使用异步some检测请求const requestIds = [1, 2, 3];const hasSuccessfulRequest = await asyncSome(requestIds, async (id) => {const response = await fetchData(id);return response.success;});console.log(hasSuccessfulRequest); // true

4.4.2 异步验证表单字段

场景：检测表单字段是否有异步验证失败的项

// 模拟字段异步验证const validateField = async (field) => {// 模拟用户名唯一性校验if (field.name === "username") {return new Promise(resolve => {setTimeout(() => {resolve(field.value === "admin" ? false : true); // admin已存在}, 800);});}// 其他字段同步验证return field.value.trim()!== "";};// 表单字段const formFields = [{ name: "username", value: "admin" },{ name: "password", value: "123456" },{ name: "email", value: "" }];// 检测是否有验证失败的字段const hasInvalidField = await asyncSome(formFields, validateField);console.log(hasInvalidField); // false（username验证失败）

五、some 方法实战案例精讲

5.1 表单验证实战

5.1.1 检测必填项是否未填写

场景：表单提交前检测是否有必填字段为空

// 表单数据const formData = {username: "zhangsan",password: "",email: "[e-mail]",phone: ""};// 必填字段列表const requiredFields = ["username", "password", "phone"];// 检测是否有必填项为空const hasEmptyRequired = requiredFields.some(field => {const value = formData[field];// 处理字符串、数字等不同类型的空值判断return value === undefined || value === null || value.toString().trim() === "";});if (hasEmptyRequired) {console.log("请填写所有必填字段"); // 执行此逻辑} else {console.log("表单验证通过");}

5.1.2 检测密码强度是否达标

场景：验证密码是否包含至少一种特殊字符

const passwords = ["123456", "abcdef", "Abc123!", "Qwe@123"];const specialChars = ["!", "@", "#", "$", "%"];// 检测密码是否包含特殊字符const hasValidPassword = passwords.some(password => {// 检测当前密码是否包含任一特殊字符return specialChars.some(char => password.includes(char));});console.log(hasValidPassword); // true（后两个密码符合要求）

5.2 DOM 元素操作实战

5.2.3 检测页面元素状态

场景：判断页面中是否有处于激活状态的输入框

// 获取所有输入框const inputs = document.querySelectorAll("input");// 检测是否有聚焦的输入框const hasActiveInput = Array.prototype.some.call(inputs, input => {return document.activeElement === input;});// 检测是否有禁用的输入框const hasDisabledInput = Array.prototype.some.call(inputs, input => {return input.disabled;});console.log("是否有激活输入框：", hasActiveInput);console.log("是否有禁用输入框：", hasDisabledInput);

5.2.4 批量检测元素样式

场景：检测列表项是否有超出指定高度的元素

const listItems = document.querySelectorAll(".list-item");const maxAllowedHeight = 80; // 最大允许高度80px// 检测是否有元素高度超限const hasOverHeightItem = Array.prototype.some.call(listItems, item => {return item.offsetHeight > maxAllowedHeight;});if (hasOverHeightItem) {console.log("存在高度超限的列表项");// 执行样式调整逻辑}

5.3 数据处理实战

5.3.5 检测数据权限

场景：判断用户是否有操作目标数据的权限

// 当前用户权限const userPermissions = ["view:user", "edit:order", "delete:product"];// 检测是否有指定权限function hasPermission(targetPermission) {return userPermissions.some(perm => perm === targetPermission);}// 权限检测示例console.log(hasPermission("edit:user")); // falseconsole.log(hasPermission("edit:order")); // true

5.3.6 过滤无效数据前的检测

场景：判断数据列表中是否有无效数据（用于优化过滤逻辑）

const dataList = [{ id: 1, status: "valid", value: 100 },{ id: 2, status: "invalid", value: null },{ id: 3, status: "valid", value: 200 }];// 定义无效数据判断规则const isInvalid = item => item.status === "invalid" || item.value === null;// 检测是否有无效数据const hasInvalidData = dataList.some(isInvalid);if (hasInvalidData) {console.log("数据中存在无效项，开始过滤");const validData = dataList.filter(item =>!isInvalid(item));console.log("过滤后数据：", validData);} else {console.log("数据全部有效，无需过滤");}

5.4 接口交互实战

5.4.7 检测接口返回数据状态

场景：判断多个接口返回结果中是否有成功状态

// 模拟接口返回数据const apiResponses = [{ code: 500, message: "服务器错误" },{ code: 200, message: "成功", data: {} },{ code: 404, message: "资源不存在" }];// 检测是否有接口成功返回const hasSuccessfulResponse = apiResponses.some(response => {return response.code === 200 && response.data!== undefined;});if (hasSuccessfulResponse) {console.log("存在成功的接口响应");// 提取成功数据进行处理const successData = apiResponses.find(response => response.code === 200).data;} else {console.log("所有接口均失败");// 执行错误处理逻辑}

5.4.8 验证接口参数有效性

场景：检测请求参数中是否有不符合规则的项

// 请求参数const requestParams = {page: 1,size: 20,sort: "createTime",filter: ""};// 参数验证规则const paramRules = [{ key: "page", validator: val => val >= 1 && val <= 100 },{ key: "size", validator: val => val >= 10 && val <= 100 },{ key: "filter", validator: val => val === "" || val.length >= 3 }];// 检测参数是否符合规则const hasInvalidParam = paramRules.some(rule => {const paramValue = requestParams[rule.key];return!rule.validator(paramValue);});if (hasInvalidParam) {console.log("参数不符合要求");} else {console.log("参数验证通过，发起请求");}

六、some 与其他数组方法的区别对比

6.1 some vs every

两者均返回布尔值，但逻辑相反：

• some()：存在至少一个满足条件 → 返回true（逻辑或）

• every()：所有元素满足条件 → 返回true（逻辑与）

代码对比示例：

const numbers = [2, 4, 6, 7, 8];// some：是否有奇数（存在→true）const hasOdd = numbers.some(num => num % 2!== 0);console.log(hasOdd); // true// every：是否全是偶数（有奇数→false）const allEven = numbers.every(num => num % 2 === 0);console.log(allEven); // false

使用场景区分：

• 验证 “是否存在” 用some()（如：是否有必填项为空）

• 验证 “全部符合” 用every()（如：是否所有选项都同意）

6.2 some vs find

• some()：返回布尔值，仅判断存在性，找到后立即停止

• find()：返回第一个满足条件的元素，未找到返回undefined

代码对比示例：

const users = [{ id: 1, age: 17 },{ id: 2, age: 20 },{ id: 3, age: 22 }];// some：是否有成年用户（返回布尔值）const hasAdult = users.some(user => user.age >= 18);console.log(hasAdult); // true// find：找到第一个成年用户（返回对象）const firstAdult = users.find(user => user.age >= 18);console.log(firstAdult); // { id: 2, age: 20 }

使用场景区分：

• 仅需判断存在性，无需获取元素 → 用some()

• 需要获取符合条件的元素 → 用find()

6.3 some vs filter

• some()：短路执行，返回布尔值，效率高

• filter()：遍历所有元素，返回符合条件的元素数组，效率低

代码对比示例：

const largeArray = Array.from({ length: 10000 }, (_, i) => i + 1);// some：检测是否有大于9990的数字（很快，找到后停止）console.time("some");const hasLargeNum = largeArray.some(num => num > 9990);console.timeEnd("some"); // 约0.1msconsole.log(hasLargeNum); // true// filter：筛选大于9990的数字（遍历全部元素）console.time("filter");const largeNums = largeArray.filter(num => num > 9990);console.timeEnd("filter"); // 约0.5msconsole.log(largeNums.length > 0); // true

使用场景区分：

• 仅需判断存在性 → 优先用some()（性能更优）

• 需要获取所有符合条件的元素 → 用filter()

6.4 some vs includes

• some()：支持复杂条件判断（函数回调）

• includes()：仅支持精确匹配（值比较）

代码对比示例：

const products = [{ id: 1, name: "苹果" },{ id: 2, name: "香蕉" },{ id: 3, name: "橙子" }];// some：检测是否有名称包含“果”字的商品（复杂条件）const hasFruit = products.some(product => product.name.includes("果"));console.log(hasFruit); // true// includes：无法直接检测对象属性，需配合mapconst productNames = products.map(product => product.name);const hasBanana = productNames.includes("香蕉");console.log(hasBanana); // true

使用场景区分：

• 简单值的精确匹配 → 用includes()（代码简洁）

• 复杂条件判断（如对象属性、模糊匹配） → 用some()

七、some 方法常见问题与避坑指南

7.1 回调函数未返回布尔值

问题：回调函数未显式返回值，导致默认返回undefined，被当作false处理

const numbers = [1, 3, 5, 7];// 错误：回调无返回值，始终返回falseconst hasOdd = numbers.some(num => {num % 2!== 0; // 缺少return});console.log(hasOdd); // false（错误结果）// 正确写法const hasOddCorrect = numbers.some(num => num % 2!== 0);console.log(hasOddCorrect); // true

7.2 this 指向丢失问题

问题：回调函数为普通函数时，this指向异常

const validator = {threshold: 100,check: function(value) {return value > this.threshold; // this可能指向错误}};const values = [90, 105, 110];// 错误：this指向window，threshold为undefinedconst hasOverThreshold = values.some(validator.check);console.log(hasOverThreshold); // false（错误）// 正确写法1：使用bind绑定thisconst hasOver1 = values.some(validator.check.bind(validator));// 正确写法2：使用箭头函数const hasOver2 = values.some(value => validator.check(value));// 正确写法3：传入thisArg参数const hasOver3 = values.some(validator.check, validator);console.log(hasOver1, hasOver2, hasOver3); // 均为true

7.3 空数组的返回值误区

问题：误认为空数组会返回true或抛出错误

const emptyArr = [];// 空数组调用some始终返回false，无论条件如何const result1 = emptyArr.some(item => item > 0);const result2 = emptyArr.some(item => false);const result3 = emptyArr.some(item => true);console.log(result1, result2, result3); // 均为false

避坑建议：使用前先判断数组是否为空，避免逻辑错误

function checkArray(arr, condition) {if (arr.length === 0) {console.warn("数组为空，返回默认值false");return false;}return arr.some(condition);}

7.4 稀疏数组的遍历问题

问题：未考虑稀疏数组的空槽，导致逻辑遗漏

// 稀疏数组（索引1和3为空）const sparseArr = [10, , 30, , 50];let count = 0;// some会跳过空槽，仅处理有值的元素const hasEven = sparseArr.some(item => {count++;return item % 2 === 0;});console.log(hasEven); // trueconsole.log(count); // 3（仅遍历了10、30、50）

避坑建议：若需处理所有索引（包括空槽），可先填充数组

// 用undefined填充空槽const filledArr = sparseArr.map(item => item);// 再执行some操作const hasEvenFilled = filledArr.some(item => item % 2 === 0);

7.5 异步操作的同步执行问题

问题：在回调函数中使用异步操作，导致some()无法正确判断

const urls = ["url1", "url2", "url3"];// 错误：异步操作不会阻塞some的执行const hasValidUrl = urls.some(async (url) => {const response = await fetch(url);return response.ok; // 异步结果无法被some捕获});console.log(hasValidUrl); // 立即返回true（错误结果）

避坑建议：使用自定义异步some实现（见 4.4 节）

// 正确：使用异步some函数const hasValidUrl = await asyncSome(urls, async (url) => {const response = await fetch(url);return response.ok;});console.log(hasValidUrl); // 正确返回布尔值

7.6 与 “==” 的类型隐式转换问题

问题：回调函数中使用==导致类型隐式转换，判断不准确

const mixedArr = [0, 1, "2", false, null];// 错误：0 == false为true，导致误判const hasFalse = mixedArr.some(item => item == false);console.log(hasFalse); // true（0被误判为false）// 正确：使用===严格相等const hasFalseStrict = mixedArr.some(item => item === false);console.log(hasFalseStrict); // true（仅false被检测到）

避坑建议：回调函数中始终使用===和!==进行严格比较

八、some 方法性能优化与兼容性处理

8.1 性能优化技巧

8.1.1 利用短路特性减少计算

some()的短路特性是天然的性能优化点，应将最可能满足条件的检测逻辑放在前面

const products = [/* 大量商品数据 */];// 优化前：先执行复杂计算，再判断const hasCheapElectronics = products.some(product => {const tax = product.price * 0.13; // 复杂计算const total = product.price + tax;return product.category === "electronics" && total < 1000;});// 优化后：先判断简单条件，不满足则跳过复杂计算const hasCheapElectronicsOpt = products.some(product => {// 先判断分类，不满足直接返回falseif (product.category!== "electronics") return false;// 仅分类符合时才执行复杂计算const tax = product.price * 0.13;const total = product.price + tax;return total < 1000;});

8.1.2 大型数组的分片处理

对于超大型数组（10 万条以上），可分片执行some()，避免阻塞主线程

async function chunkedSome(largeArray, condition, chunkSize = 1000) {const chunks = [];// 分割数组为多个分片for (let i = 0; i < largeArray.length; i += chunkSize) {chunks.push(largeArray.slice(i, i + chunkSize));}// 逐个分片执行some，找到结果后立即返回for (const chunk of chunks) {const result = chunk.some(condition);if (result) return true;// 每处理一个分片，让出主线程await new Promise(resolve => setTimeout(resolve, 0));}return false;}// 使用示例const largeArray = Array.from({ length: 100000 }, (_, i) => i);const hasTarget = await chunkedSome(largeArray, item => item === 99999);

8.1.3 避免在回调中执行重型操作

问题：回调函数中包含 DOM 操作、大量计算等重型操作，导致性能下降

// 优化前：回调中包含DOM操作const hasInvalidItem = items.some(item => {const element = document.createElement("div"); // 重型操作element.textContent = item.name;document.body.appendChild(element);return item.isInvalid;});// 优化后：先执行some判断，再进行DOM操作const hasInvalidItemOpt = items.some(item => item.isInvalid);if (hasInvalidItemOpt) {// 仅在需要时执行DOM操作items.forEach(item => {if (item.isInvalid) {const element = document.createElement("div");element.textContent = item.name;document.body.appendChild(element);}});}

8.2 兼容性处理方案

8.2.1 低版本浏览器 Polyfill

针对 IE8 及以下不支持some()的浏览器，可添加 Polyfill：

if (!Array.prototype.some) {Array.prototype.some = function(callback, thisArg) {// 检测回调是否为函数if (typeof callback!== "function") {throw new TypeError("callback must be a function");}// 转换为对象，避免原始类型的问题const obj = Object(this);// 获取数组长度（考虑稀疏数组）const len = obj.length >>> 0;for (let i = 0; i < len; i++) {// 仅处理已初始化的元素if (i in obj) {const value = obj[i];// 调用回调函数，绑定thisArgif (callback.call(thisArg, value, i, obj)) {return true; // 找到满足条件的元素，立即返回}}}return false; // 所有元素均不满足条件};}

8.2.2 类数组对象的兼容性处理

对于不支持Array.prototype.call()的特殊环境，可先转换为数组：

function someForArrayLike(arrayLike, callback, thisArg) {// 转换类数组为真正的数组const arr = Array.prototype.slice.call(arrayLike);return arr.some(callback, thisArg);}// 使用示例const args = arguments;const hasNegative = someForArrayLike(args, arg => arg < 0);

8.3 TypeScript 中的类型定义

在 TypeScript 中使用some()时，可通过泛型指定类型，提升类型安全性：

interface User {id: number;name: string;age: number;}const users: User[] = [{ id: 1, name: "张三", age: 17 },{ id: 2, name: "李四", age: 20 }];// 类型安全的some调用const hasAdult: boolean = users.some((user: User) => user.age >= 18);

8.4 框架中的使用注意事项

8.4.1 React 中的状态检测

在 React 中使用some()检测状态数组时，避免在渲染阶段执行重型计算：

function UserList({ users }) {// 优化：使用useMemo缓存计算结果const hasAdmin = React.useMemo(() => {return users.some(user => user.role === "admin");}, [users]); // 仅当users变化时重新计算return (<div>{hasAdmin && <div>存在管理员用户</div>}<ul>{/* 用户列表渲染 */}</ul></div>);}

8.4.2 Vue 中的数据检测

在 Vue 中使用some()时，注意响应式数组的变化：

<template><div><p v-if="hasCompleted">存在已完成的任务</p></div></template><script>export default {data() {return {tasks: [/* 任务数据 */]};},computed: {// 使用计算属性缓存结果hasCompleted() {return this.tasks.some(task => task.status === "completed");}}};</script>