5 个 JavaScript 代码优化技巧

在本文中,将介绍 5 个代码优化的技巧,有助于编写更高效、更优雅的代码。这些技巧包括使用扩展运算符简化代码到使用 async/await 处理异步代码等。

1. 使用扩展运算符解构对象和数组

扩展运算符由三个点 ... 表示,可用于对象和数组的解构。对于对象,它允许使用另一个对象的属性子集轻松创建一个新对象。

const numbersObj = { a: 1, b: 2, c: 3 }; 
const newObject = { ...numbersObj, b: 4 }; 
console.log(newObject); // { a: 1, b: 4, c: 3 } 

对于数组,使用扩展运算符可以轻松提取和操作数组元素。

const numbersArray = [1, 2, 3, 4, 5]; 
const newArray = [...numbersArray.slice(0, 2), 6, ...numbersArray.slice(4)]; 
console.log(newArray); // [ 1, 2, 6, 5 ] 

关于解构运算符,如有兴趣可以参阅:

  • JavaScript 解构赋值 5 个常见场景和实例
  • 再谈JavaScript 中的对象解构

2. 使用 async/await 简化异步代码

async/await 是一种简化 JavaScript 中异步代码处理的方法。它允许以一种看起来和行为都像同步代码的方式编写异步代码。

async function getData() { 
const response = await fetch("https://jsonplaceholder.typicode.com/posts"); 
const data = await response.json(); console.log(data); 
} 
getData(); 

3. 使用代理对象进行高级属性访问

JavaScript 中的 Proxy 对象允许拦截和自定义属性访问。这对于高级数据验证、日志记录等非常有用。

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

const target = {}; 
const handler = { 
get: (target, prop) => { console.log(`获取属性:${prop}`); 
return target[prop]; 
}, 
set: (target, prop, value) => { 
console.log(`属性 ${prop} 更新为 ${value}`); 
target[prop] = value; 
}, 
}; 
const proxy = new Proxy(target, handler); 
proxy.name = "DevPoint"; 
console.log(proxy.name); 

4. 使用三元运算符优化条件逻辑

三元运算符是在 JavaScript 中编写简单的 if-else 语句的一种简写方式。这是一种表达条件及其相应结果的简洁有效的方式。

const x = 5; 
const result = x > 0 ? "positive" : "negative"; 
console.log(result); // positive 

它也可以嵌套用于更复杂的条件。

const age = 30; 
const result = age < 18 ? "未成年人" : age >= 18 && age < 60 ? "成年人" : "老年人"; 
console.log(result); // 成年人 

5. 使用 IIFE 保护数据隐私

IIFE 是 Immediately Invoked Function Expression(立即调用函数表达式)的缩写,它是一个在定义时就会立即执行的 JavaScript 函数,并为变量创建私有作用域。这对于保护数据隐私很有用,因为它确保了在IIFE中声明的变量不能从外部访问。

可以使用这种格式为应用程序创建一个包,将代码逻辑放入命名空间以避免变量冲突以保持代码私有,而这个私有包适合以 <script> 标签方式引入到页面。通常可以看到WEB统计代码是以这种方式引入页面。

(function () { 
let key = "这是一个安全密钥"; 
})(); 
console.log(key); // ReferenceError: key is not defined 

IIFE 真正擅长的是创建作用域的能力,IIFE 中的任何变量对外界都是不可见的。减少全局变量的产生,同时也避免了变量名称冲突的机会。

来看一个例子:

(function initGame() { // 无法在 IIFE 外部访问的私有变量 
var lives; 
var player; 
init(); // 在 IIFE 之外无法访问的私有函数 
function init() { 
lives = 5; 
player = "devpoint"; 
} 
})(); 

在这个例子中声明了两个变量,都是私有的,也就是说,只对 IIFE 本身有效。IIFE 以外的任何人都无法访问它。此外,还有一个 init 的方法,外部也不可以访问

 

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

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

相关文章

调用Gensim库训练Word2Vec模型

一、前期工作&#xff1a; 1. 安装Gensim库 pip install gensim 2.安装chardet库 pip install chardet 3. 对原始语料分词 选择《人民的名义》的小说原文作为语料&#xff0c;先采用jieba进行分词 import jieba import jieba.analyse import chardet jieba.suggest_freq…

Sklearn、TensorFlow 与 Keras 机器学习实用指南第三版(三)

原文&#xff1a;Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第六章&#xff1a;决策树 决策树是多功能的机器学习算法&#xff0c;可以执行分类和回归任务&#xff0c;甚至多输出任务。它们…

麻雀搜索算法|Sparrow Search Algorithm(SSA)

在麻雀群体智慧、觅食和反捕食行为的启发下&#xff0c;提出了一种新的群体优化方法&#xff0c;即麻雀搜索算法&#xff08;SSA&#xff09;。 1、简介 在麻雀搜索算法中包含三种类型的麻雀个体&#xff0c;即发现者、跟随者和侦察者&#xff0c;三种类型对应三种行为。发现…

GM8775C——DSI 转双通道 LVDS 发送器

1 产品概述 GM8775C 型 DSI 转双通道 LVDS 发送器产品主要实现将 MIPI DSI 转单 / 双通道 LVDS 功能&#xff0c; MIPI 支持 1/2/3/4 通道可选&#xff0c;每通道最高支持 1Gbps 速率&#xff0c;最大支持 4Gbps 速率。 LVDS 时钟频率高达 154MHz &#xff…

【Eclipse平台】1Eclipse平台总体概览

Eclipse平台总览 欢迎来到【Eclipse平台系列】,本文介绍Eclipse平台的总体概览 文章目录 Eclipse平台总览1. 什么Eclipse开放的架构2. 如何下载Eclipse3. Eclipse的命名规则3. Eclipse的构成3.1 Workbench1. 什么Eclipse Eclipse是一个流行的集成开发环境(Integrated Devel…

Postgresql体系结构

client连接PostgreSQL过程&#xff1a; 1、客户端发起请求 2、主服务postmaster进程负责服务器是否接受客户端的host通信认证&#xff0c;服务器对客户端进行身份鉴别 3、主服务进程为该客户端单独fork一个客户端工作进程postgres 4、客户端与postgres进程建立通信连接&#xf…

ensp实验合集(三)

实验11 无线网设备配置.......................................................... - 97 - 实验12 单臂路由器配置........................................................ - 106 - 实验13 防火墙配置.............................................................…

langgraph学习--创建基本的agent执行器

本文介绍如何使用langgraph创建一个基本的Agent执行器&#xff0c;主要包括下面几个步骤&#xff1a; 1、定义工具 2、创建langchain Agent&#xff08;由LLM、tools、prompt三部分组成&#xff09; 3、定义图形状态 传统的LangChain代理的状态有几个属性: &#xff08;1&#…

centos7 linux 不小心把根目录的内容移到别的目录了

在根目录不小心执行了如下命令&#xff0c;然后发现大部分常用命令不能用了。都在报错 mv * /data/software从网上找了好多帖子&#xff0c;命令都不好使。有的是用/data/software/lib64/ld-linux-x86-64.so.2&#xff0c;/data/software/lib64就不是个目录,只是个软连接&…

git将项目的某次签入遴选(Cherry-Pick)另一个项目

需求&#xff1a;将项目Product&#xff0c;分支feature/platform&#xff0c;签入959294ce6b75ee48c5cb22c46d7398654628a896&#xff0c;遴选到项目BRP&#xff0c;分支dev 第一步&#xff1a;使用原签入生成patch文件&#xff08;git format-patch -1 <commit_hash>&a…

OpenCV学习记录——边缘检测

文章目录 前言一、边缘检测原理二、Canny边缘检测算法三、具体应用代码 前言 在做某些图像处理时&#xff0c;通常需要将识别到的物体边界提取出来&#xff0c;从而帮助我们实现目标检测&#xff0c;这就需要用到边缘检测&#xff0c;例如人脸识别和运动目标的检测都需要先进行…

pdf怎么转成高清图?pdf在线转换器推荐分享

在日常的工作或者学习中&#xff0c;有时候会需要将编辑好的pdf转高清图片&#xff0c;这样更方便我们后续使用&#xff0c;那么怎么将pdf转图片&#xff08;https://www.yasuotu.com/pdftopic&#xff09;还能保持清晰呢&#xff1f;下面介绍一款pdf转换工具&#xff0c;支持p…

使用SPM_batch进行批量跑脚本(matlab.m)

软件&#xff1a;spm8matlab2023bwin11 数据格式&#xff1a; F:\ASL\HC\CBF\HC_caishaoqing\CBF.nii F:\ASL\HC\CBF\HC_caishaoqing\T1.nii F:\ASL\HC\CBF\HC_wangdonga\CBF.nii F:\ASL\HC\CBF\HC_wangdonga\T1.nii clear spmdirD:\AnalysisApps\spm8; datadirF:\ASL\HC\CBF…

Profinet转CANopen主站网关与堡盟编码器通讯案例

Profinet转CANopen主站网关(XD-COPNm20)为CPU与堡盟编码器的通讯提供了CANopen协议向Profinet协议转换互通的桥梁。CANopen是一种基于CAN总线的通讯协议&#xff0c;它被广泛应用于工业自动化领域&#xff0c;而Profinet是一种以太网协议&#xff0c;其优点是高速传输和广泛的可…

【iOS ARKit】手动配置环境探头

在上节中我们已经了解了环境探头以及如何使用自动环境探头&#xff0c;这节一起了解如何使用手动配置环境探头。 在使用自动环境反射时&#xff0c;开发人员无须进行有关环境反射的任何操作&#xff0c;只需要设置自动环境反射即可&#xff0c;其余工作完全由 RealityKit 自动完…

【django】建立python虚拟环境-20240205

1.确保已经安装pip3 install venv 2.新建虚拟环境 python -m venv myenv 3.安装虚拟环境的依赖包 pip install … 4.激活虚拟环境 cd myenv cd Scripts activate 激活activate.bat并进入虚拟环境 进入虚拟环境后&#xff0c;命令行前面显示&#xff08;myenv&#xff0…

如何以管理员身份删除node_modules文件

今天拉项目&#xff0c;然后需要安装依赖&#xff0c;但是一直报错&#xff0c;如下&#xff1a; 去搜这个问题会让把node_modules文件先删掉 再去安装依赖。我在删除的过程中会说请以管理员身份来删除。 那么windows如何以管理员身份删除node_modules文件呢&#xff1f; wi…

SQL语句创建数据库

要创建一个新的数据库&#xff0c;你可以使用以下的SQL语句&#xff1a; sql CREATE DATABASE database_name; 其中&#xff0c;database_name是你希望创建的数据库的名称。例如&#xff0c;如果你想创建一个名为my_database的数据库&#xff0c;你可以使用以下SQL语句&#…

走入SQL世界

目录 一、SQL的定义 二、SQL 的用途 三、创建发布数据库中数据的网站 四、RDBMS 五、数据库表 六、SQL 语句 七、SQL 语句后面的分号 八、SQL中的DML 和 DDL 一、SQL的定义 SQL 是用于访问和处理数据库的一种 ANSI 标准计算机语言&#xff0c;也是结构化查询语言。用来…

某赛通电子文档安全管理系统 44处 反序列化RCE漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…