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

为什么 JavaScript 不混乱？

DDD

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

原创

911人浏览过

为什么 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”加上商店名称。

YXPHP6.0 豪华版

YXPHP6系统可以看做是一个模版平台,而且它又能独立工作. 而且YXPHP6系统也不需要数据库支持. 你可以开发自己的模板,也可以同步官方的模板后进行自己的二次开发,前提是您对YXPHP6要有一定的了解.YXPHP6不仅可以用作企业建站,甚至是blog,只要是您能想到的,YXPHP6几乎都可以胜任. 因为YXPHP6系统本身与模板之间可以说是独立运行的.也就是说,不管你做什么样的网站或者是应用,

查看详情

先来看一个我认为“不太理想”的实现，因为它没有充分利用 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"
    }
]

登录后复制