第六次网页前端（JS）-CSDN博客

本文链接：https://blog.csdn.net/Rrxiaobaijiu/article/details/122864112

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一.JavaScript 代码规范

代码规范通常包括以下几个方面:

变量和函数的命名规则
空格，缩进，注释的使用规则。
其他常用规范
变量名推荐使用驼峰法来命名(camelCase):
```
firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);
```
通常运算符 ( = + - * / ) 前后需要添加空格；通常使用 4 个空格符号来缩进代码块；一条语句通常以分号作为结束符；
复杂语句的通用规则:
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。
对象定义的规则：将左花括号与类名放在同一行。冒号与属性值间有个空格。字符串使用双引号，数字不需要。最后一个属性-值对后面不要添加逗号。将右花括号独立放在一行，并以分号作为结束符号。
命名规则：

一般很多代码语言的命名规则都是类似的，例如:
变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE
代码规范，学习网址：JavaScript 代码规范 | 菜鸟教程 (runoob.com)

二.运算符：

三.数组：

实例：

/* 数组的定义 */
		// 隐式定义
		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
		// 获取数组的长度
		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("下标："+ 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);
		})

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(","));

四.函数

1.函数声明语句
function函数名([参数列表]) {}
2.函数定义表达式
var变量名/函数名= function( [参数列表]) {}
3. Function构造函数(了解)
var 函数名= new FUnction([参数列表],函数体);

实例：

<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)
				}

函数的参数
定义函数时设置形参，调用函数时传递实参。
1.实参可以省略，则形参为undefinded
2.如果形参名相同，则以最后一个参数为准
3.可以设置参数的默认值
4.参数为值传递，传递副本;参数是是引用传递，则传递的是地址，操作的是同一一个对象

/* 函数的参数 */
		//1.实参可以省略，则形参为undefinded
		function text01(x,y){
			console.log(x+y);
		}
		//调用参数
		//	未设置实参
		text01();//NaN
		text01(1);//NaN
		text01(1,2);//3
		//2.如果形参名相同，则以最后一个参数为准
		function text02(x,x){
			console.log(x);
		}
		text01(1,2);//2
		//3.可以设置参数的默认值
		function text03(x){
			//如果形参x有值，则值为x传递的值，否则值为"x"
			x = x || "x"
			console.log(x);
		}
		text03(10);//10
		text03();//x
		function text04(x){
			(x != null && x != undefined) ? x = x : x = "x"
		}
		text04();//x
		text04("hello");
		//4.参数为值传递，传递副本;参数是是引用传递，则传递的是地址，操作的是同个对象
		// 值传递、
		var num = 10; //变量
		// 函数
		function text05(num){
			num = 20;
		}
		//调用函数
		text05(num); //实参是定义的变量
		console.log(num);
		//引用传递
		var obj = ={name:"zhangsan"};
		console.log(obj);
		function text06(o){
			o.name = "list";
		}\
		text06(obj);
		console.log(obj);

1.常用调用模式
函数名([参数列表]);
2.函数调用模式( 函数有返回值)
var变量名=函数名([参数列表]);
3.方法调用模式
对象.函数名([参数列表]);
函数的返回值:return
如果方法没有返回值，使用return,返回的是undefinded
1.在没有返回值的方法中，用来结束方法。
2.有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
函数作用域
在JS中，只有在函数数中才作用域。
1.在函数中，存在局部变量和全局变量
2.在函数中，如果声明变量时未使用var修饰符，则该变量是全局变量

//函数调用模式
		var f2 = function(a){
			console.log("函数调用模式...");
			return a;
		}
		var num1 = f2(1);
		console.log(num1);
		// 方法调用模式
		//定义对象 
		var obj={
			name:"zhnagsan",
					age:18,
					sex:true,
					cat:=["大猫"，"ermao"],
					dog:{
						name:"长月",
						age:1,
						},
						sayHello:function(){
							console.log("你好呀~")
						},
					}
					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('.......');
					}
					console.log(a2());
					
		</script>