JavaScript单行技巧:高效处理数据

本文翻译自 10 one-liners that will change how you think about JavaScript forever,作者:Tari Ibaba, 略有删改。

本文介绍JavaScript单行程序的独特数据处理能力,单行技巧可以帮助我们更简洁、更高效地处理数据。这些技巧不仅提升了代码的可读性,也减少了代码行数,使代码更加紧凑。以下是一些JavaScript单行技巧,用于高效处理数据,附带相应的代码示例。

像这样令人惊叹的单行程序显示了您对语言的掌握及其独特的数据处理能力。️

今天我们介绍有一些关于JavaScript的有趣的事情,大多数开发人员可能都没这样使用过。

下面程序中,我从17行命令行转换到一个单行的功能语句。

转换后:

转换后的代码相对要清晰优雅,你可以清楚地看到数据是如何从输入到输出。

求一组数字的平均值

通过reduce将数组的总和除以它的长度,我们可以计算出数字的平均值。

js 复制代码
const average = array => array.reduce((total, num) => total + num, 0) / array.length;

将URL的查询字符串部分转换成对象

这个示例展示了如何将查询字符串转换成对象。URLSearchParams会解析字符串,并返回一个可迭代的对象,之后通过Object.fromEntries将其转换为对象,使得URL参数的检索更加便捷。

js 复制代码
const query = 'name=XXX&age=18';

// 将字符串解析为对象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));

// 结果: parseQuery = { name: 'XXX', age: '18' }

将秒数转换为时间格式的字符串

此示例展示了秒数到 HH:MM:SS 字符串的转换过程。通过创建一个 Date 对象,并根据秒数设置其时间值,最后格式化输出。

scss 复制代码
const seconds = 9000; // 一小时是 3600 秒,多出 61 秒

const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);

toTimeString(seconds);  // '02:30:00'

反转字符串

转换后:

ID分组

按特定的对象属性对数组进行分组:

使用示例:

代码执行效果:

生成随机UUID

这里有有基本算术、幂、随机值、方法、位移位、正则表达式、回调函数、递归、求幂......等一起工作。

生成随机十六进制颜色

1行生成一个随机的十六进制颜色:

数组相等

用一行代码检查数组是否相等。

❌ 11行:

✅ 1行:

✅ 或者:

电子邮件

电子邮件验证都是关于正则表达式的:

还有更全面的验证:

将JSON转换为map

snake转换为camel case

轻松地从蛇式转换为骆驼式,无需临时变量。

最后

很多操作都集中在一个语句里;从输入到输出,不断地处理,流畅地进行各种操作。这就是JavaScript单行程序的强大之处。


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

相关推荐
JasonSJX6 分钟前
海海软件正式发布全新 DRM-X官网 Next.js 重构、多语言升级与 SEO 优化,助力全球数字版权保护
开发语言·javascript·安全·重构·视频防录屏·开源drm·加密保护课程
wulijuan88866612 分钟前
Vue 组件的通信方式有哪些?
前端·javascript·vue.js
k093313 分钟前
vue中view-design的校验及各种坑
前端·vue.js·view design
乘风gg19 分钟前
企业级 Prompt 工程实战指南(下):构建可复用 Prompt 架构平台
前端·面试·架构
Kyl2n26 分钟前
【密码口令保存小工具】
javascript·css·css3
宇擎智脑科技33 分钟前
AntV G6、X6 与 React Flow 深度对比:核心差异与大模型时代的应用场景分析
前端·人工智能·react.js·前端框架
山核桃&17°33 分钟前
基于 Vue + Node.js 批处理bat脚本实现多环境一键部署
运维·前端·自动化
AC赳赳老秦34 分钟前
云原生AI趋势:DeepSeek与云3.0架构协同,提升AI部署性能与可移植性
大数据·前端·人工智能·算法·云原生·架构·deepseek
kilito_0135 分钟前
js实现 移动动画 封装
javascript
程序哥聊面试40 分钟前
React + TS 初始化新项目报错解决方法
前端·react.js·npm