javascript object array方法使用詳解
更新時(shí)間:2012年12月03日 15:45:24 作者:
在javascript開(kāi)發(fā)中經(jīng)常會(huì)使用到array中方法,本文將對(duì)其一一詳細(xì)介紹,需要了解的朋友可以參考下
Array.prototype.push
push向數(shù)組尾部添加一項(xiàng)并更新length ,返回?cái)?shù)組長(zhǎng)度。
如果Object使用push會(huì)怎樣?
看下面代碼, obj好像數(shù)組一樣工作了。length會(huì)自動(dòng)更新。
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ù)組了?其實(shí)不然這可能是調(diào)試工具的一些輸出檢查問(wèn)題。
我們用 instanceof 測(cè)試 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);//刪除第一項(xiàng) 返回刪除項(xiàng)
[0]obj.length // 1 splice刪除一項(xiàng)的時(shí)候同樣更新 length屬性
這樣obj的表現(xiàn)幾乎和array一樣了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。
不過(guò)如果直接設(shè)置length,在數(shù)組中會(huì)刪除大于length的下表的項(xiàng), 但里的obj并不不會(huì)更新。
應(yīng)用在哪?
jQuery對(duì)象表現(xiàn)像一個(gè)array,其實(shí)他是一個(gè)對(duì)象。這種對(duì)象如何new出來(lái)呢?
實(shí)際jQuery把Array的方法借給Object,從而達(dá)到這個(gè)jQuery對(duì)象的效果,jQuery對(duì)象內(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,那么可能潛在的問(wèn)題length屬性不會(huì)和“數(shù)組”項(xiàng)總和對(duì)應(yīng)起來(lái)。
所以直接使用length設(shè)置長(zhǎng)度不會(huì)得到支持。
看下面jquery代碼,雖然length更新了,jquery的對(duì)象并沒(méi)更新。(當(dāng)然這并不是jquery的問(wèn)題)
var jq = $('div') //假設(shè)我們?cè)陧?yè)面獲取了40個(gè)
divjq.length // 40
jq.length = 0;jq// ? jq中仍然存放了40個(gè)dom對(duì)象 length屬性不會(huì)和“數(shù)組”項(xiàng)總和對(duì)應(yīng)起來(lái)。
Object使用array的方法還能正常工作,實(shí)在有些意想不到,可能實(shí)際應(yīng)用遠(yuǎn)不止這些。
push向數(shù)組尾部添加一項(xiàng)并更新length ,返回?cái)?shù)組長(zhǎng)度。
如果Object使用push會(huì)怎樣?
看下面代碼, obj好像數(shù)組一樣工作了。length會(huì)自動(dòng)更新。
復(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ù)組了?其實(shí)不然這可能是調(diào)試工具的一些輸出檢查問(wèn)題。
我們用 instanceof 測(cè)試 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);//刪除第一項(xiàng) 返回刪除項(xiàng)
[0]obj.length // 1 splice刪除一項(xiàng)的時(shí)候同樣更新 length屬性
這樣obj的表現(xiàn)幾乎和array一樣了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。
不過(guò)如果直接設(shè)置length,在數(shù)組中會(huì)刪除大于length的下表的項(xiàng), 但里的obj并不不會(huì)更新。
應(yīng)用在哪?
jQuery對(duì)象表現(xiàn)像一個(gè)array,其實(shí)他是一個(gè)對(duì)象。這種對(duì)象如何new出來(lái)呢?
實(shí)際jQuery把Array的方法借給Object,從而達(dá)到這個(gè)jQuery對(duì)象的效果,jQuery對(duì)象內(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,那么可能潛在的問(wèn)題length屬性不會(huì)和“數(shù)組”項(xiàng)總和對(duì)應(yīng)起來(lái)。
所以直接使用length設(shè)置長(zhǎng)度不會(huì)得到支持。
看下面jquery代碼,雖然length更新了,jquery的對(duì)象并沒(méi)更新。(當(dāng)然這并不是jquery的問(wèn)題)
var jq = $('div') //假設(shè)我們?cè)陧?yè)面獲取了40個(gè)
divjq.length // 40
jq.length = 0;jq// ? jq中仍然存放了40個(gè)dom對(duì)象 length屬性不會(huì)和“數(shù)組”項(xiàng)總和對(duì)應(yīng)起來(lái)。
Object使用array的方法還能正常工作,實(shí)在有些意想不到,可能實(shí)際應(yīng)用遠(yuǎn)不止這些。
您可能感興趣的文章:
- Javascript數(shù)組Array方法解讀
- JavaScript中數(shù)組Array方法詳解
- JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
- JS array 數(shù)組詳解
- JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
- js刪除Array數(shù)組中指定元素的兩種方法
- JavaScript判斷變量是否為數(shù)組的方法(Array)
- JS中數(shù)組Array的用法示例介紹
- 以JSON形式將JS中Array對(duì)象數(shù)組傳至后臺(tái)的方法
- JavaScript中Array方法你該知道的正確打開(kāi)方法
相關(guān)文章
解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制
這篇文章主要為大家介紹了解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Bootstrap實(shí)現(xiàn)翻頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)翻頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下2017-09-09微信小程序全局變量的設(shè)置、使用、修改過(guò)程解析
這篇文章主要介紹了微信小程序全局變量的設(shè)置、使用、修改過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javascript檢測(cè)對(duì)象中是否存在某個(gè)屬性判斷方法小結(jié)
檢測(cè)對(duì)象中屬性的存在與否可以通過(guò)以下幾種方法來(lái)判斷:使用in關(guān)鍵字、使用對(duì)象的hasOwnProperty()方法、用undefined判斷、在條件語(yǔ)句中直接判斷,感興趣的朋友可以了解下哈2013-05-05jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新(附源碼)
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新的具體實(shí)例,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12