为什么 JavaScript 不混乱？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《为什么 JavaScript 不混乱？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

我经常听到有人批评前端开发混乱不堪，尤其提到 JavaScript“兼容性太强”，可以随意编写，导致多种实现方式都能达到相同结果。

他们的说法并非完全错误。 确实，JavaScript 允许多种途径实现相同目标。

问题在于，前端开发，特别是 JavaScript，缺乏后端开发那样的成熟设计模式、广泛应用的框架和约定。前端的最佳实践和标准分散在网络各处，导致观点和意见分歧严重。这种缺乏统一性增加了开发和理解的难度，尤其对新手而言。

重点强调

在结束本文之前，我想强调一点：某些概念不明显并不意味着它们不存在，也不意味着你不应该主动学习，至少掌握代码中应用模式的基本知识。 以 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 的工具和函数来添加“label”字段：

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 提供了编写高质量代码所需的所有工具。

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

参考阅读：

• [pt-br] - https://github.com/cezaraugusto/you-dont-know-js
• [en] - https://github.com/getify/you-dont-know-js

今天关于《为什么 JavaScript 不混乱？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！