# JavaScript｜物件 Object：90s 畢業紀念冊大曝光，二十年後我還記得你 💘
90s 畢冊記錄你家住那裡、血型 A 或 Ｂ、養狗還是養貓？
CRUD 你的改變跟喜好全部 patch
🪬 陣列資料結構（array data structure → Array) → [JavaScript｜戀愛魚塘管理💞 用陣列 Array 管理 match 才專業 💅](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/ByqK9u-Klx)
🪬 物件資料結構（Objects data structure → Object) 🔫 你目前位置 aka 本篇主題
###### 8 年級ㄉ你各位應該都有寫過ㄅ 🚬
這些欄位就是我們今天要學ㄉ物件資料！
一起開始吧 ☻（這個主題主包真ㄉ是想ㄌ很久才想到）
## 🏠 什麼是 Object（物件）
和陣列不同的是物件資料是 **「沒有特定順序且可以詳細描述」** → 也就是**無序資料集**，透過鍵-值資料 ` key: value ` 的方式來存放。
### 💌 最重要ㄉ key & value
📩 key → 是依附在物件的屬性名稱
📨 value → 是屬性的值（可以是字串、數字、布林、陣列、物件，甚至函式）
來ㄍ原味ㄉ寫法 ↓
```javascript!
let 物件命名 = {
key : value, // value 可以是字串 陣列 數字
方法 : function(){
//要執行的動作
}
}
```
你都努力看到這裡ㄌ 〠
那麼，值得我寫一張友誼小卡，證明我們的塑膠友情 ❤︎
```javascript!
// 首先 先宣告 這張是屬於我ㄉ好友卡！
let anna14 = {
// 我的本名，以免你誤會 anna 是隔壁班孫小美 🫥
name: '李安娜',
// 輸入電話 方便你長大以後打給我💓
phone: '0988-123-456',
// 讓你在我失聯ㄉ時候去查 INTP 在想什麼
mbti: 'INTP',
// 喔對 我生理女
gender: '生理女',
//興趣也來一下，方便讓你勾起我ㄉ興趣
hobbies: ['躺躺', '散步', '洗車'],
// 只要你呼叫，我就回應你 24hr 隨時隨地 ❤︎
greet: function(){
console.log(`我是 ${anna14.name} 打給我 ${anna14.phone} 🔫 `)
}
}
anna14.greet();
```
###### ☻ 跨界小聯想，Object 是不是也很像類別呢？都是自定義樣式（屬性）
```css!
.類別{
background-color: yellow; // 背景設定黃色的
font-weight: bold; // 字體要粗體
}
```
## 🛢️ CRUDE pop() 掉 E → CRUD 物件資料操作！
###### ↑ [ 'C','R','U','D','E' ].pop() 不知道在寫什麼ㄉ 請回上篇複習陣列 → [JavaScript｜戀愛魚塘管理💞 用陣列 Array 管理 match 才專業 💅](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/ByqK9u-Klx) 🤡
what is CRUD?
CRUD → 就是 Create / Read / Update / Delete 的首字字母
### 🦉 怎麼調整物件屬性並且進行 CRUD 呢？
物件屬性可隨時新增，但在使用前需先為物件屬性賦予值 `=` 寫入值，以免得到 undefined。
###### 💎 小貼士：什麼是賦值？ → 賦予值 `=`
###### 💃 小口訣 → 在物件常值中用 `:` 定義初始屬性 / 之後要新增、更新屬性用 `=`。
🅒 - Create ( 建立新屬性 )
```javascript!
// 學習基礎
物件.新的 key ( 屬性 ) = value ( 新的值 )
// 練習就不基礎 → 過ㄌ 20 年 李安娜有超討厭ㄉ東 必須記錄
anna14.unlike = '愛情片' // → 李安娜超級討厭愛情片，記得不要約他〠
// 💎 學習重點：因為要加入新的值和屬性，所以要使用等號來寫入值！（ 如果忘記去樓上找貓頭鷹先生🦉 ）
```
↑ 成功把李安娜討厭ㄉ東紀錄上去了 ✅ 已記錄
🅡 - Read ( 查詢原本的屬性 )
```javascript!
// 學習基礎
物件.要查的屬性
// 練習就不基礎 → 忽然忘記李安娜ㄉ mbti 趕快印出來看一下
console.log(anna14.mbti);
```
🅤 - Update ( 更新屬性的值 ) → 重新賦值
```javascript!
// 學習基礎
物件.要改的那個屬性值 = 新的值
// 練習就不基礎 → 李安娜改名字ㄌ，更新資料！
anna14.name = '李鮭魚 🍣'
// 💎 學習重點：因為要更新屬性的值，所以要使用等號來寫入值！（ 如果忘記再去樓上找貓頭鷹先生 again 🦉 ）
```
↑ 成功把李安娜ㄉ新名字修改成 李鮭魚 🍣 ㄌ ✅ 已記錄
🅓 - Delete (刪除屬性)
→ 直接在 物件.key 前面加 `delete`
```javascript!
// 學習基礎
delete 物件.要刪的那個屬性
// 練習就不基礎 → 生理女不是很重要吧，刪除！
delete anna14.gender
```
🪬 懶人小結：新增屬性、改變值都使用等號給值！
---
今天你已經把 **物件入門 𝘅 CRUD** 物件操作看完真ㄉ是超讚ㄉ啦 🔫
我們下篇見～💅✨
---
📺 JS 新手宇宙 - EP . 04
[ 🩷 EP1 《 函式和參數名稱、傳值再也不會搞混！ 》](https://hackmd.io/pPUQiXn2TgGJrDTSLJR6sw)
[🩷 EP2 《 for 迴圈：愛你 10 天計畫 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/rJF-uhgOll)
[🩷 EP3 《 陣列 Array：push、pop、splice 魚塘管理💅 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/ByqK9u-Klx)
###### （ 你在這裡 ↓ ）
[🩷 EP4 《 物件 Object：90s 畢業紀念冊大曝光，二十年後我還記得你 💘 》](https://hackmd.io/@Ph6kL2hVQeu-dSTdobpoJw/SkkxzBY9ee)
參考資料：
{%preview https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics %}
{%preview https://zh.wikipedia.org/zh-tw/%E9%94%AE-%E5%80%BC%E5%AD%98%E5%82%A8 %}
Sign in with Wallet
Connect another wallet