网页前端培训第六课

视频:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili

数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
	</head>
	<body>
		<!-- 
			数组
				数组的定义
					1.隐式定义
						var 数组名 = []; //空数组
						var 数组名 = [值1,值2,值3...];
					2.直接实例化
						var 数组名 = new Array(值1,值2,值3...)
					3.定义数组并设置长度
						var 数组名 = new Array(size);
				数组的操作
					数组的下标从0开始(不会出现下标越界)
					获取数组指定下标的值:(如果下标不存在,则undefined)
						数组名[下标];
					设置数组的值:  (如果下标不存在,则自动扩容)
						数组名[下标] = 值;
					获取数组的长度:
						数组名.length;
					设置数组的长度:
						数组名.length = 值;
					了解:
						如果设置非整数型的下标,则会成为数组的属性,不计入数组的长度
						设置属性:
							数组名.属性名 = 值;
							数组名["属性名"] = 值;
						获取属性:
							数组名.属性名;
							数组名["属性名"];
				数组的遍历
					1. for循环遍历
						for(var index = 0;index<数组长度;index++ ){
							
						}
					2.for...in循环
						for(var 下标名 in: 数组){
							
						}
					3.forEach循环
						数组.forEach(function(element,index){
							//element:元素
							//index:下标
						})
					注:
						for  不遍历属性
						forEach 不遍历属性和索引中的undefined
						for...in  不遍历索引中的undefined
				
				数组提供的方法:
					push 	添加元素到最后
					join	数组转成字符串
					index0f 	数组元素索引
					split 		字符串方法,将字符串转换成数组
					
					unshift		添加元素到最前
					pop 	删除最后一项
					shift	删除第一项
					reverse		数组翻转
					slice	截取(切片)数组,原数组不发生变化
					splice	剪接数组,原数组变化,可以实现前后删除效果
					concat	数组合并

		 -->
		 <script type="text/javascript">
			/*数组的定义*/
			//隐式定义
			var arr1 = [];
			console.log(arr1);
			var arr2 = [1,2,'a',true];
			console.log(arr2);
			
			//直接实例化
			var arr3 = new Array(1,2,3);
			console.log(arr3);
			
			//定义数组并设置长度
			var arr4 = new Array(5);
			console.log(arr4);
			
			console.log("===========================");
			/*数组的操作*/
			//获取指定下标的值
			console.log(arr2[1]);//2
			//如果下标不存在
			console.log(arr2[10]);//undefined
			//设置指定下标的值
			arr2[1] = 20;
			console.log(arr2);
			//如果下标不存在
			arr2[10] = 20;
			console.log(arr2);
			// 获取数组的长度
			console.log(arr3.length);//3
			//设置数组的长度
			arr3.length = 5;
			console.log(arr3);
			//设置数组的属性
			arr3.name = "zhangsan"
			console.log(arr3);
			arr3["pwd"] = "123456";
			console.log(arr3);
			//获取数组的属性
			console.log(arr3["name"]);
			
			console.log("=================");
			
			/*数组的遍历*/
			//for循环遍历
			console.log(arr3);
			console.log("-----------for遍历循环-----------");
			for(var i =0;i<arr3.length;i++){
				console.log("索引:" + i + ",值:" +arr3[i]);
			}
			//for...in
			console.log("-----------for...in-----------");
			for(var i in arr3){
				console.log("下标:" + i + ",值:" + arr3[i]);
			}
			//forEach
			console.log("-----------forEach-----------");
			arr3.forEach(function(element,index){
				console.log("下标:" + index + ",值:" + element);
			})
			
			
		 </script>
	</body>
</html>

函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数的定义和使用</title>
	</head>
	<body>
		<!-- 
			函数的定义
				1.函数声明语句
					function 函数名([参数列表]){
						
					}
				2.函数定义表达式
					var 变量名/函数名 = function([参数列表]){
					
				}
				3. Function构造函数(了解)
					var 函数名 = new FUnction([参数列表],函数体);
				
			函数的参数
				定义函数时设置形参,调用函数时传递实参
				1.实参可以省略,则形参为undefined
				2.如果形参名相同,则以最后一个为准
				3.可以设置参数的默认值
				4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
			
			函数的调用
				1.常用调用模式
					函数名([参数列表])
				2.函数调用模式(有返回值)
					var 变量名 = 函数名([参数列表])
				3.方法调用模式
				对象.函数名([参数列表])
				
			函数的返回值
				return
					1.在没有返回值的方法中,用来结束方法。(如果函数没有返回值,使用return,返回的是undefined)
					2.有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。
			
			函数作用域
				在JS中,只有在函数中有作用域。
				1.在函数中存在局部变量和全局变量
				2.在函数中,如果声明函数时未使用var修饰符,则改变量是全局变量
		 -->
		 
		 <script type="text/javascript">
			/*函数的定义*/
			//1.函数声明语句
			function fn01(a,b) {
				console.log(a+b);
			}
			console.log(fn01);
			//2.函数定义表达式
			var fn02 = function(a,b) {
				console.log(a+b);
			}
			console.log(fn02);
			//3.Function 构造函数
			var fn03 = new Function('a','b','return (a+b);');
			console.log(fn03);
			//相当于
			function fn04(a,b) {
				return (a + b);
			}
			console.log(fn04);
			
			console.log("--------------------");
			//1.实参可以省略,则形参为undefined
			function test01(x, y) {
				console.log(x+y);
			}
			//调用函数
			//未设置实参
			test01();//NaN
			test01(1);//NaN
			test01(1 , 2);//3
			//2.如果形参名相同,则以最后一个为准
			function test02(x,x) {
				console.log(x);
			}
			test02(1,2);//2
			//3.可以设置参数的默认值
			function test03(x) {
				//如果形参x有值,则值为x传递的值;否则值为”x“
				x= x || "x"
				console.log(x);
			}
			test03(10);//10
			test03();//x
			function test04(x) {
				(x !=null && x != undefined ) ? x = x : x = "x";
				console.log(x);
			}
			test04();//x
			test04("Hello");//Hello
			
			//4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
			//值传递
			var num = 10;//变量
			//函数
			function test05(num) {
				num = 20;
			}
			//调用函数
			test05(num);//实参是定义的变量
			console.log(num);
			
			var obj = {name:"zhangsan"};
			console.log(obj);
				
			function test06(o) {
				o.name = "lisi";
			}
			test06(obj);
			console.log(obj);
			
			
			console.log('-----------------------');
			/*函数调用*/
			//1.常用调用模式
			function f1(){
				console.log("常用调用模式...")
			}
			f1();
			//函数调用模式
			var f2 = function(){
				console.log("函数调用模式...")
				return 1;
			}
			var num1 = f2();
			console.log(num1);
			//方法调用模式
			//定义对象  key 键 字符串  value值:任意数据类型
			var obj = {
				name : " zhangsan",//字符串,
				age: 18,//数值
				sex:true,//布尔
				cats:["大毛","二毛"],//数组
				dog:{//对象
					name :"张二狗",
					age:1
			},
			sayHello: function(){ //函数
				console.log("你好呀~");
			}
		}
		console.log(obj);
		console.log(obj);
		console.log(obj.sayHello);
		obj.sayHello();
		
		
		
		console.log('-----------------------');
		/*函数的返回值*/
		function a1(){
			console.log("没有返回值...");
			return;
			console.log('........');
		}
		console.log(a1());
		
		function a2 (){
			console.log("没有返回值...");
			return "test";
		}
		console.log(a2());
		
		/*函数作用域*/
		var pp = "Hello";//全局变量
		// 函数中定义的变量是局部变量
		function qq() {
			//局部变量
			var box = 10;
			//全局变量  没有使用var修饰符声明,属于全局变量
			box2 = 20;
		}
		//调用方法,执行方法中的代码
		qq();
		console.log(pp);//全局变量
		console.log(box);//box是局部变量
		console.log(box2);
		 </script>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值