高级前端开发需要知道的 25 个 JavaScript 单行代码

1. 不使用临时变量来交换变量的值

例如我们想要将 a 于 b 的值交换

let a = 1, b = 2;// 交换值
[a, b] = [b, a];// 结果: a = 2, b = 1

这行代码使用数组解构赋值的方式来交换两个变量的值,无需定义新的临时变量。这个巧妙的技巧可让代码看起来更简洁明了。语法[a, b] = [b, a]通过解构右侧的数组并将其分配给左侧来实现交换它们的值。

2. 对象解构,让数据访问更便捷

const { name, age } = { name: '张三', age: 23 };// 结果: name = '张三', age = 23

这里使用对象解构赋值的方式将对象中的属性直接提取到新的变量中。这种方法简化了访问对象属性的过程,并增强了代码的可读性。

3. 浅克隆对象

const originalObj = { name: '张三', age: 24 };const clonedObj = { ...originalObj };// 结果: clonedObj = { name: '张三', age: 24 }
// 此时改变 clonedObj 的属性,将不会影响到原始对象 originalObj

通过使用扩展运算符 ( ...) 创建originalObj浅克隆对象。此技术将所有可枚举的自身属性从原始对象复制到新对象。

4. 合并对象

const obj1 = { name: '张三' };
const obj2 = { age: 22 };const mergedObj = { ...obj1, ...obj2 };// 结果: mergedObj = { name: '张三', age: 22 }

与克隆类似,通过扩展运算符obj1和合并obj2为一个新的对象。如果有重叠的属性,则最后一个对象的属性将覆盖前一个对象的属性。

5. 清理数组

const arr = [ 0, 1, false, 2, '', 3 ];const cleanedArray = arr.filter(Boolean);// 结果: cleanedArray = [1, 2, 3]

通过Array.prototype.filter()函数并使用Boolean函数作为回调。它将会从数组中删除所有假值( 0falsenullundefined''NaN)。

6. 将 NodeList 转换为数组

const nodesArray = [ ...document.querySelectorAll('div') ];

通过扩展运算符NodeListdocument.querySelectorAll函数的返回值) 转换为 JavaScript 数组,从而能够使用数组的map方法filter去操作查找到的元素。

7. 检查数组是否满足指定条件

例如我们要判断一个数组中是否存在负数

const arr = [ 1, 2, 3, -5, 4 ];// 数组中是否有负数
const hasNegativeNumbers = arr.some(num => num < 0);// 结果: hasNegativeNumbers = true

Array.prototype.some()函数用于检查数组中是否至少有一个元素,通过所提供的回调函数实现的测试(此处判断是否是负数,返回true表示通过)

另外,还可以使用Array.prototype.every()来检查数组的所有元素是否全部通过测试(此处判断是否是正数)

const arr = [ 1, 2, 3, -5, 4 ];// 数组元素是否全部为正
const allPositive = arr.every(num => num > 0);// 结果: allPositive = false

8. 将文本复制到剪贴板

navigator.clipboard.writeText('Text to copy');

通过使用 Clipboard API 以编程方式将文本复制到剪贴板。这是一种最新的复制方法,可让文本复制变得无缝且高效(但目前各大浏览器支持度还不是很高,需要考虑兼容性问题)。

9. 删除数组重复项

const arr = [1, 2, 2, 3, 4, 4, 5];const unique = [...new Set(arr)];// 结果: unique = [1, 2, 3, 4, 5]

这里利用了Set对象存储的值会保持唯一,以及扩展运算符能将Set转换回数组的特性。这是一种优雅的删除数组中重复项的方式。

10. 取两个数组的交集

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6, 8];// 取两个数组中公共的元素
const intersection = arr1.filter(value => arr2.includes(value));// 结果: intersection = [2, 4]

此示例通过使用Array.prototype.filter()函数去查找arr1arr2中的公共元素。传入的回调函数会检查arr2是否包含arr1的每一个元素,从而得到两个数组的交集。

11. 求数组元素的总和

const arr = [1, 2, 3, 4];// 求总和
const sum = arr.reduce((total, value) => total + value, 0);// 结果: sum = 10

此示例使用Array.prototype.reduce()方法将数组中所有的值全部累加起来。reduce方法接收一个回调函数和一个初始值(即前一个回调函数累加值的初始值),这个回调函数有两个参数:累加值total和当前值value。它将会遍历数组所有元素,将每个元素添加到总和中(总和初始为0)。

12. 根据指定条件判断,是否给对象的属性赋值

const condition = true;
const value = '你好,世界';// 如果条件为真,则将 value 变量的值赋给 newObject.key 属性
const newObject = {...(condition && {key: value})};// 结果: newObject = { key: '你好,世界' }

此案例使用扩展运算符 (...) 与短路求值(&&),将属性有条件地添加到对象中。 如果condition为真,则会将{key: value}扩展到对象中;否则不进行任何操作。

13. 使用变量作为对象的键

const dynamicKey = 'name';
const value = '张三';// 使用一个动态的变量作为 key
const obj = {[dynamicKey]: value};// 结果: obj = { name: '张三' }

这种语法称为计算属性名,它允许使用变量作为对象的键。方括号内的dynamicKey表达式会计算其值,以将其用作属性名称。

14. 离线状态检查器

const isOnline = navigator.onLine ? '在线' : '离线';// 结果: isOnline = '在线' 或 '离线'

这段代码使用三元运算符检查浏览器的在线状态(navigator.onLine),如果为真则返回'在线',否则返回'离线'。这是一种动态检查用户网络连接状态的方法。

15. 离开页面弹出确认对话框

window.onbeforeunload = () => '你确定要离开吗?';

这行代码与windowonbeforeunload事件挂钩,当用户离开页面时会弹出一个确认对话框,一般用于防止用户因未保存更改就关闭页面而导致数据丢失。

16. 对象数组,根据对象的某个key求对应值的总和

const arrayOfObjects = [{x: 1}, {x: 2}, {x: 3}];// 指定要求和的 key值
const sumBy = (arr, key) => arr.reduce((acc, obj) => acc + obj[key], 0);// 传入 'x',求元素对象 key 为 'x' 的值的总和
sumBy(arrayOfObjects, 'x'));// 结果: 6

sumBy函数使用Array.prototype.reduce()对数组中元素特定键的值求和。这是一种根据给定键计算对象数组总和的灵活方法。

17. 将 url 问号后面的查询字符串转为对象

const query = 'name=John&age=30';// 将字符串解析为对象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));// 结果: parseQuery = { name: 'John', age: '30' }

此示例将一个查询字符串转换为了一个对象。其中URLSearchParams会进行字符串解析,它将返回一个可迭代对象,然后在通过Object.fromEntries将它转换为对象,从而使 URL 参数检索变得方便多了。

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

const seconds = 3661; // 一小时是 3600 秒,多出 61 秒const toTimeString = seconds => new Date(seconds * 1000).toISOString().substr(11, 8);toTimeString(seconds));// 结果: '01:01:01'

此示例将秒数转换为 HH:MM:SS 格式的字符串。它通过给定的秒数加上时间戳起始点来创建一个新的 Date 对象,然后将其转换为 ISO 字符串,并提取时间部分得到结果。

19. 求某对象所有属性值的最大值

// 数学、语文、英语成绩
const scores = { math: 95, chinese: 99, english: 88 };const maxObjectValue = obj => Math.max(...Object.values(obj));// 最高分
maxObjectValue(scores));// 结果: 99

此示例用于在对象所有的属性值中找到最大值。其中Object.values(obj)将对象所有的属性值提取为数组,然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。

20. 判断对象的值中是否包含有某个值

const person = { name: '张三', age: 30 };const hasValue = (obj, value) => Object.values(obj).includes(value);hasValue(person, 30);// 结果: true

hasValue函数会检查对象的值中是否存在指定的值。其中Object.values(obj)用于获取对象中所有的值的数组,然后通过includes(value)检查指定值是否在该数组中。

21. 安全访问深度嵌套的对象属性

const user = { profile: { name: '张三' } };const userName = user.profile?.name ?? '匿名';// 结果: userName = '张三'

此代码首先演示了如何使用可选链运算符 (?.) 安全地访问user.profilename值。如果user.profileundefinednull,它会短路并返回undefined,从而避免潜在的类型错误TypeError

然后,使用空值合并运算符 (??) 检查左侧是否为nullundefined,如果是,则使用默认值'匿名'。这可确保后备值不会是其他假值(如''0)。这对于访问数据结构中可能不存在某些中间属性的深层嵌套属性非常有用。

在 JavaScript 中,空值合并运算符 (??) 和逻辑或 (||) 都可以用于提供默认值,但它们处理假值的方式有所不同。

在上面的例子中,如果把??改为||,行为会稍微有些不同。||的左侧如果为假值,它将会返回右侧的值。JavaScript 中的假值包括nullundefined0NaN''(空字符串)和false。这意味着||左边的值不仅仅是nullundefined,如果还是其他假值,那么都将返回右侧的值。

22. 条件执行语句

const isEligible = true;isEligible && performAction();// 如果 isEligible 为真,则调用 performAction()

利用逻辑 AND ( &&) 运算符,函数performAction()仅会在isEligible结果为true时执行。这是一种无需if语句即可有条件地执行函数的简介语法。这对于根据某些条件执行函数非常有用,尤其是在事件处理或回调中。

如果想要条件赋值,则可以这样写

const isEligible = true;
let value = '';// 需要将赋值语句用用括号括起来
isEligible && (value = '条件达成');// 如果 isEligible 为真,则执行 (value = '条件达成') 语句

23. 创建包含值为指定数字范围的数组

例如创建数字5以内所有正数的数组

const range = Array.from({ length: 5 }, (_, i) => i + 1);// 结果: range = [1, 2, 3, 4, 5]

Array.from()从类数组或可迭代对象创建一个新数组。这里,它接受一个具有属性length和映射函数的对象。映射函数 ( (_, i) => i + 1) 使用索引 ( i) 生成从 1 到 5 的数字。下划线 ( _) 是一种惯例,表示未使用该参数。

24. 提取文件扩展名

const fileName = 'example.png';const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2);// 结果: getFileExtension = 'png'

这个案例实现了从字符串中提取文件扩展名。它先找到最后一次出现点号 (.) 位置,然后截取从该位置到末尾的字符串。位运算符 (>>>) 确保了即使未找到点号 (.) ,操作也是安全的,因为在这种情况下仍然会返回一个空字符串。

25. 切换元素的 class

const element = document.querySelector('.my-element');const toggleClass = (el, className) => el.classList.toggle(className);toggleClass(element, 'active');

toggleClass函数使用classList.toggle()方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在,则删除,否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素,例如菜单根据用户操作显示或隐藏。

以上 25 个 JavaScript 单行代码,以简短高效的方式提供强大的功能。希望您今天能有所收获!

文章转载自:灯会发光

原文链接:https://www.cnblogs.com/liuhangui/p/18251649

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

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

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

相关文章

使用 Azure AI Document Intelligence 创建智能文档处理

简介 借助 Azure AI 文档智能中的预生成模型&#xff0c;无需自行训练模型&#xff0c;即可从常见表单和文档中提取数据。 公司中&#xff0c;表单种类繁多&#xff0c;如发票、收据、调查表等。你可能想知道&#xff0c;从这些文档中提取姓名、地址、金额等信息需要多少工作…

linux下C语言如何操作文件(五)

对(四)增加的函数编写测试代码。 static void file_oper_demo_01(const char* path){log_yellow("command: %s\n", path);String* str = build_string(path);char pspace[2] = { , \0};struct string_segment *cmds = str->split_by(str, pspace);if(cmds == NUL…

APaaS:智能制造助手

资金不足、IT基础架构薄弱...... 车间业务需求不断地在增加...... 都在说数字化&#xff0c;都在说转型...... 随着企业竞争的日益激烈和市场环境的快速变化&#xff0c;企业需要一个灵活、高效、快速响应市场变化的新平台。在这样的背景下&#xff0c;APaaS应运而生&#x…

RocketMQ快速入门:集成java客户端实现各类消息发送|异步、同步、顺序、单向、延迟、事务(五)附带源码

0. 引言 前面的章节中&#xff0c;我们已经针对rocketmq的基本概念和消息发送、消费流程进行了讲解&#xff0c;但实际在开发中如何实现rocketmq的接入、实现消息发送、消费还没有落实&#xff0c;那么今天&#xff0c;我们继续来学习如何基于java client集成rocketMQ 1. 集成…

火车头采集中英文翻译教程

火车头采集怎么实现数据中文翻译成英文&#xff0c;或英文翻译成中文&#xff1f; 火车头采集没有自带的翻译功能&#xff0c;但可以使用插件功能来实现&#xff1a;导入翻译插件&#xff08;例如谷歌翻译插件&#xff0c;百度翻译插件等&#xff09;&#xff0c;然后在火车头…

视频媒介VS文字媒介

看到一篇蛮有思考意义的文章就摘录下来了&#xff0c;也引起了反思 目录 一、视频的定义 二、”视频媒介“与”文字媒介”作对比 1.形象 VS 抽象 2.被动 VS 主动 三、视频的缺点-【更少】的思考 1.看视频为啥会导致【更少的思考】 2.内容的【浅薄化】 3.内容的【娱乐化…

西安市工业倍增引导基金子基金申报条件流程和材料程序指南(2024年)

一、基本情况 产业投资基金是以产业发展为首要目标&#xff0c;围绕经济社会发展规划和产业发展政策&#xff0c;发挥“有效市场”作用&#xff0c;支持重点领域、重点产业、重点区域&#xff08;如&#xff1a;全市六大支柱产业、五大新兴产业领域成熟期重点规模以上企业以及“…

分布式+可移植,上云后降本增效的关键

试想一下&#xff1a;如果没有云计算&#xff0c;商业将会是什么样子&#xff1f; 云计算和多云战略的出现为全球企业带来了革命性的变化。然而&#xff0c;虽然技术已经发展了这么多年&#xff0c;但“多云”所固有的复杂性仍然是企业面临的主要痛点。选择多云战略的企业&…

【尚庭公寓SpringBoot + Vue 项目实战】用户管理(十五)

【尚庭公寓SpringBoot Vue 项目实战】用户管理&#xff08;十五&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】用户管理&#xff08;十五&#xff09;1、业务介绍2、接口实现2.1、根据条件分页查询用户列表2.2、根据ID更新用户状态 1、业务介绍 用户管理共包含两…

辐射传输方程和图形学渲染方程的区别

文章目录 概述辐射传输方程图形学渲染方程主要区别小结 概述 因为最近在看NeRFs相关的论文,所以接触到一些图形学内容, 在一篇介绍Radiance Filed 文章中&#xff0c;看到了关于图形渲染方程的内容&#xff0c;但搜索下来&#xff0c;文中给出的方程形式和其他地方的似乎不一致…

关于生成式人工智能的发展

近年来&#xff0c;人工智能的发展引起了广泛关注&#xff0c;尤其是在深度学习领域&#xff0c;以深度神经网络为代表的人工智能技术已经取得了重大突破。然而&#xff0c;深度神经网络也有其局限性。深度学习技术在处理一些复杂问题时表现良好&#xff0c;但在解决更广泛的任…

PS系统教学20

油漆桶工具 作用&#xff1a;上色工具的一种 上一些纯色、图案 纯色 新建图层填充区域的源设置为前景色设置前景色为想要的颜色左键单机填充&#xff08;altdelete&#xff09;如果要添加背景色&#xff08;Ctrldelete&#xff09;也可以与选区工具结合使用 可以与快速选择…

大模型日报2024-06-17

大模型日报 2024-06-17 大模型资讯 大模型产品 大模型论文 VideoGPT: 图像与视频编码器结合的视频理解 摘要: VideoGPT结合图像和视频编码器的优势&#xff0c;提升视频理解性能。通过自适应池化策略处理视频&#xff0c;改进多项视频基准测试表现&#xff0c;并引入VCGBench-D…

【React】如何使用npm run start命令运行两个服务

我们开发前端项目时&#xff0c;有时候需要本地 mock 数据&#xff0c;这样就需要启动两个服务&#xff0c;一个是接口服务&#xff0c;一个是前端项目。可以安装一个插件来帮助我们通过一个命令启动两个服务。 方法一 添加& npm run server 注意&#xff1a;Windows系统…

牛客热题:最长回文子串

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;最长回文子串题目链接方法一&am…

鸿蒙开发:【启动本地PageAbility】

启动本地PageAbility PageAbility相关的能力通过featureAbility提供&#xff0c;启动本地Ability通过featureAbility中的startAbility接口实现。 表1 featureAbility接口说明 接口名接口描述startAbility(parameter: StartAbilityParameter)启动Ability。startAbilityForRes…

Linux之网络编程

Linux之网络编程 TCP协议 TCP(Transmission ControlProtocol) : 传输控制协议&#xff0c;是一个 面向连接的、可靠的、基于字节流的传输层的协议。TCP 协议建立的是一种点到点的&#xff0c;一对一的可靠连接协议 特点&#xff1a; 数据无丢失数据无失序数据无错误数据无重…

振动分析-3-基于Python的FFT幅值修正与能量修正

幅值修正与能量修正过程&#xff08;更正&#xff09; 参考什么是泄漏&#xff1f; 参考什么是窗函数? 参考使用python实现快速傅里叶变换&#xff08;FFT&#xff09; 参考频谱泄露和窗函数以及加窗后幅度修正和python代码实现 1 快速傅里叶变换(FFT) 离散傅里叶变换(discr…

84. 柱状图中最大的矩形(hard)

单调栈&#xff1a; 就是说&#xff1a;固定高度&#xff0c;寻找最长宽度&#xff0c;如何找最长宽度&#xff0c;需要从heights[i] 这一个元素开始向左向右两边寻找heights[j] <heights[i]的j元素&#xff0c;也就是找两边第一小于heights[i]的元素。此过程中就是利用到单…

PCA 在图像分析上的应用

同一物体旋转角度求取 直接上代码&#xff1a; import cv2, os import numpy as np import timedef perform_pca(image, num_components):# 将图像转换为浮点型img_float np.float32(image)img_flatten img_float.reshape(-1, 2)# 计算均值和协方差矩阵mean, eigenvectors …