By 君羽

Updated:

Contents
  1. 1. 数组与类数组

数组与类数组

数组–Js中不可获取的基础类，从JS诞生开始就存在于JS中的
从最基础的增删改查，到后续的高级语法，一一做整理

先来观察下Array实例的形态

1
2
3
4
5
6
7
8
9
10
11
var array = new Array(1,2,3,4,5);
console.log(array);
/** Array[5]
0: 1
1: 2
2: 3
3: 4
4: 5
length: 5
__proto__: Array[0]
*/

如上，一个数组，包含数组本身的内容和一个不可枚举的length属性。

一 创建数组

  • var arr = new Array();

    新建一个数组，数组的长度为0，且没有内容

  • var a = new Array(5);

    新建一个数组，数组的长度为5，但不是上限

  • var a = new Array(“b”, 2, “a”, 4); 与 var a = new Array([“b”, 2, “a”, 4,]);
  • var a = [“b”, 2, “a”, 4,];

我们做几个比较

1
2
var a = new Array(5);//length:5
var b = new Array([5]);//[[5]]

new Array(5) 与 new Array([5]) 的区别
表示创建一个length为5的数组和创建一个长度为1的数组，数组第一个元素的内容是[5]
那么如何创建一个只有一个元素的数组，且第一个元素是5呢

1
2
var a = new Array();
a[0]=5

或者

1
var a = [5];

另外还有

1
2
var a = new Array(["b", 2, "a", 4,]);
var b = new Array("b", 2, "a", 4);

该代码表示创建一个[[“b”, 2, “a”, 4,]]的数组

Array型的proto比较多，主要有如下

  • push 数组尾部推入，返回数组的长度
  • shift 数组首部取出 ，返回取出的值
  • unshift 数组首部推入 ，返回数组的长度
  • pop 数组尾部取出 ，返回取出的值
  • indexOf 返回元素在数组中的位置，如果不存在则返回-1
  • sort 数组进行排序，可以传入一个函数，函数带两个参数，作为比较的标准
  • join 把数组串联成字符串
  • toString 数组转换转换成字符串
  • concat 数组合并
  • reverse 倒序
    1
    2
    3
    4
    5
    6
    var a =[1,2,3];
    var b = [2];
    var c=[2,[2,3],1];
    var n = a.concat(b,c);
    console.log(n);
    // [1, 2, 3, 2, 2, [2,3], 1]

还有一些es5新出的一些数组操作,我们一次做es3的兼容

  • forEach

    1
    2
    3
    4
    5
    6
    7
    8
    if(!Array.prototype.forEach){
    	Array.prototype.forEach=function(fn){
    		var arr = this;
    		for(var i = 0,len = arr.length;i<len;i++){
    			fn(arr[i],i);
    		}
    	}
    }

  • every

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if(!Array.prototype.every){
    	Array.prototype.every=function(fn){
    		var arr = this;
    		for(var i = 0,len = arr.length;i<len;i++){
    			if(!fn(arr[i],i)){
    				return false;
    			}
    		}
    		return true;
    	}		
    }

  • some 就是every反一下,只需一个满足条件就 return true

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if(!Array.prototype.some){
    	Array.prototype.some=function(fn){
    		var arr = this;
    		for(var i = 0,len = arr.length;i<len;i++){
    			if(fn(arr[i],i)){
    				return true;
    			}
    		}
    		return false;
    	}		
    }

  • filter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    if(!Array.prototype.filter){
    	Array.prototype.filter=function(fn){
    		var arr = this
    		, filterArr = [];
    		for(var i = 0,len = arr.length;i<len;i++){
    			if(fn(arr[i],i)){
    				filterArr.push(arr[i]);
    			}
    		}
    		return filterArr;
    	}		
    }

  • map

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if(!Array.prototype.map){
    	Array.prototype.map=function(fn){
    		var arr = this
    		, mapArr = [];
    		for(var i = 0,len = arr.length;i<len;i++){
    			mapArr.push(fn(arr[i],i));
    		}
    		return filterArr;
    	}		
    }

  • reduce

1
2
3
4
5
6
7
8
9
10
11
if(!Array.prototype.reduce){
	Array.prototype.reduce=function(fn,initialValue){
		var arr = this
		, result = null;
		result = initialValue?fn(initialValue,arr[0]):arr[0];
		for(var i = 1,len = arr.length;i<len;i++){
			result = fn(result,arr[i],i,arr);
		}
		return result;
	}		
}

  • reduceRight

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if(!Array.prototype.reduceRight){
    	Array.prototype.reduceRight=function(fn,initialValue){
    		var arr = this
    		, result = null;
    		result = initialValue?fn(initialValue,arr[arr.length-1]):arr[arr.length-1];
    		for(var i = arr.length-1;i--;){
    			result = fn(result,arr[i],i,arr);
    		}
    		return result;
    	}		
    }

  • splice

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    if(!Array.prototype.splice){
    	Array.prototype.splice=function(){
    		var arr = this
    		 ,spliceArr=[]
    		 ,cacheArr=[]
    		 ,addLen = arguments.length-2;
    		if(arguments[0]+arguments[1]>arr.length){
    			arguments[1] = arr.length- arguments[0];			
    		} 
    		for (var i = 0; i < arr.length; i++) {
    			cacheArr[i] = arr[i];
    		};
    		function max(a1,a2){
    			return (a1>a2?a1:a2);
    		}
    		for(var i = arguments[0],len = max(arr.length,arr.length-arguments[1]+addLen);i<len;i++){
    			if(i<arguments[0]+arguments[1]){
    				spliceArr.push(arr[i]);
    			}
    			if(i<arguments[0]+addLen){
    				arr[i] = arguments[i-arguments[0]+2];
    			}else{
    				var number = i-addLen+arguments[1];
    				arr[i]=cacheArr[number]
    			}
    			if(i>=len-arguments[1]+addLen){
    				delete arr[i];
    			}
    		}
    		return spliceArr;
    	}		
    }

写的略蛋疼，这个splice文章有点多
还有一种用concat相连的比较简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
if(!Array.prototype.splice){
	Array.prototype.splice=function(){
		var arr = this
		 ,spliceArr=[]
		 ,left = []
		 ,right = []
		 ,args = [];
		 for (var i = 2; i < arguments.length; i++) {
		 	args.push(arguments[i]);
		 };
		for(var i=0,len=arr.length;i<len;i++){
			if(i<arguments[0]){
				left.push(arr[i]);
			}else if(i>=arguments[0]&&i<arguments[0]+arguments[1]){
				spliceArr.push(arr[i]);
			}
			else{
				right.push(arr[i]);
			}
		}
		arr = new Array();
		arr = Array.prototype.concat(arr,left,args,right);
		return spliceArr;
	}		
}

Contents
  1. 1. 数组与类数组