原生js底层基础（十五）JavaScript 数组、类数组详解

1.数组定义

创建数组的两种方式：

( 1）字面量（推荐）

( 2）new

两种方式的区别

var arr = new Array(10) //创建一个长度为10的数组，只能写整数
var arr2 = [10] //创建了数组，里面只有一个数10

var arr3 = [1,2,3,4,5]; //创建了数组，里面有五个数
var arr4 = new Array[1,2,3,4,5 ] //与上同

2.数组读取

数组的方法容错性好 一般不会报错，但是要注意越界问题

arr[num] //不能越界（溢出数组长度）读取，返回undefined
arr[num] = “xxx” //可以越界写入

3. 数组操作的常用方法

数组操作的常用方法分为两种：改变原数组的和不改变原数组的

( 1）改变原数组

包括push 、pop、 shift 、unshift 、sort 、reverse、splice

1) push()

在数组后面添加数据，可以添加多个，返回数组长度

利用原型可以自己封装push方法：

Array.prototype.myPush = function(){
	//不知道别人传几个，所以不用写形参，用arguments实参数组
	//遍历每一个传进来的实参
	for(var i  = 0 ;i<arguments.length;i++){
	//this指的是调用这个函数的数组
	this[this.length] = arguments[i];  //this.length表示在数组最后一位加属性值
 }
}
var arr = [];
arr.myPush(1,2,3) 

2）pop()

把数组 的最后一位删除，并返回删掉的值，相当于剪切，不能传参。
例如

var arr = [1,2,3]
var a  = arr.pop(); //把3从数组中删掉，并返回
a  //3

3）shift()

把数组中的第一位删掉，并返回删掉的值， 和pop相反，也不能传参

var arr = [1,2,3]
var a  = arr.shift(); //把3从数组中删掉，并返回
a  //1

4）unshift（）

在最前面添加值，可以多个，与shift正好相反。与push一个加头一个加尾

5） reverse（）

把数组的内容逆序，返回新数组（不同版本浏览器可能不同，有些是返回原数组）

6） splice(index,howmany,item)

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
各个参数的意思：
index为 开始的位置，
howmany为删除的长度，
item为在指定位置要添加的新数据,可以有0到多个，不写即为删除。

删除：从索引为1的位置删除2个元素

var arr = [1,2,3,6,7,5]
var r = arr.splice(1,2); 
r   
[2,3]
arr
[1,6,7,5]

**结果

添加：在索引为2的位置插入一个元素

var arr = [1,2,3,4,5,6]
var r = arr.splice(2,0,'a') //第二个参数写0 即为不删除
r  
[]     	//不删除，所以返回一个空数组
arr 
[1, 2, "a", 3, 4, 5, 6]  

替换:用新元素替换删除了的元素

var arr = [1,2,3,4,5,6] 
var r = arr.splice(4,2,'a','b')
arr
[1, 2, 3, 4, "a", "b"]
r
[5, 6]

第一个参数是负数的话，就负数加数组长度，即索引位置为倒数第XX位

var arr = [1,2,3,4,5,6] 
var r = arr.splice(-1,1,'a')
arr
[1, 2, 3, 4, 5, "a"]
r
[6]

7） sort()

排序的方法，但是需要自己重写它的方法，否则两位以上的数排序不准确，因为它按照ascall码排序的 ，系统留的接口参数是函数引用，因此，可以这么重写
规则：
1.必须写两个形参
2.把实参的内容按照冒泡排序规则访问，怎么对比我们自己写，系统只看返回值，决定怎么做
1)返回值为负数，前面的数在前面。
2)返回值为正数，后面的数在前.
3)返回值为0，不动

arr.sort(function(a,b){
   //满足升序
		return a-b;
})
arr.sort(function(a,b){
  //满足降序
		return b-a;
})

以下解释自定义的函数是怎么得出的，当然此部分可以不看，记住上面的就可以

var arr = [1,4,3,8,10]
arr.sort(function(a,b){
	if(a>b){   //按照这个规则结果系统的响应可以满足升序排列
		return 1;
	}else{
	 return -1;
	}
	
})
arr.sort(function(a,b){
	if(b>a){   //按照这个规则结果系统的响应可以满足降序排列
		return 1;
	}else{
	 return -1;
	}
	
})

//简化：
arr.sort(function(a,b){
	if(a-b>0){   //无论啥时候返回a-b都可以满足升序
		return a-b;
	}else{
	 return a-b;
	}
	
})
arr.sort(function(a,b){
	if(b-a>0){   //无论啥时候返回b-a都可以满足降序
		return b-a;
	}else{
	 return b-a;
	}
	
})
//最终
arr.sort(function(a,b){
   //满足升序
		return a-b;
})
arr.sort(function(a,b){
  //满足降序
		return b-a;
})

扩展面试题：
1.如何把一个有序数组打乱

var arr= [1,2,3,4]
arr.sort(function(){
	return Math.random()-0.5;
})
arr
[4, 2, 1, 3]

2.把对象按照age属性排序

var wt= {
	name:'wt',
	age:18
}
var ly = {
	name:'ly',
	age:10
	}
	var arr=[wt,ly];
	arr.sort ( function(a,b){
	return a.age-b.age;
});

arr
0: {name: "ly", age: 10}
1: {name: "wt", age: 18}

3.按数组内值的长度排序
arr=[‘wer’, ‘dd’, ‘teujtjwtl’ ;‘jwltj’, ‘abcde’];
arr.sort(function(a,b){
return a.length-b.length;
});
4.按数组内值的字节长度排序（中文占两个字节，英文一个）
//自己封装一个转换成字节的方法
str.charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。如果大于255即为中文。

function retByte(str){
var num = str.length;
for(var i = 0;i<arr.length;i++ ){
	if(str.charCodeAt(i)>255){
	num++;
	}
 }
 return num;
}
arr=[ '灯teujtjwtl','张wer','刘美美dd','jwltj' ];
arr.sort(function(a,b){
	return retByte(a) - retByte(b);
});

arr
 ["张wer", "jwltj", "刘美美dd", "灯teujtjwtl"]

( 2）不改变原数组

concat， join，split，toString，slice

1）concat()

拼接到原数组上,形成新数组，原数组不改变

var arr=[1,2,3];
var arr2 = [4,5,6,7];
var newArr = arr.concat(arr2);
newArr
[1, 2, 3, 4, 5, 6, 7]

2）toString()

把数组变成字符串

newArr = [1, 2, 3, 4, 5, 6, 7]
newArr.toString()
newArr
"1,2,3,4,5,6,7"

3）slice(start,end)

返回一个新的数组，包含从 start 到 end （不包括该元素）的 数组元素。原数组不变，如果要删除就用splice()

var arr=[1,2,3,5,8];
var newarr = arr.slice(1,3);//2,3被截取出来赋值给新数组
newarr
(2) [2, 3]
arr
(5) [1, 2, 3, 5, 8]

4）join(符号)

把数组按照指定符号连接成字符串

var arr=[1,2,3,5,8];
var newArr = arr.join("-");
newArr
"1-2-3-5-8"
arr
(5) [1, 2, 3, 5, 8]	//原数组不变

5）split(符号)

把字符串按照给的符号分割，返回一个新数组

var str = "1-2-3-5-8";
var newArr = str.split("-");
newArr
(5) ["1", "2", "3", "5", "8"]
str
"1-2-3-5-8"	//原字符串不变

4.类数组

类数组是一个对象，模拟成一个数组的样子，需要满足以下规则

1.属性要为索引（数字）属性
2.一定要有属性
3.最好加上push，加上splice之后就完全变成数组的样子了

var obj ={
	"0": "a",
	"1": "b",
	"2":"c",
	length:3,
	push :Array.prototype.push,
	splice:Array.prototype.splice
}
obj-->
系统中的类数组重写了push
Array.prototpe.push = function(target){
	this[this.length]  = target;
	this.length;//上面的obj调用的话this变成obj
}

阿里巴巴面试题：

var obj= {
	"2":'a',
	"3":'b',
"length":2,
"push" :Array.prototype.push
}
obj.push("c","d");
obj-->{2: "c", 3: "d", length: 4, push: ƒ}