深入理解JavaScript類數(shù)組

Towers 發(fā)布于2019-08-19 18:16 / 1726人閱讀

摘要：但是，我們可以借用類數(shù)組方法不難看出，此時的在調(diào)用數(shù)組原型方法時，返回值已經(jīng)轉(zhuǎn)化成數(shù)組了。很多時候，深入看看源代碼也會讓你對這個理解的更透徹。的前端樂園原文鏈接深入理解類數(shù)組

起因

寫這篇博客的起因，是我在知乎上回答一個問題時，說自己在學前端時把《JavaScript高級程序設計》看了好幾遍。
于是在評論區(qū)中，出現(xiàn)了如下的對話：

天啦嚕，這話說的，寶寶感覺到的，是滿滿的惡意啊。還好自己的JavaScript基礎還算不錯，沒被打臉。（吐槽一句：知乎少部分人真的是惡意度爆表，整天想著打別人的臉。都是搞技術(shù)的，和善一點不行嗎…………）

不過這個話題也引起了我的注意，問了問身邊很多前端同學關于數(shù)組與類數(shù)組的區(qū)別。他們都表示不太熟悉，所以決定寫一篇博客，來分享我對數(shù)組與類數(shù)組的理解。

什么是類數(shù)組

類數(shù)組的定義，有如下兩條：

具有：指向?qū)ο笤氐臄?shù)字索引下標以及 length 屬性告訴我們對象的元素個數(shù)

不具有：諸如 push 、 forEach 以及 indexOf 等數(shù)組對象具有的方法Q

這兒有三個典型的JavaScript類數(shù)組例子。

1. DOM方法

// 獲取所有div
let arrayLike = document.querySelectorAll("div")

console.log(Object.prototype.toString.call(arrayLike))  // [object NodeList]

console.log(arrayLike.length) // 127

console.log(arrayLike[0]) 
// 

console.log(Array.isArray(arrayLike)) // false

arrayLike.push("push") 
// Uncaught TypeError: arrayLike.push is not a function(…)

是的，這個arrayLike的 NodeList，有l(wèi)ength，也能用數(shù)組下標訪問，但是使用Array.isArray測試時，卻告訴我們它不是數(shù)組。直接使用push方法時，當然也會報錯。
但是，我們可以借用類數(shù)組方法：

let arr = Array.prototype.slice.call(arrayLike, 0)

console.log(Array.isArray(arr)) // true

arr.push("push something to arr")
console.log(arr[arr.length - 1]) // push something to arr

不難看出，此時的arrayLike在調(diào)用數(shù)組原型方法時，返回值已經(jīng)轉(zhuǎn)化成數(shù)組了。也能正常使用數(shù)組的方法。

2. 類數(shù)組對象

let arrayLikeObj = {
  length: 2,
  0: "This is Array Like Object",
  1: true
}

console.log(arrayLikeObj.length) // 2
console.log(arrayLikeObj[0]) // This is Array Like Object
console.log(Array.isArray(arrayLikeObj)) // false

let arrObj = Array.prototype.slice.call(arrayLikeObj, 0)
console.log(Array.isArray(arrObj)) // true

這個例子也很好理解。一個對象，加入了length屬性，再用Array的原型方法處理一下，搖身一變成為了真的數(shù)組。

3. 類數(shù)組函數(shù)

這個應該算是最好玩，也是最迷惑人的類數(shù)組對象了。

let arrayLikeFunc1 = function () {}
console.log(arrayLikeFunc1.length) // 0
let arrFunc1 = Array.prototype.slice.call(arrayLikeFunc1, 0)
console.log(arrFunc1, arrFunc1.length) // ([], 0)

let arrayLikeFunc2 = function (a, b) {}
console.log(arrayLikeFunc2.length) // 2
let arrFunc2 = Array.prototype.slice.call(arrayLikeFunc2, 0)
console.log(arrFunc2, arrFunc2.length) // ([undefined × 2], 2)

可以看出，函數(shù)也有l(wèi)ength屬性，其值等于函數(shù)要接收的參數(shù)。

注：不適用于ES6的rest參數(shù)。具體原因和表現(xiàn)這兒就不再闡述了，不屬于本文討論范圍。可參見 《rest參數(shù) - ECMAScript 6 入門》。另外arguments在ES6中，被rest參數(shù)代替了，所以這兒不作為例子。

而length屬性大于0時，如果轉(zhuǎn)為數(shù)組，則數(shù)組里的值會是undefined。個數(shù)等于函數(shù)length的長度。

類數(shù)組的實現(xiàn)原理

類數(shù)組的實現(xiàn)原理，主要有以下兩點：
第一點是JavaScript的“萬物皆對象”概念。
第二點則是JavaScript支持的“鴨子類型”。

首先，從第一點開始解釋。

萬物皆對象

萬物皆對象具體解釋如下：

在JavaScript中，“一切皆對象”，數(shù)組和函數(shù)本質(zhì)上都是對象，就連三種原始類型的值——數(shù)值、字符串、布爾值——在一定條件下，也會自動轉(zhuǎn)為對象，也就是原始類型的“包裝對象”。

而另外一個要點則是，所有對象都繼承于Object。所以都能調(diào)用對象的方法，比如使用點和方括號訪問屬性。
比如說，這樣的：

let func = function() {}
console.log(func instanceof Object) // true
func[0] = "I"m a func"
console.log(func[0]) // "I"m a func"

鴨子類型

萬物皆對象具體解釋如下：

如果它走起來像鴨子，而且叫起來像鴨子，那么它就是鴨子。

比如說上面舉的類數(shù)組例子，雖然他們是對象/函數(shù)，但是只要有l(wèi)ength屬性和對應的數(shù)字下標，那么他們就是數(shù)組。

但是，在這兒，還是有些迷糊的。為什么使用call/apply借用數(shù)組方法就能處理這些類數(shù)組呢？

探秘V8

一開始，我也對這個犯迷糊啊。直到我去Github上，看到了谷歌V8引擎處理數(shù)組的源代碼。
地址在這兒：v8/array.js
作為講述，我們在這里引用push的源代碼（方便講述，刪除部分。slice的比較長，但是原理一致）：

// Appends the arguments to the end of the array and returns the new
// length of the array. See ECMA-262, section 15.4.4.7.
function ArrayPush() {
  // 獲取要處理的數(shù)組
  var array = TO_OBJECT(this);
  // 獲取數(shù)組長度
  var n = TO_LENGTH(array.length);
  // 獲取函數(shù)參數(shù)長度
  var m = arguments.length;

  for (var i = 0; i < m; i++) {
    // 將函數(shù)參數(shù)push進數(shù)組
    array[i+n] = arguments[i];
  }

  // 修正數(shù)組長度
  var new_length = n + m;
  array.length = new_length;
  // 返回值是數(shù)組的長度
  return new_length;
}

是的，整個push函數(shù)，并沒有涉及是否是數(shù)組的問題。只關心了length。而因為其對象的特性，所以可以使用方括號來設置屬性。

這也是萬物皆類型和鴨子類型最生動的體現(xiàn)。

總結(jié)

JavaScript中的類數(shù)組的特殊性，是由其“萬物皆類型”和“鴨子類型”決定的，而瀏覽器引擎底層的實現(xiàn)，更是佐證了這一點。
而先前說我的那位同學，因為只是知道類數(shù)組的幾種表現(xiàn)和用法，并且想通過apply來打我臉，證明我根本沒有仔細看書。這種行為不僅不友善，而且學習效率也不高。
因為，知其然而不知其所以然是不可取的。特別是發(fā)現(xiàn)很多這種例子，就得學會歸納總結(jié)。（感謝winter老師的演講：一個前端的自我修養(yǎng)，教會我很多東西。）。
很多時候，深入看看源代碼也會讓你對這個理解的更透徹。將來就算是蹦出一百種類數(shù)組，也能知道是怎么回事兒。

最后，還是開頭那句話：“都是搞技術(shù)的，和善一點不行嗎？有問題就好好交流，不要總想著打別人臉啊…………”

最后附上本人博客地址和原文鏈接，希望能與各位多多交流。

Lxxyx的前端樂園
原文鏈接：深入理解JavaScript類數(shù)組

云服務器 GPU云服務器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

JS程序

摘要：設計模式是以面向?qū)ο缶幊虨榛A的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學習總結(jié)。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
深入理解JavaScript（三）：獲取數(shù)組中的最大值方法（this,apply）

摘要：三個方法的作用，都是改變的指向，只是用法稍微有些區(qū)別什么是既不指向函數(shù)自身，也不指函數(shù)的詞法作用域。它在函數(shù)定義的時候是確定不了的在函數(shù)被調(diào)用時才發(fā)生的綁定，也就是說具體指向什么，取決于你是怎么調(diào)用的函數(shù)。 1.排序法思路：給數(shù)組先排序(由大到小排序),第一項就是最大值 let arr = [1,5,6,7,9,20,40,2,3]; let max1 = arr.sort(func...

canopus4u 2019-08-26 10:42 評論0 收藏0
[ JS 基礎 ] JS 中 instanceof 運算符深入解析 (2)

摘要：在高級的技巧中會用來創(chuàng)建作用域安全的構(gòu)造函數(shù)。運算符希望左操作數(shù)是一個對象，右操作數(shù)表示對象的類。中對象的類似通過初始化它們的構(gòu)造函數(shù)來定義的。為了理解運算符是如何工作的，必須首先理解原型鏈原型鏈可作為的繼承機制。在js高級的技巧中會用instanceof來創(chuàng)建作用域安全的構(gòu)造函數(shù)。instanceof運算符希望左操作數(shù)是一個對象，右操作數(shù)表示對象的類。如果左側(cè)的對象是右側(cè)類的...

劉厚水 2019-08-21 10:27 評論0 收藏0
MongoDB指南---3、MongoDB基礎知識-數(shù)據(jù)類型

摘要：如將構(gòu)造函數(shù)作為函數(shù)進行調(diào)用即不包括的方式，返回的是日期的字符串表示，而非日期對象。如果不注意這一點，沒有始終使用日期構(gòu)造函數(shù)，將得到一堆混亂的日期對象和日期的字符串。關于日期類的完整解釋，以及構(gòu)造函數(shù)的參數(shù)格式，參見規(guī)范節(jié)。上一篇文章：MongoDB指南---2、MongoDB基礎知識-文檔、集合、數(shù)據(jù)庫、客戶端下一篇文章：MongoDB指南---4、MongoDB基礎知識-使用M...

aervon 2019-07-31 10:32 評論0 收藏0
MongoDB指南---3、MongoDB基礎知識-數(shù)據(jù)類型

摘要：如將構(gòu)造函數(shù)作為函數(shù)進行調(diào)用即不包括的方式，返回的是日期的字符串表示，而非日期對象。如果不注意這一點，沒有始終使用日期構(gòu)造函數(shù)，將得到一堆混亂的日期對象和日期的字符串。關于日期類的完整解釋，以及構(gòu)造函數(shù)的參數(shù)格式，參見規(guī)范節(jié)。上一篇文章：MongoDB指南---2、MongoDB基礎知識-文檔、集合、數(shù)據(jù)庫、客戶端下一篇文章：MongoDB指南---4、MongoDB基礎知識-使用M...

tunny 2019-06-26 18:05 評論0 收藏0