有没有办法比较两个数字中的相应整数而不将它们转换为数组

Question

I am trying to conditionally apply animations to integers in a number based on whether or not the value of the number goes up or down.

My first step has been to store my total in my component's state, then when I add one to it, the affected integer should slide upward and turn green. If I decrease by one, the affected integer should slide downward and turn red.

I am trying to recreate the animation effect that Robinhood uses on its ticker when your portfolio value goes up or down, as it does in the first part of this gif .

I've gotten it to work but I am worried that my logic is not as efficient as it could be. When I increase or decrease the total, before I set the new total I create a variable which represents the total plus or minus 1. I convert both the current total and the new total to strings so I can split them into arrays. In another function I compare the two arrays by looping through the new total array and comparing the element at the current index in the loop to the element of the previous total array at the current index in the loop.

If the new total array's element at that index is larger, than I return true, if not I return false. If it remains the same, I return null. This array of trues, falses and nulls will correspond to the new total array in my render method. At the same index, I pass down true, false or null to my child component and that determines the className the component will be assigned.

Here is my parent component:

class Parent extends React.Component{
     me.state = {
       isCreateScenarioModalVisible: false,
       isExpressModalVisible: false,
       total: 0,
       truesArr: []
     };

     checkNums = (a, b) =>{
        var bNum = parseInt(b.reverse().join(""))
        var aNum = parseInt(a.reverse().join(""))

        var arr = a.map((el, i)=>{
           if (a.length === b.length){
             if (aNum < bNum && parseInt(a[i]) < parseInt(b[i])) {
                 return false
              } else if ( aNum > bNum && parseInt(a[i]) > parseInt(b[i])) {
                 return true
              } else if ((aNum < bNum && parseInt(a[i]) === parseInt(b[i])) 
              || (aNum < bNum && parseInt(a[i]) === parseInt(b[i]))) {
                 return null
               } else {
                 return null
               }
           } else if (a.length > b.length){
               return true
           } else {
               return false
           }
          })
          this.setState({
            truesArr: arr
          })
        }

        incrementTotal = (arg) =>{
          let num = this.state.total + arg

          this.checkNums(num.toString().split("").reverse(), 
          this.state.total.toString().split("").reverse())

          this.setState({
            total: num
          }, ()=>{
             console.log(this.state.truesArr)
          })

         setTimeout(()=>{
           this.setState({
              truesArr: []
           })
          }, 500)
        }

     render (){
       return(
         <div>
             <div>
               {this.state.total.toString().split("").map((num, i)=>{
                 return <Num key={i} num={num} color= 
                 {this.state.truesArr[i]}/>
                })}
              </div>
              <div onClick={()=>this.incrementTotal(1)}>+1</div>
              <div onClick={()=>this.incrementTotal(-1)}>-1</div>
         </div>
        )
     }

  }

  export default Parent;

And here is my child component:

class Num extends React.Component {
   constructor(prop) {
    super(prop);

   }

  render() {

     const self = this;
     let className
      if (this.props.color === true){
        className = 'green'
      } else if (this.props.color === false) {
        className = 'red'
      } else {
         className = 'norm'
      }
    return (
       <p className={className}>{this.props.num}</p>
     );
   }
}

export default Num;

I have omitted the CSS code because it doesn't affect the logic in my components.

As of now it's working correctly (although there are some bugs when you get into negative numbers that I am working on fixing) but I wanted to know if there was a more efficient way to compare the integers within two numbers. For example, if I am given 1000 and 1001, I want to be able to compare each of the integers at their respective positions to see if they're bigger than the corresponding integer of the other number. Like so:

1000 => 1 0 0 0

1001 => 1 0 0 1

compare=> == == == 0 < 1

value => null null null false

In this scenario, only the last number will be given an animation (and in this case, the animation will be downward turning and red)

Answer 1

You could take the digits and compare them

 function compare(a, b) { const digit = i => v => Math.floor(v / Math.pow(10, i)) % 10; return Array .from( { length: Math.ceil(Math.log10(Math.max(a, b))) }, (_, i) => ((l, r) => l === r ? null : l > r) (...[a, b].map(digit(i))) ) .reverse(); } console.log(compare(1001, 1000)); // null null null true console.log(compare(1000, 1001)); // null null null false console.log(compare(1000, 2005)); // false null null false console.log(compare(0, 123450)); // false false false false false 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

You could convert your numbers by splitting them as string and put each digit back into numbers :

 function checkNums(a, b) { b = b.toString().split('').map(Number) return a.toString().split('').map(Number).map((digit, index) => { if (digit < b[index]) return true if (digit > b[index]) return false return null }) } console.log(checkNums(1001, 1000)) console.log(checkNums(1111, 1000)) console.log(checkNums(1001, 1010)) console.log(checkNums(1000, 1000)) console.log(checkNums(1000, 9999)) 

However, this solution will not work if you have a different amount of digits in both arrays.