025_JavaScript数组方法

最新推荐文章于 2021-11-18 23:03:55 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-11-18 23:03:55 发布

阅读量137

点赞数

分类专栏： JavaScript学习文章标签： javascript web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109568869

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. 把数组转换为字符串

1.1. toString()方法

1.1.1. toString()方法把数组转换为数组值(逗号分隔)的字符串, 并返回结果。

1.1.2. 语法

arrayObject.toString()

1.2. 自动toString()

1.2.1. JavaScript可通过引用数组名来访问完整数组, 实际上进行了自动toString():

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 以下两个输出结果相同
document.write(fruits);
document.write(fruits.toString());

1.3. join()方法

1.3.1. join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。它的行为类似toString()。

1.3.2. 语法

arrayObject.join(separator)

1.3.3. 参数

1.3.4. join()方法返回一个字符串。该字符串是通过把arrayObject的每个元素转换为字符串, 然后把这些字符串连接起来, 在两个元素之间插入separator字符串而生成的。

1.3.5. 实例

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.write(fruits.join(" | "));

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>把数组转换为字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var fruits = ["Banana", "Orange", "Apple", "Mango"];
			document.write(fruits + '<br />'); 
			document.write(fruits.toString() + '<br />'); 
			document.write(fruits.join(" * "));
		</script>
	</body>
</html>

1.4.2. 效果图

2. 添加和删除数组元素

2.1. pop()方法

2.1.1. pop()方法从数组中删除最后一个元素, 返回值是"被弹出"的值。

2.1.2. 语法

arrayObject.pop()

2.1.3. pop()方法将删除arrayObject的最后一个元素, 把数组长度减1, 并且返回它删除的元素的值。如果数组已经为空, 则pop()不改变数组, 并返回undefined值。

2.2. push()方法

2.2.1. push()方法可向数组的末尾添加一个或多个元素, 并返回新的长度。

2.2.2. 语法

arrayObject.push(newelement1, newelement2, ...., newelementX)

2.2.3. 参数

2.2.4. push()方法可把它的参数顺序添加到arrayObject的尾部。它直接修改arrayObject, 而不是创建一个新的数组。push()方法和pop()方法使用数组提供的先进后出栈的功能。

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>添加和删除数组元素</title>
	</head>
	<body>
		<script type="text/javascript">
			var fruits = ["Banana", "Orange", "Apple", "Mango"];
			
			document.write(fruits + '<br />'); 

			var fruits1 = fruits.pop();  
			document.write(fruits1 + '<br />'); 
			document.write(fruits + '<br />'); 

			var fruits2 = fruits.push("Pear");       	
			document.write(fruits2 + '<br />');
			document.write(fruits + '<br />'); 

			var fruits3 = fruits.push("Peach", "pineapple");
			document.write(fruits3 + '<br />');
			document.write(fruits + '<br />'); 
		</script>
	</body>
</html>

2.3.2. 效果图

3. 位移数组元素

3.1. shift()方法

3.1.1. shift()方法会删除首个数组元素, 并把所有其他元素"位移"到更低的索引, 方法返回被移出的元素。

3.1.2. 语法

arrayObject.shift()

3.1.3. 如果数组是空的, 那么shift()方法将不进行任何操作, 返回undefined值。请注意, 该方法不创建新数组, 而是直接修改原有的arrayObject。

3.2. unshift()方法

3.2.1. unshift()方法在开头向数组添加新元素, 并"反向位移"旧元素, 方法返回新数组的长度。

3.2.2. 语法

arrayObject.unshift(newelement1, newelement2, ...., newelementX)

3.2.3. 参数

3.2.4. unshift()方法将把它的参数插入arrayObject的头部, 并将已经存在的元素顺次地移到较高的下标处, 以便留出空间。该方法的第一个参数将成为数组的新元素0, 如果还有第二个参数, 它将成为新的元素1, 以此类推。

3.3. 例子

3.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>位移数组元素</title>
	</head>
	<body>
		<script type="text/javascript">
			var fruits = ["Banana", "Orange", "Apple", "Mango"];

			document.write(fruits + '<br />'); 

			var fruits1 = fruits.shift();      
			document.write(fruits1 + '<br />'); 
			document.write(fruits + '<br />');

			var fruits2 = fruits.unshift("Pear");       
			document.write(fruits2 + '<br />');
			document.write(fruits + '<br />');

			var fruits3 = fruits.unshift("Peach", "pineapple");
			document.write(fruits3 + '<br />');
			document.write(fruits + '<br />'); 
		</script>
	</body>
</html>

3.3.2. 效果图

4. delete删除数组元素

4.1. 因为数组是对象, 所以可以使用delete关键字来删除数组元素, 元素改为undefined, 因此数组会留下未定义的空洞。

4.2. 例子

4.2.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>delete删除数组元素</title>
	</head>
	<body>
		<script type="text/javascript">
			var fruits = ["Banana", "Orange", "Apple", "Mango"];
			
			document.write(fruits + '<br />'); 
			delete fruits[0];
			document.write(fruits + '<br />');
			document.write(fruits[0]);
		</script>
	</body>
</html>

4.2.2. 效果图

5. 指定数组位置添加和删除元素

5.1. splice()方法既可以向数组中添加项目, 同时又可以从数组中删除项目, 然后返回被删除的项目。

5.2. 语法

arrayObject.splice(index, howmany, item1, ....., itemX)

5.3. 参数

5.4. 返回值

5.5. 实例

5.5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>指定数组位置添加和删除元素</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南"];
			
			document.write('<b>原始数组:</b><br />' + arr + '<br /><br />'); 

			// 从数组下标1的位置删除2个元素
			var arr1 = arr.splice(1, 2);
			document.write('<b>删除的元素数组:</b><br />' + arr1 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');

			// 从数组下标1的位置添加2个元素
			var arr2 = arr.splice(1, 0, "你不知道的JavaScript", "锋利的jquery");
			document.write('<b>只是向数组中添加元素, 没有返回值:</b><br />' + arr2 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');

			// 从数组下标2的位置删除1个元素, 然后再添加2个元素
			var arr3 = arr.splice(2, 1, "高性能JavaScript", "javascript高级程序设计");
			document.write('<b>删除的元素数组:</b><br />' + arr3 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');
		</script>
	</body>
</html>

5.5.2. 效果图

6. 合并数组

6.1. concat()方法用于连接两个或多个数组。该方法不会改变现有的数组, 而仅仅会返回被连接数组的一个副本。

6.2. 语法

arrayObject.concat(arrayX, arrayX, ......, arrayX)

6.3. 参数

6.4. 返回一个新的数组。该数组是通过把所有arrayX参数添加到arrayObject中生成的。如果要进行concat()操作的参数是数组, 那么添加的是数组中的元素, 而不是数组。

6.5. 实例

6.5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>合并数组</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1 = ["JavaScript DOM编程艺术"];
			var arr2 = ['高性能JavaScript', 'javascript高级程序设计'];

			document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />'); 

			// 向数组中添加多个值
			var arr3 = arr1.concat("JavaScript权威指南", "锋利的jquery");
			document.write('<b>向数组中添加多个值后的新数组:</b><br />' + arr3 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');

			// 向数组中添加数组
			var arr4 = arr1.concat(arr2);
			document.write('<b>向数组中添加数组后的新数组:</b><br />' + arr4 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');

			// 向数组中添加值和数组
			var arr5 = arr1.concat("JavaScript权威指南", "锋利的jquery", arr2);
			document.write('<b>向数组中添加值和数组后的新数组:</b><br />' + arr5 + '<br /><br />'); 
			document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');
		</script>
	</body>
</html>

6.5.2. 效果图

7. 裁剪数组

7.1. slice()方法用数组的某个片段切出新数组。它不会从源数组中删除任何元素。

7.2. 语法

arrayObject.slice(start, end)

7.3. 参数

7.4. slice()方法有2个参数, 第一个参数是开始位置, 第二个参数是结束位置, 从开始参数选取元素, 直到结束参数(不包括)为止。

7.5. slice()方法如果结束参数被省略, 则会切出数组的剩余部分。

7.6. 实例

7.6.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>裁剪数组</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南", "你不知道的JavaScript"];
			var arr1 = arr.slice(1, 3);
			var arr2 = arr.slice(1);

			document.write('<b>原始数组:</b><br />' + arr + '<br /><br />'); 
			document.write('<b>裁剪下标1~3(不包含下标3的位置)位置的元素, 返回的新数组:</b><br />' + arr1 + '<br /><br />'); 
			document.write('<b>裁剪下标1到结束位置的元素, 返回的新数组:</b><br />' + arr2); 
		</script>
	</body>
</html>

7.6.2. 效果图