Cara memecahkan loop peta di javascript

JavaScript tidak hanya aneh tetapi juga membingungkan dan ambigu. Semakin banyak Anda bekerja dan men-debug, semakin banyak Anda menemukan hal baru. Keanehan JavaScript adalah salah satu cara memutus loop. Berikut adalah beberapa cara untuk memutus loop dalam JavaScript

Pertama, mari kita lihat apa saja cara membuat loop dan memutus loop

1. Tradisional for, while,

   // benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
   conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
   Fastest is conditionalBreak,labeledLoop// Script:
   var { Benchmark } = require("benchmark");
   var suite = new Benchmark.Suite();
   suite.add("labeledLoop", function() {
     labeledLoop();
   });
   suite.add("conditionalBreak", function() {
     conditionalBreak();
   });
   suite.on("cycle", function(event) {
     console.log(String(event.target));
   });
   suite
     .on("complete", function() {
       console.log("Fastest is " + this.filter("fastest").map("name"));
     })
     .run({ async: true });

   0 loop. Membuat for-loop sangat mudah dan sangat umum

Cara istirahat. Breakin loop sangat mudah di sini. Anda dapat menggunakan kata kunci

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

for (let i = 0; i < a.length; i++) {
  if (a[i] === theValue) {
    break;
  }
}

Ini adalah cara yang lebih elegan untuk memutus lingkaran. Jika Anda memiliki loop bersarang (loop di dalam loop). Anda dapat menggunakan pernyataan berlabel untuk memutus satu lingkaran

Di sini outer adalah label yang diberikan untuk outer-loop. Setiap kali kondisinya cocok, kami memutuskan loop luar menggunakan kondisi berlabel

Bagian Menyenangkan. Menggunakan pernyataan label adalah cara yang bagus tetapi sedikit membingungkan bagi pengembang. Ini seperti pernyataan goto yang harus dihindari. Hasil yang sama bisa kita dapatkan dengan memperkenalkan variabel kondisional normal

Sampel

Jika Anda melihat kode yang disorot, saya telah memperkenalkan variabel breakOuterLoop dan saya memeriksa nilainya setelah setiap iterasi dari loop luar

Patokan. Anda mungkin mengatakan bahwa memperkenalkan variabel dan kondisi dapat memperlambat kode. Namun Anda mungkin terkejut ketika saya mengatakan, The

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

Catatan. Saya menggunakan benchmarkjs

2. Metode API Array Fungsional. Sekarang sehari kita menggunakan

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    break; //Error here: Illegal break statement
  }
  console.log(v)
}
data.forEach(printValueTill5)

Anda tidak dapat menggunakan kata kunci

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// using return
const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    return false
  }
  console.log(v)
}
data.forEach(printValueTill5)// Output: 1 2 3 4 6 7

Jika Anda mencoba mengembalikan false atau nilai apa pun. Itu dianggap sebagai kembali dari fungsi yang diberikan. Jadi kode akan berperilaku seperti pernyataan lanjutan

melalui lemparan. Anda dapat menggunakan pernyataan lemparan untuk menghentikan perulangan. Namun, itu bukan cara yang elegan

const data = [1, 2, 3, 4, 5, 6, 7];
const BREAK_LOOP_ERROR = Symbol("BREAK_LOOP");
const printValueTill5 = v => {
  if (v % 5 == 0) {
    throw BREAK_LOOP_ERROR;
  }
  console.log(v);
};
try {
  data.forEach(printValueTill5);
} catch (e) {
  if (e !== BREAK_LOOP_ERROR) throw e;
  console.debug(e);
}

Jika Anda memperhatikan berapa banyak kode boilerplate yang harus kita tulis setiap saat

melalui Array#setiap. Cara yang lebih bersih adalah menggunakan metode Array#every

// using 
const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = v => {
  if (v % 5 == 0) {
    return false; // return false to break
  }
  console.log(v);
  return true; // Else continue.
};
data.every(printValueTill5)

Metode

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

Fakta Menyenangkan. Menggunakan

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

// benchmark:labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop// Script:
var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

a. Setiap metode mengembalikan

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    break; //Error here: Illegal break statement
  }
  console.log(v)
}
data.forEach(printValueTill5)

1 di bagian akhir sehingga Anda dapat menyambung lebih jauh

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = v => {
  if (v % 5 == 0) {
    return false;
  }
  console.log(v);
  return true;
};
data.every(printValueTill5) // returns false
  .map(console.log) // Error: data.every(...).map is not a function

b. Anda harus mengubah fungsionalitas printValueTill5. Sulit untuk digunakan kembali lebih lanjut

c. Sulit untuk di-debug dan diuji

Jadi sekarang pertanyaannya tetap sama, “Bagaimana Anda memutus loop dalam JavaScript?”

Anda dapat membuat metode

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    break; //Error here: Illegal break statement
  }
  console.log(v)
}
data.forEach(printValueTill5)

Penggunaan

const data = [1, 2, 3, 4, 5, 6, 7];
const mapValue = v => {
  return v;
};
const till5 = v => v % 3 == 0;_.tillWhen(data, mapValue, till5)
  .forEach(x => console.log(x));// Output: 1 2 3 4 5

Tada. Sepertinya kita mencapai apa yang ingin kita capai. 😂😂 Kalo ada saran lagi. Tolong beri tahu saya di komentar

Silakan berlangganan / ikuti / bertepuk tangan untuk mendukung saya. terima kasih. 🙏🙏

Referensi. Loops_and_iteration, short-circuit-array-foreach-like-calling-break

Sebuah catatan dari tim Plain English

Tahukah Anda bahwa kami memiliki empat publikasi dan saluran YouTube? . io — tunjukkan cinta dengan mengikuti publikasi kami dan berlangganan saluran YouTube kami

Bagaimana cara menghentikan loop peta di JavaScript?

Bagaimana Anda memecahkan lingkaran pada peta?

Bagaimana cara memutus setiap loop dalam JavaScript?

Bagaimana Anda melewatkan peta di JavaScript?