Array ลัดวงจรเช่นกัน

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

ฉันจะทำสิ่งนี้โดยใช้forEachวิธีการใหม่ใน JavaScript ได้อย่างไร ฉันได้พยายามreturn;, และreturn false; ขัดข้องและไม่ทำอะไรเลยนอกจากทำซ้ำอีกครั้งbreakbreakreturn

มีของในตัวไม่มีความสามารถในการใน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(ซึ่งจะหยุดบนreturn false) และforEachวิธีการ ECMAScript ฉบับที่ห้าทั้งหมดซึ่งจะต้องมีการเพิ่มให้กับArray.prototypeเบราว์เซอร์ที่พวกเขากำลังขาดหายไป

ขณะนี้เป็นวิธีที่ดียิ่งขึ้นที่จะทำเช่นนี้ใน ECMAScript2015 (aka 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;
  }
}

จากเอกสาร:

ทั้งสำหรับ ... ในและสำหรับ ... ของคำสั่งซ้ำมากกว่าบางสิ่งบางอย่าง ความแตกต่างที่สำคัญระหว่างพวกเขาคือสิ่งที่พวกเขาย้ำ สำหรับ ... ในคำสั่ง iterates กว่าคุณสมบัติที่นับของวัตถุในการสั่งซื้อแทรกเดิม สำหรับ ... ของคำสั่ง iterates มากกว่าข้อมูลที่กำหนดวัตถุ iterable ที่จะซ้ำมากกว่า

ต้องการดัชนีในการวนซ้ำหรือไม่? คุณสามารถใช้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()ดำเนินการฟังก์ชั่นการโทรกลับครั้งเดียวสำหรับแต่ละองค์ประกอบที่มีอยู่ในอาร์เรย์จนกว่าจะพบหนึ่งที่โทรกลับส่งกลับค่าความจริง (ค่าที่กลายเป็นจริงเมื่อถูกแปลงเป็นBoolean) หากพบองค์ประกอบดังกล่าวจะsome()ส่งกลับค่าความจริงทันที มิฉะนั้น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)
})

ห้องสมุด Lodash ยังมี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

หากคุณต้องการใช้คำแนะนำของ Dean Edwardและโยนข้อผิดพลาด 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;
        }
      }
    };
  }
})();

โค้ดด้านบนจะให้ความสามารถในการเรียกใช้โค้ดดังต่อไปนี้โดยไม่ต้องทำคำสั่ง try-catch ของคุณเอง:

// 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ทางเลือกที่จะทำให้เกิดผลข้างเคียง (เปลี่ยนบาง vars ด้านนอกของ.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; 
});

การคืนค่า 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 loop แต่รักษาการอ้างอิงวัตถุใน loop เหมือนกับ forEach () แต่คุณสามารถแยกย่อยได้

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

ตามที่กล่าวไว้ก่อนหน้านี้คุณไม่สามารถหยุด .forEach()ดังที่ได้กล่าวมาก่อนคุณไม่สามารถทำลาย

นี่เป็นวิธีที่ทันสมัยกว่าเล็กน้อยในการทำ foreach กับ ES6 Iterators อนุญาตให้คุณเข้าถึงโดยตรง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>

สองเซ็นต์ของฉัน

ฉันรู้ว่ามันไม่ถูกต้อง มันไม่ได้ทำลายวง มันเป็น Jugad

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, upvoted

นอกจากนี้ FYI:

Prototype.js มีบางอย่างสำหรับจุดประสงค์นี้:

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

$break จะถูกจับและจัดการโดย Prototype.js ภายในทำลายวงจร "แต่ละ" แต่ไม่สร้างข้อผิดพลาดภายนอก

ดูPrototype.JS APIสำหรับรายละเอียด

jQuery ยังมีวิธีเพียงส่งคืนค่าเท็จในตัวจัดการเพื่อแบ่งลูปก่อน:

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

  });
</script>

ดูjQuery APIสำหรับรายละเอียด

สิ่งนี้ไม่ได้มีประสิทธิภาพมากที่สุดเนื่องจากคุณยังคงวนองค์ประกอบทั้งหมด แต่ฉันคิดว่ามันอาจจะคุ้มค่าเมื่อพิจารณาจากสิ่งที่ง่ายมาก:

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และคุณสามารถเพิ่มฟังก์ชั่นย้อนกลับเพื่อออกจากภายใน ประสิทธิภาพที่ดีขึ้นเช่นกัน

หากคุณต้องการแบ่งตามมูลค่าขององค์ประกอบที่มีอยู่แล้วในอาร์เรย์ของคุณเช่นในกรณีของคุณ (เช่นหากเงื่อนไขการแบ่งไม่ขึ้นอยู่กับตัวแปรรันไทม์ที่อาจเปลี่ยนแปลงได้หลังจากกำหนดอาร์เรย์แล้วให้กำหนดค่าองค์ประกอบ) ของslice ()และindexOf ()ดังต่อไปนี้

หากคุณต้องการหยุดพักเมื่อถึง "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(ตัวอย่างเช่นเขียนใน typescript)

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 แต่ละครั้ง

หากต้องการดำเนินการต่อคุณสามารถใช้การส่งคืนลูปจะดำเนินการต่อ แต่ฟังก์ชั่นปัจจุบันจะสิ้นสุด

หากต้องการออกจากลูปคุณสามารถตั้งค่าพารามิเตอร์ที่สามเป็น 0 ความยาวตั้งเป็นอาร์เรย์ว่าง การวนซ้ำจะไม่ดำเนินการต่อฟังก์ชั่นปัจจุบันทำเพื่อให้คุณสามารถใช้ "ย้อนกลับ" เพื่อเสร็จสิ้นเช่นออกในปกติสำหรับวง ...

นี้:

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