沐鳴註冊平台官網_ES6數組的擴展:Array.from()和Array.of()

沐鳴註冊網站

一、 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']

二、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()，並且不存在由於參數不同而導致的重載，而且他們的行為非常統一。

來自：https://www.cnblogs.com/xzsj/p/14628004.html

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10200