用於循環到每個元素的數組方法

Question

我正在寫一個redux函數，其中任何時候我點擊一個按鈕，我必須將數字n添加到數組的第四個元素。如果該元素是L或M我不想加入做

例I具有低於該陣列中，並且要添加的號碼，即n是「5」

[M 175 0 L 326 87 L 326] 

我曾經點擊按鈕和陣列變得

[M 175 0 L 331 87 L 326] 

第四元件變得331

予兩次單擊按鈕，所述陣列變得

[M 175 0 L 331 92 L 326] 

第五元件變得92

，以此類推，直到該數組飾面和我再次從第三元件

這是我的，其中i是映射的所有值的初始功能啓動

var string = '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', 
    array = string.split(/\s+/), 
    result = array.map(x => x === 'M' || x === 'L' ? x : +x + 5).join(' '); 

console.log(result); 

見here行動

但現在我需要的其他陣列的方法來實現這一點，但我不知道哪些以及如何

Answer 1

let clicks = 0; 
 
class App extends React.Component { 
 
    
 
    state= {data:'M 175 0 L 326 87 L 326'}; 
 

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

讓我知道如果你有任何問題..只是給就行了，我將解釋

Answer 2

我建議你沒有在純JS的解決方案反應

var string = "M 175 0 L 326 87 L 326 262 M 175 350 L 23 262 L 23 87 M 175 0"; 
 
var array = string.split(" "); 
 
var max = array.length; 
 
var i = 3; 
 
var clic =() => { 
 
     i++; 
 
     if (i === max) i = 3; 
 
     if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5; 
 
     console.log(array.join(' ')); 
 
}; 
 
clic(); clic(); clic(); clic(); clic(); clic(); 
 
clic(); clic(); clic(); clic(); clic(); clic(); 
 
clic(); clic(); clic(); clic(); clic(); clic(); 
 
clic(); clic(); clic(); clic(); clic(); clic();

Answer 3

雖然不是通過react.js，但純粹的JS，你可能會做如下;

function ClickHandler(s){ 
 
    this.cct = 3; // click count 
 
    this.str = s; // the string 
 
    this.num = 5; // increase amount 
 
    this.but = null; // the add button element 
 
    this.res = null; // the result paragraph element 
 
} 
 
ClickHandler.prototype.insert = function(){ 
 
    var a = this.str.split(/\s+/); 
 
    this.str = a[this.cct] === "L" || a[this.cct] === "M" ? a.join(" ") 
 
                 : (a[this.cct] = (+a[this.cct] + this.num) + "", a.join(" ")); 
 
    this.cct = (this.cct+1)%a.length || 3; 
 
}; 
 
ClickHandler.prototype.increase = function(){ 
 
    this.but.textContent = this.but.textContent.replace(/-?\d+/,++this.num); 
 
}; 
 
ClickHandler.prototype.decrease = function(){ 
 
    this.but.textContent = this.but.textContent.replace(/-?\d+/,--this.num); 
 
}; 
 

 
var string = "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", 
 
whenClicked = new ClickHandler(string), 
 
    increase = document.getElementById("increase"), 
 
    decrease = document.getElementById("decrease"); 
 

 
whenClicked.but = document.getElementById("myButton"); 
 
whenClicked.res = document.getElementById("result"); 
 
whenClicked.res.textContent = string; 
 
whenClicked.but.addEventListener("click", function(e){ 
 
              this.insert(); 
 
              this.res.textContent = this.str; 
 
              }.bind(whenClicked)); 
 
increase.addEventListener("click", whenClicked.increase.bind(whenClicked)); 
 
decrease.addEventListener("click", whenClicked.decrease.bind(whenClicked));

<button id="myButton">Add 5</button> 
 
<p id="result"></p> 
 
<button id="increase">Increase</button> 
 
<button id="decrease">Decrease</button>

Answer 4

你的問題是，如果我理解正確的話，從現有的陣列，獲得在遵循規則的一個（不一定是新）：

If the current value is M or L do nothing, return the value, else 
consider it a number, add 5 to it and return. 

考慮implemation ：

function getValue (original, value) { 

    return original === "M" || original === "L" ? original : parseFloat(original, 10) + value; 

} 

因此everyti我你的處理程序被觸發，你可以更新你的數組，加入它與空白和呈現您的SVG（我想這是一條路徑）。

類似的規定：

const array = // your array 
const index = 5; 
function onClick() { // you need to attach this handler to whatever node/object you are listening to 

    array[index] = getValue(array[index], 5); 

} 

如果使用反應，可能要觸發重新呈現。您的組件看起來就像是這樣的：

class C extends React.Component { 

    constructor (props) { 

     super(props); 
     this.state = { array: .... } // the state is initialized with your array 


    } 


    render() { 

     return <div> 
      {/*anything you want*/} 
      <button onClick={() => this.setState({ 

       array: [...this.state.array.slice(4), getValue(this.state.array[4], 5), ...this.state.array.slice(5)] 
      })}>Click me</button> 
     </div>; 

    } 

} 

Answer 5

您可以使用Array.prototype.reduce（）（Refer）

的減少（）方法應用的功能對蓄電池和每個值（從左到右）將其減少爲單個值。

var str = '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'; 

str.split(/\s+/).reduce((prevVal, x) => x === 'M' || x === 'L' ? prevVal + ' ' + x : prevVal + ' ' + (+x + 5)); 

因此降低是你，你可以使用其他方法。

Answer 6

使用此：

let string = state[a].d 
let array = string.split(/\s+/) 
var n=5; 
var finalArray=array.map(function(current, index) { 
    if (current=="L" || current=="M") { 
    return current; 
    }else{ 
    return new Number(current)+n*4-n*(3-Math.min(index,3)); 
    } 

}); 

它給你的最後一個數組，你會完全從指數3（元件4）0