From c4a974937fdaecf1240e2bcf87903ec4b9dc5553 Mon Sep 17 00:00:00 2001 From: Hongsreng-P Date: Wed, 5 Jul 2023 16:05:36 +0700 Subject: [PATCH] Translated day 6 till day 10 --- Khmer/06_Day_Loops/06_day_loops.md | 484 ++++++++++++ Khmer/07_Day_Functions/07_day_functions.md | 707 ++++++++++++++++++ Khmer/08_Day_Objects/08_day_objects.md | 598 +++++++++++++++ .../09_day_higher_order_functions.md | 704 +++++++++++++++++ .../10_day_Sets_and_Maps.md | 440 +++++++++++ 5 files changed, 2933 insertions(+) create mode 100644 Khmer/06_Day_Loops/06_day_loops.md create mode 100644 Khmer/07_Day_Functions/07_day_functions.md create mode 100644 Khmer/08_Day_Objects/08_day_objects.md create mode 100644 Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md create mode 100644 Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md diff --git a/Khmer/06_Day_Loops/06_day_loops.md b/Khmer/06_Day_Loops/06_day_loops.md new file mode 100644 index 0000000..0d33b61 --- /dev/null +++ b/Khmer/06_Day_Loops/06_day_loops.md @@ -0,0 +1,484 @@ +
+

30 ថ្ងៃនៃ JavaScript: Loops

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 5](../05_Day_Arrays/05_day_arrays.md) | [ថ្ងៃទី 7 >>](../07_Day_Functions/07_day_functions.md) + +![ថ្ងៃទី 5](../images/banners/day_1_6.png) + +- [📔 ថ្ងៃទី 6](#-day-6) + - [Loops](#loops) + - [for Loop](#for-loop) + - [while loop](#while-loop) + - [do while loop](#do-while-loop) + - [for of loop](#for-of-loop) + - [break](#break) + - [continue](#continue) + - [💻 លំហាត់៖ ថ្ងៃទី ៦](#-exercisesday-6) + - [លំហាត់៖ កម្រិត ១](#exercises-level-1) + - [លំហាត់៖ កម្រិត ២](#exercises-level-2) + - [លំហាត់៖ កម្រិត ៣](#exercises-level-3) + +# 📔 ថ្ងៃទី 6 + +## Loops + +សកម្មភាពភាគច្រើនដែលយើងធ្វើក្នុងជីវិតគឺពោរពេញដោយពាក្យដដែលៗ។ ស្រមៃមើលប្រសិនបើខ្ញុំសុំឱ្យអ្នកបោះពុម្ពពី 0 ទៅ 100 ដោយប្រើ console.log() ។ ដើម្បីអនុវត្តកិច្ចការដ៏សាមញ្ញនេះ វាអាចចំណាយពេលអ្នកពី 2 ទៅ 5 នាទី កិច្ចការដែលធុញទ្រាន់ និងដដែលៗអាចត្រូវបានអនុវត្តដោយប្រើ loop។ ប្រសិនបើអ្នកចូលចិត្តមើលវីដេអូ អ្នកអាចពិនិត្យមើល [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw) + +នៅក្នុងភាសាសរសេរកម្មវិធី ដើម្បីអនុវត្តការងារដដែលៗ យើងប្រើប្រភេទ loop ផ្សេងៗគ្នា។ ឧទាហរណ៍ខាងក្រោមគឺជា loop ដែលប្រើជាទូទៅក្នុង JavaScript និងភាសាសរសេរកម្មវិធីផ្សេងទៀត។ + +### for Loop + +```js +// ចនាសម្ព័ន្ធរបស់ For loop +for(initialization, condition, increment/decrement){ + // code goes here +} +``` + +```js +for(let i = 0; i <= 5; i++){ + console.log(i) +} + +// 0 1 2 3 4 5 +``` + +```js +for(let i = 5; i >= 0; i--){ + console.log(i) +} + +// 5 4 3 2 1 0 +``` + +```js +for(let i = 0; i <= 5; i++){ + console.log(`${i} * ${i} = ${i * i}`) +} +``` + +```sh +0 * 0 = 0 +1 * 1 = 1 +2 * 2 = 4 +3 * 3 = 9 +4 * 4 = 16 +5 * 5 = 25 +``` + +```js +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland'] +const newArr = [] +for(let i = 0; i < countries.length; i++){ + newArr.push(countries[i].toUpperCase()) +} + +// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"] +``` + +ការបន្ថែមធាតុទាំងអស់នៅក្នុងអារេ + +```js +const numbers = [1, 2, 3, 4, 5] +let sum = 0 +for(let i = 0; i < numbers.length; i++){ + sum = sum + numbers[i] // អាចកាត់ឲខ្លីបាន, sum += numbers[i] + +} + +console.log(sum) // 15 +``` + +ការបង្កើតអារេថ្មីដោយផ្អែកលើអារេដែលមានស្រាប់ + +```js +const numbers = [1, 2, 3, 4, 5] +const newArr = [] +let sum = 0 +for(let i = 0; i < numbers.length; i++){ + newArr.push( numbers[i] ** 2) + +} + +console.log(newArr) // [1, 4, 9, 16, 25] +``` + +```js +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +const newArr = [] +for(let i = 0; i < countries.length; i++){ + newArr.push(countries[i].toUpperCase()) +} + +console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### while loop + +```js +let i = 0 +while (i <= 5) { + console.log(i) + i++ +} + +// 0 1 2 3 4 5 +``` + +### do while loop + +```js +let i = 0 +do { + console.log(i) + i++ +} while (i <= 5) + +// 0 1 2 3 4 5 +``` + +### for of loop + +យើងប្រើ for of loop សម្រាប់អារេ។ វា​ជា​វិធី​ដ៏​ងាយស្រួល​ក្នុង​ការ​ iterate ​តាមរយៈ​អារេ​មួយ ប្រសិនបើ​យើង​មិន​ចាប់អារម្មណ៍​លើ​ index ​នៃ​ធាតុ​នីមួយៗ​ក្នុង​អារេ។ + +```js +for (const element of arr) { + // ដាក់កូដទីនេះ +} +``` + +```js + +const numbers = [1, 2, 3, 4, 5] + +for (const num of numbers) { + console.log(num) +} + +// 1 2 3 4 5 + +for (const num of numbers) { + console.log(num * num) +} + +// 1 4 9 16 25 + +// ការបន្ថែមលេខទាំងអស់នៅក្នុងអារេ +let sum = 0 +for (const num of numbers) { + sum = sum + num + // អាច​ត្រូវ​បាន​កាត់ឲខ្លី​ដូច​នេះ​, sum += num + // បន្ទាប់ពីនេះយើងនឹងប្រើ syntax ខ្លីជាងមុន (+=, -=, *=, /= etc) +} +console.log(sum) // 15 + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] + +for (const tech of webTechs) { + console.log(tech.toUpperCase()) +} + +// HTML CSS JAVASCRIPT REACT NODE MONGODB + +for (const tech of webTechs) { + console.log(tech[0]) // យកតែអក្សរទីមួយនៃធាតុនីមួយៗ, H C J R N M +} + +``` + +```js +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +const newArr = [] +for(const country of countries){ + newArr.push(country.toUpperCase()) +} + +console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +### break + +Break ត្រូវបានប្រើដើម្បីបញ្ចប់ loop. + +```js +for(let i = 0; i <= 5; i++){ + if(i == 3){ + break + } + console.log(i) +} + +// 0 1 2 +``` + +កូដខាងលើនឹងឈប់ ប្រសិនបើ 3 បានរកឃើញនៅក្នុងដំណើរការ iteration។ + +### continue + +យើងប្រើពាក្យគន្លឹះ *continue* ដើម្បីរំលង iteration ណាមួយ។ + +```js +for(let i = 0; i <= 5; i++){ + if(i == 3){ + continue + } + console.log(i) +} + +// 0 1 2 4 5 +``` + +🌕 អ្នក​ក្លាហាន​ណាស់​អ្នក​បាន​ធ្វើ​វា​ដល់​ពេល​នេះ​។ ឥឡូវនេះ អ្នកទទួលបានថាមពលដើម្បីធ្វើកិច្ចការដដែលៗ និងគួរឱ្យធុញទ្រាន់ដោយស្វ័យប្រវត្តិ។ អ្នកទើបតែបានបញ្ចប់ការប្រកួតថ្ងៃទី 6 ហើយអ្នកគឺជាជំហាន 6 ឆ្ពោះទៅរកផ្លូវរបស់អ្នកទៅកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។ + +## 💻 លំហាត់៖ ថ្ងៃទី ៦ + +### លំហាត់៖ កម្រិត ១ + + ```js + const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' + ] + + const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' + ] + + const mernStack = ['MongoDB', 'Express', 'React', 'Node'] + ``` + +1. iterate ពី 0 ទៅ 10 ដោយប្រើ loop ហើយធ្វើដូចគ្នាដោយប្រើ while និងធ្វើ while loop +2. iterate ពី 10 ទៅ 0 ដោយប្រើ loop ហើយធ្វើដូចគ្នាដោយប្រើ while និងធ្វើ while loop +3. iterate ពី 0 ទៅ n ដោយប្រើ loop +4. សរសេរ loop ដែលបង្កើតលំនាំខាងក្រោមដោយប្រើ console.log(): + + ```js + # + ## + ### + #### + ##### + ###### + ####### + ``` + +5. ប្រើ loop ដើម្បីបង្ហាញលំនាំខាងក្រោម: + + ```sh + 0 x 0 = 0 + 1 x 1 = 1 + 2 x 2 = 4 + 3 x 3 = 9 + 4 x 4 = 16 + 5 x 5 = 25 + 6 x 6 = 36 + 7 x 7 = 49 + 8 x 8 = 64 + 9 x 9 = 81 + 10 x 10 = 100 + ``` + +6. ប្រើ loop ដើម្បីបង្ហាញលំនាំខាងក្រោម: + + ```sh + i i^2 i^3 + 0 0 0 + 1 1 1 + 2 4 8 + 3 9 27 + 4 16 64 + 5 25 125 + 6 36 216 + 7 49 343 + 8 64 512 + 9 81 729 + 10 100 1000 + ``` + +7. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខគូប៉ុណ្ណោះ។ +8. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខសេសប៉ុណ្ណោះ។ +9. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខបឋមតែប៉ុណ្ណោះ។ +10. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញផលបូកនៃលេខទាំងអស់។ + + ```sh + The sum of all numbers from 0 to 100 is 5050. + ``` + +11. ប្រើ for loop ដើម្បី iterate ពី 0 ដល់ 100 ហើយបោះពុម្ពផលបូកនៃលេខគូទាំងអស់ និងផលបូកនៃលេខសេសទាំងអស់។ + + ```sh + The sum of all evens from 0 to 100 is 2550. And the sum of all odds from 0 to 100 is 2500. + ``` + +12. ប្រើ for loop ដើម្បី iterate ពី 0 ដល់ 100 ហើយបង្ហាញផលបូកនៃលេខគូទាំងអស់ និងផលបូកនៃលេខសេសទាំងអស់។ បង្ហាញផលបូកនៃគូ និងផលបូកនៃសេសជាអារេ + + ```sh + [2550, 2500] + ``` + +13. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតអារេនៃ 5 លេខចៃដន្យ +14. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតអារេនៃលេខចៃដន្យ 5 ហើយលេខត្រូវតែមានតែមួយគត់ +15. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតលេខសម្គាល់ចៃដន្យចំនួនប្រាំមួយ: + + ```sh + 5j2khz + ``` + +### លំហាត់៖ កម្រិត ២ + +1. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតលេខតួអក្សរចៃដន្យណាមួយ៖ + + ```sh + fe3jo1gl124g + ``` + + ```sh + xkqci4utda1lmbelpkm03rba + ``` + +1. សរសេរស្គ្រីបដែលបង្កើតលេខគោលដប់ប្រាំមួយចៃដន្យ។ + + ```sh + '#ee33df' + ``` + +1. សរសេរស្គ្រីបដែលបង្កើតលេខពណ៌ rgb ចៃដន្យ។ + + ```sh + rgb(240,180,80) + ``` + +1. ដោយប្រើអារេប្រទេសខាងលើ បង្កើតអារេថ្មីខាងក្រោម។ + + ```sh + ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"] + ``` + +1. ដោយប្រើអារេប្រទេសខាងលើ បង្កើតអារេសម្រាប់ប្រវែងប្រទេស'។ + + ```sh + [7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5] + ``` + +1. ប្រើ array ប្រទេសដើម្បីបង្កើតអារេខាងក្រោម៖ + + ```sh + [ + ['Albania', 'ALB', 7], + ['Bolivia', 'BOL', 7], + ['Canada', 'CAN', 6], + ['Denmark', 'DEN', 7], + ['Ethiopia', 'ETH', 8], + ['Finland', 'FIN', 7], + ['Germany', 'GER', 7], + ['Hungary', 'HUN', 7], + ['Ireland', 'IRE', 7], + ['Iceland', 'ICE', 7], + ['Japan', 'JAP', 5], + ['Kenya', 'KEN', 5] + ] + ``` + +2. នៅក្នុងបណ្តាប្រទេសខាងលើ សូមពិនិត្យមើលថាតើមានប្រទេស ឬប្រទេសដែលមានពាក្យ 'land' ។ ប្រសិនបើមានប្រទេសដែលមាន 'land' សូមបោះពុម្ពវាជាអារេ។ ប្រសិនបើគ្មានប្រទេសណាដែលមានពាក្យ 'land' ទេ បោះពុម្ព 'All these countries are without land' + + ```sh + ['Finland','Ireland', 'Iceland'] + ``` + +3. នៅក្នុងអារេប្រទេសខាងលើ សូមពិនិត្យមើលថាតើមានប្រទេស ឬប្រទេសដែលបញ្ចប់ដោយអក្សររង 'ia' ។ ប្រសិនបើមានប្រទេសបញ្ចប់ដោយ បោះពុម្ពវាជាអារេ។ ប្រសិនបើគ្មានប្រទេសដែលមានពាក្យ 'ai' ទេ បោះពុម្ព 'These are countries ends without ia' ។ + + ```sh + ['Albania', 'Bolivia','Ethiopia'] + ``` + +4. ដោយប្រើអារេប្រទេសខាងលើ ស្វែងរកប្រទេសដែលមានចំនួនតួអក្សរច្រើនបំផុត។ + + ```sh + Ethiopia + ``` + +5. ដោយប្រើអារេប្រទេសខាងលើ ស្វែងរកប្រទេសដែលមានត្រឹមតែ 5 តួអក្សរ។ + + ```sh + ['Japan', 'Kenya'] + ``` + +6. ស្វែងរកពាក្យវែងបំផុតនៅក្នុងអារេ webTechs +7. ប្រើអារេ webTechs ដើម្បីបង្កើតអារេនៃអារេខាងក្រោម៖ + + ```sh + [["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]] + ``` + +8. កម្មវិធីដែលបានបង្កើតដោយប្រើ MongoDB, Express, React និង Node ត្រូវបានគេហៅថាកម្មវិធីជង់ MERN ។ បង្កើតអក្សរកាត់ MERN ដោយប្រើអារេ mernStack +9. iterate តាមរយៈអារេ ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] ដោយប្រើ for loop ឬ for of loop ហើយបោះពុម្ពចេញ ធាតុ។ +10. នេះគឺជាអារេផ្លែឈើ , ['banana', 'orange', 'mango', 'lemon'] បញ្ច្រាសលំដាប់ដោយប្រើ loop និងមិនប្រើ reverse method។ +11. បង្ហាញធាតុទាំងអស់នៃអារេដូចបង្ហាញខាងក្រោម។ + + ```js + const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] + ] + ```` + + ```sh + HTML + CSS + JS + REACT + NODE + EXPRESS + MONGODB + ``` + +### លំហាត់៖ កម្រិត ៣ + +1. ចម្លងអារេប្រទេស (ជៀសវាងការផ្លាស់ប្តូរ) +1. អារេអាចផ្លាស់ប្តូរបាន។ បង្កើតច្បាប់ចម្លងនៃអារេដែលមិនកែប្រែរបស់ដើម។ តម្រៀបអារេដែលបានចម្លង ហើយរក្សាទុកក្នុង sortedCountries +1. តម្រៀបអារេ webTechs និង អារេ mernStack +1. ស្រង់ប្រទេសទាំងអស់មានពាក្យ 'land' ពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ +1. ស្វែងរកប្រទេសដែលមានចំនួនតួអក្សរខ្ពស់បំផុតនៅក្នុង [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +1. ស្រង់ប្រទេសទាំងអស់មានពាក្យ 'land' ពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ +1. ស្រង់ប្រទេសទាំងអស់ដែលមានតែបួនតួអក្សរពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ +1. ស្រង់ប្រទេសទាំងអស់ដែលមានពាក្យពីរ ឬច្រើនចេញពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ +1. បញ្ច្រាស [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយសរសេរជាអក្សរធំរបស់ប្រទេសនីមួយៗ ហើយរក្សាទុកវាជាអារេ + +🎉 អបអរសាទរ ! 🎉 + +[<< ថ្ងៃទី 5](../05_Day_Arrays/05_day_arrays.md) | [ថ្ងៃទី 7 >>](../07_Day_Functions/07_day_functions.md) diff --git a/Khmer/07_Day_Functions/07_day_functions.md b/Khmer/07_Day_Functions/07_day_functions.md new file mode 100644 index 0000000..c6eeb59 --- /dev/null +++ b/Khmer/07_Day_Functions/07_day_functions.md @@ -0,0 +1,707 @@ +
+

30 ថ្ងៃនៃ JavaScript: Functions

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 6](../06_Day_Loops/06_day_loops.md) | [ថ្ងៃទី 8 >>](../08_Day_Objects/08_day_objects.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_7.png) + +- [📔 Day 7](#-day-7) + - [Functions](#functions) + - [ការប្រកាស Function](#function-declaration) + - [Function ដោយគ្មានប៉ារ៉ាម៉ែត្រនិង return](#function-without-a-parameter-and-return) + - [Function ជាមួយតម្លៃ return](#function-returning-value) + - [Function ជាមួយប៉ារ៉ាម៉ែត្រ](#function-with-a-parameter) + - [Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ](#function-with-two-parameters) + - [Function ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។](#function-with-many-parameters) + - [Function ជាមួយនឹងចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់](#function-with-unlimited-number-of-parameters) + - [ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់ក្នុង function ធម្មតា](#unlimited-number-of-parameters-in-regular-function) + - [ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់នៅក្នុង arrow function](#unlimited-number-of-parameters-in-arrow-function) + - [Anonymous Function](#anonymous-function) + - [Expression Function](#expression-function) + - [Self Invoking Functions](#self-invoking-functions) + - [Arrow Function](#arrow-function) + - [Function ជាមួយ default parameters](#function-with-default-parameters) + - [Function declaration និង Arrow function](#function-declaration-versus-arrow-function) + - [💻 លំហាត់](#-exercises) + - [លំហាត់៖ កម្រិត ១](#exercises-level-1) + - [លំហាត់៖ កម្រិត ២](#exercises-level-2) + - [លំហាត់៖ កម្រិត ៣](#exercises-level-3) + +# 📔 ថ្ងៃទី 7 + +## Functions + +រហូតមកដល់ពេលនេះ យើងបានឃើញ JavaScript function ជាច្រើន។ នៅក្នុងផ្នែកនេះ យើងនឹងផ្តោតលើ custom function។ តើ function ជាអ្វី? មុន​នឹង​យើង​ចាប់​ផ្ដើម​បង្កើត ​function សូម​យល់​ថា​ function ជា​អ្វី​ ហើយ​ហេតុ​អ្វី​បាន​ជា​យើង​ត្រូវ function? + +function គឺជាប្លុកដែលអាចប្រើឡើងវិញបានក្នុងការសរសេរកម្មវិធីដែលត្រូវបានរចនាឡើងដើម្បីអនុវត្តកិច្ចការជាក់លាក់មួយ។ +function ​ត្រូវ​បាន​ប្រកាស​ដោយ​ពាក្យ​គន្លឹះ​ function ​ដែល​តាម​ដោយ​ឈ្មោះ​មួយនិង​វង់ក្រចក ()។ វង់ក្រចកអាចយកប៉ារ៉ាម៉ែត្រ។ ប្រសិនបើ function យកប៉ារ៉ាម៉ែត្រវានឹងត្រូវបានហៅថា arugment។ functin ក៏អាចយកប៉ារ៉ាម៉ែត្រលំនាំដើមផងដែរ។ ដើម្បីរក្សាទុកទិន្នន័យទៅមុខងារ មុខងារមួយត្រូវបោះប្រភេទទិន្នន័យជាក់លាក់។ ដើម្បីទទួលបានតម្លៃដែលយើងហៅ ឬហៅ function មួយ។ +function ធ្វើឲកូដ៖ + +- ស្អាត និងងាយស្រួលអាន +- អាចប្រើឡើងវិញបាន +- ងាយស្រួលក្នុងការតេស + +function មួយអាចត្រូវបានប្រកាស ឬបង្កើតតាមវិធីដូចខាងក្រោម: + +- _Declaration function_ +- _Expression function_ +- _Anonymous function_ +- _Arrow function_ + +### ការប្រកាស Function + +តោះមើលរបៀបប្រកាស function និងរបៀបហៅ function។ + +```js +//ប្រកាស function ដោយគ្មានប៉ារ៉ាម៉ែត្រ +function functionName() { + // code goes here +} +functionName() // function ហៅតាមឈ្មោះរបស់វា និងជាមួយវង់ក្រចក +``` + +### Function ដោយគ្មានប៉ារ៉ាម៉ែត្រនិង return + +function អាចត្រូវបានប្រកាសដោយគ្មានប៉ារ៉ាម៉ែត្រ។ + +**ឧទាហរណ៍:** + +```js +// function ដោយ​គ្មាន​ប៉ារ៉ាម៉ែត្រ function ដែល​បង្កើត​ចំនួន​ការ៉េ + +function square() { + let num = 2 + let sq = num * num + console.log(sq) +} + +square() // 4 + +// function ដោយ​គ្មាន​ប៉ារ៉ាម៉ែត្រ +function addTwoNumbers() { + let numOne = 10 + let numTwo = 20 + let sum = numOne + numTwo + + console.log(sum) +} + +addTwoNumbers() // function មួយត្រូវហៅតាមឈ្មោះរបស់វា ទើបអាចប្រតិបត្តិបាន។ +``` + +```js + function printFullName (){ + let firstName = 'Asabeneh' + let lastName = 'Yetayeh' + let space = ' ' + let fullName = firstName + space + lastName + console.log(fullName) +} + +printFullName() // ការហៅ functino មួយ។ +``` + +### Function ជាមួយតម្លៃ return + +function ក៏អាចបោះ​តម្លៃ​វិញ​ដែរ ប្រសិនបើ​អនុគមន៍​មិន​បោះ​តម្លៃនោះ​តម្លៃ​នៃ function នឹងមិន​ត្រូវ​បាន​កំណត់។ អនុញ្ញាតឱ្យយើងសរសេរ function ខាងលើជាមួយនឹងការបោះតម្លៃមកវិញ។ ចាប់ពីពេលនេះតទៅ យើងបោះតម្លៃទៅ function មួយជំនួសឱ្យការបោះពុម្ពវា។ + +```js +function printFullName (){ + let firstName = 'Asabeneh' + let lastName = 'Yetayeh' + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} +console.log(printFullName()) +``` + +```js + + function addTwoNumbers() { + let numOne = 2 + let numTwo = 3 + let total = numOne + numTwo + return total + + } + +console.log(addTwoNumbers()) +``` + +### Function ជាមួយប៉ារ៉ាម៉ែត្រ + +នៅក្នុង function យើងអាចបញ្ចូលប្រភេទទិន្នន័យផ្សេងៗគ្នា (number, string, boolean, object, function) ជាប៉ារ៉ាម៉ែត្រ។ + +```js +// function ជាមួយប៉ារ៉ាម៉ែត្រមួយ។ +function functionName(parm1) { + //code goes her +} +functionName(parm1) // កំឡុងពេលហៅ + +function areaOfCircle(r) { + let area = Math.PI * r * r + return area +} + +console.log(areaOfCircle(10)) // គួរតែត្រូវបានហៅដោយ argument មួយ។ + +function square(number) { + return number * number +} + +console.log(square(10)) +``` + +### Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ + +```js +// Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ +function functionName(parm1, parm2) { + //code goes her +} +functionName(parm1, parm2) // Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ +// function គ្មាន​ប៉ារ៉ាម៉ែត្រ​មិន​យក​ការ​បញ្ចូល​ទេ ដូច្នេះ​អនុញ្ញាត​ឱ្យយើង​បង្កើត​ function ជាមួយ​ប៉ារ៉ាម៉ែត្រ +function sumTwoNumbers(numOne, numTwo) { + let sum = numOne + numTwo + console.log(sum) +} +sumTwoNumbers(10, 20) //ហៅ function +// ប្រសិនបើ functino មិន return វាមិនរក្សាទុកទិន្នន័យទេ ដូច្នេះវាគួរតែ return មកវិញ + +function sumTwoNumbers(numOne, numTwo) { + let sum = numOne + numTwo + return sum +} + +console.log(sumTwoNumbers(10, 20)) +function printFullName(firstName, lastName) { + return `${firstName} ${lastName}` +} +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +### Function ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។ + +```js +// Functino ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។ +function functionName(parm1, parm2, parm3,...){ + //code goes here +} +functionName(parm1,parm2,parm3,...) // កំឡុងពេលហៅ arugment ចំនួនបីដែលត្រូវការ + + +// function នេះយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយបូកសរុបលេខក្នុងអារេ +function sumArrayValues(arr) { + let sum = 0; + for (let i = 0; i < arr.length; i++) { + sum = sum + arr[i]; + } + return sum; +} +const numbers = [1, 2, 3, 4, 5]; + //calling a function +console.log(sumArrayValues(numbers)); + + + const areaOfCircle = (radius) => { + let area = Math.PI * radius * radius; + return area; + } +console.log(areaOfCircle(10)) + +``` + +### Function ជាមួយនឹងចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់ + +ពេល​ខ្លះ​យើង​មិន​ដឹង​ថា​តើ​មាន​អាគុយម៉ង់​ប៉ុន្មាន​ដែល​អ្នក​ប្រើ​នឹង​ដាក់។ ដូច្នេះ​ហើយ យើង​គួរ​ដឹង​ពី​របៀប​សរសេរ​មុខងារ​មួយ​ដែល​អាច​យក​ចំនួន​ argument មិន​កំណត់។ វិធីដែលយើងធ្វើវាមានភាពខុសគ្នាខ្លាំងរវាងការប្រកាស regular function (មុខងារធម្មតា) និង arrow function។ ចូរយើងមើលឧទាហរណ៍ទាំងនៅក្នុងមុខងារប្រកាស និងមុខងារព្រួញ។ + +#### ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់ក្នុង function ធម្មតា + +វត្ថុណាមួយដែលបានដាក់ជា argument អាចចូលប្រើបានពី arguments object នៅខាងក្នុង function។ ចូរយើងមើលឧទាហរណ៍មួយ។ + + ```js +// Let us access the arguments object +​ +function sumAllNums() { + console.log(arguments) +} + +sumAllNums(1, 2, 3, 4) +// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] + +``` + +```js +// ការប្រកាស functino +​ +function sumAllNums() { + let sum = 0 + for (let i = 0; i < arguments.length; i++) { + sum += arguments[i] + } + return sum +} + +console.log(sumAllNums(1, 2, 3, 4)) // 10 +console.log(sumAllNums(10, 20, 13, 40, 10)) // 93 +console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 +``` + +#### ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់នៅក្នុង arrow function + +ដើម្បីអនុវត្តមុខងារដែលយកចំនួនអាគុយម៉ង់មិនកំណត់ក្នុង arrow function យើងប្រើ Spread operator អមដោយឈ្មោះប៉ារ៉ាម៉ែត្រណាមួយ។ អ្វីក៏ដោយដែលយើងដាក់ជាអាគុយម៉ង់ក្នុង function អាចចូលប្រើជាអារេក្នុង arrow function។ ចូរយើងមើលឧទាហរណ៍មួយ។ + + ```js +// Let us access the arguments object +​ +const sumAllNums = (...args) => { + // console.log(arguments), រកមិនឃើញវ arguments object នៅក្នុង arrow functino + // ជំនួសមកវិញ យើងប្រើប៉ារ៉ាម៉ែត្រដែលមាន spread operator (...) នៅពីមុខ + console.log(args) +} + +sumAllNums(1, 2, 3, 4) +// [1, 2, 3, 4] + +``` + +```js +// function declaration +​ +const sumAllNums = (...args) => { + let sum = 0 + for (const element of args) { + sum += element + } + return sum +} + +console.log(sumAllNums(1, 2, 3, 4)) // 10 +console.log(sumAllNums(10, 20, 13, 40, 10)) // 93 +console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173 +``` + +### Anonymous Function + +Anonymous function រឺ function គ្មានឈ្មោះ + +```js +const anonymousFun = function() { + console.log( + 'I am an anonymous function and my value is stored in anonymousFun' + ) +} +``` + +### Expression Function + +Expression functions គឺជា anonymous functions។ បន្ទាប់​ពី​យើង​បង្កើត function ដោយ​មិន​មាន​ឈ្មោះ​ហើយ​យើង​កំណត់​វា​ទៅ​ជា​អថេរ។ ដើម្បីបោះតម្លៃពីអនុគមន៍ យើងគួរហៅអថេរ។ សូមមើលឧទាហរណ៍ខាងក្រោម។ + +```js + +// Function expression +const square = function(n) { + return n * n +} + +console.log(square(2)) // -> 4 +``` + +### Self Invoking Functions + +Self invoking functions គឺជា anonymous functions ដែលមិនចាំបាច់ហៅដើម្បីឲតម្លៃ។ + +```js +(function(n) { + console.log(n * n) +})(2) // 4, ប៉ុន្តែជំនួសឱ្យការគ្រាន់តែបោះពុម្ព ប្រសិនបើយើងចង់ត្រឡប់ និងរក្សាទុកទិន្នន័យ យើងធ្វើដូចបានបង្ហាញខាងក្រោម + +let squaredNum = (function(n) { + return n * n +})(10) + +console.log(squaredNum) +``` + +### Arrow Function + +arrow function គឺជាជម្រើសមួយសម្រាប់សរសេរ functino ទោះជាយ៉ាងណាក៏ដោយ ការប្រកាស function និង arrow functinoមានភាពខុសគ្នាបន្តិចបន្តួច។ + +arrow functino ប្រើព្រួញជំនួសឱ្យពាក្យគន្លឹះ *function* ដើម្បីប្រកាស function។ អនុញ្ញាតឱ្យយើងឃើញទាំងការប្រកាស function និង arrow function។ + +```js +// នេះជារបៀបដែលយើងសរសេរ function ធម្មតា +// អនុញ្ញាតឱ្យយើងផ្លាស់ប្តូរ functino នេះទៅជា arrow function +function square(n) { + return n * n +} + +console.log(square(2)) // 4 + +const square = n => { + return n * n +} + +console.log(square(2)) // -> 4 + +// ប្រសិន​បើ​យើង​មាន​តែ​មួយ​បន្ទាត់​នៅ​ក្នុង​ប្លុក​កូដ​នោះ វា​អាច​ត្រូវ​បាន​សរសេរ​ដូច​ខាង​ក្រោម​ +const square = n => n * n // -> 4 +``` + +```js +const changeToUpperCase = arr => { + const newArr = [] + for (const element of arr) { + newArr.push(element.toUpperCase()) + } + return newArr +} + +const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] +console.log(changeToUpperCase(countries)) + +// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"] +``` + +```js +const printFullName = (firstName, lastName) => { + return `${firstName} ${lastName}` +} + +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +function ខាងលើមានពាក្យត្រឡប់ តែយើងអាច return វាវិញបានដូចខាងក្រោម។ + +```js +const printFullName = (firstName, lastName) => `${firstName} ${lastName}` + +console.log(printFullName('Asabeneh', 'Yetayeh')) +``` + +### Function ជាមួយ default parameters + +ពេល​ខ្លះ​យើង​បញ្ជូន​តម្លៃ​លំនាំដើម​ទៅ​ប៉ារ៉ាម៉ែត្រ ពេល​យើង​ហៅ​មុខងារ​នេះ បើ​យើង​មិនឲតម្លៃទេ ​លំនាំដើម​នឹង​ត្រូវ​បាន​ប្រើ។ ទាំងការប្រកាសមុខងារ និងមុខងារព្រួញអាចមានតម្លៃលំនាំដើម។ + +```js +// syntax +// ប្រកាស functino +function functionName(param = value) { + //codes +} + +// ហៅ function +functionName() +functionName(arg) +``` + +**ឧទាហរណ៍:** + +```js +function greetings(name = 'Peter') { + let message = `${name}, welcome to 30 Days Of JavaScript!` + return message +} + +console.log(greetings()) +console.log(greetings('Asabeneh')) +``` + +```js +function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') { + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} + +console.log(generateFullName()) +console.log(generateFullName('David', 'Smith')) +``` + +```js +function calculateAge(birthYear, currentYear = 2019) { + let age = currentYear - birthYear + return age +} + +console.log('Age: ', calculateAge(1819)) +``` + +```js +function weightOfObject(mass, gravity = 9.81) { + let weight = mass * gravity + ' N' // តម្លៃត្រូវតែប្តូរទៅ string ជាមុនសិន + return weight +} + +console.log('Weight of an object in Newton: ', weightOfObject(100)) //ទំនាញផែនដី ៩.៨១ +console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // ទំនាញនៅលើផ្ទៃព្រះច័ន្ទ +``` + +ចូរយើងមើលពីរបៀបដែលយើងសរសេរ functino ខាងលើជាមួយនឹង arrow function + +```js +// syntax +// ប្រកាស a function +const functionName = (param = value) => { + //codes +} + +// ហៅ function +functionName() +functionName(arg) +``` + +**ឧទាហរណ៍:** + +```js +const greetings = (name = 'Peter') => { + let message = name + ', welcome to 30 Days Of JavaScript!' + return message +} + +console.log(greetings()) +console.log(greetings('Asabeneh')) +``` + +```js +const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => { + let space = ' ' + let fullName = firstName + space + lastName + return fullName +} + +console.log(generateFullName()) +console.log(generateFullName('David', 'Smith')) +``` + +```js + +const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear +console.log('Age: ', calculateAge(1819)) +``` + +```js +const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N' + +console.log('Weight of an object in Newton: ', weightOfObject(100)) // ទំនាញផែនដី ៩.៨១ +console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // ទំនាញនៅលើផ្ទៃព្រះច័ន្ទ +``` + +### Function declaration និង Arrow function + +វានឹងត្រូវបានគ្របដណ្តប់នៅក្នុងផ្នែកផ្សេងទៀត។ + +🌕 អ្នក​ជា​តារា​ដែល​កំពុង​រះ ឥឡូវ​អ្នក​ដឹង​អំពី function ហើយ។ អ្នកបានឈាន 7 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។ + +## 💻 លំហាត់ + +### លំហាត់៖ កម្រិត ១ + +1. ប្រកាស function _fullName_ ហើយវាបោះពុម្ពឈ្មោះពេញរបស់អ្នក។ +2. ប្រកាស function _fullName_ ហើយឥឡូវនេះវាយកឈ្មោះដំបូង ឈ្មោះចុងក្រោយជាប៉ារ៉ាម៉ែត្រ ហើយវាឲឈ្មោះពេញរបស់អ្នក។ +3. ប្រកាសមុខងារ _addNumbers_ ហើយវាត្រូវការប៉ារ៉ាម៉ែត្រពីរ ហើយវាត្រឡប់ផលបូករបស់ប៉ារ៉ាម៉ែត្រនោះ។ +4. ផ្ទៃដីនៃចតុកោណកែងត្រូវបានគណនាដូចខាងក្រោម៖ _area = បណ្តោយ x ទទឹង_។ សរសេរ function ដែលគណនា _areaOfRectangle_ ។ +5. បរិវេណនៃចតុកោណកែងត្រូវបានគណនាដូចខាងក្រោម៖ _perimeter= 2x(បណ្តោយ + ទទឹង)_. សរសេរមុខងារដែលគណនា_perimeterOfRectangle_. +6. បរិមាណនៃព្រីសរាងចតុកោណត្រូវបានគណនាដូចខាងក្រោម៖ _volume = បណ្តោយ x ទទឹង x កំពស់ _ ។ សរសេរអនុគមន៍ដែលគណនា _volumeOfRectPrism_ ។ +7. ផ្ទៃដីនៃរង្វង់ត្រូវបានគណនាដូចខាងក្រោម៖ _area = π x r x r_ ។ សរសេរអនុគមន៍ដែលគណនា _areaOfCircle_ +8. រង្វង់រង្វង់ត្រូវបានគណនាដូចខាងក្រោម៖ _circumference = 2πr_ ។ សរសេរអនុគមន៍ដែលគណនា _circumOfCircle_ +9. ដង់ស៊ីតេនៃសារធាតុត្រូវបានគណនាដូចខាងក្រោម៖ _ដង់ស៊ីតេ = ម៉ាស/បរិមាណ _។ សរសេរអនុគមន៍ដែលគណនា _ដង់ស៊ីតេ_។ +10. ល្បឿនត្រូវបានគណនាដោយបែងចែកចម្ងាយសរុបដែលគ្របដណ្ដប់ដោយវត្ថុផ្លាស់ទីចែកនឹងចំនួនសរុបនៃពេលវេលាដែលបានយក សរសេរអនុគមន៍ដែលគណនាល្បឿននៃវត្ថុផ្លាស់ទី _speed_ ។ +11. ទំងន់នៃសារធាតុមួយត្រូវបានគណនាដូចខាងក្រោម: _weight = mass x gravity_. សរសេរមុខងារដែលគណនា _weight_ ។ +12. សីតុណ្ហភាពក្នុង oC អាចបំប្លែងទៅជា oF ដោយប្រើរូបមន្តនេះ៖ _oF = (oC x 9/5) + 32_ ។ សរសេរមុខងារដែលបំលែង oC ទៅជា oF _convertCelsiusToFahrenheit_ ។ +13. Body Mass Index (BMI) ត្រូវបានគណនាដូចខាងក្រោម៖ _bmi = ទម្ងន់គិតជា Kg / (កម្ពស់ x កម្ពស់) ក្នុង m2_ ។ សរសេរអនុគមន៍ដែលគណនា _bmi_ ។ BMI ត្រូវបានប្រើដើម្បីកំណត់យ៉ាងទូលំទូលាយក្រុមទម្ងន់ផ្សេងៗគ្នាចំពោះមនុស្សពេញវ័យដែលមានអាយុចាប់ពី 20 ឆ្នាំឡើងទៅ។ ពិនិត្យមើលថាតើមនុស្សម្នាក់មានទម្ងន់ _ ក្រោម ធម្មតា លើសទម្ងន់ _ ឬ _ធាត់_ ដោយផ្អែកលើព័ត៌មានដែលបានផ្តល់ឱ្យខាងក្រោម។ + + - ក្រុមដូចគ្នាអនុវត្តចំពោះបុរសនិងស្ត្រី។ + - _Underweight_: BMI តិចជាង 18.5 + - _ទម្ងន់ធម្មតា_៖ BMI គឺ 18.5 ដល់ 24.9 + - _លើសទម្ងន់_៖ BMI គឺ 25 ទៅ 29.9 + - _Obese_: BMI is 30 or more + +14. សរសេរមុខងារមួយហៅថា _checkSeason_ វាយកខែ ហើយត្រឡប់រដូវកាលវិញ៖ សរទរដូវ រដូវរងា និទាឃរដូវ ឬរដូវក្តៅ។ +15. Math.max ត្រឡប់អាគុយម៉ង់ធំបំផុតរបស់វា។ សរសេរអនុគមន៍ findMax ដែលយកអាគុយម៉ង់បី ហើយត្រឡប់អតិបរមារបស់វាដោយមិនប្រើវិធីសាស្ត្រ Math.max ។ + + ```js + console.log(findMax(0, 10, 5)) + 10 + console.log(findMax(0, -10, -2)) + 0 + ``` + +### លំហាត់៖ កម្រិត ២ + +1. សមីការលីនេអ៊ែរត្រូវបានគណនាដូចខាងក្រោមៈ _ax + ដោយ + c = 0_ ។ សរសេរអនុគមន៍ដែលគណនាតម្លៃនៃសមីការលីនេអ៊ែរ _solveLinEquation_។ +1. សមីការការ៉េត្រូវបានគណនាដូចខាងក្រោម៖ _ax2 + bx + c = 0_ ។ សរសេរអនុគមន៍ដែលគណនាតម្លៃនៃសមីការការ៉េ _solveQuadEquation_។ + + ```js + console.log(solveQuadratic()) // {0} + console.log(solveQuadratic(1, 4, 4)) // {-2} + console.log(solveQuadratic(1, -1, -2)) // {2, -1} + console.log(solveQuadratic(1, 7, 12)) // {-3, -4} + console.log(solveQuadratic(1, 0, -4)) //{2, -2} + console.log(solveQuadratic(1, -1, 0)) //{1, 0} + ``` + +1. ប្រកាសឈ្មោះមុខងារ _printArray_ ។ វាយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយវាបោះពុម្ពចេញតម្លៃនីមួយៗនៃអារេ។ +1. សរសេរឈ្មោះមុខងារ _showDateTime_ ដែលបង្ហាញពេលវេលាក្នុងទម្រង់នេះ៖ 08/01/2020 04:08 ដោយប្រើវត្ថុកាលបរិច្ឆេទ។ + + ```sh + showDateTime() + 08/01/2020 04:08 + ``` + +1. ប្រកាសឈ្មោះមុខងារ _swapValues_ ។ មុខងារនេះប្តូរតម្លៃនៃ x ទៅ y ។ + + ```js + swapValues(3, 4) // x => 4, y=>3 + swapValues(4, 5) // x = 5, y = 4 + ``` + +1. ប្រកាសឈ្មោះមុខងារ _reverseArray_ ។ វា​យក​អារេ​ជា​ប៉ារ៉ាម៉ែត្រ ហើយ​វា​ត្រឡប់​ការ​បញ្ច្រាស​នៃ​អារេ (កុំ​ប្រើ method)។ + + ```js + console.log(reverseArray([1, 2, 3, 4, 5])) + //[5, 4, 3, 2, 1] + console.log(reverseArray(['A', 'B', 'C'])) + //['C', 'B', 'A'] + ``` + +1. ប្រកាសឈ្មោះមុខងារ _capitalizeArray_ ។ វា​យក​អារេ​ជា​ប៉ារ៉ាម៉ែត្រ​មួយ​ហើយ​វា​ត្រឡប់​ - អក្សរធំ។ +1. ប្រកាសឈ្មោះមុខងារ _addItem_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រធាតុមួយ ហើយវាត្រឡប់អារេមួយបន្ទាប់ពីបន្ថែមធាតុ +1. ប្រកាសឈ្មោះមុខងារ _removeItem_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រ index ហើយវាត្រឡប់អារេមួយបន្ទាប់ពីយកធាតុចេញ +1. ប្រកាសឈ្មោះអនុគមន៍ _sumOfNumbers_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខ ហើយវាបូកលេខទាំងអស់នៅក្នុងជួរនោះ។ +1. ប្រកាសឈ្មោះមុខងារ _sumOfOdds_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខមួយ ហើយវាបន្ថែមលេខសេសទាំងអស់នៅក្នុងជួរនោះ។ +1. ប្រកាសឈ្មោះមុខងារ _sumOfEven_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខមួយ ហើយវាបន្ថែមលេខគូទាំងអស់ក្នុងជួរនោះ។ +1. ប្រកាសឈ្មោះមុខងារ evensAndOdds ។ វាយកចំនួនគត់វិជ្ជមានជាប៉ារ៉ាម៉ែត្រ ហើយវារាប់ចំនួនគូ និងសេសក្នុងចំនួន។ + + ```sh + evensAndOdds(100); + The number of odds are 50. + The number of evens are 51. + ``` + +1. សរសេរអនុគមន៍ដែលយកចំនួនអាគុយម៉ង់ណាមួយ ហើយត្រឡប់ផលបូកនៃអាគុយម៉ង់ + + ```js + sum(1, 2, 3) // -> 6 + sum(1, 2, 3, 4) // -> 10 + ``` + +1. សរសេរ function ដែលបង្កើត _randomUserIp_ ។ +1. សរសេរ function ដែលបង្កើត _randomMacAddress_ +1. ប្រកាស functino ឈ្មោះ _randomHexaNumberGenerator_ ។ function ឲលេខគោលដប់ប្រាំមួយចៃដន្យ។ + + ```sh + console.log(randomHexaNumberGenerator()); + '#ee33df' + ``` + +1. ប្រកាសឈ្មោះ function _userIdGenerator_ ។ នៅពេលដែលមុខងារនេះត្រូវបានគេហៅថា វាបង្កើតលេខសម្គាល់តួអក្សរប្រាំពីរ។ មុខងារបញ្ជូនលេខសម្គាល់មកវិញ។ + + ```sh + console.log(userIdGenerator()); + 41XTDbE + ``` + +### លំហាត់៖ កម្រិត ៣ + +1. កែប្រែ function _userIdGenerator_ ។ ប្រកាសឈ្មោះ function _userIdGeneratedByUser_ ។ វា​មិន​យក​ប៉ារ៉ាម៉ែត្រ​តែមួយ​ទេ ប៉ុន្តែ​វា​ត្រូវការ​បញ្ចូល​ពីរ​ដោយ​ប្រើ prompt() ។ ការបញ្ចូលមួយគឺចំនួនតួអក្សរ ហើយការបញ្ចូលទីពីរគឺជាចំនួនលេខសម្គាល់ដែលសន្មត់ថាត្រូវបានបង្កើត។ + + ```sh + userIdGeneratedByUser() + 'kcsy2 + SMFYb + bWmeq + ZXOYh + 2Rgxf + ' + userIdGeneratedByUser() + '1GCSgPLMaBAVQZ26 + YD7eFwNQKNs7qXaT + ycArC5yrRupyG00S + UbGxOFI7UXSWAyKN + dIV0SSUTgAdKwStr + ' + ``` + +1. សរសេរឈ្មោះ function _rgbColorGenerator_ ហើយវាបង្កើតពណ៌ rgb ។ + + ```sh + rgbColorGenerator() + rgb(125,244,255) + ``` + +1. សរសេរ functino **_arrayOfHexaColors_** ដែលត្រឡប់ចំនួនពណ៌គោលដប់ប្រាំមួយក្នុងអារេមួយ។ +1. សរសេរមុខងារ **_arrayOfRgbColors_** ដែលត្រឡប់ចំនួនពណ៌ RGB ណាមួយនៅក្នុងអារេមួយ។ +1. សរសេរមុខងារ **_convertHexaToRgb_** ដែលបំប្លែងពណ៌ hexa ទៅ rgb ហើយវាត្រឡប់ពណ៌ rgb ។ +1. សរសេរមុខងារ **_convertRgbToHexa_** ដែលបំប្លែង rgb ទៅជាពណ៌គោលដប់ប្រាំមួយ ហើយវាត្រឡប់ពណ៌ hex មួយ។ +1. សរសេរមុខងារ **_generateColors_** ដែលអាចបង្កើតចំនួនពណ៌ hex ឬ rgb ណាមួយ។ + + ```js + console.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b'] + console.log(generateColors('hexa', 1)) // '#b334ef' + console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)'] + console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)' + ``` + +1. ហៅមុខងាររបស់អ្នក _shuffleArray_ វាយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយវាត្រឡប់អារេដែលសាប់ +1. ហៅទៅមុខងាររបស់អ្នក _factorial_ វាយកលេខទាំងមូលជាប៉ារ៉ាម៉ែត្រ ហើយវាត្រឡប់លេខហ្វាតូរីស +1. ហៅមុខងាររបស់អ្នក _isEmpty_ វាត្រូវការប៉ារ៉ាម៉ែត្រ ហើយវាពិនិត្យមើលថាតើវាទទេឬអត់ +1. ហៅទៅអនុគមន៍ _sum_ របស់អ្នក វាយកចំនួនអាគុយម៉ង់ណាមួយ ហើយវាត្រឡប់ផលបូក។ +1. សរសេរអនុគមន៍មួយហៅថា _sumOfArrayItems_ វាយកប៉ារ៉ាម៉ែត្រអារេមួយ ហើយត្រឡប់ផលបូកនៃធាតុទាំងអស់។ ពិនិត្យមើលថាតើធាតុអារេទាំងអស់ជាប្រភេទលេខឬអត់។ បើមិនផ្តល់មតិត្រឡប់សមហេតុផល។ +1. សរសេរអនុគមន៍មួយហៅថា _average_ វាត្រូវការប៉ារ៉ាម៉ែត្រអារេមួយ ហើយត្រឡប់ជាមធ្យមនៃធាតុ។ ពិនិត្យមើលថាតើធាតុអារេទាំងអស់ជាប្រភេទលេខឬអត់។ បើមិនផ្តល់មតិត្រឡប់សមហេតុផល។ +1. សរសេរអនុគមន៍មួយហៅថា _modifyArray_ ដែលយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយកែប្រែធាតុទីប្រាំនៃអារេ ហើយត្រឡប់អារេ។ ប្រសិនបើប្រវែងអារេតិចជាងប្រាំ វាត្រឡប់ 'រកមិនឃើញធាតុ' ។ + + ```js + console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']); + ``` + + ```sh + ['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot'] + ``` + + ```js + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']); + ``` + + ```sh + ['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM'] + ``` + + ```js + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']); + ``` + + ```sh + 'Not Found' + ``` + +1. សរសេរមុខងារមួយហៅថា _isPrime_ ដែលពិនិត្យមើលថាតើលេខមួយគឺជាលេខបឋមឬអត់។ +1.សរសេរមុខងារដែលពិនិត្យមើលថាតើធាតុទាំងអស់មានតែមួយគត់នៅក្នុងអារេ។ +1. សរសេរមុខងារដែលពិនិត្យមើលថាតើធាតុទាំងអស់នៃអារេគឺជាប្រភេទទិន្នន័យដូចគ្នាឬអត់។ +1. ឈ្មោះអថេរ JavaScript មិនគាំទ្រតួអក្សរ ឬនិមិត្តសញ្ញាពិសេស លើកលែងតែ \$ ឬ \_ ។ សរសេរមុខងារ **isValidVariable** ដែលពិនិត្យមើលថាតើអថេរមួយត្រឹមត្រូវ ឬអថេរអថេរ។ +1. សរសេរអនុគមន៍ដែលត្រឡប់អារេនៃលេខចៃដន្យប្រាំពីរក្នុងជួរ 0-9 ។ លេខទាំងអស់ត្រូវតែមានតែមួយ។ + + ```js + sevenRandomNumbers() + [(1, 4, 5, 7, 9, 8, 0)] + ``` + +1. សរសេរអនុគមន៍មួយហៅថា reverseCountries វាយកប្រទេសអារេ ហើយដំបូងវាចម្លងអារេ ហើយត្រឡប់អារេបញ្ច្រាសដើម + +🎉 អបអរសាទរ ! 🎉 + +[<< ថ្ងៃទី 6](../06_Day_Loops/06_day_loops.md) | [ថ្ងៃទី 8 >>](../08_Day_Objects/08_day_objects.md) \ No newline at end of file diff --git a/Khmer/08_Day_Objects/08_day_objects.md b/Khmer/08_Day_Objects/08_day_objects.md new file mode 100644 index 0000000..44dc17b --- /dev/null +++ b/Khmer/08_Day_Objects/08_day_objects.md @@ -0,0 +1,598 @@ +
+

30 ថ្ងៃនៃ JavaScript: Objects

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 7](../07_Day_Functions/07_day_functions.md) | [ថ្ងៃទី 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_8.png) + +- [📔 ថ្ងៃទី 8](#-day-8) + - [Scope](#scope) + - [Window Global Object](#window-global-object) + - [Global scope](#global-scope) + - [Local scope](#local-scope) + - [📔 Object](#-object) + - [ការបង្កើត object ទទេ](#creating-an-empty-object) + - [ការបង្កើត object ជាមួយនឹងតម្លៃ](#creating-an-objecting-with-values) + - [ទាញតម្លៃពី object](#getting-values-from-an-object) + - [ការបង្កើត object methods](#creating-object-methods) + - [ការកំណត់ key សម្រាប់ object](#setting-new-key-for-an-object) + - [Object Methods](#object-methods) + - [ចាប់យក key ពី object ដោយប្រើ Object.keys()](#getting-object-keys-using-objectkeys) + - [ចាប់យកតម្លៃពី object ដោយប្រើ Object.values()](#getting-object-values-using-objectvalues) + - [ចាប់យក key និង តម្លៃ ពី object ដោយប្រើ Object.entries()](#getting-object-keys-and-values-using-objectentries) + - [ពិនិត្យមើល properties ដោយប្រើ hasOwnProperty()](#checking-properties-using-hasownproperty) + - [💻 លំហាត់](#-exercises) + - [លំហាត់៖ កម្រិត ១](#exercises-level-1) + - [លំហាត់៖ កម្រិត ២](#exercises-level-2) + - [លំហាត់៖ កម្រិត ៣](#exercises-level-3) + +# 📔 ថ្ងៃទី 8 + +## Scope + +variable គឺជាផ្នែកមូលដ្ឋានក្នុងការសរសេរកម្មវិធី។ យើងប្រកាស variable ដើម្បីរក្សាទុកប្រភេទទិន្នន័យផ្សេងៗគ្នា។ ដើម្បីប្រកាស variable យើងប្រើពាក្យគន្លឹះ _var_, _let_ និង _const_ ។ variable អាចត្រូវបានប្រកាសនៅ scope ផ្សេងៗគ្នា។ ក្នុង​ផ្នែក​នេះ យើង​នឹង​មើលលើ scope ​នៃ variable scope ​នៃ​អថេរ​ពេល​យើង​ប្រើ var ឬ let ។ + +variable scope អាចជា៖ + +- Global +- Local + +variable អាចត្រូវបានប្រកាសជា global scope រឺក៏ local scope។ +អ្វី​ដែល​បាន​ប្រកាស​ដោយ​មិនប្រើ let, var ឬ const ត្រូវ​បាន​កំណត់​ក្នុង​កម្រិត​សកល។ + +អនុញ្ញាតឱ្យយើងស្រមៃថាយើងមានឯកសារ scope.js ។ + +### Window Global Object + +ដោយមិនប្រើ console.log() បើកកម្មវិធីរុករករបស់អ្នក ហើយពិនិត្យ អ្នកនឹងឃើញតម្លៃ a និង b ប្រសិនបើអ្នកសរសេរ a ឬ b នៅលើ browser ។ នោះមានន័យថា a និង b មានរួចហើយនៅក្នុង window។ + +```js +//scope.js +a = 'JavaScript' // ការប្រកាសអថេរដោយមិនប្រើ let ឬ const ធ្វើឱ្យវាមាននៅក្នុង window object ហើយអាចរកឃើញគ្រប់ទីកន្លែង +b = 10 // នេះគឺជា variable scope សកល ហើយបានរកឃើញនៅក្នុង window object +function letsLearnScope() { + console.log(a, b) + if (true) { + console.log(a, b) + } +} +console.log(a, b) // អាចចូលប្រើបាន +``` + +### Global scope + +អថេរ​ដែល​បាន​ប្រកាស​ជា​សកល​អាច​ចូល​ប្រើ​បាន​គ្រប់​ទីកន្លែង​ក្នុង​ឯកសារ​តែមួយ។ ប៉ុន្តែពាក្យសកលគឺទាក់ទង។ វាអាចជាសកលសម្រាប់ឯកសារ ឬវាអាចជាសកលទាក់ទងនឹងប្លុកនៃកូដមួយចំនួន។ + +```js +//scope.js +let a = 'JavaScript' // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។ +let b = 10 // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។ +function letsLearnScope() { + console.log(a, b) // JavaScript 10, accessible + if (true) { + let a = 'Python' + let b = 100 + console.log(a, b) // Python 100 + } + console.log(a, b) +} +letsLearnScope() +console.log(a, b) // JavaScript 10, accessible +``` + +### Local scope + +variable ដែលបានប្រកាសថាជា local អាចចូលប្រើបានតែនៅក្នុងកូដប្លុកជាក់លាក់ប៉ុណ្ណោះ។ + +- Block Scope +- Function Scope + +```js +//scope.js +let a = 'JavaScript' // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។ +let b = 10 // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។ +// Function scope +function letsLearnScope() { + console.log(a, b) // JavaScript 10, accessible + let value = false +// block scope + if (true) { + // យើងអាចចូលប្រើបានពីមុខងារ និងនៅខាងក្រៅមុខងារ ប៉ុន្តែ + // variable ដែលបានប្រកាសនៅខាងក្នុង if នឹងមិនអាចប្រើនៅខាងក្រៅ if block + let a = 'Python' + let b = 20 + let c = 30 + let d = 40 + value = !value + console.log(a, b, c, value) // Python 20 30 true + } + // យើងមិនអាចចូលប្រើ c ព្រោះ scope របស់ c គឺមានតែ if block ប៉ុណ្ណោះ។ + console.log(a, b, value) // JavaScript 10 true +} +letsLearnScope() +console.log(a, b) // JavaScript 10, accessible +``` + +ឥឡូវនេះ អ្នកមានការយល់ដឹងអំពី scope។ variable ​ដែល​បាន​ប្រកាស​ដោយ *var* ដែល​មាន​ scope ​សម្រាប់​តែ​ function ប៉ុន្តែ​អថេរ​ដែលបាន​ប្រកាស​ដោយ *let* ឬ *const* គឺ​ជា block scope (function block, if block, loop block, etc)។ ប្លុកនៅក្នុង JavaScript គឺជាកូដមួយនៅចន្លោះតង្កៀបអង្កាញ់ពីរ ({})។ + +```js +//scope.js +function letsLearnScope() { + var gravity = 9.81 + console.log(gravity) + +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +if (true){ + var gravity = 9.81 + console.log(gravity) // 9.81 +} +console.log(gravity) // 9.81 + +for(var i = 0; i < 3; i++){ + console.log(i) // 0, 1, 2 +} +console.log(i) // 3 + +``` + +នៅក្នុង ES6 និងខ្ពស់ជាងនេះមាន *let* និង *const* ដូច្នេះអ្នកនឹងមិនទទួលរងពីភាពមិនច្បាស់លាស់នៃ *var* នោះទេ។ នៅពេលយើងប្រើ *let* អថេររបស់យើងត្រូវបានទប់ស្កាត់ ហើយវានឹងមិនឆ្លងផ្នែកផ្សេងទៀតនៃកូដរបស់យើងទេ។ + +```js +//scope.js +function letsLearnScope() { + // អ្នកអាចប្រើ let ឬ const ប៉ុន្តែទំនាញគឺថេរ ចឹងខ្ញុំនិងប្រើ const + const gravity = 9.81 + console.log(gravity) + +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +if (true){ + const gravity = 9.81 + console.log(gravity) // 9.81 +} +// console.log(gravity), Uncaught ReferenceError: gravity is not defined + +for(let i = 0; i < 3; i++){ + console.log(i) // 0, 1, 2 +} +// console.log(i), Uncaught ReferenceError: i is not defined + +``` + +The scope *let* and *const* are the same. The difference is only reassigning. We can not change or reassign the value of the `const` variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will write clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for an array, object, arrow function and function expression. + +scope *let* និង *const* គឺដូចគ្នា។ ភាពខុសគ្នាគឺគ្រាន់តែជាការចាត់តាំងឡើងវិញប៉ុណ្ណោះ។ យើងមិនអាចផ្លាស់ប្តូរ ឬកំណត់តម្លៃនៃអថេរ `const` ឡើងវិញបានទេ។ ខ្ញុំសូមណែនាំអ្នកឱ្យប្រើ *let* និង *const* ដោយប្រើ *let* និង *const* អ្នកនឹងសរសេរកូដស្អាត ហើយជៀសវាងការលំបាកក្នុង debug កំហុស។ តាមក្បួន អ្នកអាចប្រើ *let* សម្រាប់តម្លៃណាមួយដែលផ្លាស់ប្តូរ *const* សម្រាប់តម្លៃថេរណាមួយ និងសម្រាប់អារេ object, arrow function និងកន្សោម function។ + +## 📔 Object + +អ្វីគ្រប់យ៉ាងអាចជា object មួយ ហើយ object មានលក្ខណៈសម្បត្តិ ហើយលក្ខណៈសម្បត្តិមានតម្លៃ ដូច្នេះ object គឺជាគូ key និង value លំដាប់នៃ key មិនត្រូវបានបម្រុងទុកឬមិនមានលំដាប់។ +ដើម្បីបង្កើត object literal យើងប្រើតង្កៀបអង្កាញ់ពីរ។ + +### ការបង្កើត object ទទេ + +object ទទេ + +```js +const person = {} +``` + +### ការបង្កើត object ជាមួយនឹងតម្លៃ + +ឥឡូវនេះ person object មាន firstName, lastName, age, location, skills និង isMarried property។ តម្លៃនៃ property ឬ key អាចជា string, number, boolean, object, null, undefined រឺក៏ function + +ចូរយើងមើលឧទាហរណ៍ខ្លះនៃ object។ key នីមួយៗមានតម្លៃនៅក្នុង object។ + +```js +const rectangle = { + length: 20, + width: 20 +} +console.log(rectangle) // {length: 20, width: 20} + +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + isMarried: true +} +console.log(person) +``` + +### ទាញយកតម្លៃពី object + +យើងអាចចូលប្រើតម្លៃនៃ object ដោយប្រើវិធីពីរយ៉ាង៖ + +- ការប្រើប្រាស់ . បន្តដោយឈ្មោះគន្លឹះ ប្រសិនបើ key-name គឺជាពាក្យតែមួយ +- ដោយប្រើតង្កៀបការ៉េ និង quote + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName}${this.lastName}` + }, + 'phone number': '+3584545454545' +} + +// ការចូលប្រើតម្លៃដោយប្រើ . +console.log(person.firstName) +console.log(person.lastName) +console.log(person.age) +console.log(person.location) // undefined + +// តម្លៃអាចត្រូវបានចូលប្រើដោយប្រើតង្កៀបការ៉េ និងឈ្មោះ key +console.log(person['firstName']) +console.log(person['lastName']) +console.log(person['age']) +console.log(person['age']) +console.log(person['location']) // undefined + +// ឧទាហរណ៍ ដើម្បីចូលប្រើលេខទូរស័ព្ទ យើងប្រើតែវិធីតង្កៀបការ៉េប៉ុណ្ណោះ។ +console.log(person['phone number']) +``` + +### ការបង្កើត object methods + +ឥឡូវនេះ person object មាន getFullName property។ getFullName គឺជា function ខាងក្នុងរបស់ person object ហើយយើងហៅវាថា object method។ ពាក្យគន្លឹះ _this_ សំដៅលើ object ខ្លួនឯង។ យើង​អាច​ប្រើ​ពាក្យ _this_ ដើម្បី​ចូល​ប្រើ​តម្លៃ​នៃ​លក្ខណៈ​សម្បត្តិ​ផ្សេងៗ​របស់​វត្ថុ។ យើងមិនអាចប្រើ arrow function ជា object method បានទេ ព្រោះពាក្យនេះសំដៅលើ window នៅខាងក្នុងមុខងារ arrow ជំនួសឱ្យ object ផ្ទាល់។ ឧទាហរណ៍នៃ object + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName} ${this.lastName}` + } +} + +console.log(person.getFullName()) +// Asabeneh Yetayeh +``` + +### ការកំណត់ key ថ្មីសម្រាប់ object + +វត្ថុគឺជារចនាសម្ព័ន្ធទិន្នន័យដែលអាចផ្លាស់ប្តូរបានហើយយើងអាចកែប្រែតម្លៃនៃ objectមួយបន្ទាប់ពីវាបង្កើតរួច។ + +ការកំណត់ key ថ្មីសម្រាប់ object + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 250, + country: 'Finland', + city: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName} ${this.lastName}` + } +} +person.nationality = 'Ethiopian' +person.country = 'Finland' +person.title = 'teacher' +person.skills.push('Meteor') +person.skills.push('SasS') +person.isMarried = true + +person.getPersonInfo = function() { + let skillsWithoutLastSkill = this.skills + .splice(0, this.skills.length - 1) + .join(', ') + let lastSkill = this.skills.splice(this.skills.length - 1)[0] + + let skills = `${skillsWithoutLastSkill}, and ${lastSkill}` + let fullName = this.getFullName() + let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.` + return statement +} +console.log(person) +console.log(person.getPersonInfo()) +``` + +```sh +Asabeneh Yetayeh is a teacher. +He lives in Finland. +He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS. +``` + +### Object Methods + +មាន method ផ្សេងគ្នាដើម្បីរៀបចំ object។ អនុញ្ញាតឱ្យយើងមើល method យចំនួនដែលមាន។ + +_Object.assign_: ដើម្បីចម្លង object ដោយមិនកែប្រែ object ដើម + +```js +const person = { + firstName: 'Asabeneh', + age: 250, + country: 'Finland', + city:'Helsinki', + skills: ['HTML', 'CSS', 'JS'], + title: 'teacher', + address: { + street: 'Heitamienkatu 16', + pobox: 2002, + city: 'Helsinki' + }, + getPersonInfo: function() { + return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.` + } +} + +//Object methods: Object.assign, Object.keys, Object.values, Object.entries +//hasOwnProperty + +const copyPerson = Object.assign({}, person) +console.log(copyPerson) +``` + +#### ទាញយក object key ដោយប្រើ Object.keys() + +_Object.keys_: ដើម្បីទទួលបាន key ឬ property របស់វត្ថុជាអារេ + +```js +const keys = Object.keys(copyPerson) +console.log(keys) //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo'] +const address = Object.keys(copyPerson.address) +console.log(address) //['street', 'pobox', 'city'] +``` + +#### ទាញយក object value ដោយប្រើ Object.keys() + +_Object.values_:ដើម្បីទទួលបានតម្លៃនៃវត្ថុជាអារេ + +```js +const values = Object.values(copyPerson) +console.log(values) +``` + +#### ទាញយក object value និង key ដោយប្រើ Object.entries() + +_Object.entries_:ដើម្បីទទួលបាន key និងតម្លៃនៅក្នុងអារេមួយ។ + +```js +const entries = Object.entries(copyPerson) +console.log(entries) +``` + +#### ពិនិត្យ property ដោយប្រើ hasOwnProperty() + +_hasOwnProperty_: ដើម្បី​ពិនិត្យ​មើល​ថា​តើ​ key ឬ​ property មាន​ក្នុង​វត្ថុ​ឬ​អត់ + +```js +console.log(copyPerson.hasOwnProperty('name')) +console.log(copyPerson.hasOwnProperty('score')) +``` + +🌕 អ្នកពិតជាគួរឲភ្ញាក់ផ្អើលណាស់។ អ្នកទើបតែបានបញ្ចប់ challenge ថ្ងៃទី 8 ហើយអ្នកបានឈាន 8 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។ + +## 💻 លំហាត់ + +### លំហាត់៖ កម្រិត ១ + +1. បង្កើត object ទទេមួយហៅថាឆ្កែ +1. បង្ហាញ object ឆ្កែនៅលើកុងសូល។ +1. បន្ថែមឈ្មោះ ជើង ពណ៌ អាយុ និងលក្ខណៈសម្បត្តិ bark សម្រាប់វត្ថុឆ្កែ។ លក្ខណសម្បត្តិ bark គឺជា method ដែលឲ _woof woof_ +1. ទាញយកឈ្មោះ ជើង ពណ៌ អាយុ និងតម្លៃ bark ពី object ឆ្កែ +1. កំណត់លក្ខណៈសម្បត្តិថ្មីនៃ object ឆ្កែ៖ ពូជ getDogInfo + +### លំហាត់៖ កម្រិត ២ + +1. ស្វែងរកមនុស្សដែលមានជំនាញជាច្រើននៅក្នុង object user +1. រាប់​អ្នក​ប្រើ​ដែល​ចូល រាប់​អ្នក​ប្រើ​ដែល​មាន​ចំនួន​ធំ​ជាង​ស្មើ​នឹង 50 ពិន្ទុ​ពី​ object ​ខាងក្រោម។ + + ````js + const users = { + Alex: { + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript'], + age: 20, + isLoggedIn: false, + points: 30 + }, + Asab: { + email: 'asab@asab.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'], + age: 25, + isLoggedIn: false, + points: 50 + }, + Brook: { + email: 'daniel@daniel.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'], + age: 30, + isLoggedIn: true, + points: 50 + }, + Daniel: { + email: 'daniel@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + age: 20, + isLoggedIn: false, + points: 40 + }, + John: { + email: 'john@john.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 20, + isLoggedIn: true, + points: 50 + }, + Thomas: { + email: 'thomas@thomas.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React'], + age: 20, + isLoggedIn: false, + points: 40 + }, + Paul: { + email: 'paul@paul.com', + skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'], + age: 20, + isLoggedIn: false, + points: 40 + } + }``` + +1. ស្វែងរកមនុស្សដែលជាអ្នកអភិវឌ្ឍន៍ MERN ពី object អ្នកប្រើប្រាស់ +1. កំណត់ឈ្មោះរបស់អ្នកនៅក្នុង user object ដោយមិនកែប្រែវ user object ដើម +1. ទាញយក key ឬ property ទាំងអស់របស់វត្ថុអ្នកប្រើប្រាស់ +1. ទទួលបានតម្លៃទាំងអស់នៃ object user +1. ប្រើវត្ថុប្រទេសដើម្បីបោះពុម្ពឈ្មោះប្រទេស រាជធានី ចំនួនប្រជាជន និងភាសា។ + +### លំហាត់៖ កម្រិត ៣ + +1. បង្កើត object literal ដែលហៅថា _personAccount_ ។ វាមាន _firstName, lastName, incomes, cost_ properties ហើយវាមាន _totalIncome, totalExpense, accountInfo, addIncome, addExpense_ និង _accountBalance_ method។ ប្រាក់ចំណូល គឺជាសំណុំនៃប្រាក់ចំណូល ហើយការពិពណ៌នា និងការចំណាយរបស់វា គឺជាសំណុំនៃប្រាក់ចំណូល និងការពិពណ៌នារបស់វា។ +2. **** សំណួរ៖ 2, 3 និង 4 គឺផ្អែកលើអារេពីរខាងក្រោម៖ user និង product () + + ```js + const users = [ + { + _id: 'ab12ex', + username: 'Alex', + email: 'alex@alex.com', + password: '123123', + createdAt:'08/01/2020 9:00 AM', + isLoggedIn: false + }, + { + _id: 'fg12cy', + username: 'Asab', + email: 'asab@asab.com', + password: '123456', + createdAt:'08/01/2020 9:30 AM', + isLoggedIn: true + }, + { + _id: 'zwf8md', + username: 'Brook', + email: 'brook@brook.com', + password: '123111', + createdAt:'08/01/2020 9:45 AM', + isLoggedIn: true + }, + { + _id: 'eefamr', + username: 'Martha', + email: 'martha@martha.com', + password: '123222', + createdAt:'08/01/2020 9:50 AM', + isLoggedIn: false + }, + { + _id: 'ghderc', + username: 'Thomas', + email: 'thomas@thomas.com', + password: '123333', + createdAt:'08/01/2020 10:00 AM', + isLoggedIn: false + } + ]; + + const products = [ + { + _id: 'eedfcf', + name: 'mobile phone', + description: 'Huawei Honor', + price: 200, + ratings: [ + { userId: 'fg12cy', rate: 5 }, + { userId: 'zwf8md', rate: 4.5 } + ], + likes: [] + }, + { + _id: 'aegfal', + name: 'Laptop', + description: 'MacPro: System Darwin', + price: 2500, + ratings: [], + likes: ['fg12cy'] + }, + { + _id: 'hedfcg', + name: 'TV', + description: 'Smart TV:Procaster', + price: 400, + ratings: [{ userId: 'fg12cy', rate: 5 }], + likes: ['fg12cy'] + } + ] + ``` + + ស្រមៃថាអ្នកកំពុងទទួលបានអ្នកប្រើប្រាស់ខាងលើពីមូលដ្ឋានទិន្នន័យ MongoDB ។ + a. បង្កើត functionមួយហៅថា signUp ដែលអនុញ្ញាតឱ្យបន្ថែមអ្នកប្រើទៅបណ្តុំ។ ប្រសិនបើមានអ្នកប្រើប្រាស់ហើយ សូមជូនដំណឹងដល់អ្នកប្រើប្រាស់ថាគាត់មានគណនីរួចហើយ។ + b. បង្កើត function មួយហៅថា signIn ដែលអនុញ្ញាតឱ្យអ្នកប្រើចូលកម្មវិធី + +3. អារេផលិតផលមានធាតុបី ហើយពួកវានីមួយៗមាន property ប្រាំមួយ។ + a. បង្កើតមុខងារមួយហៅថា rateProduct ដែលវាយតម្លៃផលិតផល + b. បង្កើតមុខងារមួយហៅថា averageRating ដែលគណនាការវាយតម្លៃជាមធ្យមនៃផលិតផល + +4. បង្កើតមុខងារមួយហៅថា likeProduct។ មុខងារ​នេះ​នឹង​ជួយ​ឱ្យ​ចូលចិត្ត​ផលិតផល​ប្រសិន​បើ​វា​មិន​ត្រូវ​បាន​គេ​ចូល​ចិត្ត​និង​លុប​ការ​ចូលចិត្ត​ប្រសិន​បើ​វា​ត្រូវ​បាន​គេ​ចូល​ចិត្តរួចហើយ​។ + + +🎉 អបអរសាទរ ! 🎉 + +[<< ថ្ងៃទី 7](../07_Day_Functions/07_day_functions.md) | [ថ្ងៃទី 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) diff --git a/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md b/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md new file mode 100644 index 0000000..599c315 --- /dev/null +++ b/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md @@ -0,0 +1,704 @@ +
+

30 ថ្ងៃនៃ JavaScript: Higher Order Functions

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + + +
+ +[<< ថ្ងៃទី 8](../08_Day_Objects/08_day_objects.md) | [ថ្ងៃទី 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) + +![ថ្ងៃទី 9](../images/banners/day_1_9.png) + +- [ថ្ងៃទី 9](#day-9) + - [Higher Order Function](#higher-order-function) + - [Callback](#callback) + - [ត្រឡប់ function ជាតម្លៃ](#returning-function) + - [ការកំណត់ពេលវេលា](#setting-time) + - [កំណត់ចន្លោះពេលដោយប្រើមុខងារ setInterval](#setting-interval-using-a-setinterval-function) + - [កំណត់ពេលវេលាដោយប្រើ setTimeout](#setting-a-time-using-a-settimeout) + - [Functional Programming](#functional-programming) + - [forEach](#foreach) + - [map](#map) + - [filter](#filter) + - [reduce](#reduce) + - [every](#every) + - [find](#find) + - [findIndex](#findindex) + - [some](#some) + - [sort](#sort) + - [ការតម្រៀបតម្លៃ string](#sorting-string-values) + - [ការតម្រៀបតម្លៃលេខ](#sorting-numeric-values) + - [ការតម្រៀប Object Arrays](#sorting-object-arrays) + - [💻 លំហាត់](#-exercises) + - [លំហាត់៖ កម្រិត ១](#exercises-level-1) + - [លំហាត់៖ កម្រិត ២](#exercises-level-2) + - [លំហាត់៖ កម្រិត ៣](#exercises-level-3) + +# ថ្ងៃទី 9 + +## Higher Order Function + +Higher order functions គឺជាអនុគមន៍ដែលយកអនុគមន៍ផ្សេងទៀតជាប៉ារ៉ាម៉ែត្រ ឬត្រឡប់អនុគមន៍ជាតម្លៃ។ អនុគមន៍​ដែល​បាន​បោះ​ជា​ប៉ារ៉ាម៉ែត្រ​ត្រូវ​បាន​ហៅ​ថា​ហៅថា callback។ + +### Callback + +callback គឺជា function ដែលអាចត្រូវបានបញ្ជូនជាប៉ារ៉ាម៉ែត្រទៅ function ផ្សេងទៀត។ សូមមើលឧទាហរណ៍ខាងក្រោម។ + +```js +// function callback អាចជាឈ្មោះណាមួយ។ +const callback = (n) => { + return n ** 2 +} +​ +// function ដែលយក function ផ្សេងទៀតជា callback +function cube(callback, n) { + return callback(n) * n +} +​ +console.log(cube(callback, 3)) +``` + +### ត្រឡប់ function ជាតម្លៃ + +Higher order functions ត្រឡប់ function ជាតម្លៃ +​ +```js +// Higher order function ត្រឡប់ function ជាតម្លៃ +const higherOrder = n => { + const doSomething = m => { + const doWhatEver = t => { + return 2 * n + 3 * m + t + } + return doWhatEver + } + return doSomething +} +console.log(higherOrder(2)(3)(10)) +``` + +អនុញ្ញាតឱ្យយើងមើលការប្រើ callback function។ ឧទាហរណ៍វិធីសាស្ត្រ _forEach_ ប្រើ callback function។ + +```js +const numbers = [1, 2, 3, 4, 5] +const sumArray = arr => { + let sum = 0 + const callback = function(element) { + sum += element + } + arr.forEach(callback) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +ឧទាហរណ៍ខាងលើអាចត្រូវបានធ្វើឱ្យសាមញ្ញដូចខាងក្រោម: + +```js +const numbers = [1, 2, 3, 4] +​ +const sumArray = arr => { + let sum = 0 + arr.forEach(function(element) { + sum += element + }) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +### ការកំណត់ពេលវេលា + +នៅក្នុង JavaScript យើងអាចប្រតិបត្តិសកម្មភាពមួយចំនួនក្នុងចន្លោះពេលជាក់លាក់មួយ ឬយើងអាចកំណត់ពេល (រង់ចាំ) សម្រាប់ពេលខ្លះដើម្បីប្រតិបត្តិសកម្មភាពមួយចំនួន។ + +- setInterval +- setTimeout + +#### កំណត់ចន្លោះពេលដោយប្រើមុខងារ setInterval + +នៅក្នុង JavaScript យើងប្រើ higher order function setInterval ដើម្បីធ្វើសកម្មភាពមួយចំនួនជាបន្តបន្ទាប់ក្នុងចន្លោះពេលមួយចំនួន។ វិធីសាស្ត្រសកល setInterval យក callback function និងរយៈពេលជាប៉ារ៉ាម៉ែត្រ។ រយៈពេលគឺគិតជាមិល្លីវិនាទី ហើយ callback នឹងតែងតែត្រូវបានហៅក្នុងចន្លោះពេលនោះ។ + +```js +// syntax +function callback() { + // code goes here +} +setInterval(callback, duration) +``` + +```js +function sayHello() { + console.log('Hello') +} +setInterval(sayHello, 1000) // វាបោះពុម្ពជំរាបសួររៀងរាល់វិនាទី 1000ms គឺ 1s +``` + +#### កំណត់ពេលវេលាដោយប្រើ setTimeout + +នៅក្នុង JavaScript យើងប្រើ higher order function setTimeout ដើម្បីប្រតិបត្តិសកម្មភាពមួយចំនួននៅពេលអនាគត។ វិធីសាស្ត្រសកល setTimeout យកមុខងារ callback និងរយៈពេលជាប៉ារ៉ាម៉ែត្រ។ ថិរវេលាគឺគិតជាមិល្លីវិនាទី ហើយការហៅត្រឡប់មកវិញរង់ចាំសម្រាប់ពេលវេលានោះ។ + +```js +// syntax +function callback() { + // code goes here +} +setTimeout(callback, duration) // រយៈពេលគិតជាមិល្លីវិនាទី +``` + +```js +function sayHello() { + console.log('Hello') +} +setTimeout(sayHello, 2000) +``` + +## Functional Programming + +ជំនួសឱ្យការសរសេររង្វិលជុំធម្មតា កំណែចុងក្រោយបំផុតនៃ JavaScript បានណែនាំវិធីសាស្រ្តជាច្រើនដែលអាចជួយយើងក្នុងការដោះស្រាយបញ្ហាស្មុគស្មាញ។ រាល់វិធីសាស្រ្តដែលភ្ជាប់មកជាមួយ callback function។ នៅក្នុងផ្នែកនេះ យើងនឹងឃើញ _forEach_, _map_, _filter_, _reduce_, _find_, _every_, _some_, និង _sort_។ + +### forEach + +_forEach_: iterate នូវធាតុអារេ។ យើងប្រើ _forEach_ តែជាមួយអារេ។ វាត្រូវការ callback function ជាមួយធាតុ ប៉ារ៉ាម៉ែត្រសន្ទស្សន៍ និងអារេខ្លួនឯង។ សន្ទស្សន៍ និងអារេជាជម្រើស។ + +```js +arr.forEach(function (element, index, arr) { + console.log(index, element, arr) +}) +// កូដខាងលើអាចត្រូវបានសរសេរដោយប្រើ arrow function +arr.forEach((element, index, arr) => { + console.log(index, element, arr) +}) +// កូដខាងលើអាចត្រូវបានសរសេរដោយប្រើ arrow function និងការត្រឡប់មកវិញយ៉ាងច្បាស់ +arr.forEach((element, index, arr) => console.log(index, element, arr)) +``` + +```js +let sum = 0; +const numbers = [1, 2, 3, 4, 5]; +numbers.forEach(num => console.log(num)) +console.log(sum) +``` + +```sh +1 +2 +3 +4 +5 +``` + +```js +let sum = 0; +const numbers = [1, 2, 3, 4, 5]; +numbers.forEach(num => sum += num) + +console.log(sum) +``` + +```sh +15 +``` + +```js +const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] +countries.forEach((element) => console.log(element.toUpperCase())) +``` + +```sh +FINLAND +DENMARK +SWEDEN +NORWAY +ICELAND +``` + +### map + +_map_: iterate នូវធាតុអារេ និងកែប្រែធាតុអារេ។ វាត្រូវការ callback function ជាមួយធាតុ សន្ទស្សន៍ ប៉ារ៉ាម៉ែត្រអារេ ហើយត្រឡប់អារេថ្មី។ + +```js +const modifiedArray = arr.map(function (element, index, arr) { + return element +}) +``` + +```js +/*Arrow function and explicit return +const modifiedArray = arr.map((element,index) => element); +*/ +//ឧទាហរណ៍ +const numbers = [1, 2, 3, 4, 5] +const numbersSquare = numbers.map((num) => num * num) + +console.log(numbersSquare) +``` + +```sh +[1, 4, 9, 16, 25] +``` + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const namesToUpperCase = names.map((name) => name.toUpperCase()) +console.log(namesToUpperCase) +``` + +```sh +['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK'] +``` + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya', +] +const countriesToUpperCase = countries.map((country) => country.toUpperCase()) +console.log(countriesToUpperCase) + +/* +// Arrow function +const countriesToUpperCase = countries.map((country) => { + return country.toUpperCase(); +}) +//Explicit return arrow function +const countriesToUpperCase = countries.map(country => country.toUpperCase()); +*/ +``` + +```sh +['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA'] +``` + +```js +const countriesFirstThreeLetters = countries.map((country) => + country.toUpperCase().slice(0, 3) +) +``` + +```sh + ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"] +``` + +### filter + +_Filter_: ត្រងធាតុដែលបំពេញលក្ខខណ្ឌហើយត្រឡប់អារេថ្មី។ + +```js +//ត្រងប្រទេសដែលមាន land +const countriesContainingLand = countries.filter((country) => + country.includes('land') +) +console.log(countriesContainingLand) +``` + +```sh +['Finland', 'Ireland'] +``` + +```js +const countriesEndsByia = countries.filter((country) => country.endsWith('ia')) +console.log(countriesEndsByia) +``` + +```sh +['Albania', 'Bolivia','Ethiopia'] +``` + +```js +const countriesHaveFiveLetters = countries.filter( + (country) => country.length === 5 +) +console.log(countriesHaveFiveLetters) +``` + +```sh +['Japan', 'Kenya'] +``` + +```js +const scores = [ + { name: 'Asabeneh', score: 95 }, + { name: 'Lidiya', score: 98 }, + { name: 'Mathias', score: 80 }, + { name: 'Elias', score: 50 }, + { name: 'Martha', score: 85 }, + { name: 'John', score: 100 }, +] + +const scoresGreaterEighty = scores.filter((score) => score.score > 80) +console.log(scoresGreaterEighty) +``` + +```sh +[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}] +``` + +### reduce + +_reduce_: ប្រើ callback function។ callback function យក accumulator, បច្ចុប្បន្ន និងតម្លៃដំបូងជាជម្រើសជាប៉ារ៉ាម៉ែត្រ ហើយត្រឡប់តម្លៃតែមួយ។ វាគឺជាការអនុវត្តដ៏ល្អក្នុងការកំណត់តម្លៃដំបូងសម្រាប់តម្លៃ accumulator ។ ប្រសិនបើយើងមិនបញ្ជាក់ប៉ារ៉ាម៉ែត្រនេះទេ តាមលំនាំដើម accumulator នឹងទទួលបានអារេ `តម្លៃដំបូង`។ ប្រសិនបើអារេរបស់យើងជា _empty array_ នោះ `Javascript` នឹងបោះកំហុស។ + +```js +arr.reduce((acc, cur) => { + // ប្រតិបត្តិការមួយចំនួនទៅទីនេះ មុនពេលត្រឡប់តម្លៃ + return +}, initialValue) +``` + +```js +const numbers = [1, 2, 3, 4, 5] +const sum = numbers.reduce((acc, cur) => acc + cur, 0) + +console.log(sum) +``` + +```js +15 +``` + +### every + +_every_: ពិនិត្យមើលថាតើធាតុទាំងអស់ស្រដៀងគ្នានៅក្នុងទិដ្ឋភាពមួយ។ វាត្រឡប់ប៊ូលីន + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const areAllStr = names.every((name) => typeof name === 'string') // តើជា string ទាំងអស់ទេ? + +console.log(areAllStr) +``` + +```sh +true +``` + +```js +const bools = [true, true, true, true] +const areAllTrue = bools.every((b) => b === true) // តើជា ពិត ទាំងអស់ទេ? + +console.log(areAllTrue) // true +``` + +```sh +true + +``` + +### find + +_find_: ត្រឡប់ធាតុទីមួយដែលបំពេញលក្ខខណ្ឌ + +```js +const ages = [24, 22, 25, 32, 35, 18] +const age = ages.find((age) => age < 20) + +console.log(age) +``` + +```js +18 +``` + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const result = names.find((name) => name.length > 7) +console.log(result) +``` + +```sh +Asabeneh +``` + +```js +const scores = [ + { name: 'Asabeneh', score: 95 }, + { name: 'Mathias', score: 80 }, + { name: 'Elias', score: 50 }, + { name: 'Martha', score: 85 }, + { name: 'John', score: 100 }, +] + +const score = scores.find((user) => user.score > 80) +console.log(score) +``` + +```sh +{ name: "Asabeneh", score: 95 } +``` + +### findIndex + +_findIndex_: ត្រឡប់ទីតាំងនៃធាតុទីមួយដែលបំពេញលក្ខខណ្ឌ + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const ages = [24, 22, 25, 32, 35, 18] + +const result = names.findIndex((name) => name.length > 7) +console.log(result) // 0 + +const age = ages.findIndex((age) => age < 20) +console.log(age) // 5 +``` + +### some + +_some_: ពិនិត្យមើលថាតើធាតុមួយចំនួនស្រដៀងគ្នានៅក្នុងទិដ្ឋភាពមួយ។ វាត្រឡប់ប៊ូលីន + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const bools = [true, true, true, true] + +const areSomeTrue = bools.some((b) => b === true) + +console.log(areSomeTrue) //true +``` + +```js +const areAllStr = names.some((name) => typeof name === 'number') // តើ string ទាំងអស់ទេ? +console.log(areAllStr) // false +``` + +### sort + +_sort_: method ​តម្រៀប​​ធាតុ​អារេ​តាម​លំដាប់​ឡើង​ឬ​ចុះ។ តាមលំនាំដើម វិធីសាស្ត្រ **_sort()_** តម្រៀបតម្លៃជា string។ វាដំណើរការល្អសម្រាប់ធាតុអារេ string ប៉ុន្តែមិនមែនសម្រាប់លេខទេ។ ប្រសិនបើតម្លៃលេខត្រូវបានតម្រៀបជាខ្សែ ហើយវាផ្តល់ឱ្យយើងនូវលទ្ធផលខុស។ វិធីសាស្ត្រតម្រៀប កែប្រែអារេដើម។ វាត្រូវបានណែនាំឱ្យចម្លងទិន្នន័យដើម មុនពេលអ្នកចាប់ផ្តើមប្រើវិធីសាស្ត្រ _sort_។ + +#### ការតម្រៀបតម្លៃ string + +```js +const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot'] +console.log(products.sort()) // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar'] +//ឥឡូវនេះអារេផលិតផលដើមក៏ត្រូវបានតម្រៀបផងដែរ។ +``` + +#### ការតម្រៀបតម្លៃលេខ + +ដូចដែលអ្នកអាចឃើញនៅក្នុងឧទាហរណ៍ខាងក្រោម 100 បានមកជាលើកដំបូងបន្ទាប់ពីបានតម្រៀបតាមលំដាប់ឡើង។ តម្រៀបបំប្លែងធាតុទៅជាខ្សែអក្សរ ចាប់តាំងពី '100' និងលេខផ្សេងទៀតប្រៀបធៀប 1 ដែលការចាប់ផ្តើមនៃខ្សែអក្សរ '100' ក្លាយជាតូចបំផុត។ ដើម្បីជៀសវាងបញ្ហានេះ យើងប្រើ callback functio ប្រៀបធៀបនៅក្នុងវិធីតម្រៀប ដែលផ្តល់លទ្ធផលអវិជ្ជមាន សូន្យ ឬវិជ្ជមាន។ + +```js +const numbers = [9.81, 3.14, 100, 37] +// ការប្រើ sort method ដើម្បីតម្រៀបធាតុលេខផ្តល់លទ្ធផលខុស។ មើល​ខាង​ក្រោម +console.log(numbers.sort()) //[100, 3.14, 37, 9.81] +numbers.sort(function (a, b) { + return a - b +}) + +console.log(numbers) // [3.14, 9.81, 37, 100] + +numbers.sort(function (a, b) { + return b - a +}) +console.log(numbers) //[100, 37, 9.81, 3.14] +``` + +#### ការតម្រៀប Object Array + +នៅពេលណាដែលយើងតម្រៀប object ក្នុងអារេមួយ យើងប្រើ key ដើម្បីប្រៀបធៀប។ ចូរយើងមើលឧទាហរណ៍ខាងក្រោម។ + +```js +objArr.sort(function (a, b) { + if (a.key < b.key) return -1 + if (a.key > b.key) return 1 + return 0 +}) + +// or + +objArr.sort(function (a, b) { + if (a['key'] < b['key']) return -1 + if (a['key'] > b['key']) return 1 + return 0 +}) + +const users = [ + { name: 'Asabeneh', age: 150 }, + { name: 'Brook', age: 50 }, + { name: 'Eyob', age: 100 }, + { name: 'Elias', age: 22 }, +] +users.sort((a, b) => { + if (a.age < b.age) return -1 + if (a.age > b.age) return 1 + return 0 +}) +console.log(users) // តម្រៀបឡើង +// [{…}, {…}, {…}, {…}] +``` + +🌕 អ្នក​កំពុង​ធ្វើ​បាន​ល្អ​។​ កុំ​បោះបង់​ចោល​ព្រោះ​រឿង​អស្ចារ្យ​ត្រូវ​ការ​ពេល​វេលា។ អ្នកទើបតែបានបញ្ចប់ការប្រកួតថ្ងៃទី 9 ហើយអ្នកបានឈាន 9 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។ + +## 💻 លំហាត់ + +### លំហាត់៖ កម្រិត ១ + +```js +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand'] +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +const products = [ + { product: 'banana', price: 3 }, + { product: 'mango', price: 6 }, + { product: 'potato', price: ' ' }, + { product: 'avocado', price: 8 }, + { product: 'coffee', price: 10 }, + { product: 'tea', price: '' }, +] +``` + +1. ពន្យល់ពីភាពខុសគ្នារវាង **_forEach map filter reduce**។ +2. កំណត់ callback function មុនពេលដែលអ្នកប្រើវានៅក្នុង forEach, map, filter or reduce។ +3. ប្រើ **_forEach_** ដើម្បី console.log ប្រទេសនីមួយៗក្នុងបណ្តាប្រទេសអារេ។ +4. ប្រើ **_forEach_** ដើម្បី console.log ឈ្មោះនីមួយៗក្នុងអារេឈ្មោះ។ +5. ប្រើ **_forEach_** ដើម្បី console.log លេខនីមួយៗក្នុងអារេលេខ។ +6. ប្រើ **_map_** ដើម្បីបង្កើតអារេថ្មីដោយផ្លាស់ប្តូរប្រទេសនីមួយៗទៅជាអក្សរធំក្នុងប្រទេសអារេ។ +7. ប្រើ **_map_** ដើម្បីបង្កើតអារេនៃប្រវែងប្រទេសពីអារេប្រទេស។ +8. ប្រើ **_map_** ដើម្បីបង្កើតអារេថ្មីដោយផ្លាស់ប្តូរលេខនីមួយៗទៅជាការ៉េក្នុងអារេលេខ +9. ប្រើ **_map_** ដើម្បីប្តូរឈ្មោះនីមួយៗទៅជាអក្សរធំក្នុងអារេឈ្មោះ +10. ប្រើ **_map_** ដើម្បីគូសផែនទីអារេផលិតផលទៅនឹងតម្លៃដែលត្រូវគ្នារបស់វា។ +11. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមាន **_land_**។ +12. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមានតួអក្សរប្រាំមួយ។ +13. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមានអក្សរប្រាំមួយ និងច្រើនទៀតនៅក្នុងអារេប្រទេស។ +14. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលចាប់ផ្តើមដោយ 'E'; +15. ប្រើ **_filter_** ដើម្បីត្រងតែតម្លៃដែលមានតម្លៃប៉ុណ្ណោះ។ +16. ប្រកាសមុខងារមួយហៅថា getStringLists ដែលយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយបន្ទាប់មកត្រឡប់អារេតែជាមួយធាតុខ្សែអក្សរប៉ុណ្ណោះ។ +17. ប្រើ **_reduce_** ដើម្បីបូកសរុបលេខទាំងអស់ក្នុងអារេលេខ។ +18. ប្រើ **_reduce_** ដើម្បីភ្ជាប់ប្រទេសទាំងអស់ និងបង្កើតប្រយោគនេះ៖ **_Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries_** +19. ពន្យល់ពីភាពខុសគ្នារវាង **_some_** និង **_every_** +20. ប្រើ **_some_** ដើម្បីពិនិត្យមើលថាតើប្រវែងឈ្មោះខ្លះធំជាងប្រាំពីរនៅក្នុងអារេឈ្មោះ +21. ប្រើ **_every_** ដើម្បីពិនិត្យមើលថាតើប្រទេសទាំងអស់មានពាក្យថា land ឬអត់ +22. ពន្យល់ពីភាពខុសគ្នារវាង **_find_** និង **_findIndex_** ។ +23. ប្រើ **_find_** ដើម្បីស្វែងរកប្រទេសដំបូងដែលមានអក្សរតែប្រាំមួយក្នុងប្រទេសអារេ +24. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងនៃប្រទេសដំបូងដែលមានអក្សរតែប្រាំមួយនៅក្នុងបណ្តាប្រទេសអារេ +25. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងរបស់ **_Norway_** ប្រសិនបើវាមិនមាននៅក្នុងអារេ អ្នកនឹងទទួលបាន -1 ។ +26. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងរបស់ **_Russia_** ប្រសិនបើវាមិនមាននៅក្នុងអារេ អ្នកនឹងទទួលបាន -1 ។ + +### លំហាត់៖ កម្រិត ២ + +1. ស្វែងរកតម្លៃសរុបនៃផលិតផលដោយដាក់ខ្សែសង្វាក់អារេពីរ ឬច្រើន (ឧ. arr.map(callback).filter(callback).reduce(callback)) +1. ស្វែងរកផលបូកនៃតម្លៃផលិតផលដោយប្រើតែកាត់បន្ថយ(callback) +1. ប្រកាសមុខងារមួយហៅថា **_categorizeCountries_** ដែលត្រឡប់អារេនៃប្រទេសដែលមានលំនាំទូទៅមួយចំនួន (អ្នករកឃើញអារេប្រទេសនៅក្នុងឃ្លាំងនេះជា countries.js(ឧ. 'land', 'ia', 'island','stan' )) +1. បង្កើតមុខងារដែលត្រឡប់អារេនៃវត្ថុដែលជាអក្សរ និងចំនួនដងដែលអក្សរប្រើដើម្បីចាប់ផ្តើមជាមួយឈ្មោះប្រទេសមួយ។ +1. ប្រកាសមុខងារ **_getFirstTenCountries_** ហើយត្រឡប់អារេនៃដប់ប្រទេស។ ប្រើកម្មវិធីមុខងារផ្សេងៗគ្នា ដើម្បីដំណើរការលើអារេ country.js +1. ប្រកាសមុខងារ **_getLastTenCountries_** ដែលត្រឡប់ប្រទេសទាំងដប់ចុងក្រោយនៅក្នុងអារេប្រទេស។ +1. ស្វែងយល់ថាតើ _letter_ មួយណាត្រូវបានប្រើប្រាស់ច្រើនដង ជាដំបូងសម្រាប់ឈ្មោះប្រទេសពីអារេប្រទេស (ឧ. ហ្វាំងឡង់ ហ្វីជី បារាំង។ល។) + +### លំហាត់៖ កម្រិត ៣ + +1. ប្រើព័ត៌មានប្រទេសនៅក្នុងថតទិន្នន័យ។ តម្រៀបប្រទេសតាម name, capital, និង population +1. \*\*\* ស្វែងរក 10 ភាសាដែលនិយាយច្រើនបំផុត: + + ````js + // លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ + console.log(mostSpokenLanguages(countries, 10)) + [ + {country: 'English',count:91}, + {country: 'French',count:45}, + {country: 'Arabic',count:25}, + {country: 'Spanish',count:24}, + {country:'Russian',count:9}, + {country:'Portuguese', count:9}, + {country:'Dutch',count:8}, + {country:'German',count:7}, + {country:'Chinese',count:5}, + {country:'Swahili',count:4} + ] + + // លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ + console.log(mostSpokenLanguages(countries, 3)) + [ + {country: 'English',count: 91}, + {country: 'French',count: 45}, + {country: 'Arabic',count: 25}, + ]``` + + ```` + +2. \*\*\* ប្រើឯកសារ country_data.js បង្កើតមុខងារដែលបង្កើតប្រទេសចំនួនដប់ដែលមានប្រជាជនច្រើនជាងគេ + + ````js + console.log(mostPopulatedCountries(countries, 10)) + + [ + {country: 'China', population: 1377422166}, + {country: 'India', population: 1295210000}, + {country: 'United States of America', population: 323947000}, + {country: 'Indonesia', population: 258705000}, + {country: 'Brazil', population: 206135893}, + {country: 'Pakistan', population: 194125062}, + {country: 'Nigeria', population: 186988000}, + {country: 'Bangladesh', population: 161006790}, + {country: 'Russian Federation', population: 146599183}, + {country: 'Japan', population: 126960000} + ] + + console.log(mostPopulatedCountries(countries, 3)) + [ + {country: 'China', population: 1377422166}, + {country: 'India', population: 1295210000}, + {country: 'United States of America', population: 323947000} + ] + ``` + + ```` + +3. \*\*\* ព្យាយាមបង្កើតកម្មវិធីដែលគណនារង្វាស់នៃទំនោរកណ្តាលនៃគំរូ (mean, median, mode) និងរង្វាស់នៃភាពប្រែប្រួល (range, variance, standard deviation)។ បន្ថែមពីលើវិធានការទាំងនោះ រកឃើញ min, max, count, percentile, និង frequency distributionនៃគំរូ។ អ្នកអាចបង្កើតវត្ថុមួយហៅថាស្ថិតិ និងបង្កើតមុខងារទាំងអស់ដែលធ្វើការគណនាស្ថិតិជាវិធីសាស្ត្រសម្រាប់វត្ថុស្ថិតិ។ សូមពិនិត្យមើលលទ្ធផលខាងក្រោម។ + ```js + const ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26] + + console.log('Count:', statistics.count()) // 25 + console.log('Sum: ', statistics.sum()) // 744 + console.log('Min: ', statistics.min()) // 24 + console.log('Max: ', statistics.max()) // 38 + console.log('Range: ', statistics.range()) // 14 + console.log('Mean: ', statistics.mean()) // 30 + console.log('Median: ',statistics.median()) // 29 + console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} + console.log('Variance: ',statistics.var()) // 17.5 + console.log('Standard Deviation: ', statistics.std()) // 4.2 + console.log('Variance: ',statistics.var()) // 17.5 + console.log('Frequency Distribution: ',statistics.freqDist()) # [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] + ``` + + ```sh + console.log(statistics.describe()) + Count: 25 + Sum: 744 + Min: 24 + Max: 38 + Range: 14 + Mean: 30 + Median: 29 + Mode: (26, 5) + Variance: 17.5 + Standard Deviation: 4.2 + Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] + ``` + +🎉 អបអរសាទរ ! 🎉 + +[<< ថ្ងៃទី 8](../08_Day_Objects/08_day_objects.md) | [ថ្ងៃទី 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) diff --git a/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md b/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md new file mode 100644 index 0000000..6dbdb85 --- /dev/null +++ b/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md @@ -0,0 +1,440 @@ +
+

30 ថ្ងៃនៃ JavaScript: Sets and Maps

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + + +
+ +[<< ថ្ងៃទី 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [ថ្ងៃទី 11>>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) + +![ថ្ងៃទី 10](../images/banners/day_1_10.png) + +- [ថ្ងៃទី 10](#day-10) + - [Set](#set) + - [ការបង្កើតសំណុំទទេ](#creating-an-empty-set) + - [ការបង្កើតសំណុំពីអារេ](#creating-set-from-array) + - [ការបន្ថែមធាតុទៅសំណុំ](#adding-an-element-to-a-set) + - [ការលុបធាតុពីសំណុំ](#deleting-an-element-a-set) + - [ពិនិត្យធាតុនៅក្នុងសំណុំ](#checking-an-element-in-the-set) + - [ការរំលាយសំណុំ](#clearing-the-set) + - [ប្រជុំនៃសំណុំ](#union-of-sets) + - [ប្រសព្វនៃសំណុំ](#intersection-of-sets) + - [ភាពខុសគ្នានៃសំណុំ](#difference-of-sets) + - [Map](#map) + - [ការបង្កើត map ទទេ](#creating-an-empty-map) + - [ការបង្កើត map ពីអារេ](#creating-an-map-from-array) + - [ការបន្ថែមតម្លៃទៅ map](#adding-values-to-the-map) + - [ការទាញយកតម្លៃពី map](#getting-a-value-from-map) + - [ពិនិត្យ​មើល key ក្នុង​ map](#checking-key-in-map) + - [លំហាត់](#exercises) + - [លំហាត់៖ កម្រិត ១](#exerciseslevel-1) + - [លំហាត់៖ កម្រិត ២](#exerciseslevel-2) + - [លំហាត់៖ កម្រិត ៣](#exerciseslevel-3) + +# ថ្ងៃទី 10 + +## Set + +សំណុំគឺជាបណ្តុំនៃធាតុ។ សំណុំអាចមានធាតុតែមួយគត់។ +ចូរយើងមើលពីរបៀបបង្កើតសំណុំនៅក្នុងផ្នែកខាងក្រោម។ + +### ការបង្កើតសំណុំទទេ + +```js +const companies = new Set() +console.log(companies) +``` + +```sh +Set(0) {} +``` + +### ការបង្កើតសំណុំពីអារេ + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] + +const setOfLanguages = new Set(languages) +console.log(setOfLanguages) +``` + +```sh +Set(4) {"English", "Finnish", "French", "Spanish"} +``` + +Set គឺជាវត្ថុដែលអាច iterate បាន ហើយយើងអាច iterate តាមរយៈធាតុនីមួយៗ។ + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] + +const setOfLanguages = new Set(languages) + +for (const language of setOfLanguages) { + console.log(language) +} +``` + +```sh + English + Finnish + French + Spanish +``` + +### ការបន្ថែមធាតុទៅសំណុំ + +```js +const companies = new Set() // បង្កើតសំណុំទទេ +console.log(companies.size) // 0 + +companies.add('Google') // បន្ថែមធាតុទៅសំណុំ +companies.add('Facebook') +companies.add('Amazon') +companies.add('Oracle') +companies.add('Microsoft') +console.log(companies.size) // 5 ធាតុនៅក្នុងសំណុំ +console.log(companies) +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} +``` + +យើងក៏អាចប្រើ loop ដើម្បីបន្ថែមធាតុទៅសំណុំមួយ។ + +```js +const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft'] +setOfCompanies = new Set() +for (const company of companies) { + setOfCompanies.add(company) +} +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} + +``` + +### ការលុបធាតុមួយឈុត + +យើងអាចលុបធាតុចេញពីសំណុំដោយប្រើ delete method។ + +```js +console.log(companies.delete('Google')) +console.log(companies.size) // 4 ធាតុដែលនៅសល់ក្នុងឈុត +``` + +### ពិនិត្យធាតុនៅក្នុងសំណុំ + +method នេះអាចជួយឱ្យដឹងថាតើមានធាតុជាក់លាក់ណាមួយនៅក្នុងសំណុំមួយ។ + +```js +console.log(companies.has('Apple')) // false +console.log(companies.has('Facebook')) // true +``` + +### ការរំលាយសំណុំ + +វាដកធាតុទាំងអស់ចេញពីសំណុំ។ + +```js +companies.clear() +console.log(companies) +``` + +```sh +Set(0) {} +``` + +សូមមើលឧទាហរណ៍ខាងក្រោមដើម្បីរៀនពីរបៀបប្រើសំណុំ។ + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French', +] +const langSet = new Set(languages) +console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"} +console.log(langSet.size) // 4 + +const counts = [] +const count = {} + +for (const l of langSet) { + const filteredLang = languages.filter((lng) => lng === l) + console.log(filteredLang) // ["English", "English", "English"] + counts.push({ lang: l, count: filteredLang.length }) +} +console.log(counts) +``` + +```js +[ + { lang: 'English', count: 3 }, + { lang: 'Finnish', count: 1 }, + { lang: 'French', count: 2 }, + { lang: 'Spanish', count: 1 }, +] +``` + +ករណីប្រើប្រាស់ផ្សេងទៀតនៃសំណុំ។ ឧទាហរណ៍ដើម្បីរាប់ធាតុតែមួយគត់នៅក្នុងអារេមួយ។ + +```js +const numbers = [5, 3, 2, 5, 5, 9, 4, 5] +const setOfNumbers = new Set(numbers) + +console.log(setOfNumbers) +``` + +```sh +Set(5) {5, 3, 2, 9, 4} +``` + +### ប្រជុំនៃសំណុំ + +ដើម្បីស្វែងរកប្រជុំនៃពីរសំណុំយើងអាចប្រើ spread operator។ ចូរស្វែងរកប្រជុំនៃសំណុំ A និង សំណុំ B (A U B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] +let c = [...a, ...b] + +let A = new Set(a) +let B = new Set(b) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(6) {1, 2, 3, 4, 5,6} +``` + +### ប្រសព្វនៃសំណុំ + +ដើម្បីស្វែងរកចំនុចប្រសព្វនៃសំណុំពីរអាចត្រូវបានសម្រេចដោយប្រើ filter។ ចូរស្វែងរកចំនុចប្រសព្វនៃសំណុំ A និងកំណត់ B (A ∩ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter((num) => B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(3) {3, 4, 5} +``` + +### ភាពខុសគ្នានៃសំណុំ + +ដើម្បីស្វែងរកភាពខុសគ្នារវាងសំណុំពីរអាចត្រូវបានសម្រេចដោយប្រើ filter។ ចូរស្វែងរកភាពខុសគ្នានៃសំណុំ A និងសំណុំ B (A \ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter((num) => !B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(2) {1, 2} +``` + +## Map + +### ការបង្កើត map ទទេ + +```js +const map = new Map() +console.log(map) +``` + +```sh +Map(0) {} +``` + +### ការបង្កើត map ពីអារេ + +```js +countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'], +] +const map = new Map(countries) +console.log(map) +console.log(map.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### ការបន្ថែមតម្លៃទៅ map + +```js +const countriesMap = new Map() +console.log(countriesMap.size) // 0 +countriesMap.set('Finland', 'Helsinki') +countriesMap.set('Sweden', 'Stockholm') +countriesMap.set('Norway', 'Oslo') +console.log(countriesMap) +console.log(countriesMap.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### ការទាញយកតម្លៃពី map + +```js +console.log(countriesMap.get('Finland')) +``` + +```sh +Helsinki +``` + +### ​ពិនិត្យ​មើល​ key ក្នុង​ map + +ពិនិត្យមើលថាតើ key មាននៅក្នុង map ដោយប្រើវិធីសាស្ត្រ _has_ ។ វាត្រឡប់ _true_ ឬ _false_ ។ + +```js +console.log(countriesMap.has('Finland')) +``` + +```sh +true +``` + +ទទួលបានតម្លៃទាំងអស់ពីផែនទីដោយប្រើ loop + +```js +for (const country of countriesMap) { + console.log(country) +} +``` + +```sh +(2) ["Finland", "Helsinki"] +(2) ["Sweden", "Stockholm"] +(2) ["Norway", "Oslo"] +``` + +```js +for (const [country, city] of countriesMap){ + console.log(country, city) +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +🌕 អ្នក​បាន​បង្កើត​ព្រឹត្តិការណ៍​ដ៏​ធំ​មួយ អ្នក​មិន​អាច​ឈប់​បាន​ទេ។ បន្ត​ទៀត! អ្នកទើបតែបានបញ្ចប់ challenge 10 ថ្ងៃ ហើយអ្នកបានឈាន 10 ជំហានឆ្ពោះកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។ + +## លំហាត់ + +### លំហាត់៖ កម្រិត ១ + +```js +const a = [4, 5, 8, 9] +const b = [3, 4, 5, 7] +const countries = ['Finland', 'Sweden', 'Norway'] +``` + +1. បង្កើតសំណុំទទេ +2. បង្កើតសំណុំដែលមាន 0 ទៅ 10 ដោយប្រើរង្វិលជុំ +3. យកធាតុចេញពីសំណុំ +4. ជម្រះសំណុំមួយ។ +5. បង្កើតសំណុំនៃធាតុ 5 string ពីអារេ +6. បង្កើត map នៃប្រទេស និងចំនួនតួអក្សរនៃប្រទេសមួយ។ + +### លំហាត់៖ កម្រិត ២ + +1. ស្វែងរក a ប្រជុំ b +2. ស្វែងរក a ប្រសព្វ b +3. ស្វែងរក a ជាមួយ b + +### លំហាត់៖ កម្រិត ៣ + +1. តើមានភាសាប៉ុន្មាននៅក្នុងឯកសារ object country + +1. \*\*\* ប្រើទិន្នន័យប្រទេសដើម្បីស្វែងរក 10 ភាសានិយាយច្រើនបំផុត: + +```js + // លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ + console.log(mostSpokenLanguages(countries, 10)) + [ + { English: 91 }, + { French: 45 }, + { Arabic: 25 }, + { Spanish: 24 }, + { Russian: 9 }, + { Portuguese: 9 }, + { Dutch: 8 }, + { German: 7 }, + { Chinese: 5 }, + { Swahili: 4 }, + { Serbian: 4 } + ] + + // លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ + console.log(mostSpokenLanguages(countries, 3)) + [ + {English:91}, + {French:45}, + {Arabic:25} + ] +``` + +🎉 អបអរសាទរ ! 🎉 + +[<< ថ្ងៃទី 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [ថ្ងៃទី 11 >>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)