Javascript 有没有一种方法可以比较两个数字中对应的整数而不将它们转换为数组

我正在尝试根据数字的值是否上升或下降，有条件地将动画应用于数字中的整数

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

我正在尝试重新创建动画效果，当你的投资组合价值上升或下降时，罗比尼奥会在它的股票上使用动画效果，就像它在本书第一部分所做的那样

我已经让它工作了，但我担心我的逻辑没有它可能的那么有效。当我增加或减少总数时，在设置新总数之前，我会创建一个变量，表示总数加上或减去1。我将当前总计和新总计转换为字符串，以便将它们拆分为数组。在另一个函数中，我通过循环新的total数组并将循环中当前索引处的元素与循环中当前索引处的前一个total数组的元素进行比较，从而比较这两个数组

如果该索引处的新total数组元素大于，则返回true，否则返回false。如果它保持不变，则返回null。此True、False和Null数组将与我的渲染方法中的新总数组相对应。在同一个索引中，我将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;

类父级扩展React.Component{
me.state={
IsCreateSecenarioModalVisible:false，
isExpressModalVisible:false，
总数：0，
特鲁萨尔：[]
};
checkNums=（a，b）=>{
var bNum=parseInt（b.reverse（）.join（“”）
var aNum=parseInt（a.reverse（）.join（“”）
var arr=a.map（（el，i）=>{
如果（a.length==b.length）{
if（aNumbNum&&parseInt（a[i]）>parseInt（b[i]））{
返回真值
}else if（（aNumb.长度）{
返回真值
}否则{
返回错误
}
})
这是我的国家({
特鲁萨尔：啊
})
}
incrementTotal=（arg）=>{
设num=this.state.total+arg
this.checkNums（num.toString（）.split（“”）.reverse（），
this.state.total.toString（）.split（“”.reverse（））
这是我的国家({
总数：num
}, ()=>{
console.log（this.state.truesArr）
})
设置超时（（）=>{
这是我的国家({
特鲁萨尔：[]
})
}, 500)
}
渲染（）{
返回(
{this.state.total.toString（）.split（“”）.map（（num，i）=>{
返回
})}
this.incrementTotal（1）}>+1
this.incrementTotal（-1）}>-1
)
}
}
导出默认父对象；

这是我的子组件：

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;

class Num扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const self=这个；
让类名
if（this.props.color===true）{
className='green'
}else if（this.props.color==false）{
className='red'
}否则{
className='norm'
}
返回(
{this.props.num}
);
}
}
导出默认数值；

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

到目前为止，它工作正常（尽管我正在修复的负数中存在一些错误），但我想知道是否有更有效的方法来比较两个数中的整数。例如，如果给我1000和1001，我希望能够比较它们各自位置上的每个整数，看看它们是否大于另一个数对应的整数。像这样：

1000=>100

1001=>1001

比较=>===0<1

值=>null false

---

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

您可以获取数字并进行比较

功能比较（a、b）{
常量数字=i=>v=>Math.floor（v/Math.pow（10，i））%10；
返回数组
.来自(
{length:Math.ceil（Math.log10（Math.max（a，b）））}，
（u，i）=>
（（l，r）=>l==r？空：l>r）
（…[a，b].地图（数字（i）））
)
.reverse（）；
}
console.log（比较（10011000））；//null null true
console.log（比较（10001001））；//null false
console.log（比较（10002005））；//false null false
log（比较（0123450））；//假假假假

---

.as console wrapper{max height:100%！important；top:0；}

您可以将数字拆分为字符串，然后将每个数字重新转换为数字：

功能检查（a、b）{
b=b.toString（）.split（“”）.map（编号）
返回a.toString（）.split（“”）.map（Number）.map（（数字，索引）=>{
如果（数字b[索引]）返回false
返回空
})
}
控制台日志（checkNums（10011000））
控制台日志（checkNums（111110000））
控制台日志（checkNums（1001010））
控制台日志（checkNums（10001000））
控制台日志（checkNums（10009999））