---
# System prepended metadata

title: 第五週共筆筆記 - <br> 10/28 第五堂：期中試煉
tags: [週五正課篇, 2022JS直播班, 六角學院]

---

# 第五週共筆筆記 - <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>中間||

![](https://i.imgur.com/eWJGmPO.png)


#### 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宣告在函式外


