JS数组、函数的定义和调用

波澜不惊！

于 2022-02-10 20:04:54 发布

阅读量1.1k

点赞数 1

分类专栏：前端入门文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_51258512/article/details/122868273

版权

前端入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文深入探讨了JavaScript中的数组，包括隐式定义、直接实例化和定义长度等创建方式，以及获取和设置元素、长度操作等基本操作。此外，还详细介绍了函数的定义、参数传递、调用模式和返回值，以及作用域的概念，帮助读者全面理解JavaScript中的数组和函数用法。

摘要由CSDN通过智能技术生成

数组
- 数组的定义
  - 隐式定义
  - 直接实例化
  - 定义数组并设置长度
- 数组操作
  - 获取数组指定下标的值：（如果下标不存在，则undefined）
  - 设置数组指定下标的值：（如果下标不存在，则自动扩容）
  - 获取数组的长度
  - 设置数组的长度

<body>
		<!--  
			数组
				数组的定义
					1.隐式定义
						var 数组名 = []; //空数组
						var 数组名 = [值1,值2,值3...];
					2.直接实例化
						var 数组名 = new Array(值1,值2,值3...);
					3.定义数组并设置长度
						var 数组名 = new Array(size);
				数组的操作
					数组的下标从0开始
					获取数组指定下标的值：（如果下标不存在，则undefined）
						数组[下标]
					设置数组指定下标的值：（如果下标不存在，则自动扩容）
						数组名[] = 值
					获取数组的长度
						数组名.length
					设置数组的长度
						数组名。length = 值
						
		-->
		<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);
			
			//定义数组并设置长度
			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)
			//获取数组的长度
			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("下标："+ 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("下标："+ i + ",值" + arr3[i]);
			})				 
							 
			
		</script>
	</body>

函数
- 函数的定义
  - 函数声明语句
  - 函数定义表达式
  - Function构造函数
- 函数的参数
  - 定义函数时设置形参,调用函数时传递实参
  - 实参可以省略,则形参为undefined
  - 如果形参名相同,则以最后一个为准
  - 可以设置参数的默认值
  - 参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
- 函数的调用
  - 常用调用模式
  - 函数调用模式（函数有返回值）
  - 方法调用模式
- 函数的返回值
  - 在没有返回值的方法中,用来结束方法(如果方法没有设置返回值,使用return,返回的是undefined)
  - 有返回值的方法中,一个是用来结束方法,一个是将值带给调用者
- 函数的作用域
  - 在JS中,只有在函数中才有作用域.
  - 在函数中,存在局部变量和全局变量
  - 在函数中,如果声明变量时未使用var修饰符,则该变量是全局变量

<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(1,2));
	
			//2.函数定义表达式
			var fn02 = function(a,b){
				console.log(a+b);
			}
			console.log(fn02(1,3));
			
			//3.Function构造函数
			var fn03 = new Function('a','b','return a+b;');
			console.log(fn03(1,4));
			
			//相当于
			function fn04(a,b){
				return (a + b);
			}
			console.log(fn04(1,5));
			
			//函数的参数
			//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
			
			//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.name);
			
			
			// 函数的调用
			// 1.常用调用模式
			function f1(){
				console.log("常用调用模式...");
			}
			f1();
			// 2.函数调用模式（函数有返回值）
			var f2 = function(a){
				console.log("函数调用模式...");
				return a;
			}
			var num1 = f2(1);
			console.log(num1);
			// 3.方法调用模式
			//定义对象	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.sayHello);
			obj.sayHello();	//对象调用函数
			
			// 函数的返回值
			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); //局部变量
			console.log(box2);  //全局变量(但需要调用函数,box2才会被定义)
			
		 </script>
	</body>