History

localizeflow[bot] 388926566b chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)		4 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago

README.md

Unescape Escape

មូលដ្ឋាន JavaScript៖ អារេ និង លូប

Sketchnote ដោយ Tomomi Imura

journey
    title ការផ្សងព្រេងអារេ និងស្រឡាយរបស់អ្នក
    section មូលដ្ឋានអារេ
      ការបង្កើតអារេ: 5: You
      ការចូលដំណើរការធាតុ: 4: You
      វិធីសាស្រ្តអារេ: 5: You
    section ជំនាញស្រឡាយ
      ស្រឡាយ For: 4: You
      ស្រឡាយ While: 5: You
      សន្ទស្សន៍ទំនើប: 4: You
    section ការព្យាបាលទិន្នន័យ
      អារេ + ស្រឡាយ: 5: You
      ការប្រើប្រាស់ពិតប្រាកដ: 4: You
      ការបង្កើនសមត្ថភាព៖ 5: You

ប្រឡងមុនមេរៀន

ធ្លាប់សួរថាតើវេបសាយទទួលរងការតាមដានឥវ៉ាន់ក្នុងរទេះទិញ ផើយបង្ហាញបញ្ជីមិត្តរបស់អ្នកយ៉ាងដូចម្តេច? នេះជាកន្លែងដែលអារេ និងលូបចូលរួម។ អារេដូចជាកុងតឺន័រឌីជីថលដែលរក្សាព័ត៌មានច្រើនជាផ្នែកក្នុងការផ្ទុក ខណៈដែលលូបអនុញ្ញាតឱ្យអ្នកដំណើរការព័ត៌មានទាំងនោះបានយ៉ាងមានប្រសិទ្ធិភាពដោយមិនចាំបាច់ប្រើកូដដែលស្ទ repetitiously។

ម្នាក់ និងម្នាក់ ការយល់ដឹងទាំងពីរនេះបង្កើតមូលដ្ឋានសម្រាប់ដំណើរការព័ត៌មាននៅក្នុងកម្មវិធីរបស់អ្នក។ អ្នកនឹងរៀនពីការបញ្ជាក់ឲ្យមានជំហានដោយដៃជាក្នុងមួយទៅបង្កើតកូដដ៏ឆ្លាត វាងាយស្រួលដែលអាចដំណើរការឥវ៉ាន់រាប់រយ ឬរងរយរាប់ពាន់យ៉ាងលឿន។

នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងយល់ពីរបៀបធ្វើការងារដំណើរការព័ត៌មានស្មុគស្មាញជាមួយអ្នកគឺតែប៉ុន្មានបន្ទាត់កូដក៏បាន។ ចូររុករកមើលគំនិតសំខាន់ៗនៃកម្មវិធីនេះ។

🎥 ចុចរូបភាពខាងលើសម្រាប់វីដេអូអំពីអារេ និងលូប។

អ្នកអាចយកមេរៀននេះនៅលើ Microsoft Learn!

mindmap
  root((ការដំណើរការទិន្នន័យ))
    Arrays
      Structure
        ការសរសេរសញ្ញាវង់សង្វាក់
        ការតំណាងតាមលេខរាប់ចាប់ពីសូន្យ
        ទំហំឯកសារធ្វើប្រែប្រួល
      Operations
        push/pop
        shift/unshift
        indexOf/includes
      Types
        អារ៉េលេខ
        អារ៉េអក្សរ
        ប្រភេទចម្រុះ
    Loops
      For Loops
        ការគិតនៃការវិលមកវិញ
        ការដំណើរការអារ៉េ
        ដំណើរការត្រួតពិនិត្យបាន
      While Loops
        ពីលក្ខខណ្ឌនាក្រោម
        ការវិលមកវិញមិនដឹង
        ការបញ្ចូលពីអ្នកប្រើប្រាស់
      Modern Syntax
        for...of
        forEach
        Functional methods
    Applications
      Data Analysis
        สถิตិ
        ការជ្រើសតារាង
        ការបម្លែង
      User Interfaces
        បញ្ជី
        ម៉ឺនុយ
        ការបង្ហាញរូបភាព

អារេ

គិតថាអារេដូចជាកាប៊ីណែតលំដាប់ឯកសារ - មិនមែនផ្ទុកឯកសារតែមួយក្នុងលាភីមួយទេ ប៉ុន្តែអ្នកអាចរៀបចំអំពីវត្ថុជាច្រើនដែលទាក់ទងគ្នានៅក្នុងកុងតឺន័រតែមួយមានរចនាសម្ព័ន្ធ។ ក្នុងភាសាកម្មវិធី អារេចាំបាច់ឱ្យអ្នករក្សាព័ត៌មានជាច្រើននៅក្នុងកញ្ចប់មួយដែលបានរៀបចំ។

មិនថាអ្នកកំពុងបង្កើតវិទ្យាល័យរូបថត ជាមួយគ្រប់គ្រងបញ្ជីត្រូវធ្វើ ឬតាមដានពិន្ទុខ្ពស់នៅក្នុងហ្គេម អារេផ្តល់មូលដ្ឋានសម្រាប់ការរៀបចំព័ត៌មាន។ មកមើលរបៀបដែលវាដំណើរការរួមគ្នា។

✅ អារេមាននៅជុំវិញយើងទាំងអស់! តើអ្នកអាចគិតឧទាហរណ៍ជាក់ស្តែងនៃអារេក្នុងជីវិតពិត ដូចជា អារេផ្ទាល់បូស្ម័នពន្លឺដោយថ្ងៃទេ?

ការបង្កើតអារេ

ការបង្កើតអារេគឺមិនស្មុគស្មាញទេ - គ្រាន់តែប្រើក្រឡាចត្រង្គស្នើរសុីតោះ!

// អារ៉េទទេ - ដូចជារទេះទិញទំនិញទទេដែលកំពុងរង់ចាំធាតុ
const myArray = [];

កើតអ្វីកាន់តែមាននៅទីនេះ? អ្នកទើបបង្កើតធុងទទេមួយដោយប្រើក្រឡាចត្រង្គស្នើរសុីត []។ គិតថាវាដូចជាលីបារីទទេមួយ - វាបានត្រៀមខ្លួនទុកសម្រាប់ផ្ទុកសៀវភៅណាមួយដែលអ្នកចង់រៀបចំ។

អ្នកក៏អាចបញ្ចូលតម្លៃដើមទៅក្នុងអារេរបស់អ្នកតាំងពីដើមចាប់ផ្ដើមផងដែរ:

// មឺនុយរសជាតិកាតឃ្លីមរបស់ហាងអ្នក
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// ព័ត៌មានប្រវត្តិរូបអ្នកប្រើ (លាយបញ្ចូលប្រភេទទិន្នន័យខុសៗគ្នា)
const userData = ["John", 25, true, "developer"];

// ពិន្ទុការប្រលងសម្រាប់ថ្នាក់ដែលអ្នកចូលចិត្តបំផុត
const scores = [95, 87, 92, 78, 85];

រឿងគួរអោយចាប់អារម្មណ៍:

អ្នកអាចរក្សាទុកអត្ថបទ លេខ ឬតម្លៃពិត/មិនពិតក្នុងអារេដូចគ្នា
គ្រាន់តែបំបែកមួយមុខជាមួយក្បៀស - ងាយស្រួល!
អារេល្អឥតខ្ចោះសម្រាប់រក្សាព័ត៌មានដែលទាក់ទងគ្នារួមគ្នា

flowchart LR
    A["📦 អារេល"] --> B["បង្កើត [ ]"]
    A --> C["ផ្ទុកធាតុច្រើន"]
    A --> D["ចូលដំណើរការតាមចំណុចឯកសារ"]
    
    B --> B1["const arr = []"]
    B --> B2["const arr = [1,2,3]"]
    
    C --> C1["លេខ"]
    C --> C2["ខ្សែអក្សរ"]
    C --> C3["ប៊ូល្យាន"]
    C --> C4["ប្រភេទផ្សំ"]
    
    D --> D1["arr[0] = ដំបូង"]
    D --> D2["arr[1] = ទីពីរ"]
    D --> D3["arr[2] = ទីបី"]
    
    E["📊 ខ្សែកំណត់អារេល"] --> E1["ចំណុចឯកសារ 0: ដំបូង"]
    E --> E2["ចំណុចឯកសារ 1: ទីពីរ"]
    E --> E3["ចំណុចឯកសារ 2: ទីបី"]
    E --> E4["ចំណុចឯកសារ n-1: ចុងក្រោយ"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

ការចុះបញ្ជីអារេ (Array Indexing)

មានរឿងមួយដែលអាចមើលទៅអស្ចារ្យនៅដំបូង៖ អារេលេខកំណត់វត្ថុរបស់ខ្លួនចាប់ពីលេខ 0 មិនមែន 1ទេ។ ការចុះបញ្ជីពីសូន្យនេះមានដើមណែនាំមកពីរបៀបដោយស្មារតីសម្ភារៈកុំព្យូទ័រ ដូច្នេះវាជាប្រព័ន្ធមួយក្នុងភាសាកម្មវិធីចាស់ដូចជា C។ ទីតាំងនីមួយៗនៅក្នុងអារែមានលេខលំដាប់ហៅថា index។

លេខសន្ទស្សន៍	តម្លៃ	ការពិពណ៌នា
0	"Chocolate"	ធាតុទីមួយ
1	"Strawberry"	ធាតុទីពីរ
2	"Vanilla"	ធាតុទីបី
3	"Pistachio"	ធាតុទីបួន
4	"Rocky Road"	ធាតុទីប្រាំ

✅ តើវាអោយការភ្ញាក់ផ្អើលផងដែរទេថាអារេចាប់ផ្តើមពីលេខសន្ទស្សន៍សូន្យ? ក្នុងភាសាកម្មវិធីខ្លះៗ លេខសន្ទស្សន៍ចាប់ផ្តើមពី 1។ មានប្រវត្តិសាស្ត្រដែលគួរឱ្យចាប់អារម្មណ៍លើរឿងនេះ ដែលអ្នកអាចអាននៅ Wikipedia។

ការចូលប្រើធាតុអារេ៖

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// ទទួលបានធាតុមួយៗដោយប្រើកន្សោមបន្ទទែន
console.log(iceCreamFlavors[0]); // "Chocolate" - ធាតុទីមួយ
console.log(iceCreamFlavors[2]); // "Vanilla" - ធាតុទីបី
console.log(iceCreamFlavors[4]); // "Rocky Road" - ធាតុចុងក្រោយ

បំបែកអ្វីកើតឡើងទីនេះ៖

ប្រើក្រឡាចត្រង្គស្នើរសុីតជាមួយលេខសន្ទស្សន៍ដើម្បីចូលប្រើធាតុ
ត្រឡប់តម្លៃដែលបានរក្សាទុកនៅទីតាំងជាក់លាក់នោះ
ចាប់ផ្តើមរាប់ពី 0 ធ្វើឱ្យធាតុទីមួយគឺលេខសន្ទស្សន៍ 0

កែប្រែធាតុអារេ៖

// ប្ដូរតម្លៃដែលមានស្រាប់
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "ប៊ឺទឺពេកិន"

// បន្ថែមធាតុថ្មីនៅចុងបញ្ចប់
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "ម៉ាននំប័ុង"

នៅលើនេះ យើងបាន៖

កែប្រែធាតុទី ៤ ពី "Rocky Road" ទៅជា "Butter Pecan"
បន្ថែមធាតុថ្មី "Cookie Dough" នៅលេខសន្ទស្សន៍ ៥
ពង្រីកប្រវែងអារេដោយស្វ័យប្រវត្តិពេលបន្ថែមឥវ៉ាន់លើសដែនកំណត់បច្ចុប្បន្ន

ប្រវែងអារេ និងវិធីសាស្រ្តទូទៅ

អារេមានគុណលក្ខណៈ និងវិធីសាស្រ្តក្នុងស្រោចស្រង់ដែលធ្វើឱ្យការងារជាមួយទិន្នន័យកាន់តែងាយស្រួល។

រកប្រវែងអារេ៖

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// ប្រវែងអាប់ដេតដោយស្វ័យប្រវត្តិពេលម៉ាស៊ីនធាតុតំបន់មានការផ្លាស់ប្តូរ
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

ចំណុចសំខាន់ត្រូវចងចាំ៖

ត្រឡប់ចំនួនធាតុសរុបដែលមានក្នុងអារេ
ធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិពេលបន្ថែម ឬដកធាតុចេញ
ផ្តល់ការរាប់មានភាពដំណើរការសម្រាប់លូប ហើយក៏ដើម្បីធ្វើត្រួតពិនិត្យក៏បាន

វិធីសាស្ត្រអារេសំខាន់ៗ៖

const fruits = ["apple", "banana", "orange"];

// បន្ថែមធាតុ
fruits.push("grape");           // បន្ថែមទៅចុងក្រោយៈ ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // បន្ថែមទៅដើមៈ ["strawberry", "apple", "banana", "orange", "grape"]

// លុបធាតុ
const lastFruit = fruits.pop();        // លុប និងត្រឡប់ "grape"
const firstFruit = fruits.shift();     // លុប និងត្រឡប់ "strawberry"

// ស្វែងរកធាតុ
const index = fruits.indexOf("banana"); // ត្រឡប់ 1 (ទីតាំងនៃ "banana")
const hasApple = fruits.includes("apple"); // ត្រឡប់ true

យល់ដឹងពីវិធីសាស្ត្រទាំងនេះ៖

បន្ថែមធាតុជាមួយ push() (ចុង) និង unshift() (ដើម)
ដកធាតុជាមួយ pop() (ចុង) និង shift() (ដើម)
ស្វែងរកធាតុជាមួយ indexOf() និងពិនិត្យវត្តមានជាមួយ includes()
ត្រឡប់តម្លៃដែលមានប្រយោជន៍ដូចជាធាតុដែលបានដកចេញ ឬលេខសន្ទស្សន៍

✅ អ្នកអាចសាកល្បងដោយខ្លួនឯង! ប្រើ console របស់កម្មវិធីbrowser របស់អ្នកដើម្បីបង្កើត និងដំណើរការអារេដែលបានបង្កើតដោយអ្នក។

🧠 ការត្រួតពិនិត្យមូលដ្ឋានអារេ៖ រៀបចំទិន្នន័យរបស់អ្នក

សាកល្បងសម្គាល់ការយល់ដឹងអារេរបស់អ្នក៖

ហេតុអ្វីបានជាអារេចាប់ផ្តើមរាប់ពី 0 មិនមែន 1?
តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកព្យាយាមចូលទៅកាន់លេខសន្ទស្សន៍ដែលមិនមាន (ដូចជា arr[100] ក្នុងអារេមាន 5 ធាតុ)?
តើអ្នកអាចគិតឧទាហរណ៍ជីវិតពិត ៣ករណី ដែលអារេអាចមានប្រយោជន៍?

stateDiagram-v2
    [*] --> EmptyArray: const arr = []
    EmptyArray --> WithItems: បន្ថែមធាតុ
    WithItems --> Accessing: ប្រើសន្ទស្សន៍
    Accessing --> Modifying: ផ្លាស់ប្តូរតម្លៃ
    Modifying --> Processing: ប្រើវិធីសាស្ដ្រ
    
    WithItems --> WithItems: push(), unshift()
    Processing --> Processing: pop(), shift()
    
    note right of Accessing
        កំណត់សន្ទស្សន៍ចាប់ពីសូន្យ
        arr[0] = ធាតុនៅដើម
    end note
    
    note right of Processing
        វិធីសាស្រ្តដែលមានរួច
        ប្រតិបត្តិការដែលប្រែប្រួលបាន
    end note

ព័ត៌មានជីវិតពិត៖ អារេមាននៅគ្រប់កន្លែងក្នុងកម្មវិធី! បណ្ដាញសង្គម រទេះទិញ រូបថត វិនិយោគបទចំរៀង - ទាំងអស់គឺជាអារេសម្រាប់សំរាប់ខាងក្រោយ។

លូប

គិតថាការផ្តាកាសកម្មទណ្ឌ្យគឺពីរឿង Charles Dickens ដែលសិស្សានុសិស្សត្រូវសរសេររៀងរាល់លំនាំតែម្តង លូបគឺដូចជាមនុស្សជំនួយរហ័សតែមិនធុញទ្រាន់ដែលអាចធ្វើការលើសកម្មភាពមិនល្អ ។ មិនថាអ្នកត្រូវពិនិត្យមើលរាល់វត្ថុក្នុងរទេះទិញ ឬបង្ហាញរូបថតទាំងអស់នៅក្នុងអាល់ប៊ុម លូបអាចដំណើរការការស្ទ 반복បានយ៉ាងមានប្រសិទ្ធិភាព។

JavaScript ផ្តល់លូបមួយចំនួនដែលអ្នកអាចជ្រើសបាន។ មកពិនិត្យមើលមួយៗ ហើយយល់ពីពេលណាអាចប្រើពួកវា។

flowchart TD
    A["🔄 ប្រភេទ Loop"] --> B["For Loop"]
    A --> C["While Loop"]
    A --> D["For...of Loop"]
    A --> E["វិធីសាស្រ្ត forEach"]
    
    B --> B1["កំណត់ចំនួន iteration"]
    B --> B2["អាស្រ័យលើរោទ៍រាប់"]
    B --> B3["for(init; condition; increment)"]
    
    C --> C1["ចំនួន iteration មិនដឹង"]
    C --> C2["អាស្រ័យលើលក្ខខណ្ឌ"]
    C --> C3["while(condition)"]
    
    D --> D1["ES6+ ទាន់សម័យ"]
    D --> D2[" iteration តារាង array"]
    D --> D3["for(item of array)"]
    
    E --> E1["រចនាប័ទ្មអនុគមន៍"]
    E --> E2["វិធីសាស្រ្តតារាង"]
    E --> E3["array.forEach(callback)"]
    
    F["⏰ ពេលណាប្រើ"] --> F1["For: រាប់, ធាតុ index"]
    F --> F2["While: បញ្ចូលអ្នកប្រើ, ស្វែងរក"]
    F --> F3["For...of: iteration សាមញ្ញ"]
    F --> F4["forEach: ការសរសេរកម្មវិធីមុខងារ"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

លូប For

លូប for ដូចជាកំណត់ម៉ោង - អ្នកដឹងច្បាស់ពីចំនួនដងដែលអ្នកចង់អោយវាធ្វើ។ វាឈរជួរពិបាក និងអាចទុកចិត្តបាន ដែលធ្វើឲ្យវាល្អសម្រាប់អារេ ឬការរាប់របស់អ្នក។

រចនាសម្ព័ន្ធលូប For៖

សមាសធាតុ	គោលបំណង	ឧទាហរណ៍
ការចាប់ផ្ដើម	កំណត់ចំណុចចាប់ផ្ដើម	`let i = 0`
លក្ខខណ្ឌ	ពេលណាគេចន់ប្រកបដោយការបន្ត	`i < 10`
ការកើនឡើង	របៀបធ្វើបច្ចុប្បន្នភាព	`i++`

// ការរាប់ពី 0 ដល់ 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// ឧទាហរណ៍ប្រសើរជាងនេះ: ការប្រតិបត្ដិការពិន្ទុ
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

ជំហាននីមួយៗកើតឡើងដូចខាងក្រោម៖

ចាប់ផ្ដើមប៉ារ៉ាម៉ែត្រ i ទៅ 0 នៅដើម
ត្រួតពិនិត្យលក្ខខណ្ឌ i < 10 មុនរាល់វដ្ត
អនុវត្តប្លុកកូដនៅពេលលក្ខខណ្ឌត្រូវ
បន្ថែម i អោយមាន +1 បន្ទាប់រាល់វដ្ត
បញ្ឈប់ចំពោះពេលលក្ខខណ្ឌក្លាយទៅមិនត្រូវ (ពេល i ទៅដល់ 10)

✅ រត់កូដនេះក្នុង console តំណើរកម្មbrowser របស់អ្នក។ តើមានអ្វីកើតឡើងពេលអ្នកធ្វើការផ្លាស់ប្តូរតិចតួចលើកូដប្រដាប់រាប់ ភាពលក្ខខណ្ឌ ឬការបញ្ចូលវដ្ត? តើអ្នកអាចដាក់វាឡើងវិញចុះក្រោមដើម្បីបង្កើតការរាប់ចុះមួយទេ?

🗓️ ការត្រួតពិនិត្យជំនាញលូប For៖ ការធ្វើម្តងជាលំដាប់

ប៉ាថ្មើរអ្នកយល់ដឹងលូប For៖

តើមានបីផ្នែកណាខ្លះក្នុងលូប for ហើយវាកំពុងធ្វើអ្វី?
តើធ្វើដូចម្តេចដើម្បីលូបក្រឡាឡើងវិញលើអារេ?
តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកភ្លេចផ្នែកការកើនឡើង (i++)?

flowchart TD
    A["🚀 ចាប់ផ្តើម For Loop"] --> B["ផ្តើម: let i = 0"]
    B --> C{"លក្ខខណ្ឌ: i < array.length?"}
    C -->|true| D["អនុវត្តប្លុកកូដ"]
    D --> E["បន្ថែម: i++"]
    E --> C
    C -->|false| F["✅ ចាកចេញពី loop"]
    
    G["📋 លំនាំទូទៅ"] --> G1["for(let i=0; i<n; i++)"]
    G --> G2["for(let i=n-1; i>=0; i--)"]
    G --> G3["for(let i=0; i<arr.length; i+=2)"]
    
    style A fill:#e3f2fd
    style F fill:#e8f5e8
    style G fill:#fff3e0

ប្រាជ្ញាលូប៖ លូប for គឺល្អបំផុតនៅពេលដែលអ្នកដឹងច្បាស់ពីចំនួនដងដែលត្រូវធ្វើការ។ ពួកវាជាជម្រើសធម្មតាសម្រាប់ដំណើរការអារែ!

លូប While

លូប while ដូចជាការបង្ហាញថា "បន្តធ្វើរហូត..." - អ្នកប្រហែលមិនដឹងច្បាស់ចំនួនដងដែលវានឹងដំណើរការ ប៉ុន្តែអ្នកដឹងពីពេលណាចប់។ វាល្អសម្រាប់ការស្នើសុំអតិថិជនដើម្បីបញ្ចូល ត្រូវបានជម្រះការស្វែងរកទិន្នន័យរហូតដល់អ្នករកឃើញអ្វីដែលត្រូវការ។

លក្ខណៈលូប While៖

បន្តអនុវត្តនៅពេលលក្ខខណ្ឌត្រូវ
ត្រូវការជាមួយការគ្រប់គ្រងដៃលើអថេរ
ត្រួតពិនិត្យលក្ខខណ្ឌមុនរាល់វដ្ត
ចំណាំអាចបង្កការលូបគ្មានទីបញ្ចប់ ប្រសិនបើលក្ខខណ្ឌមិនធ្លាប់មិនត្រូវ

// ឧទាហរណ៍រាប់មូលដ្ឋាន
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // កុំភ្លេចបន្ថែម!
}

// ឧទាហរណ៍ជាក់ស្តែងបន្ថែម៖ ការប្រែប្រួលនៃការបញ្ចូលរបស់អ្នកប្រើ
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

យល់ដឹងពីឧទាហរណ៍ទាំងនេះ៖

គ្រប់គ្រងអថេរ i ដោយដៃនៅក្នុងខ្លួនលូប
បន្ថែមអថេរ ដើម្បីបញ្ឈប់លូបគ្មានទីបញ្ចប់
បង្ហាញករណីប្រើប្រាស់ជាក់ស្តែងជាមួយបញ្ចូល និងកំណត់ការព្យាយាម
រួមមានមធ្យោបាយសុវត្ថិភាពដើម្បីរារាំងកម្មវិធីដំណើរការអស់អ្នក

♾️ ការត្រួតពិនិត្យប្រាជ្ញាលូប While៖ ការធ្វើស្ទ 반복ដោយលក្ខខណ្ឌ

សាកល្បងយល់ដឹងលូប while របស់អ្នក៖

តើគ្រោះថ្នាក់សំខាន់ៗនៅពេលប្រើលូប while មួយមានអ្វីខ្លះ?
ពេលណាអ្នកជ្រើសរើសលូប while ទៅលើលូប for?
តើអ្នកធ្វើដូចម្តេចដើម្បីទប់ស្កាត់លូបគ្មានទីបញ្ចប់?

flowchart LR
    A["🔄 While ប្រៀបធៀបនឹង For"] --> B["វេរលំនាំ While"]
    A --> C["វេរលំនាំ For"]
    
    B --> B1["ការប្រតិបត្ដិមិនទាន់ស្គាល់"]
    B --> B2["បញ្ជាបានតាមលក្ខខណ្ឌ"]
    B --> B3["បញ្ចូលពីអ្នកប្រើ, ការស្វែងរក"]
    B --> B4["⚠️ ជ្រោមចិត្ត: ខ្សែរវិលមិនចប់"]
    
    C --> C1["ការប្រតិបត្ដិដែលស្គាល់"]
    C --> C2["បញ្ជាបានតាមរោទិ៍"]
    C --> C3["ដំណើរការតារាង"]
    C --> C4["✅ សុវត្ថិភាព: ចប់ដល់ពេលដែលកំណត់"]
    
    D["🛡️ គន្លឹះសុវត្ថិភាព"] --> D1["តែងតែផ្លាស់ប្តូររោទិ៍លក្ខខណ្ឌ"]
    D --> D2["រួមបញ្ចូលលក្ខខណ្ឌចេញ"]
    D --> D3["កំណត់ទំហំអតិបរមារបស់ការប្រតិបត្ដិ"]
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#ffebee

សុវត្ថិភាពជាមុនទាំងអស់៖ លូប while មានកំលាំងតែត្រូវការគ្រប់គ្រងលក្ខខណ្ឌយ៉ាងប្រុងប្រយ័ត្ន។ តែងតែប្រាកដថាលក្ខខណ្ឌលូបនឹងក្លាយទៅមិនត្រឹមត្រូវជាវិញ!

ជម្រើសលូបទំនើប

JavaScript ផ្ដល់សំណុំសមាសធាតុលូបទំនើបដែលលើកកម្ពស់ភាពងាយស្រួលអានកូដ និងកាត់បន្ថយកំហុស។

លូប For...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// វិធីសាស្ត្រ ఆధുനিক - ឆើតឆាយ និងមានសុវត្ថិភាព
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// ប្រៀបធៀបជាមួយលូប for ប្រពៃណី
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

អត្ថប្រយោជន៍សំខាន់នៃ for...of៖

ដកចេញការគ្រប់គ្រងលេខសន្ទស្សន៍ និងកំហុស off-by-one
ផ្តល់ការចូលប្រើជាផ្ទាល់ទៅធាតុអារេ
ធ្វើឲ្យកូដអាចអានបានយ៉ាងច្បាស់ និងកាត់បន្ថយសមាសធាតុ

វិធីសាស្ត្រ forEach៖

const prices = [9.99, 15.50, 22.75, 8.25];

// ការប្រើ forEach សម្រាប់រចនាសម្ព័ន្ធកម្មវិធីមុខងារ
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach ជាមួយមុខងារ arrow សម្រាប់ប្រតិបត្តិការងារងាយៗ
prices.forEach(price => console.log(`Price: $${price}`));

អ្វីដែលអ្នកត្រូវដឹងអំពី forEach ៖

អនុវត្តមុខងារសម្រាប់ធាតុអារេលាក់មួយៗ
ផ្តល់ទាំងតម្លៃធាតុ និងលេខសន្ទស្សន៍ជាប៉ារ៉ាម៉ែត្រ
មិនអាចដោះស្រាយឲ្យបញ្ឈប់មុនពេលកំណត់ (ខុសពីលូបបុរាណ)
ត្រឡប់ undefined (មិនបង្កើតអារេថ្មី)

✅ ហេតុអ្វីបានជាអ្នកជ្រើសរើសលូប for សំរាប់លូប while? មានអ្នកទស្សនាជិត 17,000នាក់បានសួរចំលើយដែលត្រូវនៅហ្វុរុម StackOverflow ហើយខ្លះនៃមតិរបស់ពួកគេច្រើន អាចជារឿងចាប់អារម្មណ៍សម្រាប់អ្នក។

🎨 ការត្រួតពិនិត្យវប្បធម៍លូបទំនើប៖ ការទទួលស្គាល់ ES6+

វាយតម្លៃការយល់ដឹងរបស់អ្នកអំពី JavaScript ទំនើប៖

អត្ថប្រយោជន៍នៃ for...of និងលូប For បុរាណខុសគ្នាយ៉ាងដូចម្តេច?
ពេលណាអ្នកនៅតែចូលចិត្តលូប For បុរាណ?
ភាពខុសគ្នារវាង forEach និង map?

quadrantChart
    title មគ្គុទេសក៍ជម្រើសវដ្ដខ្ចប់
    x-axis ប្រពៃណី --> សម័យទំនើប
    y-axis សាមញ្ញ --> ស្មុគស្មាញ
    quadrant-1 សម័យទំនើប ស្មុគស្មាញ
    quadrant-2 ប្រពៃណី ស្មុគស្មាញ
    quadrant-3 ប្រពៃណី សាមញ្ញ
    quadrant-4 សម័យទំនើប សាមញ្ញ
    
    Traditional For: [0.2, 0.7]
    While Loop: [0.3, 0.6]
    For...of: [0.8, 0.3]
    forEach: [0.9, 0.4]
    Array Methods: [0.8, 0.8]

និន្នាការទំនើប៖ វិធីសាស្ត្រ ES6+ ដូចជា for...of និង forEach កំពុងក្លាយជាជម្រើសល្អបំផុតសម្រាប់ការធ្វើបង្រៀនអារេ ដោយសារត្រូវបានធ្វើឲ្យស្អាត និងកាត់បន្ថយកំហុស!

លូប និង អារេ

ការចងក្រងអារេជាមួយឡូបបង្កើតសមត្ថភាពដំណើរការទិន្នន័យដ៏ឥតអូស។ ការចំណាយនេះជាសំបុត្រសម្រាប់មុខងារកម្មវិធីជាច្រើន ចាប់ពីបង្ហាញបញ្ជីទៅគណនស្ថិតិ។

ការដំណើរការអារេប្រពៃណី៖

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// វិធីសម្រាប់រំពេចប្រពៃណី
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// វិធីសម្រាប់...of សម្រាប់សម័យទំនើប
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

យើងត្រូវយល់ពីមធ្យោបាយនីមួយៗ៖

ប្រើគុណលក្ខណៈប្រវែងអារេដើម្បីកំណត់ដែនកំណត់លូប
ចូលទៅកាន់ធាតុតាមលេខសន្ទស្សន៍នៅក្នុងលូប for តាមបែបប្រពៃណី
ផ្តល់ការចូលប្រើធាតុដោយផ្ទាល់ ក្នុងលូប for...of
ដំណើរការធាតុអារេខ្លួនគ្រប់យ៉ាងតែម្តង

ឧទាហរណ៍ការដំណើរការទិន្នន័យប្រើប្រាស់៖

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// ដំណើរការពីរាល់ថ្នាក់ជាមួយរង្វិលតែមួយ
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

របៀបកូដនេះដំណើរការ៖

ចាប់ផ្ដើមអថេរតាមដានសម្រាប់ចំនួនសរុប និងតម្លៃខ្ពស់ទាប
ដំណើរការរៀងរាល់ពិន្ទុជាមួយលូបមានប្រសិទ្ធិភាព
បូកសរុបសម្រាប់គណនាមធ្យមពិន្ទុ
តាមដានតម្លៃខ្ពស់ និងទាបក្នុងការរុករក
គណនាស្ថិតិចុងក្រោយបន្ទាប់ពីចប់វដ្តលូប

✅ សាកល្បងដោយខ្លួនឯង ដំណើរការលូបលើអារែដែលអ្នកបង្កើតនៅក្នុង console browser របស់អ្នក។

flowchart TD
    A["📦 ទិន្នន័យតារា"] --> B["🔄 ការប្រតិបត្តិតួរ"]
    B --> C["📈 លទ្ធផល"]
    
    A1["[85, 92, 78, 96, 88]"] --> A
    
    B --> B1["គណនាផ្ដល់សរុប"]
    B --> B2["ស្វែងរកអប្បបរមា/អតិបរមា"]
    B --> B3["រាប់លក្ខខណ្ឌ"]
    B --> B4["បម្លែងទិន្នន័យ"]
    
    C --> C1["មធ្យម: 87.8"]
    C --> C2["ខ្ពស់បំផុត: 96"]
    C --> C3["ជាប់បញ្ជាក់: 5/5"]
    C --> C4["អក្សរកម្រិត"]
    
    D["⚡ គំរូក៏ដូចជា"] --> D1["សំណូក (សរុប)"]
    D --> D2["ការប្រៀបធៀប (អប្បបរមា/អតិបរមា)"]
    D --> D3["ការត្រង់ (លក្ខខណ្ឌ)"]
    D --> D4["ការបង្ហាញផែនទី (បម្លែង)"]
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#f3e5f5

ការប្រកួតប្រជែងនៃ GitHub Copilot Agent 🚀

ប្រើម៉ូត Agent ដើម្បីបញ្ចប់បញ្ហារបស់ខាងក្រោម៖

ការពិពណ៌នា៖ បង្កើតមុខងារអនុវត្តការដំណើរការទិន្នន័យយ៉ាងទូលំទូលាយ ដែលចងក្រងអារេ និងលូប ដើម្បីវិភាគទិន្នន័យនិងបង្កើតមតិយោបល់មានន័យ។

បញ្ជាក់៖ បង្កើតមុខងារមួយឈ្មោះ analyzeGrades ដែលទទួលអារែវត្ថុពិន្ទុសិស្ស (មានគ្រប់គ្រងកំណត់ឈ្មោះ និងពិន្ទុ) ហើយត្រឡប់វត្ថុមានស្ថិតិសម្រួល រួមមាន ពិន្ទុខ្ពស់បំផុត ពិន្ទុទាបបំផុត ពិន្ទុមធ្យម ចំនួនសិស្សដែលបានឆ្លង (ពិន្ទុ >= 70) និងអារែឈ្មោះសិស្សដែលពិន្ទុខ្ពស់ជាងមធ្យម។ ត្រូវប្រើលូបបែបខុសគ្នា យ៉ាងហោចណាស់ពីរក្នុងដំណោះស្រាយរបស់អ្នក។

សូមស្វែងយល់បន្ថែមអំពី agent mode នៅទីនេះ។

🚀 ប្រកួតប្រជែង

JavaScript ផ្តល់ជូននូវវិធីសាស្រ្តស៊ីរីថ្មីជាច្រើនសម្រាប់អារ៉េដែលអាចជំនួសសម្រាប់ល៊ូបបុរាណសម្រាប់ភារកិច្ចជាក់លាក់។ សូមស្វែងយល់ពី forEach, for-of, map, filter, និង reduce។

ការប្រលងរបស់អ្នក៖ ធ្វើការកែប្រែឧទាហរណ៍ពិន្ទុនិស្សិតដោយប្រើយ៉ាងហោចណាស់វិធីសាស្រ្តអារ៉េបីប្រភេទផ្សេងគ្នា។ សម្គាល់មើលថាចូរលេខកូដមានភាពស្អាត និងអាចអានបានកាន់តែច្បាស់ជាមួយវេយ្យាករណ៍ JavaScript សម័យថ្មីយ៉ាងដូចម្តេច។

ការប្រលងបន្ទប់សិក្សាបន្ទាប់

Post-lecture quiz

ការពិនិត្យឡើងវិញ និងការសិក្សាគ្រាប់ខ្លួនឯង

អារ៉េនៅក្នុង JavaScript មានវិធីសាស្រ្តជាច្រើនភ្ជាប់ទៅមួួយដែលមានប្រយោជន៍ខ្លាំងសម្រាប់ការបំលែងទិន្នន័យ។ អានអំពីវិធីសាស្រ្តទាំងនេះ ហើយសាកល្បងខ្លះៗពីវាតាមករណីអារ៉េដែលអ្នកបង្កើត។

ការងារ

Loop an Array

📊 សង្ខេបឧបករណ៍អារ៉េ និងល៊ូបរបស់អ្នក

graph TD
    A["🎯 ការជំនាញលើអារេ និងលីប"] --> B["📦 មូលដ្ឋានអារេ"]
    A --> C["🔄 ប្រភេទលីប"]
    A --> D["🔗 ការដំណើរការទិន្នន័យ"]
    A --> E["🎨 បច្ចេកទេសសម័យថ្មី"]
    
    B --> B1["បង្កើត: [ ]"]
    B --> B2["ការជ្រើសតំណាង: arr[0]"]
    B --> B3["វិធីសាស្ត្រ: push, pop"]
    B --> B4["គុណលក្ខណៈ: length"]
    
    C --> C1["For: ចំនួនលាមកាលបានកំណត់"]
    C --> C2["While: ដោយលក្ខខណ្ឌ"]
    C --> C3["For...of: ចូលដំណើរការត្រង់"]
    C --> C4["forEach: រាងមុខកម្មវិធី"]
    
    D --> D1["ការគណនាស្ថិតិ"]
    D --> D2["ការបម្លែងទិន្នន័យ"]
    D --> D3["ការត្រង់ និងស្វែងរក"]
    D --> D4["ការដំណើរការពេលជាក់ស្តែង"]
    
    E --> E1["មុខងារត្រង"]
    E --> E2["ការចងខ្សែវិធីសាស្ត្រ"]
    E --> E3["ការបំបែកសមាសធាតុ"]
    E --> E4["អក្សរគំរូ"]
    
    F["💡 អត្ថប្រយោជន៍សំខាន់"] --> F1["ការដំណើរការទិន្នន័យមានប្រសិទ្ធភាព"]
    F --> F2["កូដធ្វើឡើងថ្មីតិច"]
    F --> F3["ដំណោះស្រាយអាចពង្រីកបាន"]
    F --> F4["វេយ្យាករណ៍ស្អាត"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 រយៈពេលជំនាញអារ៉េ និងល៊ូបរបស់អ្នក

⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីក្រោយ

បង្កើតអារ៉េរបស់ភាពយន្តដែលអ្នកចូលចិត្ត និងចូលដល់ធាតុកដែលជាក់លាក់
សរសេរល៊ូប for ដែលរាប់ពី 1 ដល់ 10
សាកល្បងការប្រលងវិធីសាស្រ្តអារ៉េស៊ីរីសម័យថ្មីពីមេរៀន
អនុវត្តលេខាំងអារ៉េក្នុងកម្មវិធីកុងសូលក្រវាត់អ្នករុករក

🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងម៉ោងនេះ

បញ្ចប់ការប្រលងបន្ទាប់មកពីមេរៀន និងពិនិត្យឡើងវិញគំនិតដែលមានបញ្ហា
បង្កើតកម្មវិធីវិភាគពិន្ទុសិក្សាដ៏ទូលំទូលាយពីការប្រលង GitHub Copilot
បង្កើតរទេះទិញទំនិញធម្មតាមួយដែលបន្ថែមនិងដកធាតុ
អនុវត្តការបម្លែងរវាងប្រភេទល៊ូបផ្សេងៗ
សាកល្បងវិធីសាស្រ្តអារ៉េដូចជា push, pop, slice, និង splice

📅 ដំណើរប្រតិបត្តិការដល់ទិន្នន័យរយៈសប្ដាហ៍របស់អ្នក

បញ្ចប់ភារកិច្ច "Loop an Array" ជាមួយការកែលម្អដើម្បីច្នៃប្រឌិត
បង្កើតកម្មវិធីបញ្ជីកិច្ចការប្រើប្រាស់អារ៉េ និងល៊ូប
បង្កើតកម្មវិធីគណនាតារាងសម្រាប់ទិន្នន័យចំនួន
អនុវត្តជាមួយ វិធីសាស្រ្តអារ៉េ MDN
បង្កើតផ្ទាំងរូបថតឬបញ្ជីចម្រៀង
ស្វែងយល់កម្មវិធីសម្រាប់អនុគមន៍ map, filter, និង reduce

🌟 ការបម្លែងរយៈខែរបស់អ្នក

ជំនាញលំអិតនៃប្រតិបត្តិការអារ៉េនិងការបង្កើនប្រសិទ្ធភាព
បង្កើតផ្ទាំងបង្ហាញទិន្នន័យសរុប
ចូលរួមគម្រោងកូដបើកដែលពាក់ព័ន្ធនឹងការប្រតិបត្តិការទិន្នន័យ
បង្រៀនអ្នកផ្សេងទៀតអំពីអារ៉េ និងល៊ូបជាមួយឧទាហរណ៍ផ្សេងៗ
បង្កើតបណ្ណាល័យផ្ទាល់ខ្លួននៃអនុគមន៍ប្រតិបត្តិការទិន្នន័យដែលអាចប្រើប្រាស់ឡើងវិញ
ស្វែងយល់អាល់ហ្គរីធម៍ និងរចនាសម្ព័ន្ធទិន្នន័យដែលស្ថិតលើអារ៉េ

🏆 ការត្រួតពិនិត្យជ័យលាភីប្រតិបត្តិការទិន្នន័យចុងក្រោយ

អបអរសាទរជំនាញអារ៉េ និងល៊ូបរបស់អ្នក៖

តើប្រតិបត្តិការអារ៉េណាមួយដែលមានប្រយោជន៍ខ្លាំងបំផុតដែលអ្នកបានរៀនសម្រាប់កម្មវិធីពិភពលោកពិតគឺអ្វី?
តើប្រភេទល៊ូបណាមួយដែលអ្នកមានអារម្មណ៍ថាជាប្រភេទធម្មតាដែលមានគន្លងច្បាស់ និងហេតុអ្វី?
តើការយល់ដឹងអំពីអារ៉េ និងល៊ូបបានផ្លាស់ប្តូរបទដ្ឋានរបស់អ្នកចំពោះការរៀបចំទិន្នន័យយ៉ាងដូចម្តេច?
តើភារកិច្ចប្រតិបត្តិការទិន្នន័យស្មុគស្មាញណាមួយដែលអ្នកចង់អនុវត្តបន្ទាប់?

journey
    title ការវិវត្តន៍នៃការបម្លែងទិន្នន័យរបស់អ្នក
    section ថ្ងៃនេះ
      Array Confusion: 3: You
      Loop Basics: 4: You
      Index Understanding: 5: You
    section សប្តាហ៍នេះ
      Method Mastery: 4: You
      Efficient Processing: 5: You
      Modern Syntax: 5: You
    section ខែក្រោយ
      Complex Algorithms: 5: You
      Performance Optimization: 5: You
      Teaching Others: 5: You

📦 អ្នកបានដោះសោអំណាចនៃការរៀបចំ និងប្រតិបត្តិការទិន្នន័យ! អារ៉េ និងល៊ូបគឺជាគ្រឹះនៃកម្មវិធីភាគច្រើនដែលអ្នកនឹងបង្កើតនៅពេលណាមួយ។ ចាប់ពីបញ្ជីសាមញ្ញទៅដល់ការវិភាគទិន្នន័យស្មុគស្មាញ អ្នកឥឡូវមានឧបករណ៍ដើម្បីដោះស្រាយព័ត៌មានដោយមានប្រសិទ្ធភាព និងអសកម្មភាព។ គេហទំព័រតក់សតពហុមុខងារ កម្មវិធីទូរស័ព្ទ និងកម្មវិធីដែលផ្អែកលើទិន្នន័យ គឺទាំងអស់ពឹងផ្អែកលើគំនិតមូលដ្ឋានទាំងនេះ។ ស្វាគមន៍ចូលកាន់ពិភពនៃការប្រតិបត្តិការទិន្នន័យដែលអាចពង្រីកបាន! 🎉

ការព្រមាន៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ខណៈពេលដែលយើងខិតខំរកភាពត្រឹមត្រូវ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិក្នុងខ្លះអាចមានកំហុសឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមានភាសារបស់វាគួរត្រូវបានគ្រប់គ្រងជាផ្លូវការជាទិន្នន័យគ្រឹះ។ សម្រាប់ព័ត៌មានសំខាន់ៗ ការបកប្រែដោយអ្នកជំនាញដែលជាមនុស្សត្រូវបានណែនាំ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំបញ្ចេញឆ្លងឆ្លើយ ឬការបកប្រែខុសដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះទេ។

README.md Unescape Escape