---
# System prepended metadata

title: 核心篇第四堂：物件與記憶體位置
tags: [JS 直播班 - 2022 秋季班]

---

---
tags: JS 直播班 - 2022 秋季班
---

# 核心篇第四堂：物件與記憶體位置

讓你不要卡在物件的泥沼中

<img src="https://i.imgur.com/1SrIK2u.png" alt="drawing" width="50%"/>

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

![](https://i.imgur.com/6pBWzeD.gif)



## 基礎：更認識物件

- 物件的概念
- 物件定義與取值
    - 物件的屬性名稱一律是字串
    - 點記號 與 中括號 取值方式
- 如何避免物件取值錯誤
    - 進階語法，可選串連
- 陣列也是物件


## 陣列方法：

- for 迴圈
- for 迴圈 vs forEach
- https://www.casper.tw/javascript/2017/12/27/javascript-array-function/

https://www.youtube.com/watch?v=_vFuDQ_6Xt8

## 惡夢：物件傳參考

![](https://i.imgur.com/TATo8e9.gif)


資深工程師也會錯的…物件傳參考

- 物件、變數的參考概念
    - 物件參考比較概念
- 函式、陣列也是參考嗎？
- 地獄考題：有機率遇到，但絕對不實用
```javascript
let a = { x: 1 }
let b = a;
a.y = a = { x: 2 };

console.log(a.y); // 這是什麼？
// 1 1
// 2 2
// 3 {x: 2}
// 4 undefined
```
![](https://i.imgur.com/I4zyEFz.png)


- 如何完整複製物件
- let, const 在物件上的選用

## 補充：

- 物件如何使用陣列方法
```javascript
const family = {
  Ming: {
    name: '小明',
  },
  Jay: {
    name: '杰倫'
  },
  Auntie: {
    name: '漂亮阿姨'
  }
};

console.log(Object.keys(family));
console.log(Object.values(family));

Object.values(family).forEach(item => {
  console.log(item);
});

Object.keys(family).forEach(key => {
  console.log(key);
  console.log(family[key]);
});
```