javascript object array方法使用詳解
更新時間:2012年12月03日 15:45:24 作者:
在javascript開發(fā)中經(jīng)常會使用到array中方法,本文將對其一一詳細(xì)介紹,需要了解的朋友可以參考下
Array.prototype.push
push向數(shù)組尾部添加一項并更新length ,返回數(shù)組長度。
如果Object使用push會怎樣?
看下面代碼, obj好像數(shù)組一樣工作了。length會自動更新。
var push = Array.prototype.push;
var obj = {};
push.call(obj, "hello"); // 返回值 1
// obj {"0":"hello", length:0}
push.call(obj, "world"); // 返回值 2
// obj {"0":"hello", "1":"world",length:2}
Array.prototype.length Array.prototype.splice
把length和splice 給Object
看下面代碼:obj這貨居然變成數(shù)組了?其實不然這可能是調(diào)試工具的一些輸出檢查問題。
我們用 instanceof 測試 obj instanceof Array //false
var obj = { length:0, splice:Array.prototype.splice};console.log( obj ); // 打?。篬]
繼續(xù)看下面的代碼:
obj.push(0)//返回obj.length
1obj.push(1)//返回obj.length
2obj.splice(0, 1);//刪除第一項 返回刪除項
[0]obj.length // 1 splice刪除一項的時候同樣更新 length屬性
這樣obj的表現(xiàn)幾乎和array一樣了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。
不過如果直接設(shè)置length,在數(shù)組中會刪除大于length的下表的項, 但里的obj并不不會更新。
應(yīng)用在哪?
jQuery對象表現(xiàn)像一個array,其實他是一個對象。這種對象如何new出來呢?
實際jQuery把Array的方法借給Object,從而達到這個jQuery對象的效果,jQuery對象內(nèi)部也直接使用push等Array的方法。
看看jQuery的部分源碼 (注意加粗)
// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.7.1",
// The default length of a jQuery object is 0
length: 0,
......
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice
如果你要把Object玩成Array,那么可能潛在的問題length屬性不會和“數(shù)組”項總和對應(yīng)起來。
所以直接使用length設(shè)置長度不會得到支持。
看下面jquery代碼,雖然length更新了,jquery的對象并沒更新。(當(dāng)然這并不是jquery的問題)
var jq = $('div') //假設(shè)我們在頁面獲取了40個
divjq.length // 40
jq.length = 0;jq// ? jq中仍然存放了40個dom對象 length屬性不會和“數(shù)組”項總和對應(yīng)起來。
Object使用array的方法還能正常工作,實在有些意想不到,可能實際應(yīng)用遠不止這些。
push向數(shù)組尾部添加一項并更新length ,返回數(shù)組長度。
如果Object使用push會怎樣?
看下面代碼, obj好像數(shù)組一樣工作了。length會自動更新。
復(fù)制代碼 代碼如下:
var push = Array.prototype.push;
var obj = {};
push.call(obj, "hello"); // 返回值 1
// obj {"0":"hello", length:0}
push.call(obj, "world"); // 返回值 2
// obj {"0":"hello", "1":"world",length:2}
Array.prototype.length Array.prototype.splice
把length和splice 給Object
看下面代碼:obj這貨居然變成數(shù)組了?其實不然這可能是調(diào)試工具的一些輸出檢查問題。
我們用 instanceof 測試 obj instanceof Array //false
var obj = { length:0, splice:Array.prototype.splice};console.log( obj ); // 打?。篬]
繼續(xù)看下面的代碼:
obj.push(0)//返回obj.length
1obj.push(1)//返回obj.length
2obj.splice(0, 1);//刪除第一項 返回刪除項
[0]obj.length // 1 splice刪除一項的時候同樣更新 length屬性
這樣obj的表現(xiàn)幾乎和array一樣了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。
不過如果直接設(shè)置length,在數(shù)組中會刪除大于length的下表的項, 但里的obj并不不會更新。
應(yīng)用在哪?
jQuery對象表現(xiàn)像一個array,其實他是一個對象。這種對象如何new出來呢?
實際jQuery把Array的方法借給Object,從而達到這個jQuery對象的效果,jQuery對象內(nèi)部也直接使用push等Array的方法。
看看jQuery的部分源碼 (注意加粗)
復(fù)制代碼 代碼如下:
// Start with an empty selector
selector: "",
// The current version of jQuery being used
jquery: "1.7.1",
// The default length of a jQuery object is 0
length: 0,
......
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice
如果你要把Object玩成Array,那么可能潛在的問題length屬性不會和“數(shù)組”項總和對應(yīng)起來。
所以直接使用length設(shè)置長度不會得到支持。
看下面jquery代碼,雖然length更新了,jquery的對象并沒更新。(當(dāng)然這并不是jquery的問題)
var jq = $('div') //假設(shè)我們在頁面獲取了40個
divjq.length // 40
jq.length = 0;jq// ? jq中仍然存放了40個dom對象 length屬性不會和“數(shù)組”項總和對應(yīng)起來。
Object使用array的方法還能正常工作,實在有些意想不到,可能實際應(yīng)用遠不止這些。
相關(guān)文章
javascript charAt() arr[i]數(shù)組實例代碼
實例區(qū)別一下charAt()和arr[i].toString()的使用方法2008-08-08
Javascript 實現(xiàn)TreeView CheckBox全選效果
Javascript 實現(xiàn)TreeView CheckBox 選中父節(jié)點時所有子節(jié)點全選,取消時全部取消2010-01-01
JavaScript優(yōu)化專題之Loading and Execution加載和運行
這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運行的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01
BootStrap 下拉菜單點擊之后不會出現(xiàn)下拉菜單(下拉菜單不彈出)的解決方案
最近學(xué)到Bootstrap下拉菜單,學(xué)懂了教程內(nèi)容之后自己敲一個點擊按鈕底下彈出下拉菜單的小demo,寫完代碼發(fā)現(xiàn)運行之后點擊按鈕沒反應(yīng),下拉菜單彈不出來,下面給大家分享下解決方案2016-12-12
詳解javascript中原始數(shù)據(jù)類型Null和Undefined
這篇文章主要介紹了javascript中原始數(shù)據(jù)類型Null和Undefined的相關(guān)資料,需要的朋友可以參考下2015-12-12
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05
從零開始用electron手?jǐn)]一個截屏工具的示例代碼
這篇文章主要介紹了從零開始用electron手?jǐn)]一個截屏工具的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10

