函数或变量 vl_simplenn_tidy 无法识别。_代码简化改进秘籍，JS函数式编程技巧

函数式编程可以使您的代码更简单。简单意味着代码易于阅读和理解，可测试和可维护。

在本文中，我描述了一些函数式编程(FP)技巧，您可以使用它们来简化代码，从而使代码更好。

1.摆脱临时变量和不变性原则

函数式编程倾向于不变性，这种不变性原则意味着在初始化变量之后不会更改它们的值。同样，创建对象或字符串后，您也无需对其进行突变。

如果使用JavaScript编程，则所有变量定义都应使用 const。对于正在阅读您的代码的任何人，常量定义都可以让您高枕无忧：它保证永远不会重新分配变量，因为重新分配是不可能的，所以读者的大脑从跟踪和识别代码中重新分配的负担中解脱出来。

何时需要更改值呢？首先，您可以拥有一个数组：

const fruits = ['apple', 'orange', 'banana']

要将新水果添加到此列表中，该怎么办？解决方案是用新的或更新的值初始化一个新的常量变量，我们可以使用点扩展符复制现有的 fruits 值：

const allFruits = [...fruits, 'pineapple']

您应该在代码的任何地方都遵循不变性原则，因为如果这样做，您的代码将变得更干净。

您知道 fruits 变量的值永远不会改变，并且您第一次看到变量的声明时就知道这一事实，初始化后，在任何可见的 fruits 变量处，您都知道。

2.摆脱循环

考虑以下循环：

var list = [];
var i = 0;
while (i < rows.length) {
var row = rows[i];
var message = {
childAddress: row[1],
action: 'switchToBackupNode2',
role: 'edge'
    };
    list.push(message);
    i += 1;
}

函数编程方法去掉了while循环，并使用map将行处理为一个列表。

const list = rows.map(r => ({
childAddress: r[1],
action: 'switchToBackupNode2',
role: 'edge'
 }))

除了摆脱循环之外，这段代码还删除了临时变量 row 和 message以及循环变量 i。

结果更具可读性，非常清晰。

为了公平起见，要获得此信任级别，您需要首先了解map函数。map函数在函数式编程中无处不在，因此学习它是过渡到FP的重要步骤。

map是程序员用于列表处理的函数之一。处理列表中的数据是FP的重要组成部分，您还应该学习其他列表处理功能：最重要的是 reduce 和 filter 函数。

3.删除if..else

在我的简化代码的实践中，删除 if 是一个有用的策略。有几种策略可以用于从代码中删除 if 语句，并且应用其中任何一种通常都会得到更清晰、更容易理解的结构。

让我们看一下删除 if 语句的一些策略。

3.1三元运算符

三元运算符是我从变量赋值中去掉 if 语句的主要工具。

考虑以下：

let message;
if (person !== null) {
  message = `hello, ${person}!`
} else {
  message = 'hey there!'
}

上面的代码中有两个问题：

• 我必须使用非const变量 message，因为对于 if 结构，我无法在变量声明中立即给message赋值。
• 考虑到它只完成了声明变量和有条件地为变量赋值的简单任务，代码相当冗长和复杂。

使用三元运算符? 可以在一行中完成相同的工作：

const message = person !== null ? `hello, ${person}!` : 'hey there!'

3.2布尔运算符&&和||

布尔运算符 && 和 || 为 if 语句提供有效的替代方法。

不要这样做：

if (value) {
  doStuff(value)
} else {
  doStuff(1)
}

改进：

doStuff(value || 1)

这里的逻辑或操作符 || 提供了向函数传递默认值的快速方法。每次不知道或不确定变量是否具有值时，都可以使用相同的技巧：使用 ||  作为前缀提供默认值。

这是一个如何使用逻辑与运算符 && 的示例。首先，使用 if 的版本：

if (data) {
  sendData(data.value);
}

然后我们使用 && 删除 if ：

data && sendData(data.value)

在这里，我们使用 && 来首先检查数据变量是否包含值。如果没有这个检查，当没有值时代码就会崩溃(换句话说，值为 null 或 undefined)。

在这里使用这些运算符时，我们依赖布尔表达式的短路求值。&& 和 || 运算符，当第一部分错误时，JavaScript不会计算表达式的后半部分。

Map 和 查找

使用 map 作为查找 list 是替换一系列if语句的有效方法。考虑以下：

let language;
if (country === 'FI') {
	language = 'Finnish'
} else if (country === 'SE') {
	language = 'Swedish'
} else if (country === 'USA') {
  language = 'English (American)'
} else if (country === 'UK') {
  language = 'English (UK)'
} // etc...

更简洁的方法是使用国家/语言对的Map。

const languages = new Map([
  ['FI', 'Finnish'],
  ['SE', 'Swedish'],
  ['USA', 'English (American)'],
  ['UK', 'English (UK)'],
])
const language = languages.get('SE')
console.log(language) // Swedish

第二种实现要简单得多。该代码立即显示出它的意图。另外，它将 language 变量转换为使用 const。

小函数

函数式编程与函数有关，最好编写许多小函数，而不要写一些长函数。将代码分解成更小的模块的主要原因是更小(更短)的代码块更容易独立理解，更小的部件也更容易测试和维护。

借助我在此处显示的技巧，您的代码可以更紧凑。这是一个重要的目标，也是学习这些技巧的绝佳理由，更重要的是，学习函数式编程。

还有更多类似的技巧和策略，让我知道您是否想写第二篇有关其他类似策略的文章。

---

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容(喜欢不点在看，都是耍流氓 -_-)

2. 欢迎加我微信「qianyu443033099」拉你进技术群，长期交流学习...

3. 关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个在看支持我吧，转发就更好了