DDR爱好者之家

JavaScript代码简化技巧实例解析
站长资源 2024/11/24 佚名
40 1538
DDR爱好者之家 Design By 杰米

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

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

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

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

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

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

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

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

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

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

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

摆脱循环

考虑以下循环：

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 函数。

删除if..else

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

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

三元运算符

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

考虑以下：

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

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

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

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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米