第六次网页前端培训(JS的基本语法)

这篇博客主要讲解了JavaScript中的数组和函数。数组部分包括定义、基本操作、遍历及提供的方法,如通过for循环、for...in循环和forEach进行遍历。函数部分涉及定义、参数、调用、返回值以及作用域的概念,详细阐述了不同定义方式和调用方式。
摘要由CSDN通过智能技术生成

运算符与控制符

		<script type="text/javascript">
		//==比较值
		//1 = "1"  true
		//===比较值与类型
		//1 === "1" false
		console.log(1=="1");
		console.log(1==="1");
		</script>

数组

数组的定义

        //数组的定义
        // 1.隐式定义
        //     var 数组名 = [];空数组
        //     var 数组名 = [值1,值2,值3...];
        // 2.直接实例化
        //     var 数组名 = new Array(值1,值2,值3...);
        // 3.定义数组并设置长度
        //     var 数组名 = new Array(size);

		<script type="text/javascript">
		// 1.隐式定义
		var arr1 = [];
		console.log(arr1);
		var arr2 = [1,2,"a",true];
		console.log(arr2);
		
		// 2.直接实例化
		var arr3 = new Array(1,2,3);
		console.log(arr3);
		
		// 3.定义数组并设置长度
		var arr4 = new Array(5);
		console.log(arr4);
		</script>


数组的基本操作 

        // 数组的下标从0开始
        // 获取数组指定下标的值:
        //     数组名[下标];
        // 设置数组指定下标的值:
        //     数组名[下标] = 值 ;
        // 获取数组的长度:
        //     数组名.length;
        // 设置数组的长度:
        //     数组名.length = 值;

		<script type="text/javascript">

		// 1.隐式定义
		var arr1 = [];
		console.log(arr1);
		var arr2 = [1,2,"a",true];
		console.log(arr2);
		// 2.直接实例化
		var arr3 = new Array(1,2,3);
		console.log(arr3);
		// 3.定义数组并设置长度
		var arr4 = new Array(5);
		console.log(arr4);

		//获取指定下标的值
		console.log(arr2[1]);//2
		//如果下标不存在
		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 = "xiaoming";
		console.log(arr3);
		arr3["pwd"] = "123456";
		console.log(arr3);
		//获取数组的属性
		console.log(arr3["name"]);
		
		</script>

数组的遍历 

        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

		<script type="text/javascript">		
        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("下标:"+i+",值:"+arr3);
		}
		//forEach
		console.log("---forEach---");
		arr3.forEach(function(Element,index){
			console.log("下标:"+index+",值:"+Element);
		})
        </script>

 数组提供的方法

		<script type="text/javascript">
        //数组提供的方法
		var arr5 = ["a","b","c"];
		arr5[arr5.length] = "d";
		//push添加元素到最后
		arr5.push("e");
		console.log(arr5);
		//indexOf数据元素索引
		console.log(arr5.indexOf("a"));//0
		console.log(arr5.indexOf("t"));//找不到则返回-1
		//join数组转换成字符串
		console.log(arr5.join("-"));//a,b,c,d,e
		//split字符串方法:将字符串转换为数组
		var str = "1,2,3,4,5";
		console.log(str.split(","));
		</script>

函数

函数的定义

            函数的定义
                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);
		}
		console.log(fn04);
		</script>

函数的参数

		<script type="text/javascript">
		//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";
			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(num);//实参是定义的变量
		console.log(num);
		
		</script>

函数调用 

            函数的调用
            1.常用调用方式
                函数名([参数列表]);
            2.函数调用方式(函数有返回值)
                var 变量名 = 函数名([参数列表]);
            3.方法调用方式
                对象.函数名([参数列表]);

		<script type="text/javascript">

		//函数的调用
		//1.常用调用方式
		function f1(){
			console.log("...常用调用方式...");
		}
		//2.函数调用方式
		var f2 = function(){
			console.log("...函数调用方式...");
			return a;
		}
		var num1 = f2();
		console.log(num1);
		//3.方法调用方式
		//定义对象
		var obj ={
			name:"xiaoming",//字符串
			age:10,//数值
			sex:true,//布尔
			cat:["大毛","二毛"],//数组
			dog:{//对象
				name:"三毛",
				age:1
			},
			sayHello:function(){//函数
				console.log("hi~");
			}
		}
		console.log(obj);
		console.log(obj.sayHello);
		obj.sayHello();//对象调用函数
		
		</script>

 函数的返回值

            函数的返回值return
            如果方法没有返回值,使用return返回的是undefined
            1.在没有返回值的方法中,用来结束方法。
            2.有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。

		<script type="text/javascript">
        //1.在没有返回值的方法中,用来结束方法
		//如果方法没有返回值,使用return返回的是undefined
		function f1(){
			console.log("...没有返回值...");
			return;
			console.log("......");
		}
		console.log(f1());
		//2.有返回值的方法中,一个是用来结束方法,一个是将值带给调用者
		function f2(){
			console.log("...有返回值...");
			return "test return ";
		}
		console.log(f2());
		
		</script>

 函数的作用域

            函数的作用域
            在JS中,只有在函数中才作用域。
            1.在函数中,存在局部变量和全局变量
            2.在函数中,如果声明变量时未使用var修饰符,则该变量是全局变量

		<script type="text/javascript">

		var b = "hello";//全局变量
		//函数中定义的变量是局部变量
		function a(){
			//局部变量
			var box1 = 10;
			//全局变量(没有使用var修饰符声明,属于全局变量)
			box2 = 20;
		}
		//调用方法,执行方法中的代码
		a();
		console.log(b);//全局变量
		// console.log(box1);//box是局部变量
		console.log(box2);

		</script>

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值