# ES6 Set,Map

## 前情提要

for of =>可用在array，Set，Map返回value

for in =>可用在object，array，返回index(在array可能被擴充的情況下不建議使用)

forEach =>均可遍歷，但無法break離開遍歷(可用some或是every) <http://www.jsnoob.com/2013/11/26/how-to-break-the-foreach/>

### 如何遍歷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 (
  <div>{value}</div>
)
})
```

## 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呢?

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype>

可將

將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)
```