5.JavaScript——数组的使用及其方法

一. 使用字面量创建数组

<script type="text/javascript">
			/*
			 * 使用字面量创建数组
			 * - 语法： var 变量 = [];
			 * 
			 */
			
			/*
			 * 使用字面量创建数组时，可以在创建时就指定数组中的元素
			 * 
			 */
			var arr = [1,2,3,4];
//			console.log(arr);
			
			
			// 使用构造函数创建数组时， 也可以同时添加元素，将需要添加的元素作为构造函数的参数传递
			var arr2 = new Array(10,20,30);
			
			// 创建一个数组，数组只添加一个元素10
			arr = [10];
			
			//创建一个长度为10的数组
			arr2 = new Array(10);    // 此时当成了长度，不会当成元素添加进去
//			console.log(arr2);
			
			// 数组中的元素可以使任意类型
			arr = ['hello',1,true,undefined];
			// 也可以是一个对象
			var obj = {
				name: '张三'
			}
			
//			arr = [obj];
			
//			arr[arr.length] = obj
//			console.log(arr)
			
			// 也可以是一个函数
			arr = [
				function (){alert("hello")},
				function (){alert("哈哈")}
			
			]
			
			arr[0]();  // [x] x代表下标， 0 输出 hello  1 输出 哈哈
		</script>

二. 数组的方法（列举部分方法，更多方法参考W3C链接）

W3C- 数组方法 https://www.w3school.com.cn/js/js_array_methods.asp

<script type="text/javascript">
			var arr = ["zs", "ls", "ww", "zl"];
			
			/*
			 * push()
			 *  	- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度
			 * 		- 可以将要添加的元素作为参数传递
			 * 			这样这些元素就会自动添加到数组的末尾
			 */
			
//			var res = arr.push("wangermazi");
//			console.log(arr);
//			console.log(res); // 输出数组的长度
//			arr.push("js","66");  // 也可以添加多个元素
//			console.log(arr);
			
			/*
			 * pop()
			 * 		- 该方法会删除数组的最后一个元素， 并且！ 返回值为删除的那个元素
			 * 		- 该方法调用一次就删除一个元素
			 */
//			arr.pop();
//			console.log(arr)
			var res = arr.pop();
			console.log(res);
			
			/*
			 * unshift()
			 * 		- 该方法可以向数组的开头添加一个或多个元素， 并返回数组的新长度
			 */
			
			/* shift()
			 * 		- 删除数组的第一个元素，并返回删除的元素
			 */
		</script>

<script type="text/javascript">
			var arr = ["zs", "ls", "ww", "zl"];
			/*
			 * slice()
			 * - 该方法可以从数组中提取指定元素
			 * - 该方法不会影响原数组，而是将截取到的元素封装到一个新的数组中返回
			 * - 该方法可以传入两个参数：
			 * 		1. 截取开始位置的索引（包含开始索引）
			 * 		2. 截取结束位置的索引（不包含结束索引）
			 * 			- 第二个参数可以省略不写，此时会开始索引截到数组后的所有元素
			 * 			- 索引也可传入负值， 传负值则从后面往前截取
			 * 				-1 代表倒数第一个  -2倒数第二个 ....
			 * 
			 */
//			var arr = arr.slice(2);
//			var arr = arr.slice(2,3);
//			
			
			/*
			 * splice()
			 *  - 删除指定下标的元素。并返回删除的元素
			 * 	- 可传入多个参数：
			 * 		1. 第一个参数 代表开始的位置（下标）
			 * 		2. 第二个参数 代表删除的个数， 若为0 则不会删除任何元素
			 * 		3. 第三个及以后的参数 
			 * 			可以传递一些新的元素 ， 这些元素会自动插入到开始位置索引的前面  举例2
			 */
			
//			var arr = arr.splice(0,1);  // 举例1

			var res = arr.splice(1,1);
//			console.log(arr);
			console.log(res)
		</script>

---

三. forEach

forEach()方法需要一个函数作为参数

• 像这种函数，由我们创建但不是我们调用的，称之为回调函数
  回调函数： 1. 是我们自己创建 2.我们自己没有调用这个函数 3. 最终这个函数执行了
• 数组中有几个元素 函数就会执行几次
• 每次执行时，浏览器就会将遍历的元素，以实参的形式传递出来
• 我们可以定义形参 来接收这些内容
• 浏览器会在回调函数中传递三个参数：
  1.第一个参数是正在遍历的元素；
  2.第二个参数是正在遍历的元素的下标；
  3.第三个参数是正在遍历的元素的数组。

var arr = ["zs", "ls", "ww", "zl"];
arr.forEach(function (a,b,c,d){
				console.log(a,b,c,d)   // 输出4个hello
			})

---

数组小练习

从数组中筛选出年龄大于18的元素

		<script type="text/javascript">
				function Person(name,age){
					this.name = name;
					this.age = age;
				}
				
				var per = new Person('张三', 18);
				var per2 = new Person('李四', 28);
				var per3 = new Person('王五', 8);
				var per4 = new Person('赵六', 16);
				var per5 = new Person('王二麻子', 32);
				
				// 先将上面的对象全部放入一个数组
				 var arr = [per,per2,per3,per4,per5];
				 
			
			</script>


	解：
			// 先将上面的对象全部放入一个数组
		 var arr = [per,per2,per3,per4,per5];
		 
		 function getAge(arr){
		    var newArr = [];
		    //遍历arr，获取arr中的Person对象
		    for(var i = 0; i < arr.length; i++){
		        var p = arr[i];
		        if(p.age >= 18){
		            newArr.push(p);
		        }
		    }
		    return newArr
		}
		var result = getAdult(arr);
		console.log(result);