国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6中Array.from()函數(shù)詳解

zzzmh / 2878人閱讀

摘要：注意屬性名代表了數(shù)組的索引號(hào)，如果沒有這個(gè)索引號(hào)，轉(zhuǎn)出來(lái)的數(shù)組中對(duì)應(yīng)的元素就為空。對(duì)象的屬性名不能轉(zhuǎn)換成索引號(hào)時(shí)。可選參數(shù)可選參數(shù)，執(zhí)行回調(diào)函數(shù)時(shí)對(duì)象。

ES6為Array增加了from函數(shù)用來(lái)從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的，淺拷貝的數(shù)組實(shí)例。
不過只可以將一下兩種對(duì)象轉(zhuǎn)換成數(shù)組。
1.部署了Iterator接口的對(duì)象，比如：Set，Map，Array。
2.類數(shù)組對(duì)象，什么叫類數(shù)組對(duì)象，就是一個(gè)對(duì)象必須有l(wèi)ength屬性，沒有l(wèi)ength，轉(zhuǎn)出來(lái)的就是空數(shù)組。

1：轉(zhuǎn)換字符串
可以吧ascii的字符串拆解成一個(gè)數(shù)據(jù)，也可以準(zhǔn)確的將unicode字符串拆解成數(shù)組。

console.log(Array.from("hello world"))
console.log(Array.from("u4f60u597d"))
//h,e,l,l,o, ,w,o,r,l,d
//你,

2：轉(zhuǎn)換set對(duì)象
將Set對(duì)象的元素轉(zhuǎn)換成一個(gè)數(shù)組。

const newSet = new Set();
newSet.add(0).add(1).add(2);
console.log(Array.from(newSet ))
//0,1,2

3：轉(zhuǎn)換map
將Map對(duì)象的鍵值對(duì)轉(zhuǎn)換成一個(gè)一維數(shù)組，轉(zhuǎn)換出來(lái)的數(shù)組元素的序列是：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：轉(zhuǎn)換類數(shù)組對(duì)象
一個(gè)類數(shù)組對(duì)象必須要有l(wèi)ength，他們的元素屬性名必須是數(shù)值或者可以轉(zhuǎn)換成數(shù)值的字符。
注意：屬性名代表了數(shù)組的索引號(hào)，如果沒有這個(gè)索引號(hào)，轉(zhuǎn)出來(lái)的數(shù)組中對(duì)應(yīng)的元素就為空。

console.log(Array.from({
  0: "0",
  1: "1",
  3: "3",
  5: "5"
  length:5
}))
//0,1,,3,,5

如果對(duì)象不帶length屬性，那么轉(zhuǎn)出來(lái)就是空數(shù)組。

console.log(Array.from({
  0: 0,
  1: 1
}))
//結(jié)果就是空數(shù)組。

對(duì)象的屬性名不能轉(zhuǎn)換成索引號(hào)時(shí)。

console.log(Array.from({
  a: "1",
  b: "2",
  length:2
}))
//結(jié)果也是空數(shù)組
Array.from可以接受三個(gè)參數(shù)

我們看定義：

Array.from(arrayLike[, mapFn[, thisArg]])
//arrayLike
//想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象。
//mapFn (可選參數(shù))
//如果指定了該參數(shù)，新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)。
//thisArg (可選參數(shù))
//可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對(duì)象。

第一個(gè)參數(shù)上面已經(jīng)講了，下面講剩下的兩個(gè)參數(shù)

第二個(gè)參數(shù)，map函數(shù)
用來(lái)對(duì)轉(zhuǎn)換中，每一個(gè)元素進(jìn)行加工，并將加工后的結(jié)果作為結(jié)果數(shù)組的元素值。

console.log(Array.from([1, 2, 3, 4, 5], (n) => n + 1))
//2,3,4,5,6

第三個(gè)參數(shù)，map函數(shù)中this指向的對(duì)象

該參數(shù)可以將被處理的數(shù)據(jù)和處理對(duì)象分離，將各種不同的處理數(shù)據(jù)的方法封裝到不同的的對(duì)象中去，處理方法采用相同的名字。在調(diào)用Array.from對(duì)數(shù)據(jù)對(duì)象進(jìn)行轉(zhuǎn)換時(shí)，可以將不同的處理對(duì)象按實(shí)際情況進(jìn)行注入，以得到不同的結(jié)果，適合解耦。
相當(dāng)于：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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105786.html

相關(guān)文章

  • JavaScript數(shù)組去重—ES6的兩種方式

    摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素?？蛇x，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。 說(shuō)明 JavaScript數(shù)組去重這個(gè)問題，經(jīng)常出現(xiàn)在面試題中，以前也寫過一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼...

    FrancisSoung 評(píng)論0 收藏0

  • JavaScript數(shù)組去重—ES6的兩種方式

    摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。可選，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。 說(shuō)明 JavaScript數(shù)組去重這個(gè)問題，經(jīng)常出現(xiàn)在面試題中，以前也寫過一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼...

    lijinke666 評(píng)論0 收藏0

  • JavaScript數(shù)組去重—ES6的兩種方式

    摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。可選，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。 說(shuō)明 JavaScript數(shù)組去重這個(gè)問題，經(jīng)常出現(xiàn)在面試題中，以前也寫過一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼...

    Clect 評(píng)論0 收藏0

  • 常用JavaScript小技巧及原理詳解

    摘要：使用一元加模擬函數(shù)原理對(duì)非數(shù)值類型的數(shù)據(jù)使用一元加，會(huì)起到與函數(shù)相同的效果。中，若判斷不為則不再進(jìn)行下一步操作。使用邏輯或設(shè)置默認(rèn)值邏輯或也屬于短路操作，即當(dāng)?shù)谝粋€(gè)操作數(shù)可以決定結(jié)果時(shí)，不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。 善于利用JS中的小知識(shí)的利用，可以很簡(jiǎn)潔的編寫代碼 1. 使用!!模擬Boolean()函數(shù) 原理：邏輯非操作一個(gè)數(shù)據(jù)對(duì)象時(shí)，會(huì)先將數(shù)據(jù)對(duì)象轉(zhuǎn)換為布爾值，然后取反，兩個(gè)!!...

    chnmagnus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

zzzmh

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<