有人能够流利地使用Javascript向我解释这里发生了什么简单的事情 [英] Can someone fluent in Javascript explain to me whats going on here SIMPLY

问题描述

我正在学习udemy课程，并且遇到了改变窗口背景的代码。事情是功能randColor失去了我。我想知道到底发生了什么。

我知道一个名为randColor的函数被声明，然后函数本身返回一个函数+＃但我试图理解它是如何发生的逻辑。有一个HASH符号被添加，我相信它也是一个IIFE正确的？

我非常感谢帮助！

  document.querySelector（button）。addEventListener（click，function（）{
 document.body.style.background = randColor（）; 
 $）
 
 
函数randColor（）{
 return'＃'+（函数co（lor）{return（lor + = 
 [0,1 ，2,3,4,5,6,7,8,9， 'A'， 'b'， 'C'， 'd'， 'E'， 'F'] [Math.floor（的Math.random（ ）* 16）]）
&&（lor.length == 6）？lor：co（lor）;}）（''）; 
 
  

解决方案

目标是生成Hex格式的随机颜色。我试图解释你给我们提供的代码：

当调用 randColor 时，它被添加到调用堆栈中然后暂停等待嵌套函数的调用完成。

嵌套函数 co（lor）是IIFE它被递归地调用。
最初传入一个空字符串，并为其分配本地 lor 变量。

Math.floor（Math.random（）* 16） - 生成0到15之间的数字，分别为
数组的索引 [0,1,2,3,4,5,6,7,8,9，'a'，'b'，'c'，'d' ， 'E'， 'F'] 。在每一步中，数组中的一个新符号被添加到前面作为参数传入的本地 lor 字符串中。如果长度小于6，则更新后的字符串会被传递给新的调用。

嵌套函数的递归将使用 lor添加到调用堆栈对象这样的值（例如）：

  5aTh46（顶部，最后一个呼叫， ）
 5aTh4 
 5aTh 
 5aT 
 5a 
 5（第一个呼叫）
  

当第六次调用后本地 lor 变量的长度等于6时，则基本条件 lor。 length == 6 被实现，并且从调用堆栈的顶部返回 5aTh46 字符串。因此，对于第五次调用，我们有

return（lor + =
[0,1,2,3,4,5 ，6,7,8,9，'a'，'b'，'c'，'d'，'e'，'f'] [Math.floor（Math.random（）* 16）]）
&& （lor.length == 6）？ lor / * = 5aTh4 * /：co（lor）/ * = 5aTh46 * /;

lor.length == 6 为false，因为本地 lor 等于 5aTh4 。因此，在第5次调用之后返回由第6次调用返回的 5aTh46 ，等等，直到最终值 5aTh46 为止作为 co（lor）的调用结果返回并添加到内的＃字符串> randColor 。最后我们得到＃5aTh46 。

PS。这就是我的理解。如果您了解事件循环和 IIFE 这个解释听起来很简单：）

Im taking a course on udemy and I came across this code that changes the background of a window. The thing is the function randColor loses me. Id like to know exactly whats going on.

I know a function called randColor is declared, then the function itself RETURNS a function + # but I am trying to understand the logic of how it all happens. There is a HASH symbol that is added and I believe its also an IIFE correct?

I very much appreciate the help!

document.querySelector("button").addEventListener("click", function(){
  document.body.style.background = randColor();
})


function randColor(){
  return '#' + (function co(lor){   return (lor +=
    [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
    && (lor.length == 6) ?  lor : co(lor); })('');
}

解决方案

The goal is to generate a random color in the Hex format. My attempt to explain the code you provided us with:

When randColor is called it is added to the call stack and then gets paused waiting for the nested function's calls to complete.

That nested function co(lor) is IIFE and it is called recursively. Initially an empty string is passed in and the local lor variable is assigned to it.

Math.floor(Math.random()*16) - generates numbers from 0 to 15 which are the indexes of the array [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']. At each step a new symbol from the array is added to the local lor string passed in as a parameter earlier. Updated string is passed further into a new call if its length is fewer than 6.

The nested function's recursion adds to the call stack objects with lor values like this (for example):

5aTh46 (top, last call, gets popped out first)
5aTh4
5aTh
5aT
5a
5      (first call)

when the length of the local lor variable gets equal to 6 after the 6th call, then base condition lor.length == 6 is fulfilled and 5aTh46 string is returned from the top of the call stack. So, for the 5th call we have

return (lor += [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'] [Math.floor(Math.random()*16)]) && (lor.length == 6) ? lor /* = 5aTh4*/ : co(lor) /* = 5aTh46*/;

lor.length == 6 is false since local lor is equal to 5aTh4. So, 5aTh46 returned by the 6th call is returned after the 5th call as well and so forth untill value 5aTh46 is finally returned as a result of co(lor)'s calls and added to the # string inside randColor. In the end we get #5aTh46.

PS. That's how I understand it. If you get the concepts of event loop and IIFE this explanation may sound simple :)

这篇关于有人能够流利地使用Javascript向我解释这里发生了什么简单的事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！