ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

网页前端第六次培训

2022-02-09 18:33:25  阅读:177  来源: 互联网

标签:function 网页 log 前端 console arr3 obj var 第六次


本文章为寒假记录通过b站学习HTML所得收获


一、学习网址:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili   p20~p23


二、js基础语法

1.运算符

比较运算符
				==比较值
					1=="1"  true
				===比较值与类型
					1==="1"	false

例句



			//==
			console.log(1=='1');//true
			
			//===
			console.log(1=='1');//false

2.数组

<!--
			数组
				数组的定义
					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 			添加元素到最后
					indexOF 		数组元素索引
					join 			数组转换成字符串
					split 			字符串方法,将字符串转换成数组
					
		-->

例句

<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]);
		//如果下标不存在
		console.log(arr2[10]);//undefined
		//设置指定下标的值
		arr2[1]=20;
		console.log(arr2);
		//如果下标不存在
		arr2[10]=100;
		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("==============");
		
		/*	数组的遍历	*/
		console.log(arr3);
		console.log("---for循环遍历---");
		//for循环遍历
		for(var i=0;i<arr3.length;i++){
			console.log("下标:"+ 1 +",值:"+arr3[i]);
		}
		//for...in
		console.log("---for...in---");
		for(var i in arr3){
			console.log("下标:"+ 1 +",值:"+arr3[i]);
		}
		//forEach
		console.log("---forEach---");
		arr3.forEach(function(element,index){
			console.log("下标:"+ index +",值:"+ element);
		})
		
		console.log("==============");
		/*	数组提供的方法	*/
		var arr5=["a","b","c"];
		
		
		// 	push 			添加元素到最后
		arr5[arr5.length]="d";
		arr5.push("e");
		console.log(arr5);
		// 	indexOF 		数组元素索引
		console.log(arr5.indexOf("a"));//0
		console.log(arr5.indexOf("t"));//-1,找不到返回-1
		// 	join 			数组转换成字符串
		console.log(arr5.join("-"));//a,b,c,d,e
		// 	split 			字符串方法,将字符串转换成数组
		var str="1,2,3,4,5";
		console.log(str.split(","));
		
		</script>

3.函数以及函数的调用


<!--
			函数的定义
				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);
		}
		//2.函数定义表达式
		var fn02=function(a,b){
			console.log(a+b);
		}
		//3.Function(可以忽略,了解即可)
		var fn03=new Function('a','b','return (a+b);');
		console.log(fn03);
		//相当于
		function fn04(a,b){
			return (a+b);
		}
		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");
		
		//4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
		//值传递
		//变量
		var num=10;
		//函数
		function test05(num){
			num=20;
		}
		//调用函数
		test05(1);//实参是定义的变量
		console.log(num);// 10,不是20
		
		
		//引用传递
		var obj={name:"zhangsan"};
		console.log(obj);
		function test06(o){
			o.name="list";
		}
		test06(obj);
		console.log(obj);
		
		
		console.log("---------------");
		/*	函数的调用	*/
		//常用调用模式
		function f1(){
			console.log("常用调用模式...");
		}
		f1();
		//函数调用模式
		var f2=function(){
			console.log("函数调用模式...");
			return 1;
		}
		var num1=f2(1);
		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.dog);
			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());
		
		
		console.log("---------------");
		/*	函数的作用域	*/
		var pp="hello";//全局变量
		//函数中定义的变量是局部变量
		function qq(){
			//局部变量
			var box=10;
			//全局变量
			box2=20
			
		}
		//调用方法,执行方法中的代码
		qq();
		console.log(pp);//全局变量
		console.log(box1);
		console.log(box2);
		
		
		</script>

标签:function,网页,log,前端,console,arr3,obj,var,第六次
来源: https://blog.csdn.net/weixin_63491017/article/details/122847454

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有