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" }