不能在一個陣列弄清楚如何「綁定」值加在一起

Question

所以我需要創建一個數組，看起來像這樣

var cols = [ 
     ["#1ABC9C", "0%"], 
     ["#1ABC9C", "33.3%"], 
     ["#EC7063", "33.3%"], 
     ["#EC7063", "66.6%"], 
     ["#3498DB", "66.6%"], 
     ["#3498DB", "100%"] 
]; 

現在，這裏就是我能產生至今

["#000", 0, "#000", 33.333333333333336, "#4AF2A1", 33.333333333333336, "#4AF2A1", 33.333333333333336, "#FC4831", 33.333333333333336, "#FC4831", 100] 

我在這裏所做的是獲取數組中的第二個值，並添加了0，因爲這就是出發點，我也對最後一個值做了同樣的處理，但將其設置爲100

下面是我在「g」 enerate」應該是這樣的陣列

33.3, 66.6, 100 

現在我需要做的是用我得到的值替換第二陣列，以使它看起來像第一的價值觀。有任何想法嗎？值33.3, 66.6, 100是動態的，因此它們可以是25,50,75,100或其他任何值，但它們都是整數。這意味着最終的陣列可以是這樣的

var cols = [ 
     ["#1ABC9C", "0%"], 
     ["#1ABC9C", "25%"], 
     ["#EC7063", "25%"],  
     ["#009DFF", "50%"], 
     ["#009DFF", "50%"], 
     ["#EC7063", "75%"], 
     ["#3498DB", "75%"], 
     ["#3498DB", "100%"] 
]; 

Answer 1

該函數將採用代表顏色的一維字符串數組，並按照您所描述的方式返回帶有一個小數點的顏色和適當百分比的二維數組。檢查瀏覽器中開發人員工具中的控制檯是否有輸出。

function colDistr(input) { 
 
    var result = [], step = 0; 
 
    for (i in input) { 
 
     if (i % 2) step++; 
 
     var perc = Math.floor(step * 2000/input.length)/10; 
 
     result.push([input[i], perc + "%"]); 
 
    } 
 
    return result; 
 
} 
 

 
console.log(colDistr(["#1ABC9C","#1ABC9C","#EC7063","#EC7063","#3498DB","#3498DB"]));

如果輸入的是隻包含一次每種顏色的數組，這將成爲：

function colDistr(input) { 
 
    var result = [], step = 0; 
 
    for (i = 0; i < input.length * 2; i++) { 
 
     if (i % 2) step++; 
 
     var perc = Math.floor(step * 1000/input.length)/10; 
 
     result.push([input[i - step], perc + "%"]); 
 
    } 
 
    return result; 
 
} 
 

 
console.log(colDistr(["#1ABC9C","#EC7063","#3498DB"]));

Answer 2

var ary = ["#000", 0, "#000", 33.333333333333336, "#4AF2A1", 33.333333333333336, "#4AF2A1", 33.333333333333336, "#FC4831", 33.333333333333336, "#FC4831", 100]; 
var res = []; 

for (i = 0; i < ary.length; i+=2) { 
    res.push([ ary[i], Math.round(ary[i + 1]) + '%' ]); 
} 

console.log(res); 

輸出：

[ [ '#000', '0%' ], 
    [ '#000', '33%' ], 
    [ '#4AF2A1', '33%' ], 
    [ '#4AF2A1', '33%' ], 
    [ '#FC4831', '33%' ], 
    [ '#FC4831', '100%' ] ] 

這是很簡單 - 我們使用for循環來遍歷數組。對於每次迭代，我們從數組中取兩個值並將它們推送到結果中。迭代計數器i每次迭代增加兩次，而不是標準i++。

Math.round(ary[i + 1]) 

將數字四捨五入爲最接近的整數。