parent
1b9f1259f6
commit
c4a974937f
@ -0,0 +1,484 @@
|
|||||||
|
<div align="center">
|
||||||
|
<h1> 30 ថ្ងៃនៃ JavaScript: Loops</h1>
|
||||||
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||||
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||||
|
</a>
|
||||||
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||||
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<sub>អ្នកនិពន្ធ:
|
||||||
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||||
|
<small> ខែមករា ឆ្នាំ ២០២០</small>
|
||||||
|
</sub>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[<< ថ្ងៃទី 5](../05_Day_Arrays/05_day_arrays.md) | [ថ្ងៃទី 7 >>](../07_Day_Functions/07_day_functions.md)
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
- [📔 ថ្ងៃទី 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)
|
@ -0,0 +1,598 @@
|
|||||||
|
<div align="center">
|
||||||
|
<h1> 30 ថ្ងៃនៃ JavaScript: Objects</h1>
|
||||||
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||||
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||||
|
</a>
|
||||||
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||||
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<sub>អ្នកនិពន្ធ:
|
||||||
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||||
|
<small> ខែមករា ឆ្នាំ ២០២០</small>
|
||||||
|
</sub>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[<< ថ្ងៃទី 7](../07_Day_Functions/07_day_functions.md) | [ថ្ងៃទី 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md)
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
- [📔 ថ្ងៃទី 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)
|
Loading…
Reference in new issue