首页 > 代码库 > JavaScript数组的某些操作(二)

JavaScript数组的某些操作(二)

        7、颠倒数组中元素的顺序(注意:不是为数组排序)——reverse方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>颠倒数组中元素的顺序</title>
		<script type="text/javascript">
			var intArray = [1,5,3,0];
			intArray.reverse();
			for(var intIndex in intArray){
				console.log(intArray[intIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>
        说明:for循环依次输出:0 3 5 1;

        8、数组的排序——sort方法

        注意:该方法可以传递一个自定义的排序方法的方法名,如果不传参数那么数组将按字母顺序升序排列(即按照字符编码的顺序进行升序排序),这时如果要进行数字的排序,则会出现“意想不到”的效果,看如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>数组的排序——对字母字符的排序</title>
		<script type="text/javascript">
			var charArray = ["a","z","g","r"];
			charArray.sort();
			for(var charIndex in charArray){
				console.log(charArray[charIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>
        说明:for循环依次输出:a g r z;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; intset=UTF-8" />
		<title>数组的排序——对数字的排序</title>
		<script type="text/javascript">
			var intArray = ["10", "5", "40", "25", "1000", "1"];
			intArray.sort();
			for(var intIndex in intArray){
				console.log(intArray[intIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>
        说明:for循环依次输出:1 10 1000 25 40 5
        小结:对比上面两段代码不难发现没有参数的sort方法在对数字类型的数组排序时是起不到排序效果的(呵呵呵,有人可能会想:我如果把上面代码中数字数组元素改成“var intArray = [10, 5, 40, 25, 1000, 1];”应该就可以了吧,嗯嗯嗯,你想的很周到,可是事实是这样也不行大笑),如果要实现对数字数组的排序代码应该这样写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; intset=UTF-8" />
		<title>数组的排序——对数字的排序</title>
		<script type="text/javascript">
			function compareTo(a,b){
				return a - b;
			}
			var intArray = ["10", "5", "40", "25", "1000", "1"];
			intArray.sort(compareTo);
			for(var intIndex in intArray){
				console.log(intArray[intIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; intset=UTF-8" />
		<title>数组的排序——对数字的排序</title>
		<script type="text/javascript">
			var intArray = ["10", "5", "40", "25", "1000", "1"];
			intArray.sort(function(a,b){return a - b;});
			for(var intIndex in intArray){
				console.log(intArray[intIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>
        说明:for循环依次输出:1 5 10 25 40 1000

        对比较函数参数的说明:如果想按照自定义的排序规则排序,就需要提供比较函数,该函数需要传入两个参数(常命名为 a 和 b)并返回一个用于说明这两个值的相对顺序的数字。其返回值如下:

        1)、若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

        2)、若 a 等于 b,则返回 0。

        3)、若 a 大于 b,在排序后的数组中 a 应该出现在 b 之后,则返回一个大于 0 的值。

        对于数组排序言尽于此,不知道大家有没有留意到对中文字符的排序——上面阐述了对字母和数字的排序,sort对中文的排序怎么样呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>数组的排序——对中文字符的排序</title>
		<script type="text/javascript">
			var charArray = ["中","啊","家","高"];
			charArray.sort();
			for(var charIndex in charArray){
				console.log(charArray[charIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>数组的排序——对中文字符的排序</title>
		<script type="text/javascript">
			var charArray = ["中","啊","家","高"];
			charArray.sort(function(a,b){return a - b;});
			for(var charIndex in charArray){
				console.log(charArray[charIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

        说明:上面两个代码片段中的for循环输出的结果是一样的——依次输出:中 啊 家 高

        小结:从输出结果可以发现上面代码对中文的排序是错误的,那么如何实现对中文的排序呢,请看下面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>数组的排序——对中文字符的排序</title>
		<script type="text/javascript">
			var charArray = ["中","啊","家","高"];
			charArray.sort(function(a,b){return a.localeCompare(b);});
			for(var charIndex in charArray){
				console.log(charArray[charIndex]);
			}
		</script>
	</head>
	<body>
	</body>
</html>
        说明:上面for循环依次输出:啊 高 家 中;这才是我们想要的结果

        小结:如果要实现中文字符的排序还是要借助sort方法,但是排序比较方法中使用的是localeCompare方法,该方法也会返回一个用于说明这两个值的相对顺序的数字。其返回值如下:

        1)、若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

        2)、若 a 等于 b,则返回 0。

        3)、若 a 大于 b,在排序后的数组中 a 应该出现在 b 之后,则返回一个大于 0 的值。

        9、将数组中的元素转换为以特定字符分割的字符串——join方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>将数组中的元素转换为以特定字符分割的字符串——以英文逗号分隔</title>
		<script type="text/javascript">
			var nameArray = ["陈洪涛","李小宁","吴思娣"];
			var nameString = nameArray.join();
			console.log(nameString);
		</script>
	</head>
	<body>
	</body>
</html>
        说明:控制台输出的结果为:陈洪涛,李小宁,吴思娣

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>将数组中的元素转换为以特定字符分割的字符串——以中文逗号分隔</title>
		<script type="text/javascript">
			var nameArray = ["陈洪涛","李小宁","吴思娣"];
			var nameString = nameArray.join(",");
			console.log(nameString);
		</script>
	</head>
	<body>
	</body>
</html>
        说明:控制台输出的结果为:陈洪涛,李小宁,吴思娣

        小结:通过上面两段代码我们可以更深层此的理解join方法——如果没有为该方法传递任何参数,那么其默认的数组元素分割符为英文逗号;如果为该方法传递了参数,那么数组元素分割符为所传递参数指定的分割符;