从数组中按顺序获取值

Question

我有这个数组反应

const pallete = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C']

我想创建一个 function 它将返回第一个十六进制，然后是第二个......

getColor(){
   //What code should I have here?
   return COLOR
}

这是我的主要 function

updateArray(data){
        const dataAux = data;
        for(var key in dataAux.datasets) {
            if (typeof dataAux.datasets[key].backgroundColor == 'undefined'){
               //I want here to take the values from the first array (pallete) and give dataAux.datasets[key]... the first color, then when he reads it again the second one...

                for(var i in pallete){
                    dataAux.datasets[key].backgroundColor = getColor(color????);
                }

            }
        }
    }

const Data 有一个对象数组，如下所示：

{labels: [1, 2, 3], datasets: [{label: 'Undefined', pointStyle: 'line', borderColor: pallete[0],borderWidth: 3,yAxisID: "bar-y-axis",data: [1, 2, 3]},{label: 'Undefined',backgroundColor: pallete[1],pointStyle: 'line',borderColor: pallete[1],borderWidth: 3,yAxisID: "bar-y-axis",data: [2, 4, 6]}]}

Answer 1

无需声明其他 function 即可获取颜色。 您可以使用以下代码获取颜色并将其设置为背景。

getColor(index){
   //What code should I have here?
   return pallete[index];
}

updateArray(data){
            const dataAux = data;
            var i=0;
            for(var key in dataAux.datasets) {
                if (typeof dataAux.datasets[key].backgroundColor == 'undefined'){
                   //I want here to take the values from the first array (pallete) and give dataAux.datasets[key]... the first color, then when he reads it again the second one...
    
                   
                        dataAux.datasets[key].backgroundColor = getColor(i%4);
                       i++;
                    
    
                }
            }
        }

Answer 2

这可能有点矫枉过正，但您可以创建一个带有“内存”的 object 来为您提供 colors。

function ColorProvider(){
    var _this=this;

    _this.colors = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C'];
    _this.currentIndex = 0;

    _this.getNext = function() {
        let returnedColor = _this.colors[_this.currentIndex];
        if(_this.currentIndex == _this.colors.length-1){
            _this.currentIndex = 0;
        } else {
            _this.currentIndex++;
        }
    }
}


let color = new ColorProvider();
dataAux.datasets[key].backgroundColor = getColor(color.getNext());

请原谅我过时的 JavaScript 做法，这只是一个 POC。 我敢肯定 go 有一个更现代/更漂亮的东西，关键是有一个 object 代替原语。

Answer 3

如果您想在每次调用 function 时获取每种颜色，您可以利用生成器 function 功能如下所示在循环的每次迭代中获取每种颜色：

const pallete = ['#5931B5', '#7842F5', '#2EABE3', '#F2711C']

function* getColor(arr) {
  for (let i = 0; i < arr.length ; i++) {
    yield arr[i]
  }
}

const iterator = getColor(pallete)

console.log(iterator.next()) // { value:  '#5931B5', done: false }
console.log(iterator.next()) // { value:  '#7842F5', done: false }
console.log(iterator.next()) // { value:  '#2EABE3', done: false }
console.log(iterator.next()) // { value:  '#F2711C', done: false }
console.log(iterator.next()) // { value:  undefined, done: true }

在您的情况下，您可以在循环内调用iterator.next()值，直到它达到undefined的条件，然后您需要中断循环！