Array的擴展

defcon 發布于2019-08-22 11:11 / 2595人閱讀

摘要：淺復制是說只拷貝數組元素的內容，而不管該內容是不是指向另一個值。深復制與淺復制對應，它會不僅拷貝數組元素的內容，還會分析其內容是否為一個指針類型的值，如對象，函數，數組等。

1. Array.from( likeArrObj, [valueHandleFn], [thisObj] )

Array.from()用于將以下兩類對象轉化為真正的數組：

類似數組的對象（array-like object，即本身 具有length屬性的對象 ）

可遍歷對象（ 原型鏈上具有[Symbol.iterator]方法的對象 ，即具有iterator接口的iterable對象）

它接受三個參數：

likeArrObj： 需要被轉化的對象

[valueHandleFn]：用于處理該對象中每個值的一個 遍歷函數 ，類似于map()，該參數可選。

[thisObj]：用于 綁定[valueHandleFn]中的this ，也就是只有使用了[valueHandleFn]，它才會有作用

它返回的是將該對象轉化成功后，得到的數組。

1.1 代碼示例

  let likeArrObj = {
    "0": 0,
    "1": 1,
    "2": 2,
    length: 3,
  }

  // ES5 的寫法 (兩種)
  var arr_es5_01 = Array.prototype.slice.call( likeArrObj )
  var arr_es5_02 = [].prototypr.slice.call( likeArrObj )

  // ES6 的寫法 (兩種)
  let arr_es6_01 = Array.from( likeArrObj )
  let arr_es6_02 = [...likeArrObj]

1.1.1 對代碼的說明：

Array.prototype.slice( startNum, endNum ) 可以淺復制一部分array元素，起始于startNum，終止于(endNum - 1)。

淺復制 是說只拷貝數組元素的內容，而不管該內容是不是指向另一個值。

通俗點講，就是只拷貝一層數據。
深復制 與淺復制對應，它會不僅拷貝數組元素的內容，還會分析其內容是否為一個“ 指針 ”類型的值，如對象，函數，數組等。

如果是一個“ 指針 ”類型的值，則會繼續將其值下的所有內容統統復制一份.

內容中的內容全要復制，直到其內容為 undefined 、 null 、 Boolean 、 Number 、 String 、 Symbol 的一種。

Function.prototype.call( thisObj, arg1, arg2, ..., argn ) 用于在運行時指定該函數的this綁定對象

thisObj 是需要綁定的對象
arg1, arg2, ..., argn 是該函數調用的參數
Function.prototype.apply( thisObj, argArr ) 與該方法功能一致，只是在參數傳遞上，使用的是一個數組形式

[...likeArrObj]中的 ... 是擴展運算符，它通過調用likeArrObj的 [Symbol.iterator]方法 來將其打散成一個個獨立的量，最后再用 [] 來將其合成一個新的數組，所以使用該寫法時，一定需要確保likeArrObj具有 [Symbol.iterator]方法。

1.2 應用場景

它的常見應用場景：

將 document.querySelectorAll( str ) 返回的NodeList集合轉化為真正的數組

將 arguments 對象轉化為真正的數組

轉化為真正的數組之后，就可以使用 Array.prototype.forEach() 方法來操作該對象了。

GPU云服務器云服務器 js_array擴展對象的擴展云計算的擴展服務器的擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91958.html

ES6之數組的擴展

摘要：中對字符串函數對象數組等都進行了擴展，感覺目的呢就是完善一下所為外行人詬病的一些偽其實個人覺得不完美的才是真的美，什么東西都無懈可擊了就顯得不夠有趣了。 ES6中對字符串、函數、對象、數組等都進行了擴展，感覺目的呢就是完善一下JS所為外行人詬病的一些偽bug.其實個人覺得不完美的JS才是真的美，什么東西都無懈可擊了就顯得不夠有趣了。好了，接下來又要開始拾人牙慧了... 主要講解: ...

Warren 2019-08-22 17:03 評論0 收藏0
ES6—擴展運算符和rest運算符（6）

摘要：擴展運算符簡介擴展運算符是三個點，可以將一個數組轉為用逗號分隔的參數序列。在實際項目中靈活應用擴展運算符運算符，能寫出更精簡易讀性高的代碼。 1、擴展運算符簡介擴展運算符（ spread ）是三個點（...），可以將一個數組轉為用逗號分隔的參數序列。說的通俗易懂點，有點像化骨綿掌，把一個大元素給打散成一個個單獨的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 評論0 收藏0
細說es6中的數組

摘要：函數運行后，返回一個遍歷器對象，因此也可以使用擴展運算符。總是返回參數值組成的數組。方法的回調函數可以接受三個參數，依次為當前的值當前的位置和原數組。上面代碼中，的參數為，表示要拉平兩層的嵌套數組。 1.擴展運算符含義擴展運算符（spread）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。console.log(...[1, 2, 3])//...

Near_Li 2019-08-26 12:13 評論0 收藏0
ES6之數組的擴展

摘要：它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為的成員，然后返回該成員。上面代碼中，方法的回調函數可以接受三個參數，依次為當前的值當前的位置和原數組。數組的擴展展開運算符展開運算符（用三個連續的點 ( ... ) 表示）是 ES6 中的新概念，使你能夠將字面量對象展開為多個元素。合并數組展開運算符的一個用途是結合數組。如果你需要結合多個數組，在...

paney129 2019-08-21 18:39 評論0 收藏0
PHP7 mongoDB擴展使用

摘要：最近在做的項目需要將升級到，使用過擴展的同學應該知道，的擴展是完全不兼容的擴展的，改如何使用呢。最近在做的項目需要將PHP5.6升級到PHP7.0，使用過PHP-mongo擴展的同學應該知道，PHP7.0的mongodb擴展是完全不兼容PHP5.6的mongo擴展的，php-mongodb改如何使用呢。下面直接說明各種方法的使用: 1.mongodb連接： private func...

objc94 2019-07-01 12:44 評論0 收藏0