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;
// 输出: 7

const 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.com",
  money: 1024,
  place: "HangZhou"
};

({ name: form.name, age: form.age, place: form.place } = asycData);
/* 在解构的同时进行赋值，赋值字段较少的时候，我们可以用这个，
当赋值字段较多的时候，我们仍然推荐使用for...in 

注意，嵌套赋值需要在外面包裹圆括号，不然js直接遇到{},会直接
解析成js语句，就会报错
*/