# 第五週共筆筆記 - <br> 10/28 第五堂：期中試煉
###### tags: `週五正課篇`、`六角學院`、`2022JS直播班`
[講義連結](https://hackmd.io/5XySJJM2Rru1cLtEodfK6g)
## 共筆簽到區
Data
Barret
## 正課開始！~~~~
### 本日知識點
1. DOM - 用 JS 操作網頁介面
2. ForEach - 整理陣列資料
#### DOM (文件物件模型)
---
Document Object Model
document.querySelector("h1")
```javascript!
cnost document = {
querySelector: function(dom){
// h1
// 讓我可以讀取到那個DOM
}
}
```
document 是物件
querySelector 是 function
* 新增文字節點
賦值、取值
```javascript!
<h1>標題</h1>
//會被title.textContent覆蓋
cnost title = document.querySelector("h1");
title.textContent = "變更後的標題";
// 覆蓋，把原本的資料蓋掉
cnost a = ttitle.textContent;
cnost obj = {
content:'kkk';
}
// q: 要如何取出 kkk
```
|| ans: cnosole.log(obj.a)||
* 點 是要找出物件成員，『讀取屬性』
* () 是執行函式
我要新增資料進去到 <div class="box"></div>
```javascript!
const box = document.querySelector(".box");
box.innerHTML = "<h2>副標題</h2>";
box.textContent = "<h2>副標題</h2>";
// Q 試問有什麼差別?
```
|| A: 如果是用 textContent 就會直接把整串塞入，『替換字串文字節點』
但是使用 innetHTML 自動編成網頁元素 DOM ||
我想新增資料進去 <ul class="list"></ul>
```javascript!
cnost list = document.querySelector(".list");
let myName = "筆記";
list.innerHtml =`
<li>卡斯伯</li>
<li>${myName}</li>
`
// Q: 會正常執行嗎？
```
|| A: 會 因為會插入 在 <ul></ul>中間||
#### forEach (文件物件模型)
---
```javascript!
let ary =[2,3,5];
let total = 0;
// 陣列有許多的方法(函式)
total += ary[0];
total += ary[1];
total += ary[2];
//改寫改起來~~~
ary.forEach(function(item){
total += item;
})
// ?? 這邊重看筆記
// forEach 是函式
//
// {} 是陣列
// 此時，'function(item){
// total += item;
// }' 是參數
```
流程拆解
1.宣告arr陣列
2.陣列有一個方法叫做forEach(遍歷)
3.陣列裡面有幾個就跑幾遍forEach
補充：[箭頭函式筆記](https://fanatical-mimosa-acf.notion.site/be6e57da044048dbba17b7fad3f9737c)
```javascript=
data.forEach((item)=>{total += item;});
```
### forEach 語法講解
```javascript=
let data = [3,30,100]
data.forEach(function(item,index,ary){
console.log(item,index,ary)
})
// index 是索引值
// ary 把既有陣列再顯示一次
```
forEach最多三個參數，最少一個
- item 陣列值
- index 索引值 陣列的第幾筆資料
- ary 當下既有的陣列顯示(較少使用)
forEach 陣列數字累加
```javascript=
let data = [3,30,100];
let total=0;
data.forEach(function(item,index,ary){
total+=item;
})
```
### :sparkles:forEach 物件裡面的數字累加
```javascript=
let data = [
{
num: 10
},
{
num: 30
},
{
num: 100
}
];
let total = 0;
data.forEach(function(item, array, ary){
total+=item.num;
})
console.log(total)
```
>流程拆解
1.宣告一個陣列有三個物件
2.宣告total =0
3.跑第一次時
let total = 10;
item = {
num : 10
}
4.以此類推，跑第二、第三次
---
Q: 參考上方程式碼，請問以下改寫後，total的值為何
```javascript=
data.forEach(function(item, array, ary){
let total = 0;
total+=item.num;
})
console.log(total)
```
||A: total is not defined||
>作用域影響，函式執行結束後，函式內的記憶體空間會被釋放，導致外層無法取到值。
>解法 :
1.函式內使用return傳出值
2.將let totla宣告在函式外
Sign in with Wallet
Connect another wallet