网站建设与网页设计试卷,光效网站,程序员培训多少钱,沈阳网站建设优秀公司JavaScript常用小技巧#xff08;js优化#xff09;常见JS操作1、解构交换两数2、短路赋值3、if 判断优化4、 switch 判断优化6、动态正则匹配Number1、幂运算2、安全计算String1、反转字符串、判断是否回文数2、数组求和3、初始化二维数组Object1、对象遍历2、冻结对象3、解…
JavaScript常用小技巧js优化常见JS操作1、解构交换两数2、短路赋值3、if 判断优化4、 switch 判断优化6、动态正则匹配Number1、幂运算2、安全计算String1、反转字符串、判断是否回文数2、数组求和3、初始化二维数组Object1、对象遍历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); // trueNumber
1、幂运算
Math.pow(2,10); // 1024
2**10; // 10242、安全计算
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 strstr.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); // 103、初始化二维数组
初始化 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,RunoobObject
1、对象遍历
const obj { name: 小豪, age: 25 };
Object.keys(obj).forEach(key {console.log(${key}:${obj[key]});
});
// name:小豪
// age:252、冻结对象
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: ak474、检查对象中是否存在某个属性
const person {id: ak001,name: ak47
}console.log(name in person); // true
console.log(isActive in person); // false5、使用可选链避免访问对象属性报错
const user {id: ak001,name:ak47,
}// 普通访问
console.log(user.userInfo.age); // throw error
// 可选链访问
console.log(user?.userInfo?.age); // undefined6.巧用空值合并(??)
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: noData7、有条件的对象属性
const getObject (hasEmail) {return {name: ZS,...hasEmail { email : johndoe.com }}
}const obj getObject(true);
console.log(user); // { name: ZS, email: johndoe.com }const obj1 getObject(false);
console.log(userWithoutEmail); // { name: ZS }
