数组中的递增函数答案

【问题标题】：Incrementing function in an array数组中的递增函数
【发布时间】：2017-06-24 15:25:30
【问题描述】：

下面sn-p中的increment函数递增第四个元素，第五个元素，然后是最后一个元素（20）

我的目标是让它从第四个元素开始递增每个数值，跳过字母。

这是我遇到问题的行：

const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;

我怎样才能改变它以实现我的目标？

JSBin

let clicks = 0;
class App extends React.Component { 
    state = {
        data:'M 175 0  L 326.55444566227675 87.50000000000001  L 326.55444566227675 262.5  L 175 350  L 23.445554337723223 262.5  L 23.44555433772325 87.49999999999999 L 175 0'
    };

    onClick() {
      clicks ++;
      this.setState({data: this.increment()}); 
    }

    /**
     * clicks  ->   Element index in array
     *    1    ----- ->4, 
     *    2    ---- -> 5.
     *    3    ---- -> 7.

     *    4    ----- ->4, 
     *    5    ---- -> 5.
     *    6    ---- -> 7.
     */
    increment() {
      const data = this.state.data.replace(/\ \ /g, " ").split(" ");
      const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;               
      return data.map((e, i) => (i === indexAlteredElement(clicks%3)) ? parseInt(e)+5 : e ).join(' ')  
    }
    
    render() {
      return (
        <div>
           <div>{this.state.data} </div>
            <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button>  
        </div>
      )
    }
}

ReactDOM.render(<App />,  document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section class="container"></section>

【问题讨论】：

标签： javascript arrays algorithm reactjs increment

【解决方案1】：

clicks 更像是一个索引而不是点击计数器，所以我将它重命名为 index。

您可以将正则表达式与String#split 一起使用，因此您可以将.replace(/\ \ /g,' ').split(' ') 组合成.split(/\s+/)。

为了简单起见，我将索引增量语句移到增量函数中，并添加了一个检查以在值不是数字时再次增加索引。

let index = 2;
class App extends React.Component {
    state = {
        data: 'M 175 0  L 326.55444566227675 87.50000000000001  L 326.55444566227675 262.5  L 175 350  L 23.445554337723223 262.5  L 23.44555433772325 87.49999999999999 L 175 0'
    };

    onClick() {
      this.setState({data: this.increment()}); 
    }

    increment() {
      const data = this.state.data.split(/\s+/);
      if(!(++index % 3)) ++index;
      if(index % data.length < 3) index = index + (index % data.length) + 2;
      return data.map((e, i) => i === index % data.length? parseInt(e) + 5 : e ).join(' ');
    }
    
    render() {
      return (
        <div>
           <div>{this.state.data} </div>
            <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button>  
        </div>
      )
    }
}

ReactDOM.render(<App />,  document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section class="container"></section>

【讨论】：