# ES6 Set,Map
## 前情提要
for of =>可用在array，Set，Map返回value
for in =>可用在object，array，返回index(在array可能被擴充的情況下不建議使用)
forEach =>均可遍歷，但無法break離開遍歷(可用some或是every)
### 如何遍歷object內的value?
```
var obj = { first: "John", last: "Doe" };
// Visit non-inherited enumerable keys
Object.keys(obj).forEach(function(key) {
console.log(obj[key]);
});
```
第二種
```
Object.keys(this.state.users).map(function(objectKey, index) {
let value = objectKey;
return (
{value}
)
})
```
## ES6 的新數據結構Set Map
### Set
可接受一個array來初始化，set類似array但每個成員的值不會相等，使用強型別
```
var set = new Set([1, 2, 3, 4, 4])
```
輸入set 將得到
```
Set {1, 2, 3, 4}
```
### Set 操作方法
```
add(value)：添加value，返回Set本身。
delete(value)：删除value，返回boolean。
has(value)：返回boolean，表示該value是否為set中成員。
clear()：清除所有成員，没有返回值。
```
1\.
```
var a = new Set
a.add(1);
```
2\.
```
a.add("1")
```
### Set的遍歷方法
```
keys()：返回index
values()：返回value
entries()：返回index and value
forEach()：使用callback附上參數
```
#### 想用array的操作方法來操作Set呢?
可將
將Set轉為arrray
```
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);
```
## 實際使用
1.快速刪除array重複的元素
```
var arr = [3, 5, 2, 2, 5, 5];
var apple = [...new Set(arr)];
console.log(apple);
```
2.快速合併陣列，刪除重複元素
```
a = [1,2,3,4,5,6]
b = [3,4,5,6,7,8,9]
banana = new Set([...a,...b])
```
3.快速找到array中共同的元素(交集)
```
var a = [1, 2, 3];
var b = new Set([1,3,4,5,8,9]);
banana = new Set([...a].filter(x => b.has(x)));
```
4.快速找到a陣列有但b陣列沒有的元素(差集)
```
var a = [1, 2, 3];
var b = new Set([1,3,4,5,8,9]);
banana = new Set([...a].filter(x => !b.has(x)));
```
## Map
```
var fruit = new Map();
var apple = {price: "20"};
fruit.set(apple, "content")
```
取得值
```
fruit.get(apple);
fruit.get({price: "20"}); //undefined
```
## Map為了避免index衝突，須將index先指定給變數(除了數字，字串和boolean)
```
var map = new Map();
var apple1 = ['a'];
var apple2 = ['a'];
map
.set(apple1, 111)
.set(apple2, 222);
map.get(apple1)
map.get(apple2)
```
但
```
map.get(['a'])
```
為undefined
### Map的操作方法
```
set(key, value) 設值
get(key) 取值
has(key) 查看擁有
delete(key) 清除單一
clear() 清除所有
```
### Map的遍歷方法
```
keys()：返回index
values()：返回value
entries()：返回index and value
forEach()：使用callback附上參數
```
## 實際使用
```
使用[...]轉為陣列結構
```
1\.
```
map = new Map([
['F', 'no'],
['T', 'yes'],
]);
```
```
[...map.keys()][0]
```
2\.
```
var fruit = new Map();
var apple = {price: "20"};
fruit.set(apple, "content")
```
```
[...fruit.keys()][0].price
```
```
陣列轉為Map
```
1\.
```
new Map([[true, 7], [{foo: 3}, ['abc']]])
```
```
陣列轉為JSON
```
1\.
```
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://easonwang.gitbook.io/web_advance/es6-es7-es8/es6_set-map.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.