前言

这是我参与「第五届青训营」笔记创作活动的第5天，在本次课堂上我们学习了JavaScript代码质量优化之路，做此笔记。

一、本堂课重点内容

JavaScript代码质量优化之路

代码实践1-交通灯
代码实践2-洗牌
代码实践3-分红包

二、详细知识点介绍

JavaScript代码质量优化之路

代码实践1-交通灯

// 定义交通灯颜色变量
let trafficLight = "red";

// 使用if-else语句判断交通灯颜色
if (trafficLight === "green") {
    console.log("绿灯，可以通行");
} else if (trafficLight === "yellow") {
    console.log("黄灯，请准备停车");
} else {
    console.log("红灯，请停车");
}

注释说明：第一行是定义交通灯颜色的变量，第三行是if-else语句判断交通灯颜色，如果是绿灯输出"绿灯，可以通行"，如果是黄灯输出"黄灯，请准备停车"，其他红灯输出"红灯，请停车"。

代码实践2-洗牌

// 定义函数shuffle，用于洗牌
function shuffle(array) {
  // 定义变量i
  var i = array.length,
    // 定义变量j
    j = 0,
    temp;
  // 循环遍历数组
  while (i--) {
    // 随机生成一个下标
    j = Math.floor(Math.random() * (i+1));
    // 交换i和j位置上的数
    temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  // 返回洗牌后的数组
  return array;
}

这段代码实现了一个洗牌函数，用于打乱数组中的元素。在函数中，首先定义了变量i和j，然后使用一个while循环遍历数组，在循环中随机生成一个下标j，将i和j位置上的数互相交换，直到遍历完整个数组。最后返回打乱顺序后的数组。

代码实践3-分红包

const totalAmount = 100;
// 红包个数
const totalNum = 10;
// 用于存储每个红包金额的数组
const amountList = [];

// 随机生成红包金额
for (let i = 0; i < totalNum; i++) {
  // 如果是最后一个红包，则直接使用剩余金额
  if (i === totalNum - 1) {
    amountList.push(totalAmount);
  } else {
    // 随机生成当前红包金额
    const amount = Math.random() * (totalAmount / totalNum);
    amountList.push(amount);
    // 减少剩余金额
    totalAmount -= amount;
  }
}
console.log(amountList);

这段代码实现了一个简单的红包分配算法，使用了 JavaScript 语言。其中，使用了三个变量：totalAmount表示红包总金额，totalNum表示红包个数，amountList用于存储每个红包金额。代码中使用了一个循环来生成每个红包金额，在循环中使用 Math.random() 方法随机生成当前红包金额，并将该金额存入 amountList 数组中，同时减少剩余金额。

三、课后个人总结

本次课程我们学习了JavaScript代码质量优化之路。我们通过三个实践来了解如何优化我们的代码。

首先，我们通过交通灯的例子来学习如何避免使用全局变量。我们发现使用全局变量会导致代码难以维护和测试，因此我们应该尽量避免使用全局变量。

其次，我们通过洗牌算法的例子来学习如何优化算法性能。我们发现使用随机数生成器来实现洗牌算法是更高效的做法。

最后，我们通过分红包的例子来学习如何优化代码的可读性。我们发现使用解释性的变量名和函数名能够提高代码的可读性。

总之，通过这些实践我们学会了避免使用全局变量，优化算法性能和提高代码可读性。这些技巧能够帮助我们编写出高质量、易维护和高效率的代码。

【跟着月影学 JavaScript（五） | 青训营笔记】

前言