一. 数组与伪数组用法区别:
1.数组用法
有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])
image.png
第二种情况:
说明数组索引是可以不连续的,但是中间隔过去的索引位置还是存在的,以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
image.png
第三种情况:
因为
array.length总是数组中最大索引加一,所以这种方法可以避免上面那种索引不连续的情况,这种方法也很常用
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])
image.png
2.伪数组用法
js代码
这段代码中多了array.length +=1这句代码,说明伪数组是静态的,需要人为的去调节数组长度,如果不加,就会是下面这种结果
image.png
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])
image.png
总结:
- 什么是伪数组：
- 1、伪数组是一个含有length属性的json对象
- 2、它是按照索引的方式存储数据
- 3、如果这个对象的length不为0，那么必须要有按照下标存储的数据
- 4、它并不具有数组的一些方法，只能能通过Array.prototype.slice转换为真正的数组，并且带有length属性的对象
var obj = {0:'a',1:'b',length:2}; // 伪数组
var arr = Array.prototype.slice.call(obj); // 转化为数组
console.log(arr); // 返回["a","b"]
// 不是伪数组
var obj = {};
var obj2 = { length: 3 };
// 是伪数组
var obj3 = { length: 0 };
var obj4 = { 0: '888', length: 1 };
var obj5 = { 99: 'abc', length: 100 }
- 如何判断数据是不是伪数组：
- 1、不是对象直接干掉
- 2、是对象，没有length属性也干掉
- 3、有length，值必须是number类型
- 4、length值是number类型，并且值不为0，这个对象还得按照下标存储数据
- 如何判断数据是不是真数组：
- 1、数据 instanceof Array
- 2、Object.prototype.toString.call( 数据 ) === '[object Array]'
- 伪数组转标准数组：
- Array.prototype.slice.call( 数据 )
伪数组基本上属于一个概念问题，只需要知道的是--伪数组的原型一定不是数组，所以，不会有数组的所有方法，在使用的时候不能想当然的去直接用Array.prototype方法比如push,pop,concat等等
伪数组转为真数组的方法有好多种，列下思路：
1.遍历伪数组存入真数组
2.Array.prototype.splice.call(obj)
3.Array.from()
4.原型继承,arr.proto=Array.prototype
5.其他工具库中的方法，如jQuery中的makeArray()toArray()等
二、jQuery的实现
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')
image.png
image.png
分析:
1、伪数组中的length属性是不会随着数字键的变化而变化的，一定要进行人为的修改
2、在if语句中document.querySelectorAll(nodeOrSelector)得到的是一个伪数组，所以
在else if 中也要得到伪数组来保持一致
3、函数中一定不要忘了返回值，忘了的话调用时会出现 undefined
4、document.querySelectorAll(nodeOrSelector)得到的是一个伪数组,含有很多无用的属性,可以对这个伪数组遍历一下,组成一个新的数组,可以保留一个纯净的数组
5、从上面代码来看,jQuery本质上就是一个封装好的构造函数,通过一些旧的DOM属性和方法,返回一些好用的属性和方法
代码链接1：http://js.jirengu.com/lowin/2/edit
代码链接2：http://js.jirengu.com/digil/1/edit?html,css,js,output
网友评论