ES6數組的擴展--Array.from()和Array.of()

1、 Array.from() : 將僞數組對象或可遍歷對象轉換爲真數組

1.何爲僞數組

若是一個對象的全部鍵名都是正整數或零，而且有length屬性，那麼這個對象就很像數組，語法上稱爲「相似數組的對象」(array-like object),即爲僞數組。

var obj = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代碼中，對象obj就是一個相似數組的對象。可是「相似數組的對象」並非數組，由於它們不具有數組特有的方法。對象obj沒有數組的push方法，使用該方法就會報錯。

2.有哪些是僞數組

典型的「相似數組的對象」是函數的arguments對象，以及大多數 DOM 元素集，還有字符串。

3.如何轉化爲真數組

①數組的slice方法能夠將「相似數組的對象」變成真正的數組

function doSomething(){
    console.log(arguments)
    var args = Array.prototype.slice.call(arguments);
    args.push("hj")
    console.log(args)
    return args
}
doSomething(1,2,3)

或者你也能夠寫成：

function doSomething(){
    var args = [].slice.call(arguments);
    return args
}
doSomething(1,2,3)

儘管這種方法，也能夠實現將類數組轉變爲數組的目的，但並不直觀。ES6新增Array.from()方法來提供一種明確清晰的方式以解決這方面的需求，更推薦後者的辦法。

②Array.from()

<button>測試1</button>
<br>
<button>測試2</button>
<br>
<button>測試3</button>
<br>
<script type="text/javascript">
let btns = document.getElementsByTagName("button")
console.log("btns",btns);//獲得一個僞數組
//btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function
Array.from(btns).forEach(item=>console.log(item))將僞數組轉換爲數組
</script>

在ES6中，擴展運算符(...)也能夠將某些數據結構轉爲數組。只不過它須要在背後調用遍歷器接口Symbol.iterator。值得注意的是若是一個對象沒有部署遍歷器接口，使用擴展運算符是沒法將相似數組對象轉換成數組。

function doSomething (){ 
  return [...arguments] 
}
doSomething('a','b','c'); // ["a","b","c"]

4.Array.from()用法

Array.from接受三個參數，但只有input是必須的：

• input: 你想要轉換的相似數組對象和可遍歷對象
• map: 相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組
• context: 綁定map中用到的this

只要是部署了iterator接口的數據結構，Array.from都能將其轉爲數組:

let arr = Array.from('juejin'); 
console.log(arr); //["j", "u", "e", "j", "i", "n"]

Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，處理後的值放入返回的數組。

Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
// 等同於
Array.from([1,2,3].map(x => x * x))

若是map函數裏面用到了this關鍵字，還能夠傳入Array.from的第三個參數，用來綁定this。

Array.from()能夠將各類值轉爲真正的數組，而且還提供map功能。這實際上意味着，只要有一個原始的數據結構，你就能夠先對它的值進行處理，而後轉成規範的數組結構，進而就可使用數量衆多的數組方法。

Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']

2、Array.of(v1, v2, v3) : 將一系列值轉換成數組

當調用 new Array( )構造器時，根據傳入參數的類型與數量的不一樣，實際上會致使一些不一樣的結果， 例如：

let items = new Array(2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // undefined
console.log(items[1]) ;

let items = new Array(1, 2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // 1
console.log(items[1]) ; // 2

當使用單個數值參數來調用 Array 構造器時，數組的長度屬性會被設置爲該參數。 若是使用多個參數(不管是否爲數值類型)來調用，這些參數也會成爲目標數組的項。數組的這種行爲既混亂又有風險，由於有時可能不會留意所傳參數的類型。

ES6 引入了Array.of( )方法來解決這個問題。該方法的做用很是相似Array構造器，但在使用單個數值參數的時候並不會致使特殊結果。Array.of( )方法總會建立一個包含全部傳入參數的數組，而無論參數的數量與類型：

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2

Array.of基本上能夠用來替代Array()或newArray()，而且不存在因爲參數不一樣而致使的重載，並且他們的行爲很是統一。

參考文章

深刻理解ES6

Javascript教程

JavaScript學習筆記：ES6數組方法

來源：https://segmentfault.com/a/1190000017755192