資訊專欄INFORMATION COLUMN
摘要：注意屬性名代表了數組的索引號，如果沒有這個索引號，轉出來的數組中對應的元素就為空。對象的屬性名不能轉換成索引號時?？蛇x參數可選參數，執(zhí)行回調函數時對象。
ES6為Array增加了from函數用來從一個類似數組或可迭代對象中創(chuàng)建一個新的，淺拷貝的數組實例。
不過只可以將一下兩種對象轉換成數組。
1.部署了Iterator接口的對象，比如：Set，Map，Array。
2.類數組對象，什么叫類數組對象，就是一個對象必須有l(wèi)ength屬性，沒有l(wèi)ength，轉出來的就是空數組。
1：轉換字符串
可以吧ascii的字符串拆解成一個數據，也可以準確的將unicode字符串拆解成數組。
console.log(Array.from("hello world"))
console.log(Array.from("u4f60u597d"))
//h,e,l,l,o, ,w,o,r,l,d
//你,
2：轉換set對象
將Set對象的元素轉換成一個數組。
const newSet = new Set(); newSet.add(0).add(1).add(2); console.log(Array.from(newSet )) //0,1,2
3：轉換map
將Map對象的鍵值對轉換成一個一維數組，轉換出來的數組元素的序列是：key1,value1,key2,value2,key3,value3.....
const map1 = new Map();
map1.set("k1", 1);
map1.set("k2", 2);
map1.set("k3", 3);
console.log(Array.from(map1))
//k1,1,k2,2,k3,3
4：轉換類數組對象
一個類數組對象必須要有l(wèi)ength，他們的元素屬性名必須是數值或者可以轉換成數值的字符。
注意：屬性名代表了數組的索引號，如果沒有這個索引號，轉出來的數組中對應的元素就為空。
console.log(Array.from({
0: "0",
1: "1",
3: "3",
5: "5"
length:5
}))
//0,1,,3,,5
如果對象不帶length屬性，那么轉出來就是空數組。
console.log(Array.from({
0: 0,
1: 1
}))
//結果就是空數組。
對象的屬性名不能轉換成索引號時。
console.log(Array.from({
a: "1",
b: "2",
length:2
}))
//結果也是空數組
Array.from可以接受三個參數
我們看定義：
Array.from(arrayLike[, mapFn[, thisArg]]) //arrayLike //想要轉換成數組的偽數組對象或可迭代對象。 //mapFn (可選參數) //如果指定了該參數，新數組中的每個元素會執(zhí)行該回調函數。 //thisArg (可選參數) //可選參數，執(zhí)行回調函數 mapFn 時 this 對象。
第一個參數上面已經講了，下面講剩下的兩個參數
第二個參數，map函數
用來對轉換中，每一個元素進行加工，并將加工后的結果作為結果數組的元素值。
console.log(Array.from([1, 2, 3, 4, 5], (n) => n + 1)) //2,3,4,5,6
第三個參數，map函數中this指向的對象
該參數可以將被處理的數據和處理對象分離，將各種不同的處理數據的方法封裝到不同的的對象中去，處理方法采用相同的名字。在調用Array.from對數據對象進行轉換時，可以將不同的處理對象按實際情況進行注入，以得到不同的結果，適合解耦。
相當于：Array.from(obj).map(mapFn, thisArg)
let diObj = {
handle: function(n){
return n + 2
}
}
console.log(Array.from(
[1, 2, 3, 4, 5],
function (x){
return this.handle(x)
},
diObj))
//3,4,5,6,7
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/105786.html
摘要：數組的方法方法創(chuàng)建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素?？蛇x，執(zhí)行函數時的值。刪除所有的鍵值對，沒有返回值。返回一個布爾值，表示某個鍵是否在當前對象之中。 說明 JavaScript數組去重這個問題，經常出現(xiàn)在面試題中，以前也寫過一篇數組去重的文章，（JavaScript 數組去重的多種方法原理詳解）但感覺代碼還是有點不夠簡單，今天和大家再說兩種方法，代碼...
摘要：數組的方法方法創(chuàng)建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素?？蛇x，執(zhí)行函數時的值。刪除所有的鍵值對，沒有返回值。返回一個布爾值，表示某個鍵是否在當前對象之中。 說明 JavaScript數組去重這個問題，經常出現(xiàn)在面試題中，以前也寫過一篇數組去重的文章，（JavaScript 數組去重的多種方法原理詳解）但感覺代碼還是有點不夠簡單，今天和大家再說兩種方法，代碼...
摘要：數組的方法方法創(chuàng)建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。可選，執(zhí)行函數時的值。刪除所有的鍵值對，沒有返回值。返回一個布爾值，表示某個鍵是否在當前對象之中。 說明 JavaScript數組去重這個問題，經常出現(xiàn)在面試題中，以前也寫過一篇數組去重的文章，（JavaScript 數組去重的多種方法原理詳解）但感覺代碼還是有點不夠簡單，今天和大家再說兩種方法，代碼...
摘要：使用一元加模擬函數原理對非數值類型的數據使用一元加，會起到與函數相同的效果。中，若判斷不為則不再進行下一步操作。使用邏輯或設置默認值邏輯或也屬于短路操作，即當第一個操作數可以決定結果時，不再對第二個操作數進行求值。 善于利用JS中的小知識的利用，可以很簡潔的編寫代碼 1. 使用!!模擬Boolean()函數 原理：邏輯非操作一個數據對象時，會先將數據對象轉換為布爾值，然后取反，兩個!!...
閱讀 2163·2023-04-26 00:00
閱讀 3278·2021-09-24 10:37
閱讀 3539·2021-09-07 09:58
閱讀 1531·2019-08-30 15:56
閱讀 2225·2019-08-30 13:11
閱讀 2321·2019-08-29 16:38
閱讀 970·2019-08-29 12:58
閱讀 1889·2019-08-27 10:54
