数组与伪数组(jQuery初探)

一. 数组与伪数组用法区别:

1.数组用法

有Array.prototype原型对象里的属性和方法,可以push

html代码

  

    
选项1
    
选项2
    
选项3
    
选项4
    
选项5
  

第一种情况:

直接push

js代码

var allChildren = item3.parentNode.children
var array = []

for(var i = 0;i

image.png

第二种情况:

说明数组索引是可以不连续的,但是中间隔过去的索引位置还是存在的,以undefined的值存在

js代码

var allChildren = item3.parentNode.children
var array = []

for(var i = 0;i

image.png

第三种情况:

因为array.length总是数组中最大索引加一,所以这种方法可以避免上面那种索引不连续的情况,这种方法也很常用

js代码

var allChildren = item3.parentNode.children
var array = []

for(var i = 0;i

image.png

2.伪数组用法

js代码
这段代码中多了array.length +=1这句代码,说明伪数组是静态的,需要人为的去调节数组长度,如果不加,就会是下面这种结果

image.png

var allChildren = item3.parentNode.children
var array = {length: 0}

for(var i = 0;i

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代码

  

    
选项1
    
选项2
    
选项3
    
选项4
    
选项5
  

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;ili')
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