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

为什么 JavaScript 不混乱？

DDD

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

原创

832人浏览过

为什么 javascript 不混乱？

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

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

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

重点强调

在结束本文之前，我想强调一点：某些概念不明显并不意味着它们不存在，也不意味着你不应该主动学习，至少掌握代码中应用模式的基本知识。以 JavaScript 为例，网络上充斥着大量关于该语言既定实现和标准的资源，可供开发者学习借鉴。只要认真学习，你就能理解每种资源的用途及其适用场景。例如：Mozilla 开发者网络 JavaScript 文档。

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

代码示例分析

以下代码摘自一个实际运行的生产项目。虽然理论上“没有问题”，功能正常，但其方法并非最佳，可读性和性能都有提升空间。

我们将对部分代码进行微调，使其更符合 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"
    }
]

登录后复制