Javascript箭头函数中的参数名称

Question

I was reading up on Promise types for Javascript, and I am stumped by the purpose of div in the .then(...)

 function go() { showCircle(150, 150, 100).then(div => { div.classList.add('message-ball'); div.append("Hello, world!"); }); } function showCircle(cx, cy, radius) { let div = document.createElement('div'); div.style.width = 0; div.style.height = 0; div.style.left = cx + 'px'; div.style.top = cy + 'px'; div.className = 'circle'; document.body.append(div); return new Promise(resolve => { setTimeout(() => { div.style.width = radius * 2 + 'px'; div.style.height = radius * 2 + 'px'; div.addEventListener('transitionend', function handler() { div.removeEventListener('transitionend', handler); resolve(div); }); }, 0); }) } 

 .message-ball { font-size: 20px; line-height: 200px; text-align: center; } .circle { transition-property: width, height, margin-left, margin-top; transition-duration: 2s; position: fixed; transform: translateX(-50%) translateY(-50%); background-color: red; border-radius: 50%; } 

 <button onclick="go()">Click me</button> 

I would like to understand the significance of "div" (though I tried renaming it, and the .then(...) works fine, however an anonymous function () does not).

Answer 1

'div' here in your code showCircle(150, 150, 100).then(div => { } ); is the data that is returned from your promise function ShowCircle. In general, in an arrow function, anything on the left hand side of your lambda expression (=>) is your input paramaters for the function.

div => {
//doSomething here
}

is

function nameFunction(div){
//doSomething here
    }

In a promise then case, the input supplied to the function is the return value from the promise. Here the param is named as div and holds the return value from ShowCircle().