Коротке замикання Array.forEach, як перерва у виклику

[1,2,3].forEach(function(el) {
    if(el === 1) break;
});

Як я можу це зробити за допомогою нового forEachметоду в JavaScript? Я спробував return;, return false;і break. breakзбоїв і returnне робить нічого, крім продовження ітерації.

Немає вбудованої можливості для breakвходу forEach. Щоб перервати виконання, вам доведеться кинути якесь виняток. напр.

var BreakException = {};

try {
  [1, 2, 3].forEach(function(el) {
    console.log(el);
    if (el === 2) throw BreakException;
  });
} catch (e) {
  if (e !== BreakException) throw e;
}

Винятки JavaScript не дуже страшні. Традиційний forцикл може бути більш доречним, якщо вам дійсно потрібно breakвсередині нього.

Використовуйте Array#some

Замість цього використовуйте Array#some:

[1, 2, 3].some(function(el) {
  console.log(el);
  return el === 2;
});

Це працює, оскільки someповертається, trueяк тільки будь-який зворотний виклик, виконаний у порядку масиву, повертається true, коротко замикаючи виконання решти.

some, його зворотний every(який зупиниться на a return false), і forEachвсі методи ECMAScript Fifth Edition, які потрібно буде додати до Array.prototypeбраузерів, де вони відсутні.

Зараз є ще кращий спосіб зробити це в ECMAScript2015 (він же ES6), використовуючи новий для циклу . Наприклад, цей код не друкує елементи масиву після числа 5:

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let el of arr) {
  console.log(el);
  if (el === 5) {
    break;
  }
}

З документів:

І для…, і для… тверджень повторюють щось. Основна відмінність між ними полягає в тому, що вони повторюють. У висловленні for ... повторюється кількість перелічених властивостей об'єкта в оригінальному порядку вставки. Оператор for ... повторює дані, які ітерабельний об'єкт визначає для повторення.

Потрібен індекс в ітерації? Ви можете використовувати Array.entries():

for (const [index, el] of arr.entries()) {
  if ( index === 5 ) break;
}

Ви можете використовувати кожен метод:

[1,2,3].every(function(el) {
    return !(el === 1);
});

ES6

[1,2,3].every( el => el !== 1 )

для використання старої підтримки браузера:

if (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          !fun.call(thisp, this[i], i, this))
        return false;
    }

    return true;
  };
}

Більше деталей тут .

Цитуючи документацію MDN проArray.prototype.forEach() :

Там немає ніякого способу , щоб зупинити або зламати в forEach()петлю іншого , ніж кидати виняток. Якщо вам потрібна така поведінка, .forEach()метод є неправильним інструментом , замість цього скористайтеся простою петлею. Якщо ви тестуєте елементи масиву на присудок і вам потрібно булеве повернене значення, ви можете використовувати every()або some()замість цього.

Для свого коду (у питанні), як запропонував @bobince, використовуйте Array.prototype.some()замість цього. Він дуже добре підходить до вашої користувальниці.

Array.prototype.some()виконує функцію зворотного виклику один раз для кожного елемента, присутнього в масиві, доки він не знайде той, де зворотний виклик повертає truthy значення (значення, яке стає істинним при перетворенні в a Boolean). Якщо такий елемент знайдений, some()негайно повертає true. В іншому випадку some()повертається помилковим. зворотний виклик викликається лише для індексів масиву, яким призначені значення; він не викликається для індексів, які були видалені або яким ніколи не було призначено значень.

На жаль, у цьому випадку буде набагато краще, якщо ви не користуєтесь цим forEach. Замість цього використовуйте звичайний forцикл, і він буде працювати точно так, як ви очікували.

var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
  if (array[i] === 1){
    break;
  }
}

Розглянемо використання jquery«s eachметод, так як він дозволяє повернути помилкову функцію зворотного виклику всередині:

$.each(function(e, i) { 
   if (i % 2) return false;
   console.log(e)
})

Бібліотеки Лодаша також надають takeWhileметод, який можна зв'язати з картою / зменшити / скласти тощо:

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.takeWhile(users, function(o) { return !o.active; });
// => objects for ['barney', 'fred']

// The `_.matches` iteratee shorthand.
_.takeWhile(users, { 'user': 'barney', 'active': false });
// => objects for ['barney']

// The `_.matchesProperty` iteratee shorthand.
_.takeWhile(users, ['active', false]);
// => objects for ['barney', 'fred']

// The `_.property` iteratee shorthand.
_.takeWhile(users, 'active');
// => []

З прикладу вашого коду виглядає Array.prototype.findте, що ви шукаєте: Array.prototype.find () та Array.prototype.findIndex ()

[1, 2, 3].find(function(el) {
    return el === 2;
}); // returns 2

Якщо ви хочете скористатись пропозицією Діна Едуарда та викинути помилку StopIteration, щоб вийти з циклу, не вказуючи на помилку, ви можете скористатися такою функцією ( спочатку звідси ):

// Use a closure to prevent the global namespace from be polluted.
(function() {
  // Define StopIteration as part of the global scope if it
  // isn't already defined.
  if(typeof StopIteration == "undefined") {
    StopIteration = new Error("StopIteration");
  }

  // The original version of Array.prototype.forEach.
  var oldForEach = Array.prototype.forEach;

  // If forEach actually exists, define forEach so you can
  // break out of it by throwing StopIteration.  Allow
  // other errors will be thrown as normal.
  if(oldForEach) {
    Array.prototype.forEach = function() {
      try {
        oldForEach.apply(this, [].slice.call(arguments, 0));
      }
      catch(e) {
        if(e !== StopIteration) {
          throw e;
        }
      }
    };
  }
})();

Вищевказаний код дасть вам змогу запускати такий код, як наведений нижче, без необхідності виконувати власні пробні пропозиції:

// Show the contents until you get to "2".
[0,1,2,3,4].forEach(function(val) {
  if(val == 2)
    throw StopIteration;
  alert(val);
});

Важливо пам’ятати, що це оновить функцію Array.prototype.forEach лише тоді, коли вона вже існує. Якщо його вже немає, він не змінює його.

Коротка відповідь: використовуйте for...breakдля цього або змініть код, щоб уникнути зламу forEach. Не використовуйте .some()та .every()не наслідуйте for...break. Перепишіть свій код, щоб уникнути for...breakциклу чи використання for...break. Кожен раз, коли ви використовуєте ці методи як for...breakальтернативні, Бог вбиває кошеня.

Довга відповідь:

.some()і .every()обидва повертають booleanзначення, .some()повертається, trueякщо повертається який-небудь елемент, для якого передана функція повертається true, кожен повертається, falseякщо повертається який-небудь елемент, для якого передана функція false. Це те, що означають ці функції. Використання функцій для того, що вони не означають, набагато гірше, ніж використання таблиць для компонування замість CSS, оскільки це засмучує всіх, хто читає ваш код.

Крім того, єдиним можливим способом використання цих методів як for...breakальтернативи є створення побічних ефектів (зміна деяких варіантів поза .some()функцією зворотного виклику), і це не сильно відрізняється від for...break.

Таким чином, використання .some()або в .every()якості for...breakальтернативи петлі не вільні від побічних ефектів, це не набагато чистіше , то for...breakце засмучує, так що це не краще.

Ви завжди можете переписати свій код, щоб у цьому не було потреби for...break. Ви можете фільтрувати масив за допомогою .filter(), ви можете розділити масив за допомогою .slice()тощо, а потім використовувати .forEach()або .map()для цієї частини масиву.

Це лише те, що я придумав, щоб вирішити проблему ... Я майже впевнений, що він вирішує проблему, яку мав початковий запитувач:

Array.prototype.each = function(callback){
    if(!callback) return false;
    for(var i=0; i<this.length; i++){
        if(callback(this[i], i) == false) break;
    }
};

І тоді ви б назвали це за допомогою:

var myarray = [1,2,3];
myarray.each(function(item, index){
    // do something with the item
    // if(item != somecondition) return false; 
});

Повернення помилки всередині функції зворотного виклику призведе до перерви. Дайте мені знати, якщо це насправді не працює.

Ще одна концепція, яку я придумав:

function forEach(array, cb) {
  var shouldBreak;
  function _break() { shouldBreak = true; }
  for (var i = 0, bound = array.length; i < bound; ++i) {
    if (shouldBreak) { break; }
    cb(array[i], i, array, _break);
  }
}

// Usage

forEach(['a','b','c','d','e','f'], function (char, i, array, _break) {
  console.log(i, char);
  if (i === 2) { _break(); }
});

Знайшли це рішення на іншому сайті. Ви можете обернути ForEach за сценарієм спробувати.

if(typeof StopIteration == "undefined") {
 StopIteration = new Error("StopIteration");
}

try {
  [1,2,3].forEach(function(el){
    alert(el);
    if(el === 1) throw StopIteration;
  });
} catch(error) { if(error != StopIteration) throw error; }

Детальніше тут: http://dean.edwards.name/weblog/2006/07/enum/

var array = [1,2,3,4];

for(var item of array){
    console.log(item);
    if(item == 2){
       break;
    }
}

Якщо вам не потрібно отримувати доступ до масиву після ітерації, ви можете вирішити його, встановивши довжину масиву в 0. Якщо вам все-таки потрібен після ітерації, ви можете клонувати його за допомогою фрагмента ..

[1,3,4,5,6,7,8,244,3,5,2].forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Або з клоном:

var x = [1,3,4,5,6,7,8,244,3,5,2];

x.slice().forEach(function (item, index, arr) {
  if (index === 3) arr.length = 0;
});

Це набагато краще рішення, ніж кидання випадкових помилок у ваш код.

Це цикл for, але підтримує посилання на об'єкт у циклі так само, як forEach (), але ви можете вийти з нього.

var arr = [1,2,3];
for (var i = 0, el; el = arr[i]; i++) {
    if(el === 1) break;
}

Як згадувалося раніше, ви не можете зламати .forEach().

Ось дещо сучасніший спосіб зробити передбачення за допомогою Ітераторів ES6. Дозволяє отримати прямий доступ до index/ valueпід час ітерації.

const array = ['one', 'two', 'three'];

for (const [index, val] of array.entries()) {
  console.log('item:', { index, val });
  if (index === 1) {
    console.log('break!');
    break;
  }
}

Вихід:

item: { index: 0, val: 'one' }
item: { index: 1, val: 'two' }
break!

Посилання

• Array.prototype.entries()
• Ітератори та генератори
• Призначення руйнування

Ще один підхід

        var wageType = types.filter(function(element){
            if(e.params.data.text == element.name){ 
                return element;
            }
        });
        console.dir(wageType);

Я використовую nullhack для цієї мети, він намагається отримати доступ до властивості null, яка є помилкою:

try {
  [1,2,3,4,5]
  .forEach(
    function ( val, idx, arr ) {
      if ( val == 3 ) null.NULLBREAK;
    }
  );
} catch (e) {
  // e <=> TypeError: null has no properties
}
//

Якщо ви хочете зберегти свій forEachсинтаксис, це спосіб зберегти його ефективність (хоча і не такий хороший, як звичайний цикл). Негайно перевірте наявність змінної, яка знає, чи хочете вийти з циклу.

У цьому прикладі використовується анонімна функція для створення області функцій, навколо forEachякої потрібно зберігати готову інформацію.

(function(){
    var element = document.getElementById('printed-result');
    var done = false;
    [1,2,3,4].forEach(function(item){
        if(done){ return; }
        var text = document.createTextNode(item);
        element.appendChild(text);
        if (item === 2){
          done = true;
          return;
        }
    });
})();

<div id="printed-result"></div>

Мої два центи.

Я це знаю не так. Це не розірвати петлю. Це Джугад

let result = true;
[1, 2, 3].forEach(function(el) {
    if(result){
      console.log(el);
      if (el === 2){
        result = false;
      }
    }
});

Використовуйте array.prototype.everyфункцію, яка надає вам утиліту для розриву циклу. Дивіться приклад тут Документація Javascript в мережі розробників Mozilla

Погодьтеся з @bobince, схвалено.

Також FYI:

Для цього в Prototype.js є щось:

<script type="text/javascript">
  $$('a').each(function(el, idx) {
    if ( /* break condition */ ) throw $break;
    // do something
  });
</script>

$break буде захоплено та оброблено прототипом.js внутрішньо, порушуючи цикл "кожен", але не генеруючи зовнішні помилки.

Докладніше див. API Prototype.JS .

jQuery також має спосіб, просто поверніть false в оброблювач, щоб рано зламати цикл:

<script type="text/javascript">
  jQuery('a').each( function(idx) {
    if ( /* break condition */ ) return false;
    // do something

  });
</script>

Докладніше див. API jQuery .

Це не найефективніше, оскільки ти все ще циркулюєш усі елементи, але я подумав, що варто обдумати дуже просте:

let keepGoing = true;
things.forEach( (thing) => {
  if (noMore) keepGoing = false;
  if (keepGoing) {
     // do things with thing
  }
});

ви можете слідувати коду, який працює для мене:

 var     loopStop = false;
YOUR_ARRAY.forEach(function loop(){
    if(loopStop){ return; }
    if(condition){ loopStop = true; }
});

Я вважаю за краще використовувати for in

var words = ['a', 'b', 'c'];
var text = '';
for (x in words) {
    if (words[x] == 'b') continue;
    text += words[x];
}
console.log(text);

for inпрацює так само forEach, як і ви можете додати функцію повернення до виходу всередині. Кращі показники теж.

Якщо вам потрібно розбити виходячи зі значення елементів, які вже є у вашому масиві, як у вашому випадку (тобто якщо умова розриву не залежить від змінної часу виконання, яка може змінитися після призначення масиву значень його елементів), ви також можете використовувати комбінацію з зрізу () і IndexOf () наступним чином .

Якщо вам потрібно перерватися, коли ForEach досягне "Apple", ви можете використовувати

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var fruitsToLoop = fruits.slice(0, fruits.indexOf("Apple"));
// fruitsToLoop = Banana,Orange,Lemon

fruitsToLoop.forEach(function(el) {
    // no need to break
});

Як зазначено в W3Schools.com, метод slice () повертає вибрані елементи в масив як новий об'єкт масиву. Початковий масив не буде змінено.

Дивіться це в JSFiddle

Сподіваюся, це комусь допоможе.

Ви можете створити варіант з forEachщо дозволяє break, continue, returnі навіть async/ await(наприклад , написані в машинопису)

export type LoopControlOp = "break" | "continue" | ["return", any];
export type LoopFunc<T> = (value: T, index: number, array: T[])=>LoopControlOp;

Array.prototype.ForEach = function ForEach<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

// this variant lets you use async/await in the loop-func, with the loop "awaiting" for each entry
Array.prototype.ForEachAsync = async function ForEachAsync<T>(this: T[], func: LoopFunc<T>) {
    for (let i = 0; i < this.length; i++) {
        const controlOp = await func(this[i], i, this);
        if (controlOp == "break") break;
        if (controlOp == "continue") continue;
        if (controlOp instanceof Array) return controlOp[1];
    }
};

Використання:

function GetCoffee() {
    const cancelReason = peopleOnStreet.ForEach((person, index)=> {
        if (index == 0) return "continue";
        if (person.type == "friend") return "break";
        if (person.type == "boss") return ["return", "nevermind"];
    });
    if (cancelReason) console.log("Coffee canceled because: " + cancelReason);
}

спробуйте "знайти":

var myCategories = [
 {category: "start", name: "Start", color: "#AC193D"},
 {category: "action", name: "Action", color: "#8C0095"},
 {category: "exit", name: "Exit", color: "#008A00"}
];

function findCategory(category) {
  return myCategories.find(function(element) {
    return element.category === category;
  });
}

console.log(findCategory("start"));
// output: { category: "start", name: "Start", color: "#AC193D" }

Так, можна продовжити і вийти з циклу forEach.

Щоб продовжити, ви можете використовувати return, цикл продовжиться, але поточна функція закінчиться.

Для виходу з циклу ви можете встановити третій параметр на 0 довжину, встановити порожній масив. Цикл не буде продовжуватися, поточна функція виконує, тому ви можете використовувати "return" для завершення, як вихід у нормальному для циклу ...

Це:

[1,2,3,4,5,6,7,8,9,10].forEach((a,b,c) => {
    console.log(a);
    if(b == 2){return;}
    if(b == 4){c.length = 0;return;}
    console.log("next...",b);
});

надрукує це:

1
next... 0
2
next... 1
3
4
next... 3
5

Раніше мій код нижче

 this.state.itemsDataSource.forEach((item: any) => {
                if (!item.isByPass && (item.invoiceDate == null || item.invoiceNumber == 0)) {

                    return false;
                }
            });

Я змінив на нижче, це було виправлено.

 for (var i = 0; i < this.state.itemsDataSource.length; i++) {
                var item = this.state.itemsDataSource[i];
                if (!item.isByPass && (item.invoiceDate == null || item.invoiceNumber == 0)) {

                    return false;
                }
            }