js优化技巧

一、使用箭头函数简化函数定义

function add(a,b){return a + b;
}//箭头函数
const add = (a,b) => a + b;

二、使用解构赋值简化变量声明

const firstName = person.firstName;
const lastName = person.lastName;//解构赋值
const {firstName,lastName} = person

三、使用模板字面量进行字符串拼接

const greeting = 'Hello, ' + name + '!'//模板字面量简化
const greeting = `Hello,${name}!`;

四、使用展开运算符进行数组和对象操作

//合并数组
const combined = [...array1,...array2];//复制对象
const clone = {...original}

五、使用数组的高阶方法简化循环和数据操作

//遍历数组并返回新数组
const doubled = numbers.map(num => num * 2);//过滤数组
const evens = numbers.filter(num => num % 2 ===0);

六、使用条件运算符简化条件判断

//传统方式
let message;
if(isSuccess){message = 'Operation successful';
}else{message = 'Operation failed';
}//条件运算符简化
const message = isSuccess?'Operation successful':'Operation failed';

七、使用对象解构和默认参数简化函数参数

//传统参数设置默认值
function greet(name){const finalName = name || 'Guest';console.log('Hello,${finalName}!');
}//对象解构
function greet({name='Guest'}){console.log('Hello,${finalName}!');
}

八、使用函数式编程概念如纯函数和函数组合

//纯函数
function add(a,b){return a + b;
}
//函数组合
const multiplyByTwo = value => value * 2;const addFive = value => value + 5;const result = addFive(multiplyByTwo(3));

九、使用对象字面量简化对象的创建和定义

// 传统对象创建
const person = {firstName: 'John',lastName: 'Doe',age: 30,};// 对象字面量简化const firstName = 'John';const lastName = 'Doe';const age = 30;const person = { firstName, lastName, age };

十、使用适当的命名和注释来提高代码可读性

// 不好的
const x = 10; // 设置x的值为10
function a(b) {return b * 2; // 返回b的两倍
}
// 好的
const speed = 10; // 设置速度为10
function double(value) {return value * 2; // 返回输入值的两倍

十一、优雅的写条件判断代码

//普通if else
let txt = '';
if (falg) {txt = "成功"
} else {txt = "失败"
}//三元运算符
let txt = flag ? "成功" : "失败";//多个if else
// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {txt = "成功";
} else if (status == 2) {txt = "失败";
} else if (status == 3) {txt = "进行中";
} else {txt = "未开始";
}//switch case
let txt = '';
switch (status) {case 1:txt = "成功";break;case 2:txt = "成功";break;case 3:txt = "进行中";break;default:txt = "未开始";
}//对象写法
const statusMap = {1: "成功",2: "失败",3: "进行中",4: "未开始"
}//Map写法
const actions = new Map([[1, "成功"],[2, "失败"],[3, "进行中"],[4, "未开始"]
])

十二、封装条件语句

// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {// ...
}
// 好的
shouldShowSpinner(fsm, listNode){return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){//...doSomething
}

十三、函数应该只做一件事

// 不好的
function createFile(name, temp) {if (temp) {fs.create(`./temp/${name}`);} else {fs.create(name);}
}
// 好的
function createFile(name) {fs.create(name);
}
function createTempFile(name) {createFile(`./temp/${name}`)
}
// 不好的
function emailClients(clients) {clients.forEach((client) => {const clientRecord = database.lookup(client);if (clientRecord.isActive()) {email(client);}});
}
// 好的
function emailClients(clients) {clients.filter(isClientRecord).forEach(email)
}
function isClientRecord(client) {const clientRecord = database.lookup(client);return clientRecord.isActive()
}

十四、Object.assign给默认对象赋默认值

// 不好的
const menuConfig = {title: null,body: 'Bar',buttonText: null,cancellable: true
};
function createMenu(config) {config.title = config.title || 'Foo';config.body = config.body || 'Bar';config.buttonText = config.buttonText || 'Baz';config.cancellable = config.cancellable === undefined ?config.cancellable : true;
}
createMenu(menuConfig);
// 好的
const menuConfig = {title: 'Order',buttonText: 'Send',cancellable: true
};
function createMenu(config) {Object.assign({title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true }, config)
}
createMenu(menuConfig);

十五、函数参数两个以下最好

// 不好的
function createMenu(title, body, buttonText, cancellable) {// ...
}
// 好的
const menuConfig = {title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true
};
function createMenu(config){// ...
}
createMenu(menuConfig)

十六、使用解释性的变量

// 不好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
// 好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode)

想对类中的属性进行更多自定义取/增/改的操作时,使用set/get

Object.defineProperty(data1,'age',{set:function(newAge){console.log(this.name+'现在'+newAge+'岁')},get:function(){return 18;}
})
class BankAccount {constructor(balance = 1000) {this._balance = balance;}// It doesn't have to be prefixed with `get` or `set` to be a//getter/setterset balance(amount) {console.log('set')if (verifyIfAmountCanBeSetted(amount)) {this._balance = amount;}}get balance() {console.log('get')return this._balance;}verifyIfAmountCanBeSetted(val) {// ...}
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
// Get balance
let balance = bankAccount.balance;

十七、 让对象拥有私有成员-通过闭包来实现

// 不好的
const Employee = function(name) {this.name = name;
};
Employee.prototype.getName = function getName() {return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined// 好的
const Employee = function(name){this.getName = function(){return name}
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

十八、使用方法链

// 不好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;}save() {console.log(this.make, this.model, this.color);}
}
const car = new Car();
car.setMake('Ford');
car.save();// 好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;// NOTE: return this是为了用链式写法return this;}save() {console.log(this.make, this.model, this.color);// NOTE:return this是为了用链式写法return this;}
}
const car = new Car().setMake('Ford').save();

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

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

相关文章

screen 常用命令

进入screen 123 screen -r 123 退出screen 123(不终止会话) screen -d 123 退出screen 123(终止会话) exit 重命名screen 123(不是id,id是不能改的) screen -S 123 -X sessionname new_n…

机器学习应用 | 使用 MATLAB 进行异常检测(上)

异常检测任务,指的是检测偏离期望行为的事件或模式,可以是简单地检测数值型数据中,是否存在远超出正常取值范围的离群值,也可以是借助相对复杂的机器学习算法识别数据中隐藏的异常模式。 在不同行业中,异常检测的典型…

EasyX图形化学习

1.EasyX是什么&#xff1f; 是基于Windows的图形编程&#xff0c;给用户提供函数接口&#xff0c;最终函数调用会由Windows的API实现。 注&#xff1a;EasyX只适配 c 。 2.头文件&#xff1a; <easyx.h>---只包含最新的函数 <graphics.h>---包含<easyx.h&g…

如何解决ajax浏览器缓存

在使用 Ajax 进行异步请求时&#xff0c;由于浏览器的缓存机制&#xff0c;可能会导致请求结果不符合预期或者无法获取最新的数据。以下是解决 Ajax 中浏览器缓存问题的几种常见方法&#xff1a; 添加时间戳或随机数&#xff1a;可以在每次请求时&#xff0c;给 URL 后添加一个…

集成学习算法随机森林发生过拟合时,如何调整超参数?

当随机森林算法发生过拟合时&#xff0c;可以通过调整以下超参数来解决问题&#xff1a; 1 n_estimators&#xff08;树的数量&#xff09;&#xff1a;增加树的数量可以降低模型的过拟合程度。通过增加树的数量&#xff0c;可以减少每棵树对最终预测结果的影响&#xff0c;从…

动态内存管理(扫盲式讲解)

前言&#xff1a;学好数据结构的三大法宝&#xff1a;指针、结构体、动态内存管理&#xff0c;指针前面讲的已经很细了&#xff0c;大家看完了基本上指针方法是没啥问题的 1 为什么要有动态内存的开辟&#xff1f; 因为动态内存的开辟是在堆区里面的&#xff0c;可以释放&…

Qt之基于QMediaPlayer的音视频播放器(支持常见音视频格式)

Qt自带了一个Media Player的例子,如下图所示: 但是运行这个例子机会发现,连最基本的MP4格式视频都播放不了。因为QMediaPlayer是个壳(也可以叫框架),依赖本地解码器,视频这块默认基本上就播放个MP4,甚至连MP4都不能播放,如果要支持其他格式需要下载k-lite或者LAVFilte…

回归模型中多重共线性问题——逐步回归法、方差膨胀因子(VIF)、因子分析【含代码与解释】

特征之间的多重共线性&#xff0c;是指在回归模型中&#xff0c;自变量之间存在高度的线性相关性&#xff0c;导致回归系数的估计不准确&#xff0c;不稳定&#xff0c;甚至不可信的现象。多重共线性的存在会影响模型的解释能力和预测能力&#xff0c;增加模型的复杂度和不确定…

机器学习---环境准备

一、pySpark环境准备 1、window配置python环境变量 window安装python&#xff0c;配置python环境变量。安装python后,在环境变量path中加入安装的路径&#xff0c;cmd中输入python&#xff0c;检验python是否安装成功。 注意&#xff1a;如果使用的是anaconda安装的python环境…

MySql MVCC 详解

注意以下操作都是以InnoDB引擎为操作基准。 一&#xff0c;前置知识准备 1&#xff0c;MVCC简介 MVCC 是多版本并发控制&#xff08;Multiversion Concurrency Control&#xff09;的缩写。它是一种数据库事务管理技术&#xff0c;用于解决并发访问数据库的问题。MVCC 通过创…

Matlab使用基础

基本命令 clear all %清除Workspace中的所有变量 clc %清除Command Window中的所有命令 %和%%是注释基础函数 abs()%取绝对值 char(65)%将ASCII码数值变成字符 num2str(65)%将里面的内容变成字符串 length()%字符串长度&#xff0c;不把/0的长度计算进去 矩阵 A[1 2 3;4 5 …

C语言-指针运算

1 1 2&#xff1f; 给一个指针加1表示要让指针指向下一个变量 int a[10]; int *p a; *(p 1) —>a[1]如果指针不是指向一片连续分配的空间&#xff0c;如数组&#xff0c;则这种运算没有意义 指针运算 这些算术运算可以对指针做&#xff1a;给指针加、减一个整数&…

python循环遍历指定路径下所有文件夹和文件

可以使用Python的内置库os和os.path来遍历文件夹。以下是一个简单的示例&#xff0c;该示例遍历给定目录下的所有文件和文件夹&#xff0c;并打印出文件类型和名称。 import osdef print_files(path):for root, dirs, files in os.walk(path):for file in files:print(os.path…

MinIO使用

MinIO基于Apache License v2.0开源协议的对象存储服务&#xff0c;可以做为云存储的解决方案用来保存海量的图片&#xff0c;视频&#xff0c;文档。由于采用Golang实现&#xff0c;服务端可以工作在Windows,Linux, OS X和FreeBSD上。配置简单&#xff0c;基本是复制可执行程序…

Python 有趣的几个案例

1 有趣的回文数 **题目需求&#xff1a;**对于任何自然数&#xff0c;将它自身和它的倒序数&#xff08;反转过来&#xff09;相加&#xff0c;再将得到的和与它的倒序数相加&#xff0c;一直重复&#xff0c;最终总会得到一个回文数。 提示&#xff1b;回文数&#xff0c;如 …

GUI的简单概述和基本使用

GUI的概念 1&#xff0c;到目前为止&#xff0c;我们编写的都是控制输入的程序&#xff0c;操作使用非常不直观&#xff0c;采取一直方式让效果呈现在窗口上。 2&#xff0c;GUI及图形界面指采用图像方式显示的用户界面&#xff0c;与早期计算机的命令行界面相比&#xff0c;…

p标签显示不全并且实现自动换行

之前的代码 发现效果是这样的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5561e9dbe4b64cf49c85fcbac3f2c7c8.png) # 修改 添加word-wrap: break-word;"实现自动换行 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/59a9b5ef89eb4d0dbeae1cae…

【SpringCloud】通过Redis手动更新Ribbon缓存来解决Eureka微服务架构中服务下线感知的问题

文章目录 前言1.第一次尝试1.1服务被调用方更新1.2压测第一次尝试1.3 问题分析1.4 同步的不是最新列表 2.第二次尝试2.1调用方过滤下线服务2.2压测第二次尝试2.3优化 写到最后 前言 在上文的基础上&#xff0c;通过压测的结果可以看出&#xff0c;使用DiscoveryManager下线服务…

程序员如何开发高级python爬虫?

之前我有写过一篇“高级爬虫和低级爬虫的区别”的文章&#xff0c;我们知道它并非爬虫领域中专用术语。只是根据爬虫的复杂性来断定是否是高级爬虫。以我个人理解&#xff1a;高级爬虫是可能具有更复杂的功能和更高的灵活性的爬虫。下面我们围绕高级爬虫来了解下有趣的事情。 低…

从输入URL到页面加载的全过程

从输入URL到页面加载的全过程 输入URL&#xff0c;并按下回车 浏览器检查浏览器缓存、系统缓存、路由器缓存&#xff0c;如果缓存中有&#xff0c;则直接显示页面&#xff0c;如果没有进行下一步 根据URL通过DNS进行域名解析&#xff0c;获取IP地址 DNS解析过程&#xff1a;是一…