# <font class="h2">Array.of()、Array.from()(ES6)</font>

###### tags: `javascript`

<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
當使用單個數值參數來呼叫建構函式建立資料的時候，該數值會預設成為陣列的長度，而如下Array(2) 建立一個長度為2的空陣列

let ar1 = new Array(2)
console.log(ar1.length, ar1)//2 [empty,empty]

<br><br>

如果使用多項資料作為參數，這些參數會成為陣列的值

let ar2 = new Array(1, 2, 3, 4)
console.log(ar2.length, ar2) //4   [1,2,3,4]

<br><br>

而使用單個非數值型別的參數來呼叫，該參數會成為陣列的唯一值。

let ar3 = new Array("2")
console.log(ar3.length, ar3) //1  ["2"]

### <font class="h3">Array.of()</font>
`Array.of()` 方法建立一個具有可變數量參數的新陣列，而不考慮參數的數量或型別。用方法與建構函式類似

let ar1 = Array.of(3)
console.log(ar1); //[3]

let ar2 = Array.of("3")
console.log(ar2); //["3"]

let ar3 = Array.of(undefined)
console.log(ar3); //undefined

<br><br><br><br>

### <font class="h3">Array.from()</font>
### 語法：

Array.from ( arrayLike [,  mapFn [,  thisArg ] ] )

arrayLike:表示想要轉化成陣列的類陣列物件或者可迭代物件
mapFn:為可選參數，指定新陣列中每個元素都執行的回呼函式
thisArg:為可選參數，表示執行第二個回呼函式時的 this 物件。

### <font class="h4">用途一:轉化 arguments類陣列物件為陣列</font>

const plus = function (numA,numB){
    const args = Array.from(arguments)
    console.log(args)
}

plus(1,2,3,4,5) //[1, 2, 3, 4, 5]

<br><br><br>

### <font class="h4">將字串轉化為陣列</font>

let str = 'foo'
console.log(Array.from(str)); //['f','o','o']

<br><br>

### <font class="h4">將Set集合轉化為陣列(去重複用)</font>

let set = new Set([1, 1, 2, 3, 4])
console.log(Array.from(set));//  [1, 2, 3, 4]

<br><br>

### <font class="h4">將map集合轉化為陣列</font>

let map = new Map([['1', 'a'], ['2', 'b']])
console.log(Array.from(map)); // [['1', 'a'], ['2', 'b']]
console.log(Array.from(map.keys()));// ['1','2']
console.log(Array.from(map.values())); // ['a','b']

<br><br>

### <font class="h4">使用第二個參數mapFn</font>

let arr = [1, 2, 3]
console.log(Array.from(arr, x => x * 2))//[2, 4, 6]

<br><br>

### <font class="h4">`Array.from()`只是陣列淺拷貝</font>

let arr1 =[{name:"name"},{age:"age"}]
let arr2 = Array.from(arr1)
console.log(arr2);//[{name:"name"},{age:"age"}]
arr1[0].name = "new Nmae"
console.log(arr1);// [{name:"new Nmae"},{age:"age"}]
console.log(arr2);// [{name:"new Nmae"},{age:"age"}]