一. 數(shù)組與偽數(shù)組用法區(qū)別:
1.數(shù)組用法
有Array.prototype原型對象里的屬性和方法,可以push
html代碼
<body>
<ul>
<li id="item1">選項1</li>
<li id="item2">選項2</li>
<li id="item3">選項3</li>
<li id="item4">選項4</li>
<li id="item5">選項5</li>
</ul>
</body>
第一種情況:
直接push
js代碼
var allChildren = item3.parentNode.children
var array = []
for(var i = 0;i<allChildren.length;i++){
if(allChildren[i] !== item3){
array.push(allChildren[i])
}
}
console.log(array)
console.log(array[2])
第二種情況:
說明數(shù)組索引是可以不連續(xù)的,但是中間隔過去的索引位置還是存在的,以undefined的值存在
js代碼
var allChildren = item3.parentNode.children
var array = []
for(var i = 0;i<allChildren.length;i++){
if(allChildren[i] !== item3){
array[i] = allChildren[i]
}
}
console.log(array)
console.log(array[2])//undefined
第三種情況:
因?yàn)?code>array.length總是數(shù)組中最大索引加一,所以這種方法可以避免上面那種索引不連續(xù)的情況,這種方法也很常用
js代碼
var allChildren = item3.parentNode.children
var array = []
for(var i = 0;i<allChildren.length;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i]
}
}
console.log(array)
console.log(array[2])
2.偽數(shù)組用法
js代碼
這段代碼中多了array.length +=1這句代碼,說明偽數(shù)組是靜態(tài)的,需要人為的去調(diào)節(jié)數(shù)組長度,如果不加,就會是下面這種結(jié)果
var allChildren = item3.parentNode.children
var array = {length: 0}
for(var i = 0;i<allChildren.length;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i]
array.length +=1
}
}
console.log(array)
console.log(array[2])
總結(jié):
- 什么是偽數(shù)組：
- 1、偽數(shù)組是一個含有l(wèi)ength屬性的json對象
- 2磺浙、它是按照索引的方式存儲數(shù)據(jù)
- 3截歉、如果這個對象的length不為0，那么必須要有按照下標(biāo)存儲的數(shù)據(jù)
- 4、它并不具有數(shù)組的一些方法，只能能通過Array.prototype.slice轉(zhuǎn)換為真正的數(shù)組，并且?guī)в衛(wèi)ength屬性的對象
var obj = {0:'a',1:'b',length:2}; // 偽數(shù)組
var arr = Array.prototype.slice.call(obj); // 轉(zhuǎn)化為數(shù)組
console.log(arr); // 返回["a","b"]
// 不是偽數(shù)組
var obj = {};
var obj2 = { length: 3 };
// 是偽數(shù)組
var obj3 = { length: 0 };
var obj4 = { 0: '888', length: 1 };
var obj5 = { 99: 'abc', length: 100 }
- 如何判斷數(shù)據(jù)是不是偽數(shù)組：
- 1椅邓、不是對象直接干掉
- 2、是對象昧狮，沒有l(wèi)ength屬性也干掉
- 3希坚、有l(wèi)ength，值必須是number類型
- 4陵且、length值是number類型，并且值不為0个束，這個對象還得按照下標(biāo)存儲數(shù)據(jù)
- 如何判斷數(shù)據(jù)是不是真數(shù)組：
- 1慕购、數(shù)據(jù) instanceof Array
- 2、Object.prototype.toString.call( 數(shù)據(jù) ) === '[object Array]'
- 偽數(shù)組轉(zhuǎn)標(biāo)準(zhǔn)數(shù)組：
- Array.prototype.slice.call( 數(shù)據(jù) )
偽數(shù)組基本上屬于一個概念問題茬底，只需要知道的是--偽數(shù)組的原型一定不是數(shù)組沪悲，所以，不會有數(shù)組的所有方法阱表，在使用的時候不能想當(dāng)然的去直接用Array.prototype方法比如push,pop,concat等等
偽數(shù)組轉(zhuǎn)為真數(shù)組的方法有好多種殿如，列下思路：
1.遍歷偽數(shù)組存入真數(shù)組
2.Array.prototype.splice.call(obj)
3.Array.from()
4.原型繼承,arr.proto=Array.prototype
5.其他工具庫中的方法贡珊，如jQuery中的makeArray()toArray()等
二、jQuery的實(shí)現(xiàn)
html代碼
<body>
<ul>
<li id="item1">選項1</li>
<li id="item2">選項2</li>
<li id="item3">選項3</li>
<li id="item4">選項4</li>
<li id="item5">選項5</li>
</ul>
</body>
css代碼
.blue{
color: blue;
}
js代碼
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector==='string'){
var temp = document.querySelectorAll(nodeOrSelector)
// console.log(temp)
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
console.log(nodes)
}else if(nodeOrSelector instanceof Node){
nodes = {
0:nodeOrSelector,
length:1
}
}
nodes.addClass = function(classes){
classes.forEach(function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.setText = function(text){
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
var node2 = jQuery('ul>li')
node2.addClass(['blue'])
node2.setText('hi')
分析:
1涉馁、偽數(shù)組中的length屬性是不會隨著數(shù)字鍵的變化而變化的门岔，一定要進(jìn)行人為的修改
2、在if語句中document.querySelectorAll(nodeOrSelector)得到的是一個偽數(shù)組烤送，所以
在else if 中也要得到偽數(shù)組來保持一致
3寒随、函數(shù)中一定不要忘了返回值，忘了的話調(diào)用時會出現(xiàn) undefined
4帮坚、document.querySelectorAll(nodeOrSelector)得到的是一個偽數(shù)組,含有很多無用的屬性,可以對這個偽數(shù)組遍歷一下,組成一個新的數(shù)組,可以保留一個純凈的數(shù)組
5妻往、從上面代碼來看,jQuery本質(zhì)上就是一個封裝好的構(gòu)造函數(shù),通過一些舊的DOM屬性和方法,返回一些好用的屬性和方法
代碼鏈接1：http://js.jirengu.com/lowin/2/edit
代碼鏈接2：http://js.jirengu.com/digil/1/edit?html,css,js,output
