master

分支 (1)

管理

管理

master

exercise
/
javaScirpt_array_handle.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>array_数组</title>
</head>
<body>
	<script>
		/* 1 数组创建方法 有三种 */
			// 第一种 常规
			var myCars=new Array();
				myCars[0]="Saab";
				myCars[1]="Volvo";
				myCars[2]="BMW";
				console.log(myCars);

			// 第二种 简洁方式
			var myCars_o=new Array("Saab","Volvo","BMW");

			// 第三种 字面
			var myCars_s=["Saab","Volvo","BMW"];


		/* 2 数组操作——增删查 */

			// 查- 访问数组 通过索引号 来访问
			// 	[0] 是数组的第一个元素。[1] 是数组的第二个元素。
			console.log(myCars[1]);

			// 增加
				// 1) 在数组的开头添加新元素 - unshift()
				myCars.unshift("头部增加1","头部增加2"); // 此方法无返回值
				console.log(myCars); // 此方法会改变原数组

				// 2) 在数组的结尾添加新元素 - push()
				myCars.push("尾部增加3","尾部增加4"); // 此方法无返回值
				console.log(myCars); // 此方法会改变原数组

				// 3) 在数组指定位置添加元素 - splice()
				// 在数组中splice() 方法有增、删、该的多功能用处 必须理解会用这个方法
				// 例子详情 https://www.w3school.com.cn/jsref/jsref_splice.asp
				myCars.splice(2, 0, "splice加1","splice加2"); // 此方法无返回值
				console.log(myCars); // 此方法会改变原数组

			// 删除
				// 1) 删除数组的第一个元素 - shift()
				console.log(myCars.shift()); // 此方法 返回被删除的元素
				console.log(myCars); // 此方法不会改变原数组

				// 2) 删除数组的最后一个元素 - pop()
				console.log(myCars.pop()); // 此方法 返回被删除的元素
				console.log(myCars); // 此方法不会改变原数组

				// 3) 删除数组指定元素 - splice()
				console.log('删除前的数组长度：', myCars.length);
				myCars.splice(3,1);
				console.log('删除成功后的数组长度：' + myCars.length);
				console.log(myCars); // 此方法会改变原数组 会使数组长度发生变化 -1

				// 3) 删除数组指定元素 - delete()
				console.log('删除前的数组长度：', myCars.length);
				delete myCars[1];
				console.log('删除成功后的数组长度：' + myCars.length);
				console.log(myCars); // 此方法会改变原数组 这种方式数组长度不变
				console.log(myCars[1]); // myCars[1]变为undefined

		/* 3 数组操作——常用方法 */

			// 1) 数组合并 - concat()
			var hege = ["Cecilie", "Lone"];
			var stale = ["Emil", "Tobias", "Linus"];
			var children = hege.concat(stale);
			// console.log(children);

			// 2) 数组元素转成字符串 - join()/toString()
			// 字符串转成数组 - split()
			// 数组转换字符串/字符串转换数组的方法 很常用 一定要记住
			// console.log(children.join());
			// console.log(children.join('/')); // 默认分隔符',', 可以指定分割符号
			// console.log(children.toString());
			var strChildren = children.join('/');
			// console.log(strChildren.split('/'));

			// 3) 将一个数组中的元素的顺序反转排序 - reverse()

			// 4) slice() 方法可从已有的数组中返回选定的元素
			// splice() 与 slice() 这两个方法的区别会运用很重要
			// 详情 https://www.w3school.com.cn/js/jsref_slice_array.asp
			// slice()方法好好看一下给你的链继 方法参数不同情况下的运用
			// 要理解了才能运用，理解了才会知道什么场景，什么情况下该使用哪种方法
			var arr = ["George", "John", "Thomas", "cc", "bb"];
			var arr1 = arr.slice(1);
			// console.log(arr); // 不会改变原数组
			// console.log(arr1); // 注意看返回值
			var arr2 = arr.slice(2, 4);
			console.log(arr2); // 注意看返回值


			// 4) 数组排序（按字母顺序升序和降序）- sort()
				var points = [40,100,1,5,25,10];
				// 升序
				points.sort(
					function(a, b) {
						return a-b
					}
				);
				// console.log(points);

				// 降序
				points.sort(
					function(a, b) {
						return b-a
					}
				);
				// console.log(points);


		/* 4 数组操作-循环——常用方法 */

			// 1) for

			// 2) forEach 遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
			arr.forEach((item, index, array)=>{
				//执行代码
				console.log(item);
				console.log(index);
				console.log(array);
			})

			/* 判断循环终止的一种条件方法/只返回布尔值：3/4 */
				// 3) arr.some() 判断数组中是否至少有一个元素满足条件，只要有一个满足就返回true，都不满足是才返回false
				let test1 = arr.some(function(item, index) {
					if(item == 'John') {
						return true;
					}
				});
				console.log(test1);

				// 4) arr.every() 判断数组中是否每个元素都满足条件，只有都满足条件才返回true，反之false
				let test2 = arr.every(function(item, index) {
					if(item == 'wang') {
						return true;
					}
				});
				console.log(test2);

			/* 返回值为新数组：5/6 */
				// 5) arr.filter(item, index, arr) 指定方法检测所有元素，并创建一个所有通过测试的元素的新数组,不改变原数组
				// 对满足条件的留下，是对数组的过滤
				let test3 = arr.filter(function(item, index, arr) {
					return item == 'cc';
				});
				console.log(test3);

				// 6) map 有返回值，可以return出来
				let test = arr.map(function(item, index, arr) {
					return item + '1';
				})
				console.log(test);


			// 7) arr.find(item, index, arr) 用于找出第一个符合条件的数组成员，直到找出第一个返回值为true的成员，并返回该成员，如果没有找到，则返回undefined
			let test4 = arr.find(function(item, index, arr) {
				return item == 'li';
			});
			console.log(test4);

			// 8) arr.findIndex(item, index, arr) 返回第一个符合条件数组成员的位置，如果不符合条件，则返回-1。
			let test5 = arr.findIndex(function(item, index, arr) {
				return item == 'li';
			});
			console.log(test5);
	</script>
</body>
</html>