摘要:但是,我們可以借用類數組方法不難看出,此時的在調用數組原型方法時,返回值已經轉化成數組了。很多時候,深入看看源代碼也會讓你對這個理解的更透徹。的前端樂園原文鏈接深入理解類數組
起因
寫這篇博客的起因,是我在知乎上回答一個問題時,說自己在學前端時把《JavaScript高級程序設計》看了好幾遍。
于是在評論區中,出現了如下的對話:
天啦嚕,這話說的,寶寶感覺到的,是滿滿的惡意啊。還好自己的JavaScript基礎還算不錯,沒被打臉。(吐槽一句:知乎少部分人真的是惡意度爆表,整天想著打別人的臉。都是搞技術的,和善一點不行嗎…………)
不過這個話題也引起了我的注意,問了問身邊很多前端同學關于數組與類數組的區別。他們都表示不太熟悉,所以決定寫一篇博客,來分享我對數組與類數組的理解。
什么是類數組類數組的定義,有如下兩條:
具有:指向對象元素的數字索引下標以及 length 屬性告訴我們對象的元素個數
不具有:諸如 push 、 forEach 以及 indexOf 等數組對象具有的方法Q
這兒有三個典型的JavaScript類數組例子。
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,有length,也能用數組下標訪問,但是使用Array.isArray測試時,卻告訴我們它不是數組。直接使用push方法時,當然也會報錯。
但是,我們可以借用類數組方法:
</>復制代碼
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在調用數組原型方法時,返回值已經轉化成數組了。也能正常使用數組的方法。
2. 類數組對象
</>復制代碼
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的原型方法處理一下,搖身一變成為了真的數組。
3. 類數組函數
這個應該算是最好玩,也是最迷惑人的類數組對象了。
</>復制代碼
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)
可以看出,函數也有length屬性,其值等于函數要接收的參數。
</>復制代碼
注:不適用于ES6的rest參數。具體原因和表現這兒就不再闡述了,不屬于本文討論范圍。可參見 《rest參數 - ECMAScript 6 入門》。另外arguments在ES6中,被rest參數代替了,所以這兒不作為例子。
而length屬性大于0時,如果轉為數組,則數組里的值會是undefined。個數等于函數length的長度。
類數組的實現原理類數組的實現原理,主要有以下兩點:
第一點是JavaScript的“萬物皆對象”概念。
第二點則是JavaScript支持的“鴨子類型”。
首先,從第一點開始解釋。
萬物皆對象萬物皆對象具體解釋如下:
</>復制代碼
在JavaScript中,“一切皆對象”,數組和函數本質上都是對象,就連三種原始類型的值——數值、字符串、布爾值——在一定條件下,也會自動轉為對象,也就是原始類型的“包裝對象”。
而另外一個要點則是,所有對象都繼承于Object。所以都能調用對象的方法,比如使用點和方括號訪問屬性。
比如說,這樣的:
</>復制代碼
let func = function() {}
console.log(func instanceof Object) // true
func[0] = "I"m a func"
console.log(func[0]) // "I"m a func"
鴨子類型
萬物皆對象具體解釋如下:
</>復制代碼
如果它走起來像鴨子,而且叫起來像鴨子,那么它就是鴨子。
比如說上面舉的類數組例子,雖然他們是對象/函數,但是只要有length屬性和對應的數字下標,那么他們就是數組。
但是,在這兒,還是有些迷糊的。為什么使用call/apply借用數組方法就能處理這些類數組呢?
探秘V8一開始,我也對這個犯迷糊啊。直到我去Github上,看到了谷歌V8引擎處理數組的源代碼。
地址在這兒: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() {
// 獲取要處理的數組
var array = TO_OBJECT(this);
// 獲取數組長度
var n = TO_LENGTH(array.length);
// 獲取函數參數長度
var m = arguments.length;
for (var i = 0; i < m; i++) {
// 將函數參數push進數組
array[i+n] = arguments[i];
}
// 修正數組長度
var new_length = n + m;
array.length = new_length;
// 返回值是數組的長度
return new_length;
}
是的,整個push函數,并沒有涉及是否是數組的問題。只關心了length。而因為其對象的特性,所以可以使用方括號來設置屬性。
這也是萬物皆類型和鴨子類型最生動的體現。
總結JavaScript中的類數組的特殊性,是由其“萬物皆類型”和“鴨子類型”決定的,而瀏覽器引擎底層的實現,更是佐證了這一點。
而先前說我的那位同學,因為只是知道類數組的幾種表現和用法,并且想通過apply來打我臉,證明我根本沒有仔細看書。這種行為不僅不友善,而且學習效率也不高。
因為,知其然而不知其所以然是不可取的。特別是發現很多這種例子,就得學會歸納總結。(感謝winter老師的演講:一個前端的自我修養,教會我很多東西。)。
很多時候,深入看看源代碼也會讓你對這個理解的更透徹。將來就算是蹦出一百種類數組,也能知道是怎么回事兒。
最后,還是開頭那句話:“都是搞技術的,和善一點不行嗎?有問題就好好交流,不要總想著打別人臉啊…………”
最后附上本人博客地址和原文鏈接,希望能與各位多多交流。
</>復制代碼
Lxxyx的前端樂園
原文鏈接:深入理解JavaScript類數組
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/79397.html
摘要:設計模式是以面向對象編程為基礎的,的面向對象編程和傳統的的面向對象編程有些差別,這讓我一開始接觸的時候感到十分痛苦,但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程,否則只會讓你自己更痛苦。 JavaScript 中的構造函數 學習總結。知識只有分享才有存在的意義。 是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...
摘要:三個方法的作用,都是改變的指向,只是用法稍微有些區別什么是既不指向函數自身,也不指函數的詞法作用域。它在函數定義的時候是確定不了的在函數被調用時才發生的綁定,也就是說具體指向什么,取決于你是怎么調用的函數。 1.排序法 思路:給數組先排序(由大到小排序),第一項就是最大值 let arr = [1,5,6,7,9,20,40,2,3]; let max1 = arr.sort(func...
摘要:在高級的技巧中會用來創建作用域安全的構造函數。運算符希望左操作數是一個對象,右操作數表示對象的類。中對象的類似通過初始化它們的構造函數來定義的。為了理解運算符是如何工作的,必須首先理解原型鏈原型鏈可作為的繼承機制。 在js高級的技巧中會用instanceof來創建作用域安全的構造函數。instanceof運算符希望左操作數是一個對象,右操作數表示對象的類。如果左側的對象是右側類的...
摘要:如將構造函數作為函數進行調用即不包括的方式,返回的是日期的字符串表示,而非日期對象。如果不注意這一點,沒有始終使用日期構造函數,將得到一堆混亂的日期對象和日期的字符串。關于日期類的完整解釋,以及構造函數的參數格式,參見規范節。 上一篇文章:MongoDB指南---2、MongoDB基礎知識-文檔、集合、數據庫、客戶端下一篇文章:MongoDB指南---4、MongoDB基礎知識-使用M...
摘要:如將構造函數作為函數進行調用即不包括的方式,返回的是日期的字符串表示,而非日期對象。如果不注意這一點,沒有始終使用日期構造函數,將得到一堆混亂的日期對象和日期的字符串。關于日期類的完整解釋,以及構造函數的參數格式,參見規范節。 上一篇文章:MongoDB指南---2、MongoDB基礎知識-文檔、集合、數據庫、客戶端下一篇文章:MongoDB指南---4、MongoDB基礎知識-使用M...
閱讀 2592·2021-10-19 11:41
閱讀 2427·2021-09-01 10:32
閱讀 3386·2019-08-29 15:21
閱讀 1768·2019-08-29 12:20
閱讀 1173·2019-08-29 12:13
閱讀 610·2019-08-26 12:24
閱讀 2527·2019-08-26 10:26
閱讀 844·2019-08-23 18:40