DIV CSS 佈局教程網

 很早以前我就知道可以把 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 委員會的成員，所以基本還是可信的。至於為什麼符合這兩個條件就可以看成是類數組對象，我也不知道，谷歌搜了半天也沒看到什麼合理的解釋。

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