转换是否将基本逻辑转换为foreach失败

Question

I have this function

const applyColor = (value) => {

        let color
        //shallow to dark
        const colors = ['#B3E5FC', '#81D4FA' ,'#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1']

        if(value >= 100 && value < 199){
            return {index: 1, color: colors[0]}
        }else if(value >= 200 && value < 299){
            return {index: 2, color: colors[1]}
        }else if(value >= 300 && value < 399){
            return {index: 3, color: colors[2]}
        }else if(value >= 400 && value < 499){
            return {index: 4, color: colors[3]}
        }else if(value >= 500 && value < 599){
            return {index: 5, color: colors[4]}
        }else if(value >= 600 && value < 699){
            return {index: 6, color: colors[5]}
        }else if(value >= 700){
            return {index: 7, color: colors[6]}
        }
}

It's working when I do

{data.map(o => <div style={{background: applyColor(o.value).color }}></div>)}

But I tried to refactor it using loop.

let gap = 100
        const maximum = 700
        for(let i = 0; i < colors.length; i++) {

            if(value >= maximum) {
                color = {index: colors.length, color: colors[colors.length - 1]}
            }else if(value >= gap && value < gap + 99){
                color = {index: i, color: colors[i]}
            }
            gap += 100

            return color

        }

I got color of undefined error, I couldn't spot what's wrong. Any clue?

Answer 1

As others ahve mentioned your i now starts at 0 rather than 1.

I'm not overly familiar with javascript so excuse any syntax errors (please suggest edits if this is wrong). Could this not be simplified to:

let color
const colors = ['#B3E5FC', '#81D4FA' ,'#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1']
var i = Math.floor(value/100)
if (i> colors.Length) {i= colors.Length}
if (i <1) {i= 1}
return {index: i, color: colors[i - 1]}

Basically value integer division by 100 If its over 7 make it 7 or < 1 make it 1 return the color

Answer 2

You need to take care for values less than the gap and you need a consistent way to calculate the index. You current code will start at 0 ( the previous started at 1 ) but you last index will be colors.length which is 7 ( while previously it would be 6 ), so now 6 is entirely skipped.

Use

 const applyColor = (value) => { const colors = ['#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1'] const step = 100, index = Math.max(1,Math.min(Math.floor(value / step), colors.length)); // clamp index between 1 and color.length return { index: index , color: colors[index-1] } } // testing for(let i = 50; i<=850;i+=100){ console.log(`applyColor(${i}) == `, applyColor(i)); } 

 /*for stackoverflow console*/ div.as-console-wrapper{max-height:100%}