实际开发中一些实用的JS数据处理方法

news2024/12/25 12:41:42

在这里插入图片描述

写在开头

JavaScript 是一种脚本语言,最初是为了网页提供交互式前端功能而设计的,而现在,通过 Node.js,JavaScript 还可以用于编写服务器端代码。

JavaScript 具有动态性、基于原型的面向对象特性、弱类型、多范式、支持闭包执行环境、支持函数式编程等特点,非常适合编写动态 Web 应用程序。

从语言发展的角度来看,JavaScript 已经成为了现代 Web 开发的核心技术之一。与此同时,JavaScript 的生态系统也在不断壮大,有众多的库和框架可供开发人员选择,包括 Vue.js、React、Angular 等,可以大大提高开发效率和质量。

综上,JavaScript 是一种非常灵活和易于使用的编程语言,适用于动态 Web 应用程序、桌面应用程序、移动应用程序等各种应用场景。它不仅具有良好的性能和可扩展性,还具有丰富的生态系统和强大的社区支持。

常见的一种数据结构:对象数组

对象数组是由多个对象组成的数组。每个对象都包含一些属性和对应的属性值。这些属性可以是字符串、数字、布尔值或其他对象等数据类型。

对象数组通常用于存储和处理相关数据集合。通过使用对象数组,可以轻松地访问和操作数据的各个部分。比如可以使用过滤、映射、排序、分组、聚合计算等技巧,对对象数组中的数据进行加工,以生成需要的数据结构或满足特定业务需求。

例如,可以使用对象数组来存储员工信息,每个员工都是一个包含姓名、工号、职位等属性的独立对象。或者可以使用对象数组来存储电商订单信息,每个订单都是一个包含产品名称、价格、数量等属性的对象。

JavaScript 中,常见的对象数组处理方法有 map()、filter()、sort()、reduce() 等,可以大大简化对象数组的处理过程。总的来说,对象数组是 JavaScript 中常用的一种数据结构,广泛应用于各种应用程序场景。

一些案例参考

1. 数据过滤

在 JavaScript 中,filter() 是一种数组方法,它可以用于过滤一个数组并返回符合特定条件的项。filter() 方法会创建一个新数组,新数组中包含了满足过滤条件的原数组中的所有项。

filter() 方法接受一个回调函数作为参数,并且回调函数可以接受三个参数:当前元素、元素的索引、包含该元素的数组。回调函数应该返回一个布尔值,表示该元素是否应该包含在新数组中。如果回调函数返回 true,则该元素会被包含在新数组中,否则就会被过滤掉。

以下是一些 filter() 方法的使用示例:

const fruits = ['apple', 'banana', 'orange', 'pear'];

// 只保留长度大于 5 的项
const filteredFruits = fruits.filter(fruit => fruit.length > 5);
console.log(filteredFruits); // ['banana', 'orange']

const numbers = [1, 2, 3, 4, 5];

// 只保留奇数
const oddNumbers = numbers.filter(number => number % 2 !== 0);
console.log(oddNumbers); // [1, 3, 5]

const users = [
  { name: 'Tom', age: 18 },
  { name: 'Lucy', age: 22 },
  { name: 'Lily', age: 16 },
  { name: 'Jim', age: 25 }
];

// 只保留年龄大于 20 的用户
const adultUsers = users.filter(user => user.age > 20);
console.log(adultUsers); // [{ name: 'Lucy', age: 22 }, { name: 'Jim', age: 25 }]

总之,filter() 方法是一种非常有用的数组方法,可以帮助开发人员很容易地从一个数组中获取符合特定条件的项。

2. 数据映射

在 JavaScript 中,map() 方法是一种数组方法,它可以用于将数组中的每个元素应用于一个函数,并返回一个新的数组,新数组中的每个元素都是该函数的返回值。该方法不会改变原数组,而是返回一个新的数组。

map() 方法接受一个回调函数作为参数,并且回调函数可以接受三个参数:当前元素、元素的索引、包含该元素的数组。回调函数应该返回一个值,就是将该值添加到新数组中的元素的值。

以下是一些 map() 方法的使用示例:

const numbers = [1, 2, 3, 4, 5];

// 将数组中的每个数字加倍
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

const fruits = ['apple', 'banana', 'orange'];

// 将每个水果名字变成大写字母
const uppercaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(uppercaseFruits); // ['APPLE', 'BANANA', 'ORANGE']

const users = [
  { name: 'Tom', age: 18 },
  { name: 'Lucy', age: 22 },
  { name: 'Lily', age: 16 },
  { name: 'Jim', age: 25 }
];

// 获取所有用户的名字
const names = users.map(user => user.name);
console.log(names); // ['Tom', 'Lucy', 'Lily', 'Jim']

总之,map() 方法是一种非常实用的数组方法,可以将一个数组中的元素转换为新的元素,并返回一个基于原始数组的新数组。

3. 数据排序

const users = [
  { name: 'Tom', age: 18 },
  { name: 'Lucy', age: 22 },
  { name: 'Lily', age: 16 },
  { name: 'Jim', age: 25 },
  { name: 'Bob', age: 30 }
];

// 按照年龄从小到大排序
const sorted = users.sort((a, b) => a.age - b.age);
console.log(sorted); // [{ name: 'Lily', age: 16 }, { name: 'Tom', age: 18 }, { name: 'Lucy', age: 22 }, { name: 'Jim', age: 25 }, { name: 'Bob', age: 30 }]

在 JavaScript 中,sort() 方法是一种数组方法,它可以用于对数组进行排序操作,排序结果可以是升序或降序。sort() 方法按照 Unicode 编码顺序对数组中的元素进行排序,即默认情况下按照字符串形式排序。

sort() 方法返回一个排序后的数组。原始数组不被修改,而是返回一个新的排好序的数组。

sort() 方法可以接受一个可选的比较函数,用于指定排序规则。比较函数应该接受两个参数,代表要进行比较的两个元素,并返回一个数字表示它们的排序顺序。如果返回值为负数,则表示第一个元素应该排在第二个元素之前;如果返回值为正数,则表示第一个元素应该排在第二个元素之后;如果返回值为零,则表示两个元素相对位置不变。

以下是一些 sort() 方法的使用示例:

const numbers = [3, 8, 6, 1, 9];

// 将数字数组进行升序排序
const ascendingNumbers = numbers.sort((a, b) => a - b);
console.log(ascendingNumbers); // [1, 3, 6, 8, 9]

// 将数字数组进行降序排序
const descendingNumbers = numbers.sort((a, b) => b - a);
console.log(descendingNumbers); // [9, 8, 6, 3, 1]

const fruits = ['apple', 'banana', 'orange'];

// 将水果数组进行升序排序
const ascendingFruits = fruits.sort();
console.log(ascendingFruits); // ['apple', 'banana', 'orange']

// 将水果数组进行降序排序
const descendingFruits = fruits.sort((a, b) => b.localeCompare(a));
console.log(descendingFruits); // ['orange', 'banana', 'apple']

总之,sort() 方法是一种功能丰富的数组方法,可以对数组进行排序操作,并支持自定义排序规则。

4. 数据聚合计算

const users = [
  { name: 'Tom', age: 18, gender: 'male' },
  { name: 'Lucy', age: 22, gender: 'female' },
  { name: 'Lily', age: 16, gender: 'female' },
  { name: 'Jim', age: 25, gender: 'male' },
  { name: 'Bob', age: 30, gender: 'male' }
];

// 按照性别分组
const grouped = users.reduce((result, current) => {
  (result[current.gender] = result[current.gender] || []).push(current);
  return result;
}, {});

console.log(grouped);
/*
{
  male: [
    { name: 'Tom', age: 18, gender: 'male' },
    { name: 'Jim', age: 25, gender: 'male' },
    { name: 'Bob', age: 30, gender: 'male' }
  ],
  female: [
    { name: 'Lucy', age: 22, gender: 'female' },
    { name: 'Lily', age: 16, gender: 'female' }
  ]
}
*/
const orders = [
  { product: 'Apple', price: 10, count: 2 },
  { product: 'Pear', price: 8, count: 3 },
  { product: 'Banana', price: 6, count: 4 },
  { product: 'Orange', price: 7, count: 5 }
];

// 计算所有订单的总价格
const total = orders.reduce((result, current) => result + current.price * current.count, 0);
console.log(total); // 102

在 JavaScript 中,reduce() 方法是一种数组方法,它可以用于对数组中的元素逐个应用一个函数并将其结果汇总为单个值。该方法接受一个函数作为参数,并且该函数会接受一个累积值和当前迭代的元素,然后将这两个值组合为一个新的累积值。

reduce() 方法可以用于求和、计算平均值、计算最大值等各种操作。该方法的结果是最终的累积值,可以是数字、字符串或任何 JavaScript 数据类型。

以下是一些 reduce() 方法的使用示例:

const numbers = [1, 2, 3, 4, 5];

// 计算数字数组中所有数字的和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

// 计算数字数组中所有数字的平均值
const average = numbers.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
}, 0);
console.log(average); // 3

const words = ['apple', 'banana', 'orange'];

// 将所有单词合并为一个字符串
const mergedString = words.reduce((accumulator, currentValue) => accumulator + currentValue, '');
console.log(mergedString); // 'applebananaorange'

总之,reduce() 方法是一种非常实用的数组方法,可以对数组中的元素进行累积操作,并返回一个最终的累积值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/549798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang每日一练(leetDay0072) 课程表 I\II Course Schedule

目录 1. 课程表 Course Schedule I 🌟🌟 2. 课程表 Course Schedule II 🌟🌟 🌟 每日一练刷题专栏 🌟 Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一…

电子邮件协议(SMTP,MIME,POP3,IMAP)

SMTP 关键词: 电子邮件协议:SMTP简单邮件传输协议,负责将邮件上传到服务器,采用TCP的25端口,C/S工作。仅传送ASCII码文本 详细介绍: SMTP是一种提供可靠且有效的电子邮件传输的协议。SMTP是建立在FTP文件传输服务上…

学系统集成项目管理工程师(中项)系列23b_信息系统集成及服务管理(下)

1. 信息技术服务 1.1. 供方为需方提供如何开发、应用信息技术的服务,以及供方以信息技术为手段提供支持需方业务活动的服务 1.2. 信息技术咨询服务、设计与开发服务、信息系统集成服务、数据处理和运营服务及其他信息技术服务 2. 信息系统审计 2.1. 收集并评估证…

Golang中的协程(goroutine)

目录 进程 线程 并发 并行 协程(goroutine) 使用sync.WaitGroup等待协程执行完毕 多协程和多线程 进程 进程就是程序在操作系统中的一次执行过程,是系统进行资源分配和调度的基本单位,进程是一个动态概念,是程序在执行过程中分配和管理…

C语言_用VS2019写第一个C语言或C++程序

接上一篇:C语言简述、特点、常用编译器,VS2010写第一个C语言程序 本次来分享用VS2019来写C语言或C程序,也是补充上一篇的知识,话不多说,开始上菜: 此博主在CSDN发布的文章目录:我的CSDN目录&…

微信小程序nodejs+vue+uniapp超市网上购物商城系统

超市购物系统用户端要求在系统的安卓手机上可以运行,主要实现了管理端;首页、个人中心、用户管理、商品分类管理、商品信息管理、商品入库管理、订单信息管理、订单配送管理、订单评价管理、退货申请管理、换货申请管理、系统管理,用户端&…

总结857

学习目标: 月目标:5月(张宇强化前10讲,背诵15篇短文,熟词僻义300词基础词) 周目标:张宇强化前3讲并完成相应的习题并记录,英语背3篇文章并回诵 每日必复习(5分钟&#…

4-《安卓进阶》

4-《安卓进阶》 1 Okhttp2 Retrofit3 Android常用图片库对比4 Glide原理手写图片加载框架思路5 Rxjava6 Android IPC机制(面试八股文之一)6.1.Android中进程和线程的区别6.2.IPC概念6.3.Android序列化与反序列化6.3.Android如何开启多进程?多…

MDIO总线

基于linux-3.14.16 首先要搞清楚总线的位置,即硬件上的位置 如上图,mdio总线是mac和phy之间的连接方式,主要用于配置配置phy的寄存器,所以phy应该是器的一类物理设备,mdio总线驱动和总线设备都是围绕phy工作的。 一…

一图看懂 async_timeout 模块:异步 I/O 的超时设置,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 async_timeout 模块:异步 I/O 的超时设置,资料整理笔记(大全) 🧊摘要🧊模块图🧊类关系图…

chatgpt赋能Python-pythonfrozenset

Python frozenset介绍 在Python中,可以通过frozenset创建不可变集合。与set不同,frozenset一旦被创建就无法修改。frozenset通常用于作为字典的键,因为字典键必须是不可变的。 如何创建frozenset frozenset可以通过将可迭代对象作为参数传…

Blazor实战——Known框架快速开始

Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。 开源地址: https://gitee.com/known/Known 1. 安装项目模板并创建新项目 打开命令行输入如下命令安装和创建。 -- 安装模板 dotnet n…

chatgpt赋能Python-pythonformat的用法小数点位数

Python中的format函数和小数点位数 介绍 Python中的format函数是一种格式化输出字符串的方法,允许你使用占位符来指定输出的格式。你可以使用format函数来格式化字符串,比如确定字符串的长度、插入变量或按特定格式输出字符串。 在本文中,…

Xubuntu22.04之自动调节亮度护眼redshift(一百七十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

chatgpt赋能Python-pythonfib

Pythonfib:一个优秀的计算斐波那契数列的Python函数 斐波那契数列是一种非常有趣也非常常见的数列,它起源于数学但在计算机科学中也经常被用到。Pythonfib是一个优秀的Python函数,可以用来计算斐波那契数列。本文将对Pythonfib进行详细介绍&…

本地电脑搭建Plex私人影音云盘教程,内网穿透实现远程访问

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 转发自CSDN远程穿透的文章:免费搭建Plex家庭影音中心 - 打造超级多媒体中心【公网远程访问…

【红队系列】外网信息收集(二)

红队系列 🔥系列专栏:红队系列 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 📆首发时间:🌴2023年5月20日🌴 🍭作者水平很有限,如果发现错误&…

chatgpt赋能Python-pythondescribe

PythonDescribe:更快、更准确、更易用的Python文档生成工具 介绍 Python是一种在数据科学和Web开发等领域广泛应用的高级编程语言。但是,在编写Python代码时,文档的编写常常被忽视。文档的缺失会使代码难以理解、维护和重复使用。幸运的是&…

基于MAC地址的ACL配置

基于MAC地址的ACL配置 【实验目的】 掌握基于MAC地址的标准ACL的配置。验证配置。 【实验拓扑】 实验拓扑如图1所示。 图1 实验拓扑 设备参数如表所示。 表1 设备参数表 设备 接口 IP地址 子网掩码 默认网关 S1 e0/0 N/A N/A N/A e0/1 N/A N/A N/A PC1 N/…

chatgpt赋能Python-pythonfloat设置精度

Python float设置精度 在Python中,float是一种表示小数的数据类型。但是在某些情况下,我们可能需要设置float的精度,以避免舍入误差造成的问题。在本文中,我们将介绍如何在Python中设置float的精度。 为什么需要设置float的精度…