JavaScript 裡的類別數組物件_javascript技巧-js教程-PHP中文網

JavaScript 裡的類別數組物件_javascript技巧

WBOY

發布： 2016-05-16 16:05:20

原創

1178 人瀏覽過

很早以前我就知道可以把 arguments 轉換成陣列：[].slice.call(arguments)，因為
arguments 是個類別數組對象，所以才可以這麼用。但我一直不清楚什麼叫做類別數組物件( array-like objects)

今天看 Effective JavaScript 就有一節是專門講這個的，感覺真是太拉了。

先看我寫的一些範例程式碼：

複製程式碼程式碼如下:

a = "hello"

[].map.call(a, (e) -> e.toUpperCase()) # => [ 'H', 'E', 'L', 'L', 'O' ]

[].reduceRight.call(a, (acc, e) -> acc e) # => 'olleh'

b = {1: "a", 2: "b", 4: "c", length: 6}

[].reduce.call(b, (acc, e) -> acc e) # => 'abc'

前面那幾個是操作字串的，嗯，字串也可以看成類別陣列物件。但後面那個 b 對象居然
也是類別數組物件。

看書上的解釋：

複製程式碼程式碼如下:

So what exactly makes an object “array-like”? The basic contract of

an array object amounts to two simple rules.

It has an integer length property in the range 0...2^32 – 1.

The length property is greater than the largest index of the object.

An index is an integer in the range 0...2^32 – 2 whose string representation

is the key of a property of the object.

居然只有這兩條簡單的規則。

所以為什麼 arguments, 字串，跟上面那個 b 物件可以看作類別陣列物件呢？

它們都有一個合法的 length 屬性(0 到 2**32 - 1 之間的正整數)。
length 屬性的值大於它們的最大索引(index)。
再舉個例子：

複製程式碼程式碼如下:

b = {1: "a", 2: "b", 4: "c", length: 3}

[].reduce.call(b, (acc, e) -> acc e) # => 'ab'

嗯，就不對了，成了'ab' 了，因為違反了規則2：length 屬性是3,
最大索引值是4要比 length 屬性大了。所以表現的不正常了。

太強大了，好像只是定義了一個接口，只要符合這個接口，就可以利用數組的所有方法。

其實不是可以利用所有方法，Array.prototype.concat
是不能用的，因為它是把兩個數組連接起來，你不是數組一定是沒辦法用它的。

還有一個小問題是，字串建立以後是不可變的（immutable），所以你怎麼折騰它都是不可變的。

但是這本書根本就沒有解釋為什麼是符合這兩個條件就可以看成類數組對象，另外這本書的作者
是那個什麼 ECMAScript 委員會的成員，所以基本上還是可信的。至於為什麼符合這兩個條件就可以看成是類數組對象，我也不知道，谷歌搜了半天也沒看到什麼合理的解釋。

以上所述就是本文的全部內容了，希望大家能夠喜歡。