Array
Array គឺជាបណ្តុំទិន្ន័យ ឬអាញ្ញត្តិដូចៗគ្នា ប៉ុន្តែខុសតែ index។ យើងសិក្សា Array ហើយនេះគឺជាមេរៀន Array នៃ Javascript ។ ហើយនេះរូបរាង array ៖
var arrstd = new Array(); var arrcolor = [ ]
Object
Object វាមានរូបរាងស្រដៀងទៅនឹង Array ប៉ុនវាមាន key:value
var person = {"key":"value"}
នេះគឺជាឧទាហរណ៍ ដោយយើងបង្កើត object មួយសម្រាប់បង្ហាញ
<body>
<div>text</div>
</body>
<script>
var person = {"Name":"Ros Dul", "Gender":"M","Age":30}
document.querySelector('div').innerHTML = person
</script>
</html>
នេះចេញជា object ដោយយើងទាញវាមកដាក់នៅ html។ ហើយប្រសិនជាយើងបាន value ណាមួយយើងត្រូវហៅ key វា។ ឧទាហរណ៍ ខ្ញុំចង់ឈ្មោះដោយចុច person.Name
<script>
var person = {"Name":"Ros Dul", "Gender":"M","Age":30}
document.querySelector('div').innerHTML = person.Name
</script>
ហើយយើងអាចហៅវាមកប្រើតាមមួយរបៀបគឺ៖
var person = {"Name":"Ros Dul", "Gender":"M","Age":30}
document.querySelector('div').innerHTML = person["Name"]
</script>
Array object
object ប្រសិនជាយើងមាន object ច្រើនយើងបង្កើត object បែបនេះគឺ៖
var person = {"Name":"Ros Dul", "Gender":"M","Age":30}
// បង្កើត object ថ្មីមួយទៀត
var person1 = {"Name":"Seng", "Gender":"F","Age":20}
<body>
<div>text</div>
</body>
<script>
var person = {"Name":"Ros Dul", "Gender":"M","Age":30}
// បង្កើត object ថ្មីមួយទៀត
var person1 = {"Name":"Seng", "Gender":"F","Age":20}
document.querySelector('div').innerHTML = person1["Name"]
</script>
</html>
យើងបង្កើតបែបនេះមិនបានទេ ប្រសិនជាយើងមាន object ច្រើនយើងត្រូវបង្កើតជាទំរង Array នៃ object ។ Array object គឺជាការបូកចូលគ្នា Array និង Object វាមានរូបបែបនេះ៖
var person = [{},{}]
<body>
<div>text</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},{"Name":"Seng", "Gender":"F","Age":20}]
document.querySelector('div').innerHTML = person
</script>
</html>
យើងទាញវាមកដាក់នៅ html ដោយវាចេញច្រើន object
វិធីទាញវាគឺយើងត្រូវដាក់លេខ index នៃធាតុវា។
<body>
<div>text</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},{"Name":"Seng", "Gender":"F","Age":20}]
document.querySelector('div').innerHTML = person[0]
</script>
</html>
<body>
<div>text</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},{"Name":"Seng", "Gender":"F","Age":20}]
document.querySelector('div').innerHTML = person[0].Name
</script>
</html>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
document.querySelector('div').innerHTML = person[1].Name
</script>
</html>
វិធីបោះទិន្ន័យពី array object ទៅ html
ក្នុងការបោះទិន្ន័យ array object ទៅ html មានបីសំរាប់ for loop
- for of
- for in
- forEach
for of គឺសំរាប់ loop ទិន្ន័យតាមរយៈ object
for(new variable for Array){
// coding....
}
<body>
<div>
<ul></ul>
</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
let data = []
for( p of person){
data +=`<li>${p.Name}`
}
document.querySelector('div ul').innerHTML = data
</script>
</html>
ទិន្ន័យយើងទាំងអស់បោះទៅឲ្យ variable អក្សរ p រួចហើយយើងបង្កើត variable array ថ្មីមួយសំរាប់ចំចាប់វាដែលមានឈ្មោះថា data រួចហើយយើងបោះទិន្ន័យពីអក្សរ p តាមរយៈ loop ទៅឲ្យ data។
for in គឺសំរាប់ loop ទិន្ន័យតាមរយៈ index
for(new variable in Array){
// coding....
}
script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
let data = []
for( p in person){
console.log(p)
}
</script>
<body>
<div>
<ul></ul>
</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
let data = []
for( p in person){
data += `<li>${person[p].Name}`
}
document.querySelector('div ul').innerHTML = data
</script>
</html>
array.forEarch() គឺcallback function
forEarch() គឺសំរាប់ loop ទិន្ន័យតាមរយៈ object និង index តាមរយៈនៅក្នុង callback function()
array.forEarch(function(object, index){
//coding...
})
<body>
<div>
<ul></ul>
</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
let data = []
person.forEach(function(o,i){
data +=`<li>${i} : ${o.Name}`
})
document.querySelector("ul").innerHTML = data
</script>
</html>
រឺមួយធ្វើដូច for of ក៏បាន
body>
<div>
<ul></ul>
</div>
</body>
<script>
var person = [{"Name":"Ros Dul", "Gender":"M","Age":30},
{"Name":"Seng", "Gender":"F","Age":20}]
let data = []
person.forEach(function(p){
data +=`<li>${p.Name}`
})
document.querySelector("ul").innerHTML = data
</script>
</html>
0 Comments