标签：arr 元素 进阶 JavaScript push length 数组 var

数组

• 对象的几种创建方式：
  字面量
  系统自带的构造函数
  自定义构造函数
  Object.create()

• 数组的创建方式：
  数组字面量 var arr = [];
  系统提供的数组的构造函数 var arr = new Array();

基本介绍

<script type = "text/javascript">
	//下面两语句等价：
	var arr = [1, 2, 3];
	var arr = new Array(1, 2, 3);
	
	//两种构造方式的仅有唯一区别：
	var arr = [10];//表示arr仅有一个元素
	var arr = new Array(10);//表示arr有10个元素（目前都为undefined）		
</script>

需要注意：在JS中，数组没有越界这一说，如果“越界”的引用了某一元素，则会显示undefined，而不是报错。“可以溢出读，也可以溢出写”：

<script type = "text/javascript">
	var arr = [1, 2, 3];
</script>

数组操作

数组是引用值，能够调用方法。对数组的操作的常用方法可以简单地分为以下两类：

1. 操作后使原数组改变：

• push：在数组最后添加若干指定元素，返回添加后数组长度
  

push()方法的实现：

 Array.prototype.push = function() {
	for(var i = 0; i < arguments.length; i++) {
		this[this.length] = arguments[i];
	}
	return this.length;
}

• pop：删除数组里最后一个元素，返回这一被删除的元素
• shift：删除数组里最前面一个元素，返回这一被删除的元素
• unshift：在数组最前面添加若干指定元素，返回添加后数组长度
  
• reverse：数组元素的顺序逆转了
• sort：按ASCII码升序排序
  

如果希望按照数字大小进行排序：sort()函数提供了编程接口，使得我们可以按照希望的形式进行排序。该编程接口具有两个规则，具体如下：

<script type = "text/javascript">
	var arr = [1, 2, 0, 9, 11, 22];
	arr.sort(function(a, b) { 
	//规则1：必须有两个形参，表示将要进行比较的数组中的两元素.
	//如第一轮a=1，b=2；第二轮a=1，b=0；第三轮a=0，b=9......
		if(a > b) {
			return 1;
		} else if(a < b) {
			return -1;
		} else {
			return 0;
		}	//规则2：返回值——
	}); 	//	返回值为正数时，表示a>b，a将置于b前
			//	返回值为负数时，表示a<b，b将置于a前
			//	返回值为0时，表示a=b，a、b位置不变

	//上面的一组代码等价于下面的形式：
	//arr.sort(test(a, b));
	//function test(a, b) {};
</script>

说明：上面程序sort()的编程接口类似于“冒泡排序法”。

• 上面的升序接口可以进行如下的改进：

	arr.sort(function(a, b) { 
			return a - b;
	}); 

• 若降序排列，则：

	arr.sort(function(a, b) { 
			return b - a;
	}); 

• 给一个有序的数组，使其乱序：

	arr.sort(function(a, b) { 
			return Math.random() - 0.5;
	}); 

【说明：Math.random()函数返回(0, 1)之间的小数。Math.random() - 0.5则时正时负，不由两比较的元素决定，所以每两个数进行比较时，是否交换位置以及如何交换位置都是随机的，所以最终结果是乱序。注意，该函数被调用了很多次的！并不是一次就全部排好的。】

练习：按照字符串的字节长度将数组中的元素重新排列位置。

<script type = "text/javascript">
	var arr = ['es你','tggh','aryhobkv','a你','bb'];

	function retBytes(str) {
		var num = str.length;
		for(var i = 0; i < str.length; i++) {
			if (str.charCodeAt(i) > 255) {//汉字占两个字节，所以num在str.length的基础上加1操作
				num++;
			}
		}
		return num;
	}
	arr.sort(function(a, b) { // 始终要注意：a，b量参数表示数组中的元素
		return retBytes(a) - retBytes(b);	
	}); 		
</script>

• splice：截除数组中的某段数据，返回被截除掉的元素（下面第一张图）；该函数还可以在截除的同时，在截除的位置上添加若干元素（“若干”指：除了前两个参数，后面的参数都代表将要添加的元素）（下面第二张图）。利用该函数可以在指定位置添加元素（下面第三张图）。
  
  
  
  

2. 操作后原数组不变：

• concat：
  arr.concat(arr1)：返回一个前半部分是arr，后半部分是arr1的新数组（arr、arr1都未改变）。
  
• join：join()函数的参数必须为字符串形式，表示按照指定字符将数组中的各元素连接起来。返回值为字符串类型。如果省略参数，则默认以“,”进行连接。
  
  
• split：split()函数的参数必须为字符串形式，表示按照指定字符将字符串进行拆分。返回值为数组。
  
  
• toString：将数组变成字符串输出
  
• slice：
  • slice(a, b)表示从索引a处开始，截取到索引b处。
  • slice(a)表示从a处截取到最后。
  • slice()表示全部截取。
  • 返回截取到的部分，原数组不变。

类数组

类数组是一种特殊的对象，它具有以下特征：属性名应该为数字(可以直接写成数字，也可以写成字符串类型的数字)，用来表示相应的索引；必须有length属性；最好加上push属性，这样才能使用真正数组的push()方法，否则就不能对该类数组使用push()方法。【arguments就是一个类数组。】

通过一道题更好的认识其内部原理：

<script type = "text/javascript">
	var obj = {
		2 : 'b',//或者写成'2' : 'b',
		3 : 'c',
		length : 2,
		push : Array.prototype.push,
		splice : Array.prototype.splice
	}

	obj.push('d');
	obj.push('e');
</script>

问：程序执行完后，obj的内容是什么样的？

---

要想知道此问题，首先要知道push()函数的内部执行情况：

 Array.prototype.push() = function(target) {
  	obj[obj.length] = target;
  	obj.length ++;
 }

因此，对于obj.push('d');，将放在obj[2]处，即obj[2]处原来的b将变成d！然后length变成3，故对于obj.push('e');，将使obj[3]处原来的c将变成e！

---

此外，可以看看如下输出：

类数组有很多应用，它本身是个对象，且同时具有了数组的一些特性，所以存储的内容更加强大，后面将经常使用到。

实例：数组去重

利用对象的特性：同一个属性名，不可能存在多次。下面unique()函数的原理就是：把要去重的数组的元素试图作为temp对象里的属性名放入temp里，然后随便对其赋上一个值（这里是“abc”）；判断下一元素是否与前面某一元素重复时，只需判断是否存在以该元素为名称的属性？如何判断呢？那么我们就看其对应的值是undefined还是我们指定的那个值。如果是undefined，说明没有这样的属性名，也就没有对应的值，即undefined。代码如下（注意if语句）：

<script type = "text/javascript">
	Array.prototype.unique = function() {
		var temp = {},
			arr = [],
			len = this.length;//将这种东西用变量保存下来，以免每次都要计算一下this.length！

		for(var j = 0; j < len; j++) {
			if(!temp[this[j]]) { //temp[this[j]]为undefined时
				temp[this[j]] = 'abc';
				arr.push(this[j]);
			}
		}
		return arr;
	}

	var target = [1,1,0,0,0,'a','a'];
	var arr = target.unique();
</script>

temp对象最终的样子：

	temp = {
		"1" : "abc",
		"0" : "abc",
		"a" : "abc"
	}

测试结果：

我的做法是(没用用到对象的特性…)：

Array.prototype.unique = function() {
	var arr = [],
		len = this.length;//将this.length用变量保存下来，以免每次都要计算一下！
		
	for(var j = 0; j < len; j++) {
		if(arr.length == 0) {
			arr.push(this[j]);
		} else {
			for(var i = 0; i < arr.length; i++) {
				if (this[j] != arr[i] && i == arr.length - 1) {
					arr.push(this[j]);
				}
			}				
		}
	}
	return arr;
}

标签：arr,元素,进阶,JavaScript,push,length,数组,var
来源： https://blog.csdn.net/jy_z11121/article/details/99436413

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。