中国建设工程信息网站,顺企网网址,网站稳定期怎么做,wordpress 网页缩放文章目录 18 个JS优化技巧#xff0c;可以解决 90% 的屎山代码#xff01;#xff01;#xff01;1.箭头函数2.解构赋值变量3.使用模版字面量进行字符拼接4.使用展开运算符进行数组和对象操作5.简化循环6.简化判断7.使用对象解构和默认参数简化函数参数8.使用函数式编程概念… 文章目录 18 个JS优化技巧可以解决 90% 的屎山代码1.箭头函数2.解构赋值变量3.使用模版字面量进行字符拼接4.使用展开运算符进行数组和对象操作5.简化循环6.简化判断7.使用对象解构和默认参数简化函数参数8.使用函数式编程概念如纯函数和函数组合9.使用对象字面量简化对象的创建和定义10.使用适当的命名和注释来提高代码可读性11.条件判断优化if elseswitch case判断封装Object.assign给默认对象赋默认值 函数参数“两个”以下最好12.使用解释形语言13.让对象拥有私有成员-通过闭包来实现 参考https://blog.csdn.net/techforward/article/details/131961841 18 个JS优化技巧可以解决 90% 的屎山代码
1.箭头函数
// 传统函数定义
function add(a, b) {return a b;
}
// 箭头函数简化
const add (a, b) a b;2.解构赋值变量
// 获取对象中的指定属性值
const firstName person.firstName;
const lastName person.lastName;// 直接赋值对象指定属性赋值
const { firstName, lastName } person;console.log(fistName)
console.log(lastName)3.使用模版字面量进行字符拼接
// 传统字符串拼接
const val Hello name !;
// 模板字面量简化
const val Hello ${name}!;4.使用展开运算符进行数组和对象操作
// 合并数组
const combined [...array1, ...array2];
// 复制对象
const clone { ...original };5.简化循环
// 遍历数组
const doubled numbers.map(num num * 2);
// 过滤数组
const evens numbers.filter(num num % 2 0);6.简化判断
// 传统条件判断
let message;
if (isSuccess) {message Operation successful;
} else {message Operation failed;
}
// 三元运算
const message isSuccess ? Operation successful : Operation failed;7.使用对象解构和默认参数简化函数参数
// 传统参数设置默认值
function greet(name) {const finalName name || Guest;console.log(Hello, ${finalName}!);}// 对象解构和默认参数简化function greet({ name Guest }) {console.log(Hello, ${name}!);}8.使用函数式编程概念如纯函数和函数组合
// 纯函数
function add(a, b) {return a b;}// 函数组合const multiplyByTwo value value * 2;const addFive value value 5;const result addFive(multiplyByTwo(3));9.使用对象字面量简化对象的创建和定义
// 传统对象创建
const person {firstName: John,lastName: Doe,age: 30,};// 对象字面量简化const firstName John;const lastName Doe;const age 30;const person { firstName, lastName, age };10.使用适当的命名和注释来提高代码可读性
11.条件判断优化
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 未开始;
}判断封装
// 好的
shouldShowSpinner(fsm, listNode){return fsm.state fetching isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){//...doSomething
}Object.assign给默认对象赋默认值
const menuConfig {title: Order,buttonText: Send,cancellable: true
};
function createMenu(config) {Object.assign({title: Foo,body: Bar,buttonText: Baz,cancellable: true }, config) // {} 目标对象config 源对象
}
createMenu(menuConfig);备注
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。简单来说就是Object.assign()是对象的静态方法可以用来复制对象的可枚举属性到目标对象利用这个特性可以实现对象属性的合并。Object.assign(target, ...sources)参数 target---目标对象source---源对象返回值target即目标对象函数参数“两个”以下最好
// 不好的
function createMenu(title, body, buttonText, cancellable) {// ...
}
// 好的
const menuConfig {title: Foo,body: Bar,buttonText: Baz,cancellable: true
};
function createMenu(menuConfig){// ...
}12.使用解释形语言
13.让对象拥有私有成员-通过闭包来实现
// 不好的
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
