当前位置: 首页 > news >正文

JavaScript常用小技巧(js优化)

JavaScript常用小技巧(js优化)

  • 常见JS操作
    • 1、解构交换两数
    • 2、短路赋值
    • 3、if 判断优化
    • 4、 switch 判断优化
    • 6、动态正则匹配
  • Number
    • 1、幂运算
    • 2、安全计算
  • String
  • 1、反转字符串、判断是否回文数
    • 2、数组求和
    • 3、初始化二维数组
  • Object
    • 1、对象遍历
    • 2、冻结对象
    • 3、解构赋值,动态属性名
    • 4、检查对象中是否存在某个属性
    • 5、使用可选链避免访问对象属性报错
    • 6\.巧用空值合并(??)
    • 7、有条件的对象属性

常见JS操作

1、解构交换两数

不使用临时变量的情况下,交换两数

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

2、短路赋值

初始化参数,并赋予其默认值

let param = test_param || []; 

3、if 判断优化

if(param === 1 || param === 2 || param === 3){// do something
}
// 考虑使用数组进行优化
if([1, 2, 3].includes(param)){// do something
}

4、 switch 判断优化

switch (param) {case '1': {// do somethingbreak;}case '2': {// do somethingbreak;}default: {// do somethingbreak;}
}

使用对象进行优化

const Utils = {'1': () => {// do something},'2': () => {// do something},
},Utils[param];

6、动态正则匹配

**eval 生成正则表达式 **

let str = 'hello world ';
let reg1 = '/hello/g';
let reg2 = '/world/g';eval(reg1).test(str); // true
eval(reg2).test(str); // true

Number

1、幂运算

Math.pow(2,10); // 1024
2**10; // 1024

2、安全计算

js中进行数字计算时候,会出现精度误差的问题,如两个小数相乘

0.1*0.2; //  0.02000000000000000
0.1*0.2 === 0.02; // false

封装一个乘法计算函数

function safeAccumulate(arg1, arg2) {var m = 0, s1 = arg1.toString(), s2 = arg2.toString();try {m += s1.split(".")[1].length;} catch (e) {}try {m += s2.split(".")[1].length;} catch (e) {}return (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);
}

String

1、反转字符串、判断是否回文数

// 反转字符串
const reverse =str=>str.split('').reverse().join('');
reverse('hello world');//  'dlrow olleh'// 判断是否回文数
let str = 'dlrow olleh'
str === reverse('hello world'); //  // true//  str.split('') ['h', 'e', 'l', 'l', 'o', ' ', 'o', 'l', 'l', 'e', 'h']

2、数组求和

[1, 2, 3, 4].reduce((a, b) => a + b);  // 10

3、初始化二维数组

初始化 5 * 5 二维数组

new Array(5).fill(0).map(()=> new Array(5).fill(0));//[[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0],[0, 0, 0, 0, 0]]

**fill() 方法用于将一个固定值替换数组的元素 **

// fill() 方法用于将一个固定值替换数组的元素  array.fill(value, start, end)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
// Banana,Orange,Runoob,Runoob

Object

1、对象遍历

const obj = { name: '小豪', age: 25 };
Object.keys(obj).forEach(key => {console.log(`${key}:${obj[key]}`);
});
// name:小豪
// age:25

2、冻结对象

Object.freeze() 冻结对象

let obj = { name: '小豪', age: 25 };
Object.freeze(obj);obj.age = 18; // 25 修改失败
delete obj.age; // false 无法删除

3、解构赋值,动态属性名

const product = {id: 'ak001',name: 'ak47'
}const { name: weaponName } = product;console.log('weaponName:', weaponName); // weaponName: ak47// 通过动态key进行解构赋值
const extractKey = 'name';
const { [extractKey]: data } = product;console.log('data:', data); // data: ak47

4、检查对象中是否存在某个属性

const person = {id: 'ak001',name: 'ak47'
}console.log('name' in person); // true
console.log('isActive' in person); // false

5、使用可选链避免访问对象属性报错

const user = {id: 'ak001',name:'ak47',
}// 普通访问  
console.log(user.userInfo.age); // throw error
// 可选链访问
console.log(user?.userInfo?.age); // undefined

6.巧用空值合并(??)

let data = undefined ?? 'noData;
console.log('data:', data); // data: noDatadata = null ?? 'noData';
console.log('data:', data); // data: noDatadata = 0 ?? null ?? 'noData';
console.log('data:', data); // data: noData// 当我们根据变量自身判断时
data ??= 'noData';
console.log('data:', data); // data: noData

7、有条件的对象属性

const getObject= (hasEmail) => {return {name: 'ZS',...hasEmail && { email : 'john@doe.com' }}
}const obj = getObject(true);
console.log(user); //  { name: "ZS", email: "john@doe.com" }const obj1 = getObject(false);
console.log(userWithoutEmail); //  { name: "ZS" }

相关文章:

JavaScript常用小技巧(js优化)

JavaScript常用小技巧(js优化)常见JS操作1、解构交换两数2、短路赋值3、if 判断优化4、 switch 判断优化6、动态正则匹配Number1、幂运算2、安全计算String1、反转字符串、判断是否回文数2、数组求和3、初始化二维数组Object1、对象遍历2、冻结对象3、解…...

【项目实战】MySQL 5.7中的关键字与保留字详解

一、什么是关键字和保留字 关键字是指在SQL中有意义的字。 某些关键字(例如SELECT,DELETE或BIGINT)是保留的,需要特殊处理才能用作表和列名称等标识符。 这一点对于内置函数的名称也适用。 二、如何使用关键字和保留字 非保留关…...

Git图解-常用命令操作

目录 一、前言 二、初始化仓库 三、添加文件 四、Git 流程全景图 五、Git工作流程 六、工作区和暂存区 七、查看文件状态 八、查看提交日志 九、查看差异 十、版本回退 十一、管理修改 十二、修改撤销 十三、删除文件 十四、分支管理 十五、项目分支操作 十六、…...

LeetCode096不同的二叉搜索树(相关话题:卡特兰数)

目录 题目描述 解题思路 代码实现 进出栈序列理解卡特兰数分析策略 相关知识 参考文章 题目描述 给你一个整数 n ,求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种?返回满足题意的二叉搜索树的种数。 示例 1: …...

软件测试7

一 CS和BS软件架构 CS:客户端-服务器端,BS:浏览器端-服务器端 区别总结: 1.效率:c/s效率高,某些内容已经安装在系统中了,b/s每次都要加载最新的数据 2.升级:b/s无缝升级&#xff0c…...

12 结构:如何系统设计框架的整体目录?

到现在,我们已经将 Gin 集成到框架 hade 中,同时又引入了服务容器和服务提供者,明确框架的核心思想是面向服务编程,一切皆服务,所有服务都是基于协议。后续也会以服务的形式,封装一个个的服务,让…...

假如你知道这样的MySQL性能优化

1. 为查询缓存优化你的查询 大多数的 MySQL 服务器都开启了查询缓存。这是提高性最有效的方法之 一,而且这是被 MySQL 的数据库引擎处理的。当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存中,这样,后续的相同…...

79、ClimateNeRF: Physically-based Neural Rendering for Extreme Climate Synthesis

简介主页物理模拟可以很好地预测天气影响。神经辐射场产生SOTA场景模型。ClimateNeRF 允许我们渲染真实的天气效果,包括雾霾、雪和洪水 ,结果可以通过有物理意义的变量来控制,比如水位 ,这允许人们可视化气候变化的结果将对他们产…...

前端面试题(一)

目录 前言 一、css3实现布局的方式有哪些? 1.flex布局 2.grid布局 二、jquery的扩展机制? 三、jquery动画和css实现动画的本质区别? 四、不使用css的动画,如何实现盒子从左到右移动? 五、使用过的框架&#xf…...

Java基础常见面试题(七)

序列化和反序列化 Java序列化与反序列化是什么? Java序列化是指把Java对象转换为字节序列的过程,而Java反序列化是指把字节序列恢复为Java对象的过程。 序列化: 序列化是把对象转换成有序字节流,以便在网络上传输或者保存在本地…...

【springmvc】报文信息转换器

HttpMessageConverter HttpMessageConverter,报文信息转换器,将请求报文转换为Java对象,或将Java对象转换为响应报文 HttpMessageConverter提供了两个注解和两个类型: RequestBody, ResponseBody, Reques…...

3.5知识点复习

extern:表示声明。 没有内存空间。 不能提升。const:限定一个变量为只读变量。volatile:防止编译器优化代码。volatile int flg 0; register:定义一个寄存器变量。没有内存地址。register int a 10;字符串:C语言中&a…...

湖南中创教育PMP分享项目经理有哪些优势?

项目经理拥有超强的计划能力;具备大局意识;沟通能力特别强;具备更大的灵活性和反应能力以及总结汇报能力 1、超强的计划能力 项目经理几乎无时无刻都在做计划,因此也就更擅长做计划。 项目管理要抓重点,有主次地处理…...

LeetCode:27. 移除元素

给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…...

麻雀算法SSA优化LSTM长短期记忆网络实现分类算法

1、摘要 本文主要讲解:麻雀算法SSA优化LSTM长短期记忆网络实现分类算法 主要思路: 准备一份分类数据,数据介绍在第二章准备好麻雀算法SSA,要用随机数据跑起来用lstm把分类数据跑起来将lstm的超参数交给SSA去优化优化完的最优参数…...

哈希表题目:数组中的 k-diff 数对

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法代码复杂度分析题目 标题和出处 标题:数组中的 k-diff 数对 出处:532. 数组中的 k-diff 数对 难度 4 级 题目描述 要求 给定一个整数数组 nums\texttt{nums}nums 和一个整数 k…...

SAP ERP系统PP模块计划策略2050详解

SAP/ERP系统中面向订单生产的计划策略主要有20和50两个策略,这两个策略都是面向订单生产的计划策略,也是离散制造行业应用比较广泛的策略。它们之间最大差异就是在于20策略完全是由订单驱动,而50策略是预测加订单驱动,本文主要介绍…...

TIA博途中将硬件目录更改为中文的具体方法演示

TIA博途中将硬件目录更改为中文的具体方法演示 基本步骤可参考如下: 第一步: 第二步: 具体的操作演示: 如下图所示,在所示的目录中找到zh-chs文件夹,删除或修改文件夹的名称均可,这里建议大家修改文件夹的名称,防止以后需要恢复成英文目录, 如下...

【多线程操作】线程池模拟实现

目录 一.线程池的作用 二.线程池的模拟实现 1.线程模块(Thread.hpp): 2.线程锁模块(LockGuard.hpp): 3.任务模块(Task.hpp) 4.线程池核心(ThreadPool.hpp&#xff…...

HBase---Hbase安装(单机版)

Hbase安装单机版 文章目录Hbase安装单机版Master/Slave架构安装步骤配置Hbase1.上传压缩包解压更名修改hbase-env.sh修改hbase-site.xml配置HBase环境变量配置Zookeeper复制配置文件修改zoo.cfg配置文件修改myid配置Zookeeper环境变量刷信息配置文件启动hbase步骤hbase shellMa…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言:多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如&#xff1a…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...