| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | id: 587d7b8e367417b2b2512b5e | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | title: 使用函数式编程避免变化和副作用 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | challengeType: 1 | 
					
						
							| 
									
										
										
										
											2020-08-05 16:38:04 +08:00
										 |  |  | forumTopicId: 301228 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | dashedName: avoid-mutations-and-side-effects-using-functional-programming | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --description--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 如果你还没想通,上一个挑战的问题出在 `tabClose()` 函数里的 `splice`。 不幸的是,`splice` 修改了调用它的原始数组,所以第二次调用它时是基于修改后的数组,才给出了意料之外的结果。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 这是一个小例子,还有更广义的定义——在变量,数组或对象上调用一个函数,这个函数会改变对象中的变量或其他东西。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 函数式编程的核心原则之一是不改变任何东西。 变化会导致错误。 如果一个函数不改变传入的参数、全局变量等数据,那么它造成问题的可能性就会小很多。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 前面的例子没有任何复杂的操作,但是 `splice` 方法改变了原始数组,导致 bug 产生。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 回想一下,在函数式编程中,改变或变更叫做 <dfn>mutation</dfn>,这种改变的结果叫做“副作用”(<dfn>side effect</dfn>)。 理想情况下,函数应该是不会产生任何副作用的 <dfn>pure function</dfn>。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 让我们尝试掌握这个原则:不要改变代码中的任何变量或对象。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --instructions--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 填写 `incrementer` 函数的代码,使其返回值为全局变量 `fixedValue` 增加 1 。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `incrementer` 函数不能改变 `fixedValue` 的值(`4`)。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-02-06 04:42:36 +00:00
										 |  |  | incrementer(); | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | assert(fixedValue === 4); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | `incrementer` 函数应返回比 `fixedValue` 变量更大的值。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2021-02-06 04:42:36 +00:00
										 |  |  | const __newValue = incrementer(); | 
					
						
							|  |  |  | assert(__newValue === 5); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-14 21:20:39 -06:00
										 |  |  | 你的 `incrementer` 函数返回的值应该基于全局变量 `fixedValue` 的值。 | 
					
						
							| 
									
										
										
										
											2021-02-06 04:42:36 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | (function () { | 
					
						
							|  |  |  |   fixedValue = 10; | 
					
						
							|  |  |  |   const newValue = incrementer(); | 
					
						
							|  |  |  |   assert(fixedValue === 10 && newValue === 11); | 
					
						
							|  |  |  |   fixedValue = 4; | 
					
						
							|  |  |  | })(); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2020-08-05 16:38:04 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | # --seed--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## --seed-contents--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | // The global variable | 
					
						
							|  |  |  | var fixedValue = 4; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | function incrementer () { | 
					
						
							|  |  |  |   // Only change code below this line | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   // Only change code above this line | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  | # --solutions--
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | var fixedValue = 4 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | function incrementer() { | 
					
						
							|  |  |  |   return fixedValue + 1 | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` |