---
# System prepended metadata

title: 20230728 Map/Arrow Funciton
tags: [前端課程筆記]

---

# Map/ Arrow Function
[TOC]
### Map
#### 1. 以key-value為組合的物件，方便查找
#### 2. 初始化
(1)使用new字樣，若有初始值可在()中放array
(2)new Map([[set1],[set2],...])
```
let fruit = new Map([
    ["apples",500],
    ["bananas",300],
    ["oranges",200],
])
```
#### 3.增加key-value
(1)使用set() method
(2)map.set(key,value)
```
fruits.set("grapes",150);
fruits.set("mangoes",700);
```
#### 4.修改value
(1)使用set() method
(2)map.set(key,value)
```
let fruits = new Map([
    ["apples",500],
    ["bananas",300],
    ["oranges",200],
])
```
(3)當key已存在，會自動更新value
`fruits.set("apples",470);`

#### 5.以特定key取得value
(1)使用get() method，傳入參數key，取得回傳value
(2)map.get(key)
`let bananas = fruits.get("bananas");`
bananas=300
(3)不存在時會回傳undefined
`let bananas = fruits.get("banana");`
bananas = undefined
#### 6.取得map大小
(1)取得size property
(2)map.size
`let basketSize = fruits.size;`
basketSize = 5
#### 7.刪除一組key、value
(1)使用deleted() method，傳入參數key，取得回傳是否刪除boolean值
(2)map.delete(key)
(3)若該key存在，則整組key-value都會被刪除，並回傳true
`let isDeleted = fruits.delete("grapes");`
isDeleted = true
`let isDeleted = fruits.delete("grava");`
isDeleted = false

#### 8.刪除所有key-value
(1)使用clear() method
(2)map.clear()
`fruits.clear();`
`let basketSize = fruit.size;`
basketSize = 0;
#### 9.key是否存在
(1)使用has() method，傳入參數key，取得回傳是否在boolean值
(2)map.has(key)
`let hasApples = fruit.has("apples");`
hasApples = true
`let hasGrava = fruits.has("grava");`
hasGrava = false

#### 10.取得Iterator物件
(1)使用entries() method，取得可供遍歷的物件
(2)map.entries()
```
let fruits = new Map([
    ["apples",470],
    ["bananas",300],
    ["oranges",200],
]);
```
```
for (let fruit of fruits.entries()){
    console.log(fruit[0]);
    console.log(fruit[1]);
}
```
![](https://hackmd.io/_uploads/BkJr9HBj3.png)

```
for(let[key,value] of fruits.entries()){
    console.log(key);
    console.log(value);
}
```

#### 11.取得keys Iterator物件
(1)使用keys() method，取得可供遍歷的key物件
(2)map.keys()
```
let fruits = new Map([
    ["apples",470],
    ["bananas",300],
    ["oranges",200],
]);
```
```
for (let key of fruits.keys()){
    console.log(key);
}
```
![](https://hackmd.io/_uploads/Hk27srBsn.png)

如何取得key?

```
for(let key of fruits.keys()){
    console.log(key);
    console.log(fruits.get(key));
}
```
#### 12.取得values Iterator物件
使用values() method，取得可供遍歷的value物件
map.values()
```
let fruits = new Map([
    ["apples",470],
    ["bananas",300],
    ["oranges",200],
]);
```
```
for (let value of fruits.values()){
    console.log(value);
}
```
![](https://hackmd.io/_uploads/r1TlhBBsh.png)

### Arrow Function
1. ES6後出現的寫法，用於簡化function
2. Arrow Function簡化方法(無參數)
(1)原function寫法
```
function hello(){
    console.log("Hello Word!")
}
hello();
```
(2)將anonymous function指定給變數
```
hello = function(){
    console.log("Hello World!")
}
hello();
```

Scoope作用域
Globe Space
作用於整個JavaScript中
範例
```
let a = 2
//這裡可以使用a變數
funtion test(){
//這裡可以使用a變數
}
//這裡可以使用a變數
```
Function Scoope
作用於function的{}中
每個function在創建時會產生自己的scope
function執行的同時會創建變數(local variables)，執行完成後自動刪除
```
funciton test(){
    let a = 2
    //這裡可以使用a變數
}
//這裡不可以使用a變數
```
Block Scope
作用於{}中
```
{
    let a = 2
    //這裡可以使用a變數

}
//這裡不能使用a變數
```

Scope & 變數
![](https://hackmd.io/_uploads/BkFIo9Ij2.png)
