Phương pháp Mảng cho vòng lặp cho mỗi phần tử

Question

Tôi đang viết hàm redux bất cứ khi nào tôi nhấp vào nút tôi phải thêm một số n vào phần tử thứ tư của mảng. Nếu phần tử là L hay M tôi không muốn việc bổ sung

Ví dụ tôi có mảng này dưới đây, và số lượng thêm, tức là n là '5'

[M 175 0 L 326 87 L 326] 

tôi bấm nút một lần và mảng trở nên

[M 175 0 L 331 87 L 326] 

Yếu tố thứ tư trở nên 331

tôi bấm nút hai lần và mảng trở nên

[M 175 0 L 331 92 L 326] 

Yếu tố thứ năm trở 92

Và như vậy cho đến khi kết thúc mảng và tôi bắt đầu lại từ các yếu tố thứ ba

Đây là chức năng ban đầu của tôi, nơi tôi đã được lập bản đồ tất cả các giá trị

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

Xem here trong hành động

nhưng bây giờ tôi cần một phương pháp mảng khác để đạt được điều đó nhưng tôi không biết được và làm thế nào

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>

Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi .. chỉ cung cấp cho các dòng, và tôi sẽ giải thích

Answer 2

tôi đề nghị bạn một giải pháp trong JS tinh khiết mà không phản ứng

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

Mặc dù không phải bởi react.js nhưng JS thuần túy bạn có thể thực hiện như sau;

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

Vấn đề của bạn là, nếu tôi hiểu đúng, từ một mảng hiện có, có được một một (không nhất thiết mới) trong khi theo các quy tắc:

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

Xem xét implemation :

function getValue (original, value) { 

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

} 

Vì vậy, mọi người tôi xử lý của bạn được kích hoạt, bạn có thể cập nhật mảng của bạn, tham gia nó với khoảng trắng và render SVG của bạn (tôi cho rằng đây là một con đường).

cái gì đó dọc những dòng:

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

} 

Nếu bạn đang sử dụng Phản ứng, bạn có thể muốn kích hoạt một rerender. thành phần của bạn sẽ trông giống như một cái gì đó như thế này:

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

Bạn có thể sử dụng Array.prototype.reduce() (Refer)

Các reduce() phương pháp áp dụng một chức năng chống lại một ắc và mỗi giá trị của mảng (từ trái sang phải) để giảm nó thành một giá trị duy nhất.

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

Vì vậy, giảm là phương pháp khác mà bạn có thể sử dụng.

Answer 6

Sử dụng này:

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

}); 

Nó cung cấp cho bạn những mảng cuối cùng mà bạn sẽ nhận được sau khi chạy nó thông qua quá trình này hoàn toàn từ chỉ số 3 (thành phần 4) để 0.