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

Question

我试图有条件地将动画应用于数字中的整数，具体取决于数字的值是上升还是下降。

我的第一步是将我的总数存储在组件的状态中，然后当我添加一个时，受影响的整数应向上滑动并变为绿色。 如果我减1，受影响的整数应向下滑动并变为红色。

我试图在你的投资组合价值上涨或下跌时重新创建Robinhood在其股票代码上使用的动画效果，就像在这个gif的第一部分一样。

我已经开始工作，但我担心我的逻辑不尽如人意。 当我增加或减少总数时，在设置新总数之前，我创建一个表示总加减1的变量。我将当前总数和新总数转换为字符串，以便将其拆分为数组。 在另一个函数中，我通过循环遍历新的总数组并将循环中当前索引处的元素与循环中当前索引处的前一个总数组的元素进行比较来比较两个数组。

如果该索引处的新total数组元素较大，则返回true，否则返回false。 如果它保持不变，我返回null。 这个trues，falses和null数组将对应于render方法中的新total数组。 在同一个索引处，我将true，false或null传递给我的子组件，并确定将分配组件的className 。

这是我的父组件：

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;

这是我的孩子组成部分：

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;

我省略了CSS代码，因为它不会影响我的组件中的逻辑。

截至目前它正常工作（虽然当你进入我正在修复的负数时会有一些错误）但我想知道是否有更有效的方法来比较两个数字内的整数。 例如，如果给出1000和1001，我希望能够比较各自位置的每个整数，看它们是否大于另一个数字的相应整数。 像这样：

1000 => 1 0 0 0

1001 => 1 0 0 1

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

value => null null null false

在这种情况下，只有最后一个数字将被赋予动画（在这种情况下，动画将向下转动并且红色）

Answer 1

你可以拿数字并比较它们

 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

您可以通过将它们拆分为字符串来转换您的数字，并将每个数字放回数字：

 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)) 

但是，如果两个阵列中的数字位数不同，则此解决方案将不起作用。