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语句，就会报错
*/

拓展： 

es6和js的区别

ES6（ECMAScript 2015）是 JavaScript 语言的第六版，也是 ECMAScript 标准的最新版本。它引入了许多新的特性和语法，使得 JavaScript 更加强大和易用。以下是一些 ES6 引入的主要新特性：

1. let 和 const：ES6 引入了 let 和 const 关键字，用于声明块级作用域的变量。与 var 不同，let 和 const 声明的变量不会提升到作用域的顶部，并且它们的作用域仅限于声明它们的块。

2. 箭头函数：ES6 引入了箭头函数，这是一种更简洁的函数定义方式。箭头函数没有自己的 this 绑定，它会捕获其所在上下文的 this 值。

3. 模板字符串：ES6 引入了模板字符串，这是一种更方便的字符串拼接方式。模板字符串使用反引号（`）包围，并且可以在字符串中嵌入变量和表达式。

4. 解构赋值：ES6 引入了解构赋值，这是一种更方便的变量赋值方式。你可以使用解构赋值从数组或对象中提取值，并将它们赋值给变量。

5. 类和继承：ES6 引入了类（class）的概念，使得定义对象和继承更加直观。你可以使用 class 关键字定义类，并使用 extends 关键字实现继承。

6. 模块：ES6 引入了模块（module）的概念，使得你可以将代码分割成可重用的模块。你可以使用 export 关键字导出模块，并使用 import 关键字导入模块。

这些只是 ES6 引入的一些主要新特性，实际上 ES6 还引入了许多其他的新特性和语法，例如 Promise、async/await、Set 和 Map 等。

请注意，虽然 ES6 引入了许多新的特性和语法，但 JavaScript 仍然向后兼容，这意味着你可以在旧版本的 JavaScript 引擎中运行 ES6 代码。然而，为了使用 ES6 的所有新特性，你可能需要使用 Babel 这样的转译器，将 ES6 代码转换为向下兼容的 JavaScript 代码。

TDD软件开发方法是什么？

TDD 是 Test-Driven Development 的缩写，中文通常翻译为测试驱动开发。这是一种软件开发方法，它强调在编写代码之前先编写测试，然后根据测试的结果来编写代码，直到测试通过为止。

 TDD 的基本步骤如下：

1. 编写测试：首先，你编写一个测试来描述你想要实现的功能。这个测试应该失败，因为你还没有编写任何代码来实现这个功能。

2. 编写代码：然后，你编写代码来实现这个功能，直到测试通过为止。

3. 重构代码：最后，你可以重构你的代码，以提高代码的质量和可维护性，而不改变代码的功能。

TDD 的主要优点是它可以确保你的代码是正确的，并且可以提高代码的质量和可维护性。通过先编写测试，你可以确保你的代码满足所有的需求，并且可以更容易地找到和修复错误。通过重构代码，你可以使你的代码更清晰、更易于理解和维护。

TDD 是一种非常有效的软件开发方法，它已经被许多成功的软件项目所采用。然而，TDD 也需要一定的学习和实践，因为它需要你改变你的编程习惯，并且需要使用测试框架来编写和运行测试。

事实上，TDD模式也是一种代码优化技巧精深的有效手段。