跳出地图

Question

so i have this problem where if the value in the array is higher than entered value it should do something and then stop the loop and don't touch the remaining values in the array.. Here's the code so far:

const percentages = [];
let enteredValue = parseInt(event.target.value, 10);

range.map((rangeValue, i) => {
  if (rangeValue <= enteredValue) {
    percentages.push(100);
    enteredValue = enteredValue - rangeValue;
  } else {
    percentages.push(enteredValue * 100 / (rangeValue));

    return;
  }
});

Answer 1

Using .some you can get iteration functionally similar to .forEach , map or for loop but with the ability to break through return instead.

 range.some(function(rangeValue , i) { if (rangeValue <= enteredValue) { percentages.push(100); enteredValue = enteredValue - rangeValue; return true } percentages.push(enteredValue * 100 / (rangeValue)); });

Read more about .some in es6 here

Answer 2

Just use a good old for loop:

 const percentages = [];
 let enteredValue = parseInt(event.target.value, 10);

 for(const range of ranges) {
   percentages.push(Math.min(100, (enteredValue / range) * 100));
   enteredValue -= range;
   if(enteredValue <= 0) break;
 }

Answer 3

The other answers are perfectly sufficient. However, I would like to add that the map function isn't best used for performing iterations. What the map function does is perform the as argument passed in callback on every element of the array. It then returns the new array . So map is more usefull when you are in need of a mutated copy of the Array (eg all the elements multiplied by 10).

For your purposes other logic like a regular for loop will be a more elegant solution.

Answer 4

You can use reduce instead of map . The reduce senses a change in the original array.

let enteredValue = parseInt(event.target.value, 10);

const percentages = range
    .slice(0) // if you don't want to mess up the original array
    .reduce((percentages, rangeValue, _, rangeCopyArray) => {
        if (rangeValue <= enteredValue) {
            percentages.push(100);
            enteredValue -= rangeValue;
        } else {
            percentages.push(enteredValue * 100 / rangeValue);
            rangeCopyArray.length = 0; // the loop ends here
        }
        return percentages;
    }, [])

or shorter but less clear

const percentages = [...range].reduce(({p, eV}, rV, _, arr) => ({
    eV: eV-rV, 
    p: [...p, rV <= eV ? 100 : eV*100/rV + (arr.length = 0)]
}), {p: [], eV: parseInt(event.target.value, 10)}).p;

Answer 5

Break out from map - works using return

let hasId = false;
let data = {
    id: 1,
    title: 'some item'
}
let cartArray = [{
    id: 1,
    quantity: 19
}];
if (cartArray.length > 0) {
    cartArray.map(item => {
        if (item.id === data['id']) {
            ++item.quantity;
            hasId = true
            return; // Break out
        }
    })

    if (!hasId) {
        cartArray.push(data)
    }
}