ES6中Array.from()方法有什么用

小編給大家分享一下ES6中Array.from()方法有什么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

Array.from()

Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類數(shù)組的對(duì)象（ array-like object ）和可遍歷（ iterable ）的對(duì)象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和Map ）。

let arrayLike = {  
  '0': 'a',  
  '1': 'b',  
  '2': 'c',  
  length: 3  
};  
// ES5 的寫(xiě)法  
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  
// ES6 的寫(xiě)法  
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']  

  
// NodeList 對(duì)象  
let ps = document.querySelectorAll('p');  
Array.from(ps).forEach(function (p) {  
  console.log(p);  
});  
// arguments 對(duì)象  
function foo() {  
var args = Array.from(arguments);  
// ...  
}  


//字符串轉(zhuǎn)換為字符數(shù)組str.split('')  
Array.from('hello')  // ['h', 'e', 'l', 'l', 'o']  
let namesSet = new Set(['a', 'b'])  
Array.from(namesSet) // ['a', 'b']  

  
Array.from({ length: 3 });  // [ undefined, undefined, undefined ]

對(duì)于還沒(méi)有部署該方法的瀏覽器，可以用Array.prototype.slice方法替代：

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

Array.from還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。

Array.from(arrayLike, x => x * x);  
//  等同于  
Array.from(arrayLike).map(x => x * x);  
Array.from([1, 2, 3], (x) => x * x)  
// [1, 4, 9]  
//Array.from回調(diào)函數(shù)
var arr1 = Array.from([1,2,3], function(item){
    return item*item;
});
var arr2 = Array.from([1,2,3]).map(function(item){
    return item*item;
});
var arr3 = Array.from([1,2,3], (item) => item*item);


console.log(arr1); //[ 1, 4, 9 ]
console.log(arr2); //[ 1, 4, 9 ]
console.log(arr3); //[ 1, 4, 9 ]

值得提醒的是，擴(kuò)展運(yùn)算符（...）也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組。

// arguments 對(duì)象  
function foo() {  
  var args = [...arguments];  
}  
// NodeList 對(duì)象  
[...document.querySelectorAll('div')]

看完了這篇文章，相信你對(duì)“ES6中Array.from()方法有什么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！