常用的 js 代码片段

常用的 js 代码片段

    • 1. 不使用临时变量交换两个变量
    • 2. 浅克隆对象
    • 3. 合并对象
    • 3. 过滤数组中的假值
    • 5. NodeList 转换为数组
    • 6. 数组去重
    • 7. 两数组的交集
    • 8. 两数组的差集
    • 9. 两数组的并集
    • 10. 数组求和
    • 11. 对象数组指定属性求和
    • 12. 对象的计算属性
    • 13. 检查联网状态
    • 14. URL 的查询参数转对象
    • 15. 将秒数转换为时间格式的字符串
    • 16. 求某对象所有属性值的最大值
    • 17. 判断对象的值中是否包含有某个值
    • 18. 判断对象的值中是否包含有某个键
    • 19. 判断一个对象是否为空
    • 20. 获取文件扩展名
    • 21. 切换 CSS 类

1. 不使用临时变量交换两个变量

let a = 1;
let b = 2;
[a, b] = [b, a];

2. 浅克隆对象

const obj = {a: 1,b: 2
};
const clone = {...obj
};

3. 合并对象

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

3. 过滤数组中的假值

const arr = [0, 1, 2, 3, false, '', null, undefined, NaN];
const filtered = arr.filter(Boolean);

5. NodeList 转换为数组

const nodeList = document.querySelectorAll('div');
const divList = Array.from(nodeList);
// or
const divList = [...nodeList];

6. 数组去重

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

7. 两数组的交集

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const intersection = arr1.filter(item => arr2.includes(item));

8. 两数组的差集

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const difference = arr1.concat(arr2).filter(v => !arr1.includes(v) || !arr2.includes(v));

9. 两数组的并集

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const union = [...new Set([...arr1, ...arr2])];

10. 数组求和

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, cur) => acc + cur, 0);

11. 对象数组指定属性求和

const arr = [{name: '张三',age: 22},{name: '李四',age: 23},{name: '王五',age: 24}
];function sumBy(arr, key) {return arr.reduce((acc, cur) => acc + cur[key], 0);
}

12. 对象的计算属性

const key = 'name';
const obj = {[key]: '张三'
};

函数调用可作为计算属性吗?

13. 检查联网状态

const isOnline = window.navigator.onLine;

14. URL 的查询参数转对象

const search = '?name=张三&age=22'; // window.location.search 或者 new URL(url).search
const params = Object.fromEntries(new URLSearchParams(search));

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

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 字符串,并提取时间部分得到结果。

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

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

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

const obj = {name: '张三',age: 22
};
const hasValue = (obj, value) => Object.values(obj).includes(value);

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

const obj = {name: '张三',age: 22
};
const hasValue = (obj, key) => Object.keys(obj).includes(key);

19. 判断一个对象是否为空

function isEmpty(obj) {return Object.getOwnPropertyNames(obj).length === 0 && Object.getOwnPropertySymbols(obj).length === 0;
}

20. 获取文件扩展名

const fileName = 'useful-js-snippet.md';
const parseFileExtension = fileName => fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2);

位运算符 (>>>) 确保了即使未找到点号 (.) ,操作也是安全的,因为在这种情况下仍然会返回一个空字符串。

21. 切换 CSS 类

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

classList.toggle() 方法从一个元素的 class 列表中添加或移除某个 class。存在则删除,不存在则添加。

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

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

相关文章

如何使用命令提示符查询电脑相关序列号等信息的操作方法

如何使用命令提示符查询硬盘的序列号? 如果出于保修或其他目的,你想知道硬盘驱动器的序列号,你不想使用第三方应用程序,或者如果你更喜欢命令行方法,则可以使用带有命令提示符的命令来显示硬盘驱动器的序列号。 1. 按…

渗透测试之内核安全系列课程:Rootkit技术初探(六)

今天,我们来讲一下内核安全! 本文章仅提供学习,切勿将其用于不法手段! 目前,在渗透测试领域,主要分为了两个发展方向,分别为Web攻防领域和PWN(二进制安全)攻防领域。在…

用python写出银行管理系统

1 问题 怎么利用已学的python知识简单写出一个银行管理系统,且编写出开户、查询、取款、存款、转账和管理员登录等功能。 2 方法 使用def定义函数、while循环函数、if函数和import函数并带上一些简单的逻辑思维便可以轻松解决这个看似困难实则简单的程序。 # 1.开…

BAT 利用BAT替换SQL文件中的参数成为可执行SQL文件

1. BAT文件 将下面的代码保存成“01_ExeSqlCre.bat”文件。 echo off SETLOCAL ENABLEDELAYEDEXPANSIONIF EXIST %~dp0\10_Program_Exec.sql (DEL /Q %~dp0\10_Program_Exec.sql )CHCP 65001 FOR /F "EOL. TOKENS* DELIMS" %%a IN (dir /a /b *.sql) DO (FOR /F &q…

ACIS中如何求点在FACE参数域内的坐标

1. 点在 FACE 上 如果点在FACE上,可以采用surface的直接接口:surface::param、surface::test_point和surface::test_point_tol。 virtual SPApar_pos surface::param ( const SPAposition & pos, const SPApar_pos & param_guess SpaAcis::…

【SQL Server数据库】数据的增删改操作

目录 一、用SQL语句完成下列功能。 1、新开设一门课程,名叫网络安全与防火墙,学时40,编号为“0118”,主要介绍网络的安全与主要的防火墙软件。 2、先建立monitor表,其结构与student表大致一样.…

华为仓颉编程语言观感

这里写自定义目录标题 相似点(主要与Swift进行对比)不同点亮点 花了半天时间,对华为新出的仓颉编程语言做了简单的了解,整体观感如下: 仓颉语言看起来是一门大而全的语言,吸纳了现存的很多中编程语言的范式…

图书管理系统(详解版 附源码)

目录 项目分析 实现页面 功能描述 页面预览 准备工作 数据准备 创建数据库 用户表 创建项目 导入前端页面 测试前端页面 后端代码实现 项目公共模块 实体类 公共层 统一结果返回 统一异常处理 业务实现 持久层 用户登录 用户注册 密码加密验证 添加图书…

Cesium默认bing地图数据,还支持哪些地图的数据源呢?

传统的前端开发增长乏力了,新兴的web3D方向前端开发需求旺盛,这一块在国外很成熟,在国内兴起不久, 甚至很多前端老铁都没听过,没见过,没有意识到,前端除了框架、vue、uniapp这些烂大街的&#x…

黑马苍穹外卖7 用户下单+订单支付(微信小程序支付流程图)

地址簿 数据库表设计 就是基本增删改查,与前面的类似。 用户下单 用户点餐业务流程: 购物车-订单提交-订单支付-下单成功 展示购物车数据,不需要提交到后端 数据库设计:两个表【订单表orders,订单明细表order_d…

cnpm run dev 报错 Error: Cannot find module ‘fs/promises’

主要原因是babel版本冲突 卸载以下依赖可以解决问题: 之后重新安装babel-loader依赖 可能会报以下错误: 接着安装babel-core依赖 项目顺利启动

【启明智显分享】低成本RISC-V工业级HMI方案推荐

伴随着工业4.0的迅猛发展,工业HMI以方便、快捷的特点逐渐成为工业的日常应用,成为备受追捧的全新多媒体交互设备。 什么是工业HMI?工业HMI是用于工业自动化系统中的人机交互界面,通常由触摸屏、按钮、指示灯、显示器等组成&#…

如何正确使用C#短信接口发送招生短信

群发短信对教育机构来讲虽然是个不错的招生工具,但怎么使用决定着生源转化效率,如果是为了单纯的发短信而发短信效率当然不好,那么如何正确使用招生群发短信呢?技巧才是关键! 教育短信发送较多的就是招生群发短信内容,而运营商对教育行业内容审核一般比较严格,需要短信公司特殊…

新媒体矩阵系统是什么?怎么搭建矩阵系统?

目录 前言: 一、新媒体矩阵分别是什么? 1、横向矩阵 2、 纵向矩阵 二、新媒体矩阵的作用? 1、多元化发展,吸引目标 2、多平台协同,放大宣传效果 3、多平台运营,分散风险 三、怎么做矩阵系统&…

【摄像头标定】双目摄像头标定及矫正-opencv(python)

双目摄像头标定及矫正 棋盘格标定板标定矫正 棋盘格标定板 本文使用棋盘格标定板,可以到这篇博客中下载:https://blog.csdn.net/qq_39330520/article/details/107864568 标定 要进行标定首先需要双目拍的棋盘格图片,20张左右,…

企业微信内嵌H5项目接入聊天功能

产品需求是,在列表中把符合条件的列表接入聊天功能,以下是详细步骤: 1.引入企业微信 <script src"https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script> 2.获取wx签名(必须要) /*** 获取wx签名**/ export function getWxJsApi(data) {r…

RKmedia进行vi-vo模块

一、简介 分析一下rkmedia的代码&#xff0c;给自己加深一下印象 二、代码 2.1 头文件以及定义 首先包含了必要的头文件&#xff0c;以及rkmedia底层的库 static bool quit 是定义了布尔类型的变量来表示这个程序的运行状态 false表示没停止 true表示停止 sigterm_handle…

pdf压缩,pdf压缩在线,pdf文件太大怎么变小

在数字化时代&#xff0c;PDF文档因其跨平台、保持原样、易于阅读和打印等特点&#xff0c;成为了我们日常工作和生活中不可或缺的一部分。然而&#xff0c;随着PDF文件的不断累积&#xff0c;存储空间逐渐变得紧张&#xff0c;特别是在处理大量大型PDF文件时&#xff0c;如何有…

【Python】在 VS Code 里面绘制动图不显示动画的解决办法

在 VS Code 中&#xff0c;可以通过以下步骤来确保动画正确显示&#xff1a; 配置 VS Code 使用适当的绘图后端&#xff1a; VS Code 中使用 matplotlib 的动画功能&#xff0c;需要配置适当的绘图后端。推荐使用 TkAgg 或者 Qt5Agg 后端。你可以在代码中显式指定&#xff1a;…

若依前后端分离项目整合shardingjdbc分表(详细,分片字段订单id)

文章目录 1. 引入Maven依赖2.引入配置文件3.兼容之前的数据库源,使用现在的sharding数据库源&#xff08;shardingjdbc默认的数据源&#xff09;&#xff0c;但是配置好文件之后是没有生效的&#xff0c;需要加配置文件覆盖4. 检测是否成功5. 如何使用&#xff0c;在需要使用的…