通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)

简介: array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~


image.gif 编辑

一、array.every()的使用与技巧

1.1、基本语法

arr.every(callback(currentValue, index, array), thisArg)

       callback:一个函数,它最多接受三个参数(当前元素的值、当前元素的索引、原数组)。

  • currentValue:当前被遍历的元素。
  • index:当前元素的索引。
  • array:调用 every 方法的数组。

       thisArg(可选):执行回调函数时的 this 上下文。

1.2、返回值

       一个布尔值,表示所有元素是否都满足条件。

1.3、使用技巧

       array.every()用于检验数组中所有元素是否都满足某一要求。

       应用场景:数据验证、权限检查、一致性检查。

1.3.1、数据验证

       开发一个用户注册系统,需要验证用户提供的所有信息是否有效。用户对象可能包含姓名、邮箱、密码和密码确认等字段,需要验证用户注册信息是否合法,比如检查用户名的长度、密码的强度和匹配性,还可以通过正则表达式来验证邮箱格式的正确性。

//假设我们正在开发一个用户注册系统,需要验证用户提供的所有信息是否有效。用户对象可能包含姓名、邮箱、密码和密码确认等字段。
const users = [
  {
    name: "John Doe",
    email: "john.doe@example.com",
    password: "securepassword123",
    confirmPassword: "securepassword123"
  },
  {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    password: "password",
    confirmPassword: "password"
  },
  {
    name: "Emily Jones",
    email: "emily.jones@example.com",
    password: "SafePass123!",
    confirmPassword: "SafePass123!"
  },
  {
    name: "William Brown",
    email: "william.brown@example.com",
    password: "pass123",
    confirmPassword: "pass1234" // 注意这里的不匹配
  },
  {
    name: "Sophia Lee",
    email: "sophia.lee@example.com",
    password: "mysecurepassword",
    confirmPassword: "mysecurepassword"
  },
  // ... 可以根据需要继续添加更多用户对象
];
const allValid = users.every(user => {
  const { name, email, password, confirmPassword } = user;
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return (
    name.length >= 3 && // 假设用户名至少需要3个字符
    password.length >= 8 && // 密码至少8个字符
    password === confirmPassword && // 密码和确认密码匹配
    emailRegex.test(email) // 邮箱格式正确
  );
});
console.log(allValid); // 如果所有用户信息都有效,输出 true;否则输出 false。

image.gif

1.3.2、权限检查

       在权限系统中,有时需要检查一组用户是否都具有特定的系统管理员权限。检查数组中的每个用户是否具有“admin”角色。这可以用于确保只有具有管理员权限的用户才能访问特定的系统功能。

//在权限系统中,我们可能需要检查一组用户是否都具有特定的系统管理员权限。
const users = [
  { username: "john", roles: ["admin", "user"] },
  { username: "jane", roles: ["admin", "editor"] },
  { username: "dave", roles: ["user"] }, // 只有用户角色,没有管理员权限
  { username: "sarah", roles: ["admin", "user", "editor"] },
  { username: "michael", roles: ["editor"] }, // 只有编辑角色
  { username: "olivia", roles: ["admin"] },
  { username: "liam", roles: ["user", "editor"] }, // 缺少管理员角色
  // ... 其他用户对象
];
const allAdmins = users.every(user => {
  return user.roles.includes("admin");
});
console.log(allAdmins); // 如果所有用户都是管理员,输出 true;否则输出 false。

image.gif

1.3.3、一致性检查

       在处理数据导入功能时,有时需要验证导入的数据是否符合预定义的结构。每个数据项可能是一个对象,包含多个属性,如日期、金额和描述。

//假设我们正在处理一个数据导入功能,需要验证导入的数据是否符合预定义的结构。每个数据项可能是一个对象,包含多个属性,如日期、金额和描述。
const dataEntries = [
  { date: "2024-01-01", amount: 100.00, description: "Payment for services" },
  { date: "2024-01-02", amount: 200.00, description: "Purchase of goods" },
  { date: "2024-01-03", amount: -50.00, description: "Refund for order" }, // 负数金额
  { date: "01/01/2024", amount: 300.00, description: "Invalid date format" }, // 日期格式错误
  { date: "2024-01-05", amount: "350.00", description: "Amount as string" }, // 金额为字符串类型
  { date: "2024-01-06", amount: 400.00, description: "" }, // 描述为空字符串
  { date: "2024-01-07", amount: 500.00, description: null }, // 描述为null
  { date: "2024-01-08", amount: 600.00, description: undefined }, // 描述为undefined
  // ... 其他数据项
];
const allConsistent = dataEntries.every(entry => {
  const { date, amount, description } = entry;
  const dateRegex = /^\d{4}-\d{2}-\d{2}$/; // 日期格式 YYYY-MM-DD
  return (
    typeof date === "string" && dateRegex.test(date) && // 日期格式正确
    typeof amount === "number" && !isNaN(amount) && amount > 0 && // 金额是正数
    typeof description === "string" && description.trim().length > 0 // 描述不为空
  );
});
console.log(allConsistent); // 如果所有数据项都符合格式,输出 true;否则输出 false。

image.gif

二、array.every()与array.some()

2.1、相同之处

       它们都接受一个回调函数,该函数会被依次应用于数组的每个元素,返回值都是布尔值。

2.2、不同之处

       目的:array.every()用于检查数组中的所有元素是否都满足某个条件,如果有一个不满足都会返回false;array.some()用于检查数组中是否至少有一个元素满足某个条件,只要有一个满足,就会返回true。

       短路时机:array.every()只要有一个元素不符合回调函数条件,就会触发短路机制;array.some()只要有一个元素符合回调函数条件,就会触发短路机制。合理的运用短路机制,能大大提升数组检查的效率。

       我之前写过array.some()的介绍博客,我个人用array.some()更多,传送门:通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)-CSDN博客

三、总结

       array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。

       W3school传送门(我的博客更详细):JavaScript Array every() 方法

       博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

相关文章
|
10月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
342 56
|
11月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
333 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
270 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
168 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
482 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
326 4
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
329 4
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
293 4

热门文章

最新文章

  • 1
    PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
    201
  • 2
    Java 中数组Array和列表List的转换
    813
  • 3
    JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
    649
  • 4
    通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
    1421
  • 5
    通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
    525
  • 6
    多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
    224
  • 7
    别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
    235
  • 8
    Array.forEach实战详解:简化循环与增强代码可读性;Array.forEach怎么用;面对大量数据时怎么提高Array.forEach的性能
    150
  • 9
    深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    630
  • 10
    JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
    1030