Loop និងការធ្វើម្តងទៀត

មាតិកា

1. ហេតុអ្វីត្រូវធ្វើម្តងទៀត
2. Array ដំបូងរបស់អ្នក
3. for Loop បុរាណ
4. for...of៖ ដើរតាមតម្លៃ
5. while និង do/while
6. break និង continue
7. ចំណុចប្រយ័ត្ននៃ for...in
8. String និង Nested Loop
9. ការជៀសវាង Infinite Loop
10. សាកល្បងដោយខ្លួនឯង

1. ហេតុអ្វីត្រូវធ្វើម្តងទៀត

ទំព័រ profile របស់ Dara នឹងបង្ហាញគម្រោងបួន។ ការសរសេរកូដដូចគ្នាបួនដងអាចដំណើរការបាន ប៉ុន្តែវានឹងមានបញ្ហាភ្លាមៗពេលមានគម្រោងទីប្រាំ។ កុំព្យូទ័រពូកែធ្វើការងារម្តងទៀត ហើយ loop គឺជារបៀបដែលអ្នកប្រាប់ JavaScript ឲ្យធ្វើដូច្នោះ៖ ដំណើរការ block កូដម្តងហើយម្តងទៀត រហូតដល់លក្ខខណ្ឌប្រាប់ឲ្យឈប់។

នៅជំពូកមុន អ្នកបានប្រើ if ដើម្បីជ្រើសរើសរវាងផ្លូវពីរ។ Loop បន្ថែមគំនិតទីពីរ៖ ត្រឡប់ ក្រោយ ហើយដំណើរការផ្លូវដដែលម្តងទៀត។ កម្មវិធីស្ទើរតែទាំងអស់ប្រើទាំងពីរ។

2. Array ដំបូងរបស់អ្នក

Loop ត្រូវការអ្វីមួយដើម្បីដើរតាម។ អ្វីដែលសាមញ្ញបំផុតគឺ array ដែលជាបញ្ជីតម្លៃមានលំដាប់នៅក្នុងសញ្ញាតង្កៀបការ៉េ។ បង្កើតឯកសារឈ្មោះ loops.js នៅក្នុងថត dara-profile របស់អ្នក៖

const projects = [
  "Recipe Finder",
  "Weather Dashboard",
  "Khmer Typing Game",
  "Budget Tracker",
];

console.log(projects.length);
console.log(projects[0]);
console.log(projects[projects.length - 1]);

ដំណើរការវាដោយ node loops.js។ អ្នកនឹងឃើញ 4, Recipe Finder និង Budget Tracker។

ការពិតបីអំពី array ដែលត្រូវចងចាំ៖

• តម្លៃនីមួយៗមានទីតាំងមួយហៅថា index ហើយ index ចាប់ផ្តើមពី 0 មិនមែន 1 ទេ។ គម្រោងទីមួយគឺ projects[0]។
• projects.length គឺជាចំនួន item ដូច្នេះ index ចុងក្រោយគឺ length - 1 ជានិច្ច។
• អនុញ្ញាតឲ្យមានសញ្ញាក្បៀសនៅពីក្រោយ item ចុងក្រោយ។ វាធ្វើឲ្យការបន្ថែមបន្ទាត់ថ្មីងាយស្រួលជាងមុន។

ជំពូកទី 6 ពន្យល់អំពី array ឲ្យបានពេញលេញ។ សម្រាប់ពេលនេះ សូមចាត់ទុក array ជាបញ្ជីដែល loop ខាងក្រោមនឹងដើរកាត់។ នៅពេលក្រោយ ទិន្នន័យដដែលនេះនឹងបំពេញ card គម្រោងនៅលើទំព័ររបស់ Dara។

3. for Loop បុរាណ

for loop មានបីផ្នែកនៅក្នុងសញ្ញាវង់ក្រចករបស់វា៖

for (let i = 0; i < projects.length; i++) {
  console.log(i + 1, projects[i]);
}

for ( let i = 0 ;  i < projects.length ;  i++ ) { ... }
      └───┬───┘    └───────┬────────┘    └─┬─┘
      start          keep going if       after each
                     this is true         round

លទ្ធផលគឺ៖

1 Recipe Finder
2 Weather Dashboard
3 Khmer Typing Game
4 Budget Tracker

variable i ត្រូវបានប្រកាសដោយ let មិនមែន const ទេ ព្រោះតម្លៃរបស់វាផ្លាស់ប្តូរ។ តាមទំនៀមទម្លាប់ គេហៅវាថា i (មកពី "index") ហើយរាល់ជុំវាយកតម្លៃ 0, 1, 2, 3។ នៅពេល i ក្លាយជា 4 លក្ខខណ្ឌ 4 < 4 គឺ false ដូច្នេះ loop បញ្ចប់។ ការប្រើ < មិនមែន <= គឺសំខាន់៖ projects[4] មិនមានទេ ហើយអ្នកនឹងបាន undefined។

for loop បុរាណគឺជាជម្រើសត្រឹមត្រូវ នៅពេលអ្នកត្រូវការ index ឬនៅពេលអ្នកត្រូវរាប់តាមរបៀបពិសេស ដូចជារាប់ថយក្រោយ ឬរាប់ម្តងពីរ។

4. for...of៖ ដើរតាមតម្លៃ

ភាគច្រើនអ្នកមិនខ្វល់ពី index ទេ។ អ្នកគ្រាន់តែចង់បាន item នីមួយៗ។ សម្រាប់ករណីនោះ សូមប្រើ for...of៖

for (const title of projects) {
  console.log(title);
}

វាអានស្ទើរតែដូចភាសាអង់គ្លេស៖ "for each title of projects"។ គ្មាន counter ត្រូវចាប់ផ្តើម ត្រួតពិនិត្យ ឬ update ទេ ដូច្នេះមានឱកាសខុសតិចជាង។ នៅទីនេះ const ប្រើបាន ព្រោះ title ថ្មី ត្រូវបានបង្កើតរាល់ជុំ។

ប្រសិនបើអ្នកត្រូវការ index ផង សូមសុំគូពី array ដោយ entries() ហើយបំបែកវាចេញ៖

for (const [index, title] of projects.entries()) {
  console.log(`${index + 1}. ${title}`);
}

ច្បាប់ល្អមួយ៖ ចាប់ផ្តើមជាមួយ for...of។ ប្តូរទៅ for បុរាណ លុះត្រាតែអ្នកត្រូវការគ្រប់គ្រង counter ពេញលេញ។ (ជំពូកទី 6 បង្ហាញ method ដូចជា map និង filter ដែលជំនួស loop ជាច្រើន ប៉ុន្តែវាសង់លើគំនិតដូចគ្នា។)

Loop ក៏ជារបៀបបូកផលបូកផងដែរ។ ផលបូកកំពុងរត់ ចាប់ផ្តើមពីសូន្យ ហើយកើនឡើងរាល់ជុំ៖

let total = 0;

for (const n of [3, 5, 8]) {
  total += n;
}

console.log(total);

វានឹងបោះពុម្ព 16។ operator += មានន័យថា "បូកទៅលើតម្លៃដែលមានស្រាប់"។

5. while និង do/while

while loop ធ្វើម្តងទៀតដរាបណាលក្ខខណ្ឌរបស់វាជា true។ វាមានប្រយោជន៍ពេលអ្នកមិនដឹងជាមុនថាត្រូវការប៉ុន្មានជុំ។

let countdown = 3;

while (countdown > 0) {
  console.log(countdown);
  countdown--;
}

console.log("Go!");

វាបោះពុម្ព 3, 2, 1 រួចទៅ Go!។ លក្ខខណ្ឌត្រូវបានពិនិត្យ មុន រាល់ជុំ ដូច្នេះប្រសិនបើវាចាប់ផ្តើមជា false តួ loop មិនដំណើរការសោះ។

do...while loop ពិនិត្យ បន្ទាប់ពី ជុំ ដូច្នេះតួ loop ដំណើរការយ៉ាងហោចណាស់ម្តង៖

let attempts = 0;
let number;

do {
  number = attempts * 3 + 1;
  attempts++;
} while (number < 8);

console.log(attempts, number);

វាបោះពុម្ព 4 10។ អ្នកនឹងសូម្បីតែកម្រត្រូវការ do...while; វាសមនឹងករណីដូចជា "សុំឲ្យអ្នកប្រើបញ្ចូលទិន្នន័យ រួចសុំម្តងទៀតប្រសិនបើវាមិនត្រឹមត្រូវ"។ គ្រាន់តែដឹងថាវាមាន ហើយប្រើ for ឬ while សម្រាប់អ្វីៗផ្សេងទៀត។

6. break និង continue

Keyword ពីរផ្លាស់ប្តូររបៀបដែល loop ដំណើរការពីខាងក្នុង៖

• continue រំលងផ្នែកដែលនៅសល់នៃជុំនេះ ហើយទៅជុំបន្ទាប់។
• break បញ្ឈប់ loop ទាំងមូលភ្លាមៗ។

for (const title of projects) {
  if (title.startsWith("W")) {
    continue; // skip "Weather Dashboard"
  }

  if (title === "Budget Tracker") {
    break; // stop here, nothing after this is visited
  }

  console.log(title);
}

លទ្ធផលគឺ Recipe Finder និង Khmer Typing Game។ គម្រោង weather ត្រូវបានរំលង ហើយ loop បញ្ចប់នៅពេលវាមកដល់គម្រោងចុងក្រោយ។

break មានប្រយោជន៍សម្រាប់ការស្វែងរក៖ ពេលអ្នករកឃើញអ្វីដែលចង់បាន គ្មានហេតុផលត្រូវបន្តរកទៀតទេ។

let found;

for (const title of projects) {
  if (title.includes("Khmer")) {
    found = title;
    break;
  }
}

console.log(found); // "Khmer Typing Game"

(ជំពូកទី 6 បង្ហាញ find ដែលធ្វើដូចនេះក្នុងមួយបន្ទាត់។) ប្រើ break និង continue ដោយប្រយ័ត្ន។ ប្រសិនបើ loop មានវាច្រើន វានឹងពិបាកតាមដាន ហើយ if ដែលច្បាស់លាស់ជាងជាធម្មតាល្អជាង។

7. ចំណុចប្រយ័ត្ននៃ for...in

JavaScript មាន loop ទីបីដែលមើលទៅស្រដៀងគ្នា៖ for...in។ វា មិន ផ្តល់តម្លៃដល់អ្នកទេ។ វាផ្តល់ key (ឈ្មោះ) របស់ object៖

const levels = { html: 1, css: 2 };

for (const key in levels) {
  console.log(key, levels[key]);
}

វាបោះពុម្ព html 1 និង css 2 ហើយសម្រាប់ object វាអាចទទួលយកបាន។ បញ្ហាគឺ array។ for...in លើ array ផ្តល់ index ជា string ហើយវាក៏រួមបញ្ចូល property បន្ថែមណាមួយដែលមាននរណាបន្ថែមទៅ array ផង៖

const letters = ["x", "y"];
letters.extra = "oops";

for (const key in letters) {
  console.log(typeof key, key);
}

លទ្ធផលគឺ string 0, string 1 និង string extra។ នោះស្ទើរតែមិនមែនជាអ្វីដែលអ្នកចង់បានទេ។

ច្បាប់៖ ប្រើ for...of សម្រាប់ array និង string។ ប្រើ for...in សម្រាប់តែ object ធម្មតា ហើយសូម្បីតែទីនោះក៏ពេញចិត្ត Object.entries() (ជំពូកទី 6) ជាង។

8. String និង Nested Loop

String ក៏ជាអ្វីដែលអ្នកអាចដើរតាមបានដែរ។ for...of ទៅលើតួអក្សរនីមួយៗ៖

for (const char of "Dara") {
  console.log(char);
}

វាបោះពុម្ព D, a, r, a។ នេះជាការប្រើតូចមួយ គឺរាប់ស្រៈ៖

let vowels = 0;

for (const char of "Mengsreang") {
  if ("aeiou".includes(char)) {
    vowels++;
  }
}

console.log(vowels); // 3

អ្នកក៏អាចដាក់ loop មួយ នៅក្នុង loop មួយទៀតបានដែរ។ loop ខាងក្នុងដំណើរការពេញលេញរាល់ជុំនីមួយៗរបស់ loop ខាងក្រៅ៖

const skills = ["HTML", "CSS"];
const levels = ["basic", "good"];

for (const skill of skills) {
  for (const level of levels) {
    console.log(`${skill}-${level}`);
  }
}

លទ្ធផលគឺ HTML-basic, HTML-good, CSS-basic, CSS-good៖ ជុំខាងក្រៅពីរគុណជុំខាងក្នុងពីរ ស្មើបួនបន្ទាត់។ Nested loop គុណការងារ។ Loop 1,000 នៅក្នុង loop 1,000 គឺមួយលានជុំ ដូច្នេះសូមរក្សាការដាក់ក្នុងគ្នាឲ្យរាក់។

លំនាំមួយទៀតដែលអ្នកនឹងប្រើជាញឹកញាប់គឺ ការរាប់ ដោយប្រើ object៖

const tags = ["css", "js", "css"];
const counts = {};

for (const tag of tags) {
  counts[tag] = (counts[tag] ?? 0) + 1;
}

console.log(counts); // { css: 2, js: 1 }

?? 0 មានន័យថា "ប្រើ 0 ប្រសិនបើមិនទាន់មានការរាប់"។ យើងប្រើគំនិតនេះឯង នៅពេលទំព័ររបស់ Dara បង្ហាញចំនួនគម្រោងដែលមាន tag នីមួយៗ។

9. ការជៀសវាង Infinite Loop

ប្រសិនបើលក្ខខណ្ឌរបស់ loop មិនដែលក្លាយជា false វាដំណើរការជារៀងរហូត។ នេះហៅថា infinite loop។ នៅក្នុង Node terminal ជាប់គាំង; នៅក្នុង browser tab លែងឆ្លើយតប។

// DON'T run this — the condition is always true
let n = 1;
while (n > 0) {
  n++;
}

មូលហេតុធម្មតា៖

• អ្នកភ្លេច update: គ្មាន countdown-- ដូច្នេះលេខមិនដែលផ្លាស់ប្តូរ។
• Update ទៅខុសទិស: រាប់ i-- ខណៈលក្ខខណ្ឌគឺ i < 10។
• លក្ខខណ្ឌមិនអាចជា false បាន: while (true) ដោយគ្មាន break។

បញ្ជីពិនិត្យខ្លីមុននឹងដំណើរការ loop ណាមួយ៖

1. តើអ្វីផ្លាស់ប្តូររាល់ជុំ?
2. តើការផ្លាស់ប្តូរនោះនាំ loop ទៅរក លក្ខខណ្ឌឈប់ឬទេ?
3. តើលក្ខខណ្ឌនឹងក្លាយជា false ពិតប្រាកដឬទេ?

ប្រសិនបើអ្នកជាប់គាំងមែន សូមចុច Ctrl+C នៅក្នុង terminal ដើម្បីបញ្ឈប់ Node។ នៅក្នុង browser សូមបិទ tab។ គ្មានអ្វីខូចជាអចិន្ត្រៃយ៍ទេ; អ្នកគ្រាន់តែត្រូវកែ loop ហើយសាកល្បងម្តងទៀត។

10. សាកល្បងដោយខ្លួនឯង

1. រាប់ថយក្រោយ។ ប្រើ for loop បុរាណដើម្បីបោះពុម្ពលេខពី 10 ចុះដល់ 1 រួចបោះពុម្ព Lift off!។ តើអ្នកត្រូវផ្លាស់ប្តូរផ្នែកណាមួយនៃ for?
2. ដាក់លេខគម្រោង។ បន្ថែមគម្រោងទីប្រាំទៅ array projects ហើយបោះពុម្ពបញ្ជីជា 1. Recipe Finder, 2. ...។ តើ loop ត្រូវការផ្លាស់ប្តូរអ្វីទេ?
3. រំលង និងឈប់។ ប្រើ continue ដើម្បីរំលងគម្រោងទាំងអស់ដែលមានចំណងជើងវែងជាង 15 តួអក្សរ ហើយប្រើ break ដើម្បីឈប់បន្ទាប់ពីបោះពុម្ពចំណងជើងពីរ។ (title.length ផ្តល់ប្រវែង។)
4. បូកលេខគូ។ ដើរតាមលេខ 1 ដល់ 20 ហើយបូកតែលេខគូប៉ុណ្ណោះ។ (ជំនួយ៖ n % 2 === 0។)
5. រាប់អក្សរ។ ដើរតាមឈ្មោះរបស់អ្នកផ្ទាល់ ហើយរាប់ថាអក្សរ a លេចឡើងប៉ុន្មានដង។ បន្ទាប់មកធ្វើឲ្យវាដំណើរការទាំង a និង A។ (ជំនួយ៖ char.toLowerCase()។)
6. ធ្វើឲ្យវាគាំង ដោយសុវត្ថិភាព។ លុបបន្ទាត់ countdown-- ចេញពីឧទាហរណ៍ while ហើយដំណើរការវា។ បញ្ឈប់វាដោយ Ctrl+C។ បន្ទាប់មកដាក់បន្ទាត់ត្រឡប់មកវិញ ហើយពន្យល់ដោយពាក្យរបស់អ្នកថាហេតុអ្វីវាគាំង។

បន្ទាប់ យើងនឹងវេចខ្ចប់កូដបែបនេះទៅជា function ដែលប្រើឡើងវិញបាន ហើយមើលថា scope កំណត់ variable ណាខ្លះដែលផ្នែកនីមួយៗនៃកម្មវិធីរបស់អ្នកអាចមើលឃើញ។