第六次网页前端培训笔记(HTML)

一.数组
            数组的定义
                1．隐式定义
                    var数组名=[];1/空数组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++ ){
                        
                    }
                    相当于Java中:
                    for(int index = e; index<数组长度; index++){
                2. for . . .in循环
                    for(var下标名 in 数组){
                        
                    }
                3. forEach循环
                    数组.forEach(function(element , index){
                    // element:元素
                    // - index:下标
                   });
                
                注：
                    for --》 不遍历属性
                    foreach --》不遍历属性和索引中的undefined
                    for- in --》·不遍历索引中的undefined

            数组提供的方法:
                push          添加元素到最后
                index0f       数组元素索引
                join          数组转成字符串
                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] = 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("索引:" + i +"，值："+ arr3[i])
		}
		console. log("----for...in----" );
		//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);
		})

		 /*数组提供的方法*/
		 // push     添加元素到最后
		 // index0f  数组元素索引
		 // join     数组转成字符串
		 // split    字符串方法:将字符串转换成数组

		  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>

二.函数

        函数的定义
            1.函数声明语句
                function函数名([参数列表]) {
            }
            2.函数定义表达式
                var变量名/函数名= function([参数列表]) {
            }
            3. Function构造函数  (了解)
                var函数名= new Function([参数列表],函数体);
                
        函数的参数
            定义函数时设置形参，调用函数时传递实参。
            1.实参可以省略，则形参为undefinded
            2.如果形参名相同，则以最后一个参数为准
            3.可以设置参数的默认值
            4.参数为值传递，传递副本;参数是是引用传递，则传递的是地址，操作的是同一个对象
            
        函数的调用
            1.常用调用模式
                函数名([参数列表]);
            2.函数调用模式(函数有返回值)
                var变量名=函数名([参数列表]);
            3.方法调用模式
                对象.函数名([参数列表]);
        函数的返回值
            return
            1.在没有返回值的方法中，用来结束方法。(如果方法没有返回值， 使用return, 返回的是undefinded
            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);
		 }
		 
		 
		 /* 函数的参数 */
		 // 1.实参可以省略，则形参为undefinded
		 
		 
		 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(num); //实参是定义的变量
		  console.log(num);
		  
		  //引用传递
		  var obj = {name: "zhangsan"};
		  console.log(obj);
		  function test06(o) {
		  o.name = "lisi";
		  }
		  test06(obj);
		  console. log(obj);
		  
		  
		  console.log("==============")
		  /* 函数的调用 */
		  //常用调用模式
		  function f1() {
		  console. log("常用调用模式...");
		  }
		  f1();
		  //函数调用模式
		  var f2 = function(a) {
		  console. log("函数调用模式...");
		  return a
		  }
			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. 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;
				// 全局变量   没有使用var修饰
				box2 = 20;  
			 }
			 // 调用方法，执行方法中的代码
			 qq();
			 console.log(pp); //全局变量
			 /* console.log(box);      box是局部变量*/
			 console.log(box2);

		 </script>