JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)

简介: JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)

一、为什么要使用array.fifler()

       因为它简单,好用,清晰,可拓展性强,而且比for、foreach还有非常不常用的while、do...while高级,代码清晰,可读性强,代码就看起来很优雅,如果都是嵌套循环和嵌套回调,看起来就是一团乱麻,可读性差,很不优雅。


       要做优雅的程序员,写优雅的代码。


       array.fifler()方法就像名字一样,他就是一个过滤器,比较语义化,上手较快。


二、array.fifler()的使用与技巧

2.1、基本语法

array.filter(callback(element, index, array), thisArg)

       其中callback回调函数对每个数组元素执行的函数,接受三个参数:


element:当前遍历到的元素

index (可选):当前遍历到的索引

array (可选):调用 filter 的数组本身

       thisArg是执行 callback 时用作 this 的值。


2.2、返回值

       一个新的数组,包含通过测试的元素。


2.3、使用技巧

       综上所述,array.fifler()就是一个数组的过滤器,同时不影响数组本身的样子,返回的是一个新的数组,常用于对基础数据进行筛选,以适用于特定的情况。


       应用场景:数据筛选、数据清洗和链式调用。


2.3.1、筛选数字数组中的偶数

       最基础的例子,基于原始数据numbers数组,通过array.fifler()生成一个只含偶数的新数组evenNumbers。

// 示例1:筛选数组中的偶数
 
const numbers = [1, 2, 3, 4, 5, 6];
 
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // [2, 4, 6]
2.3.2、数据筛选:筛选出高价值客户

       假设有一个客户消费记录的数组,我们想要筛选出过去一年内消费总额超过10000元且订单数量超过5个的高价值客户。

// 示例2:筛选出高价值客户
 
const customers = [
  { id: 1, name: 'Alice', orders: [
    { amount: 1200, date: '2023-05-15' },
    { amount: 2500, date: '2023-07-22' },
    { amount: 1800, date: '2023-08-05' }
  ]},
  { id: 2, name: 'Bob', orders: [
    { amount: 9000, date: '2023-03-01' },
    { amount: 2200, date: '2023-09-12' }
  ]},
  { id: 3, name: 'Charlie', orders: [
    { amount: 750, date: '2023-02-17' },
    { amount: 1100, date: '2023-04-03' },
    { amount: 1500, date: '2023-05-09' },
    { amount: 1300, date: '2023-06-21' }
  ]},
  { id: 4, name: 'David', orders: [
    { amount: 2000, date: '2023-01-05' },
    { amount: 1700, date: '2023-02-20' },
    { amount: 2300, date: '2023-03-18' }
  ]},
  { id: 5, name: 'Eve', orders: [
    { amount: 3500, date: '2023-04-08' },
    { amount: 4200, date: '2023-05-22' }
  ]},
  { id: 6, name: 'Frank', orders: [
    { amount: 550, date: '2023-03-02' },
    { amount: 850, date: '2023-08-16' }
  ]},
  // ... 更多客户
];
 
const highValueCustomers = customers.filter(customer => {
  const totalSpent = customer.orders.reduce((sum, order) => {
    const orderDate = new Date(order.date);
    const oneYearAgo = new Date();
    oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
    return sum + (orderDate >= oneYearAgo ? order.amount : 0);
  }, 0);
  return totalSpent > 10000 && customer.orders.length > 5;
});
 
console.log(highValueCustomers);
2.3.3、数据清洗:移除无效的用户记录

       假设我们有一个包含用户注册信息的数组,我们想要移除那些邮箱地址无效或密码长度不符合要求的用户记录

// 示例3:移除无效的用户记录
 
const users = [
  { id: 1, name: 'Alice', email: 'alice', password: 'alice123' },
  { id: 2, name: 'Bob', email: 'bob@example.com', password: 'b' },
  { id: 3, name: 'Charlie', email: 'charlie@work.com', password: 'Ch@rl1e!' },
  { id: 4, name: 'Diana', email: 'diana', password: 'D123456' },
  { id: 5, name: 'Edward', email: 'edward@', password: 'edwardpassword' },
  { id: 6, name: 'Fiona', email: 'fiona123', password: 'fionaP@ss' },
  { id: 7, name: 'George', email: 'george@example.com', password: 'g' },
  { id: 8, name: 'Hannah', email: 'hannah@hann.com', password: 'HannahPass123!' },
  { id: 9, name: 'Ivan', email: 'ivan', password: 'IvanIvanIvan' },
  { id: 10, name: 'Julia', email: 'julia@julia', password: 'ju@123' },
  // ... 更多用户
];
 
const validUsers = users.filter(user => {
  // 使用正则表达式验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  // 密码长度至少为6个字符
  return emailRegex.test(user.email) && user.password.length >= 6;
});
 
console.log(validUsers);
2.3.4、链式调用:计算员工的平均薪资增长

       假设我们有一个员工薪资记录的数组,我们想要找出过去两年内薪资增长超过10%的员工,并且计算他们的平均薪资增长百分比。

// 示例4:计算员工的平均薪资增长
 
const employees = [
  { id: 1, name: 'Alice', salary: 5000, salaryTwoYearsAgo: 4000 },
  { id: 2, name: 'Bob', salary: 6500, salaryTwoYearsAgo: 7000 },
  { id: 3, name: 'Charlie', salary: 8000, salaryTwoYearsAgo: 6500 },
  { id: 4, name: 'David', salary: 7200, salaryTwoYearsAgo: 6000 },
  { id: 5, name: 'Eve', salary: 9500, salaryTwoYearsAgo: 8200 },
  { id: 6, name: 'Frank', salary: 6800, salaryTwoYearsAgo: 5800 },
  { id: 7, name: 'Grace', salary: 7800, salaryTwoYearsAgo: 7200 },
  { id: 8, name: 'Heidi', salary: 9200, salaryTwoYearsAgo: 8500 },
  { id: 9, name: 'Ivan', salary: 6300, salaryTwoYearsAgo: 5500 },
  { id: 10, name: 'Judy', salary: 8600, salaryTwoYearsAgo: 7800 },
  // ... 更多员工
];
 
const averageSalaryGrowth = employees
  .filter(employee => {
    const growth = (employee.salary - employee.salaryTwoYearsAgo) / employee.salaryTwoYearsAgo;
    return growth > 0.10;
  })
  .map(employee => {
    const growth = (employee.salary - employee.salaryTwoYearsAgo) / employee.salaryTwoYearsAgo;
    return growth * 100; // 转换为百分比
  })
  .reduce((totalGrowth, growth) => totalGrowth + growth, 0) / employees.length;
 
console.log(`The average salary growth over the past two years is: ${averageSalaryGrowth.toFixed(2)}%`);


三、总结

       用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。


       更多前端好文:各种前端问题的技巧和解决方案


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

相关文章
|
15天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
111 2
|
5天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
14 1
|
14天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
15天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
15 2
|
15天前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
|
18天前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
15 2
|
18天前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
18天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
15天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
16天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
11 0