每个前端都应该掌握的7个代码优化的小技巧,前端开发基础面试题

43 阅读3分钟

web浏览器中的javascript

  • 客户端javascript
  • 在html里嵌入javascript
  • javascript程序的执行
  • 兼容性和互用性
  • 可访问性
  • 安全性
  • 客户端框架

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

开源分享:docs.qq.com/doc/DSmRnRG…

代码示例:

// 未优化前的写法
const isConform = (letter) => {
  if (
    letter === "a" ||
    letter === "b" ||
    letter === "c" ||
    letter === "d" ||
    letter === "e"
  ) {
    return true;
  }
  return false;
};

// 优化后的写法
const isConform = (letter) =>
  ["a", "b", "c", "d", "e"].includes(letter);

2.for-offor-in自动遍历

for-offor-in,可以帮助我们自动遍历Arrayobject中的每一个元素,不需要我们手动跟更改索引来遍历元素。

注:我们更加推荐对象(object)使用for-in遍历,而数组(Array)使用for-of遍历

for-of

const arr = ['a',' b', 'c'];
// 未优化前的写法
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  console.log(element);
}

// 优化后的写法
for (const element of arr) {
   console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"

for-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};
// 未优化前的写法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// 优化后的写法
for (const key in obj) {
  const value = obj[key];
  // ...
}

3.false判断

如果你想要判断一个变量是否为null、undefined、0、false、NaN、'',你就可以使用逻辑非(!)取反,来帮助我们来判断,而不用每一个值都用===来判断

// 未优化前的写法
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// 优化后的写法
const isFalsey = (value) => !value;

4.三元运算符代替(if/else

在我们编写代码的时候肯定遇见过if/else选择结构,而三元运算符可以算是if/else的一种语法糖,能够更加简洁的表示if/else

// 未优化前的写法
let info;
if (value < minValue) {
  info = "Value is最小值";
} else if (value > maxValue) {
  info = "Value is最大值";
} else {
  info = "Value 在最大与最小之间";
}

//优化后的写法
const info =
  value < minValue
    ? "Value is最小值"
    : value > maxValue ? "Value is最大值" : "在最大与最小之间";

5.函数调用的选择

三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数,

function f1() {
  // ...
}
function f2() {
  // ...
}
// 未优化前的写法
if (condition) {
  f1();
} else {
  f2();
}

// 优化后的写法
(condition ? f1 : f2)();

6.用对象代替switch/case选择结构

switch case通常是有一个case值对应一个返回值,这样的结构就类似于我们的对象,也是一个键对应一个值。我们就可以用我们的对象代替我们的switch/case选择结构,使代码更加简洁

const dayNumber = new Date().getDay();

// 未优化前的写法
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";


**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/033ae69882984482aba45d230e4d6c4c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1770723987&x-signature=Nm626GamgwxAIkzemV4AivnZoMc%3D)  

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2170a44d644144cbb79b37daa4a91e48~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1770723987&x-signature=GDl9mBLBNv%2FAh1pHNWmTjUt3T6k%3D)