javascript參數背後的概念是什麼？

Question

讓我試着解釋我奇怪的困惑

我想了解d3.js。我看到很多帶有一些奇怪參數的函數（它們看起來很奇怪，至少對我來說）。

d3.selectAll("p").style("color", function(d, i) { 
    return i % 2 ? "#fff" : "#eee"; 
}); 

• 什麼是d來這裏幹什麼？爲什麼當它沒用時就通過了？
• 從哪裏i（連同值）正在越過？

我也跟着Jan's tutorial並建了一個fiddle。這也有一定的奇函數PARAMS：

 

.attr("cy", function(d) { 
    return y(d.y) 
}) 
 

 

.delay(function(d, i) { 
    return i * del(Math.random()) 
}) 
 

• 從哪裏d（與值一起）獲得通過？

Answer 1

什麼是d在這裏做什麼？爲什麼當它沒用時就通過了？

style函數將使用一組特定的參數調用回調函數。回調不會發生需要第一個參數的事實不會改變style將如何調用它。所以回調必須接受這個論點，但是忽略它。

從哪裏開始i（與價值一起）？

style函數。這就是調用回調函數的原因，所以它決定了回調接收參數的值。

下面是一個函數接受和調用回調的例子，這可能有助於澄清事情。查看評論：

// Here's our function that accepts a callback, just like 
 
// d3's `style` accepts a callback. 
 
function doSomething(callback) { 
 
    // Call the callback with two arguments, 
 
    // a random letter and a random number: 
 
    var letter = String.fromCharCode(65 + Math.floor(26 * Math.random())); 
 
    var number = Math.floor(Math.random() * 100); 
 
    callback(letter, number); 
 
} 
 

 
// Now we call that function, giving it a callback 
 
// that makes use of both of its arguments: 
 
doSomething(function(l, n) { 
 
    console.log("First callback: The letter is: " + l); 
 
    console.log("First callback: The number is: " + n); 
 
}); 
 

 
// Now we call that function, giving it a callback 
 
// that only uses the second argument: 
 
doSomething(function(l, n) { 
 
    console.log("Second callback: The number is: " + n); 
 
});

Answer 2

這些都傳遞給處理程序功能（也稱爲回調）您提供作爲參考的參數。

這裏有一個工作示例：

function main(a, b, callbackFn) { 
 
    callbackFn(a * b); 
 
} 
 

 
main(2, 3, function(result) { 
 
    console.log(result); // = 6 
 
});

你可以從這個當你調用main()，你提供一個匿名函數的引用見。然後在main()內調用匿名函數並傳遞執行的操作結果。

在某些情況下，您可能不需要對操作結果進行任何操作，只需在操作完成時執行一些代碼 - 因此爲什麼您的d變量已提供但未使用。

Answer 3

在D3.js，選擇內部的匿名函數會得到三個值，傳統命名d，i和p（更多關於低於字母），按照這個順序：

1. 第一個值，d ，是數據（單數據）
2. 第二個，i是該數據的索引
3. 第三個是D3 4.x中的節點和D3 3.x中的父級數據索引。

這是如何工作的，點擊「運行的代碼段」：

var testData = [43, 2, 57, 42, 17]; 
 

 
var test= d3.selectAll(".test") 
 
    .data(testData) 
 
    .enter() 
 
    .append("p"); 
 
    
 
test.attr("foo", function(d, i) { console.log("Data: " + JSON.stringify(d), "\nIndex: " + JSON.stringify(i)) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script>

由於指數始終是第二個值，你必須通過d，即使你不用它。

我們可以使用其他的信嗎？

的名字沒有關係，只是順序。傳統上，我們使用「d」，因爲它是「數據」的初始值，「i」是因爲「父母」的「索引」和「p」。

讓我們來測試：

var testData = [43, 2, 57, 42, 17]; 
 

 
var test= d3.selectAll(".test") 
 
    .data(testData) 
 
    .enter() 
 
    .append("p"); 
 
    
 
test.attr("foo", function(foo, bar) { console.log("Data: " + JSON.stringify(foo), "\nIndex: " + JSON.stringify(bar)) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script>