Operator និងលក្ខខណ្ឌ

មាតិកា

1. Operator ធ្វើការងារ
2. ការប្រៀបធៀប និងភាពស្មើគ្នា
3. Truthy និង Falsy
4. if, else if, else
5. switch
6. Logical Operator៖ &&, ||, !
7. តម្លៃលំនាំដើមដែលមានសុវត្ថិភាព៖ ?? និង ?.
8. Ternary Operator
9. រូបមន្ត៖ ការស្វាគមន៍តាមពេលវេលាក្នុងថ្ងៃ
10. សាកល្បងដោយខ្លួនឯង

1. Operator ធ្វើការងារ

Operator គឺជានិមិត្តសញ្ញាដែលផ្សំតម្លៃឲ្យទៅជាតម្លៃថ្មី។ អ្នកបានប្រើ + និង = រួចហើយ។ នេះជា arithmetic operator៖

Operator សំណល់ % មានប្រយោជន៍ជាងអ្វីដែលវាមើលទៅ។ n % 2 === 0 ប្រាប់អ្នកថា n ជាលេខគូឬអត់។

Operator អាចផ្សំជាមួយ assignment ជាផ្លូវកាត់៖

let score = 10;
score += 5;  // ដូច score = score + 5  -> 15
score -= 3;  // 12
score++;     // បូកមួយ -> 13
console.log(score);

2. ការប្រៀបធៀប និងភាពស្មើគ្នា

Comparison operator បង្កើត boolean (true ឬ false)៖

console.log(5 > 3);   // true
console.log(5 <= 3);  // false
console.log(5 !== 3); // true: "មិនស្មើ"

សម្រាប់ភាពស្មើគ្នា មានពីរកំណែ ហើយភាពខុសគ្នាសំខាន់៖

console.log(5 === "5");  // false: number ទល់នឹង string
console.log(5 == "5");   // true: "5" ត្រូវបានបំប្លែងទៅជា 5
console.log(0 == "");    // true  (គួរឲ្យភ្ញាក់ផ្អើល)
console.log(null == undefined); // true
console.log(null === undefined); // false

Loose equality ធ្វើតាមច្បាប់បំប្លែងដ៏ស្មុគស្មាញដែលមានមនុស្សតិចតួចចងចាំបាន។ ប្រើ === និង !== ជានិច្ច។ ស៊េរីទាំងមូលនេះធ្វើដូច្នោះ ហើយច្បាប់ style របស់ក្រុមភាគច្រើនតម្រូវវា។

3. Truthy និង Falsy

ប្រយោគ if ត្រូវការលក្ខខណ្ឌមួយ។ នៅពេលលក្ខខណ្ឌមិនមែនជា boolean JavaScript បំប្លែងវា។ គ្រប់តម្លៃសុទ្ធតែជា truthy (ដើរតួដូច true) ឬ falsy (ដើរតួដូច false)។

មានតម្លៃ falsy តែបន្តិចបន្តួចប៉ុណ្ណោះ។ ទន្ទេញបញ្ជីនេះ៖

false, 0, -0, 0n, "", null, undefined, NaN

អ្វីៗផ្សេងទៀតគឺ truthy រួមទាំង "0", " ", [] (array ទទេ) និង {} (object ទទេ)។ ពិនិត្យដោយ Boolean()៖

console.log(Boolean("Dara")); // true
console.log(Boolean(""));     // false
console.log(Boolean(0));      // false
console.log(Boolean([]));     // true  <-- array ទទេគឺ truthy

Truthiness ផ្តល់វិធីខ្លីដើម្បីសួរថា "តើមានតម្លៃឬទេ?" ឧទាហរណ៍ if (name) ជា true នៅពេល name ជា string ដែលមិនទទេ។ ត្រូវប្រយ័ត្ននៅពេល 0 ជាតម្លៃត្រឹមត្រូវ៖ if (count) ជា false នៅពេល count ជា 0។

4. if, else if, else

ប្រយោគ if ដំណើរការ block កូដតែនៅពេលលក្ខខណ្ឌជា truthy ប៉ុណ្ណោះ៖

const age = 17;

if (age >= 18) {
  console.log("Adult");
} else if (age >= 13) {
  console.log("Teenager");
} else {
  console.log("Child");
}

វាបោះពុម្ព Teenager។ JavaScript ពិនិត្យលក្ខខណ្ឌពីលើចុះក្រោម ហើយដំណើរការ block ដំបូង ដែលត្រូវគ្នា រួចរំលងដែលនៅសល់។ else នៅចុងបញ្ចប់ចាប់យកអ្វីៗផ្សេងទៀត ហើយវាជាជម្រើស។

ប្រើដង្កៀបអង្កាញ់ { } ជានិច្ច សូម្បីសម្រាប់តែមួយបន្ទាត់។ វាការពារកំហុសពេលអ្នកបន្ថែមបន្ទាត់ទីពីរនៅពេលក្រោយ។

5. switch

នៅពេលអ្នកប្រៀបធៀបតម្លៃមួយជាមួយជម្រើសជាក់លាក់ច្រើន switch ស្អាតជាងខ្សែ else if វែង៖

const day = "Sat";

switch (day) {
  case "Sat":
  case "Sun":
    console.log("Weekend");
    break;
  case "Fri":
    console.log("Almost the weekend");
    break;
  default:
    console.log("Weekday");
}

វាបោះពុម្ព Weekend។ case នីមួយៗប្រៀបធៀបដោយ ===។ break បញ្ចប់ switch; បើគ្មានវា JavaScript បន្តដំណើរការចូលទៅ case បន្ទាប់ ("fall through")។ នៅទីនេះ "Sat" គ្មាន break ដោយចេតនា ដូច្នេះវាចែករំលែកកូដជាមួយ "Sun"។ default ដំណើរការនៅពេលគ្មានអ្វីត្រូវគ្នា។

ប្រើ switch សម្រាប់បញ្ជីតម្លៃជាក់លាក់។ ប្រើ if សម្រាប់ជួរដូចជា hour < 12។

6. Logical Operator៖ &&, ||, !

Logical operator ផ្សំលក្ខខណ្ឌ៖

const hour = 14;
const isWorkHours = hour >= 9 && hour < 17;
console.log(isWorkHours); // true
console.log(!isWorkHours); // false

Operator ទាំងនេះមានលក្ខណៈពិសេសមានប្រយោជន៍មួយ៖ ពួកវាត្រឡប់មួយក្នុងចំណោម តម្លៃ ទាំងពីររបស់ពួកវា មិនមែនត្រឹមតែ true ឬ false ទេ ហើយពួកវាឈប់មុនកំណត់ ("short circuit")។ || ត្រឡប់តម្លៃ truthy ដំបូង ហើយ && ត្រឡប់តម្លៃ falsy ដំបូង៖

const nickname = "";
console.log(nickname || "Friend"); // "Friend": "" ជា falsy ដូច្នេះប្រើតម្លៃបម្រុង
console.log(true && "Shown");      // "Shown"

|| ច្រើនត្រូវបានប្រើសម្រាប់តម្លៃលំនាំដើម ប៉ុន្តែវាមានបញ្ហា៖ វាចាត់ទុក 0 និង "" ជា "បាត់" ទោះបីជាចម្លើយពិតក៏ដោយ។ ផ្នែកបន្ទាប់ដោះស្រាយរឿងនេះ។

7. តម្លៃលំនាំដើមដែលមានសុវត្ថិភាព៖ ?? និង ?.

Nullish coalescing (??) ផ្តល់តម្លៃលំនាំដើមតែនៅពេលផ្នែកខាងឆ្វេងជា null ឬ undefined ប៉ុណ្ណោះ។ វាទុក 0, "" និង false ឲ្យនៅដដែល៖

const likes = 0;
console.log(likes || 10); // 10  (ខុស: 0 ជាចំនួនពិត)
console.log(likes ?? 10); // 0   (ត្រឹមត្រូវ)

Optional chaining (?.) អាន property នៃអ្វីមួយដែលប្រហែលជាមិនមាន ដោយសុវត្ថិភាព។ បើគ្មានវា ការអាន property របស់ undefined បញ្ឈប់កម្មវិធីដោយកំហុស៖

const dara = { name: "Dara", address: undefined };

// console.log(dara.address.city);  // TypeError: Cannot read properties of undefined
console.log(dara.address?.city);    // undefined: មិន crash
console.log(dara.address?.city ?? "City not given"); // "City not given"

គូ ?. និង ?? ជារឿងធម្មតា៖ អានអ្វីមួយដែលប្រហែលជាបាត់ បន្ទាប់មកផ្តល់តម្លៃបម្រុង។ (Object ត្រូវបានពន្យល់ពេញលេញក្នុងជំពូកទី 6។)

8. Ternary Operator

Ternary operator គឺជា if/else ខ្លីដែលបង្កើតតម្លៃមួយ។ វាមានបីផ្នែក៖ condition ? valueIfTrue : valueIfFalse។

const projectCount = 1;
const label = projectCount === 1 ? "project" : "projects";
console.log(`${projectCount} ${label}`); // "1 project"

ប្រើវាសម្រាប់ជម្រើសសាមញ្ញរវាងតម្លៃពីរ។ ប្រសិនបើអ្នក nest ternary ឬបន្ទាត់ក្លាយជាវែង សូមប្រើ if ធម្មតាជំនួសវិញ។ ភាពងាយអានសំខាន់ជាងការសន្សំបន្ទាត់។

9. រូបមន្ត៖ ការស្វាគមន៍តាមពេលវេលាក្នុងថ្ងៃ

ទំព័ររបស់ Dara គួរស្វាគមន៍ភ្ញៀវតាមពេលវេលា។ Method new Date().getHours() ត្រឡប់ម៉ោងបច្ចុប្បន្នពី 0 ដល់ 23។ យើងដាក់ការសម្រេចចិត្តក្នុងកូដតូចមួយ៖

const hour = new Date().getHours();
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

const visitorName = null;
const displayName = visitorName ?? "friend";

console.log(`${greeting}, ${displayName}! Welcome to Dara's page.`);

នៅម៉ោង 9:00 វាបោះពុម្ព Good morning, friend! Welcome to Dara's page. ដោយសារម៉ោងត្រូវបានពិនិត្យពីតូចទៅធំ លំដាប់នៃលក្ខខណ្ឌធ្វើការងារ៖ ប្រសិនបើ hour មិនតិចជាង 12 យើងដឹងរួចហើយថាវាជា 12 ឬច្រើនជាងនេះ ដូច្នេះការធ្វើតេស្តបន្ទាប់ត្រូវការតែ hour < 18។

បន្ថែមកូដដូចគ្នាទៅ js/main.js។ ក្នុង browser វានឹងបោះពុម្ពទៅ Console សិនឥឡូវនេះ។ ក្នុងជំពូកទី 8 អ្នកនឹងបង្ហាញវានៅលើទំព័រផ្ទាល់។

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

1. គូ ឬសេស។ សរសេរកូដដែលមាន let number = 7; ដែលបោះពុម្ព "even" ឬ "odd" ដោយប្រើ % និង if/else។ សាកល្បងលេខជាច្រើន។
2. Strict ទល់នឹង loose។ ទាយលទ្ធផលនៃ 0 === false, 0 == false, "" == 0 និង null === null។ ដំណើរការវា ហើយពិនិត្យ។
3. ដាក់ពិន្ទុ។ ដោយមាន score បោះពុម្ព A សម្រាប់ 90 ឡើងទៅ B សម្រាប់ 80 ដល់ 89 C សម្រាប់ 70 ដល់ 79 និង Try again សម្រាប់អ្វីដែលទាបជាងនេះ ដោយប្រើ else if។
4. ឈ្មោះថ្ងៃក្នុងសប្តាហ៍។ ប្រើ new Date().getDay() (0 គឺថ្ងៃអាទិត្យ) និង switch ដើម្បីបោះពុម្ពឈ្មោះថ្ងៃនេះ។ បន្ថែម default ដើម្បីសុវត្ថិភាព។
5. កែតម្លៃលំនាំដើម។ សរសេរ const volume = 0; បន្ទាប់មកប្រៀបធៀប volume || 50 ជាមួយ volume ?? 50។ ពន្យល់ក្នុងមួយប្រយោគថាមួយណាត្រឹមត្រូវសម្រាប់ការកំណត់កម្រិតសំឡេង។
6. បង្រួមដោយ ternary។ សរសេរកូដគូ ឬសេសរបស់អ្នកឡើងវិញជាមួយបន្ទាត់តែមួយដោយប្រើ ternary operator។ កំណែមួយណាងាយអានជាង?

បន្ទាប់ យើងនឹងរៀនពីរបៀបធ្វើការម្តងហើយម្តងទៀតដោយប្រើ loop ដើម្បីឲ្យអ្នកអាចដំណើរការបញ្ជីគម្រោងទាំងមូល ជំនួសឲ្យម្តងមួយតម្លៃ។ បន្តជាមួយ Loop និង Iteration។