JS的优化技巧

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

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

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

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

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

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

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

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

复杂逻辑推荐使用对象映射或者对象 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语句，就会报错
*/