JS的优化技巧

技巧"/>

JS的优化技巧

1. 使用模板字符串进行字符串拼接

// 传统字符串拼接
const tips = "Hello, " + user.name + "!";
// 模板字面量简化
const tips = `Hello, ${user.name}!`;

2. 使用展开运算符操作数组和对象

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

3.使用箭头函数简化函数定义

// 传统函数定义
function sum(a, b) {return a + b;
}// 箭头函数简化
const sum = (a, b) => a + b;

4. 使用解构赋值简化变量声明

// 传统变量声明
const userName = user.name;
const useAge = user.age;// 解构赋值简化
const { name, age } = user;

5. 使用条件运算符简化条件判断

// 传统条件判断
let message;
if (status) {message = '操作成功';
} else {  message = '操作失败';
}// 条件运算符简化
const message =status? '操作成功' : '操作失败';

6. 高阶数组方法简化循环和操作数据

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

7. 简化函数默认参数

// 传统参数设置默认值
function tips(name) {const finalName = name || "Friend";console.log(`Hello, ${finalName}!`);
}// 对象解构和默认参数简化
function tips({name = "Friend"}) {console.log(`Hello, ${name}!`);
}

8. 优化条件判断代码

大量的if else,过多的switch，叠加在一起的三元运算符就是后续维护的噩梦

三元叠加代码示例（不推荐）：

<div>{{status===1?'成功': status===2 ? '失败' : status===3 ? '进行中' : '未开始' }}
</div>

复杂逻辑推荐使用对象映射或者对象 Map 写法，可读性高，更优美

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 statusObj = { 1: "成功", 2: "失败", 3: "进行中", 4: "未开始" };
//调用直接 statusObj[status]

Map 写法❤️

//推荐
const map = new Map([[1, "成功"],[2, "失败"],[3, "进行中"],[4, "未开始"],
]);
// 调用直接 map.get(status)

9.活用for...in给对象赋值

const form = {name: "",age: "",sex: "",address: "",
};// 假设asycData现在是从后端拿到的接口数据，需要赋值给form
const asycData = {name: "路鸣泽",age: 16,sex: "男",address: "翻斗花园",occupationInfo: {no: 102,occ_name: "前端工程师",},checkInfo: {attendance: 15,holidays: 5,absence: 2,},
};//不推荐，如果表单字段很多，就很冗余
form.name = asycData.name;
form.age = asycData.age;
form.sex = asycData.sex;
form.address = asycData.address;/* 有的人觉得用Object.assign就可以了，这么做不好的地方就是我们提交表单的时候，
会提交一堆用不到的数据,后端要是经验不够，未做过滤，就会炸掉。
不推荐 */
Object.assign(form, asycData);//推荐
for (let i in asycData) {form[i] = asycData[i];
}

10.可选链 ？.

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

//不好的
let arr = res && res.data && res.data.list
//好的
let arr = res?.data?.list

const user = {employee: {name: "lion"}
};
user.employee?.name;
// 输出: "lion"
user.employ?.name;
// 输出: undefined
user.employ.name
// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

可选链 这种写法就是防止报错 判断值是否为null或者undefined

11.空合并运算符 (??)

当其左侧操作数为空或未定义时返回其右侧操作数，否则返回其左侧操作数。

const name = null ?? 'black cat';
// 输出: "black cat"const days = 7 ?? 14;
// 输出: 7const place = undefind ?? 'zoo';
// 输出: "zoo"

12.嵌套解构赋值

const form = {name: null,age: null,place: null,
};/* 假设asycData是从后端拿到的数据，现在要给form赋值，
除了for...in,还有一种嵌套解构赋值也是一种不错的选择 */
const asycData = {name: "SuperStar",age: 24,address: "China",email: "xxxxx@163",money: 1024,place: "HangZhou"
};({ name: form.name, age: form.age, place: form.place } = asycData);
/* 在解构的同时进行赋值，赋值字段较少的时候，我们可以用这个，
当赋值字段较多的时候，我们仍然推荐使用for...in 注意，嵌套赋值需要在外面包裹圆括号，不然js直接遇到{},会直接
解析成js语句，就会报错
*/