为什么 JavaScript 不乱？-js教程-PHP中文网

为什么 JavaScript 不乱？

花韻仙語

发布： 2025-01-21 08:06:01

原创

1065人浏览过

为什么 javascript 不乱？

前端开发的沮丧之处

听到有人说前端开发一团糟，我总是感到很沮丧，特别是当他们说 JavaScript“什么都接受”、可以随意编写时，因为我们可以用多种方式达到相同的结果。

事实上，他们并非全错。 确实，JavaScript 可以用多种方式编写，但最终目标相同。

主要问题在于，前端开发和 JavaScript 缺乏后端开发那样的明确设计模式和广泛采用的框架及约定。前端的最佳实践和模式分散在网络上，导致观点和意见不一。这种缺乏统一性增加了开发和理解的难度，尤其对初学者而言。

立即学习“Java免费学习笔记（深入）”；

关键在于学习

为了结束这段牢骚，我想强调一点：仅仅因为某些东西不明显并不意味着它不存在，或者你不应该努力学习至少在代码中应用基本模式。以 JavaScript 为例，许多网站提供了该语言的既定实现和模式，可供开发时参考。你只需要花时间学习，就能理解每种资源的用途和使用时机。例如：Mozilla 的 JavaScript 文档。

代码示例：改进的数组和对象处理

以下代码来自一个真实的生产项目。虽然理论上“没有问题”，运行正常，但实际上，方法可以改进，从而提高可读性和性能。

我们将对代码进行一些调整，使其更符合 JavaScript 文档的建议。这是可行的，因为该语言提供了特定方法/函数来更有效地处理某些情况。

我们将讨论一个基本的 JavaScript 概念：使用数组和对象。代码尽可能简洁，避免不必要的复杂性。

我们从一个模拟的后端 API 返回的对象开始：

const storeslist = [{
  activestories: [
    {
      name: 'starbucks',
      code: 1
    },
    {
      name: 'duck duck coffe',
      code: 2
    }
  ],
  inactivestories: [
    {
      name: 'mac coffe',
      code: 3
    }
  ]
}]

登录后复制

我们需要添加一个名为“label”的新字段，其值为“opened”加上商店名称。

先来看一个我认为“不太理想”的实现，因为它没有充分利用 JavaScript 的最佳工具和函数：

storeslist.reduce((previous, current) => {
  current.activestories.forEach(store => {
    previous.push({
      ...store,
      label: `opened ${store.name}`
    })
  })

  return previous
}, [])

// 结果：
[
    {
        "name": "starbucks",
        "code": 1,
        "label": "opened starbucks"
    },
    {
        "name": "duck duck coffe",
        "code": 2,
        "label": "opened duck duck coffe"
    }
]

登录后复制

这里使用了 .reduce、.forEach 和 .push，只是为了返回一个新的数组。 .flatMap 和 .map 等函数没有被使用，而这些函数是 JavaScript 中非常重要的资源。代码冗长且难以理解。

改进后的代码：

storeslist.flatMap((item) => {
  return item.activestories
}).map((item) => {
  return {
    ...item,
    label: `opened ${item.name}`
  }
})

登录后复制

是不是更简洁？

.flatMap 将数组“扁平化”为单层：

[
    {
        "name": "starbucks",
        "code": 1
    },
    {
        "name": "duck duck coffe",
        "code": 2
    }
]

登录后复制

.map 遍历每个项目，添加“label”属性：

[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

登录后复制

结论

JavaScript 提供了编写高质量代码所需的一切工具。

关键在于学习并正确应用这些概念，而不是为了编码而编码。