2024年最全写高质量 JS 变量的5种最佳做法(1)，2024年最新校园前端面试题

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

}

return false;

}

现在，middle和middleItem变量仅存在于使用变量的作用域。 他们的生命周期和生命周期极短，因此更容易推断其作用。

3.在接近位置声明变量

---

我强烈希望在函数主体的顶部声明所有变量，尤其是在函数较大的情况下。 不幸的是，这种做法的缺点是使我在函数中使用的意图变量变得混乱。

尽量在接近使用位置的地方声明变量。这样，我们就不用猜了:嘿，我看到了这里声明的变量，但是它在哪里被使用了。

假设我们有一个函数，该函数的主体中包含很多语句。 我们可以在函数的开头声明并初始化变量结果，但是只能在return语句中使用result：

function myBigFunction(param1, param2) {

const result = otherFunction(param1);

let something;

/*

• calculate something…

*/

return something + result;

}

问题在于result 变量在开头声明，但仅在结尾使用，没有足够的理由在开始时声明该变量。

让我们通过将result 变量声明移到return语句之前来改进这个函数

function myBigFunction(param1, param2) {

let something;

/*

• calculate something…

*/

const result = otherFunction(param1);

return something + result;

}

现在，result变量在函数中有了它的正确位置。

4.好的命名意味着易于阅读

---

从良好的变量命名的众多规则中，我区分出两个重要的规则。

第一个很简单：使用驼峰命名为变量取名，并且在命名所有变量时保持一致。

const message = ‘Hello’;

const isLoading = true;

let count

有特殊含义的数字或字符串，变量命名通常是大写的，在单词之间加下划线，以区别于常规变量

const SECONDS_IN_MINUTE = 60;

const GRAPHQL_URI = ‘http://site.com/graphql’;

第二条规则，在变量命名中，我认为这是最重要的：变量名称应明确无歧义地指出哪些数据保存了该变量。

以下是一些很好的变量命名示例：

let message = ‘Hello’;

let isLoading = true;

let count;

message 名称表示此变量包含某种消息，很可能是字符串。

isLoading相同，布尔值指示加载是否在进行中。

count变量表示保存一些计数结果的数字类型变量。

选择一个明确表明其角色的变量名。

举个例子，这样就能看出区别了。假设看到了这样一个函数:

function salary(ws, r) {

let t = 0;

for (w of ws) {

t += w * r;

}

return t;

}

你能总结出这个函数的作用吗?像ws、r、t、w这样的变量名几乎没有说明它们的意图。

相反，相同的函数，但使用了解释性变量命名

function calculateTotalSalary(weeksHours, ratePerHour) {

let totalSalary = 0;

for (const weekHours of weeksHours) {

const weeklySalary = weekHours * ratePerHour;

totalSalary += weeklySalary;

}

return totalSalary;

}

该代码清楚地说明了它的作用。 这就是良好命名的力量。

5. 引入中间变量

---

我比较少注释代码。我更喜欢编写代码即解释的风格，通过对变量、属性、函数和类的良好命名来表达意图。

编写自文档代码的一个好习惯是引入中间变量。 在处理长表达式时很有用。

考虑以下表达式：

const sum = val1 * val2 + val3 / val4;

我们引入两个中间变量，增强长表达式的可读性:

const multiplication = val1 * val2;

const division = val3 / val4;

const sum = multiplication + division;

另外，让我们回顾一下二进制搜索实现算法：

function binarySearch(array, search) {

let left = 0;

let right = array.length - 1;

while(left <= right) {

const middle = Math.floor((left + right) / 2);

const middleItem = array[middle];

if (middleItem === search) {

return true;

}

if (middleItem < search) {

left = middle + 1;

} else {

right = middle - 1;

}

}

return false;

}

这里middleItem是一个保存中间项目的中间变量。 使用中间变量MiddleItem而不是直接使用项目访问器array [middle]可读性更好。

与缺少middleItem解释变量的函数版本进行比较:

function binarySearch(array, search) {

let left = 0;

let right = array.length - 1;

while(left <= right) {

const middle = Math.floor((left + right) / 2);

if (array[middle] === search) {

return true;

}

if (array[middle] < search) {

left = middle + 1;

} else {

right = middle - 1;

}

}

return false;

}

这个版本，没有解释变量，可读性就比较差。

6. 总结

---

变量无处不在，我们总是先声明，分配和使用变量。

在 JS 中使用变量时，第一个好的做法是使用const，否则使用let

试着保持变量的作用域尽可能小。同样，将变量声明往尽可能靠近使用位置。

不要低估好的命名的重要性。始终遵循这样的规则:变量名应该清晰而明确地表示保存变量的数据。不要害怕使用较长的名字:最好是清晰而不是简洁。

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容