JavaScript (第三章 数组函数与对象)

JS的中数组

Java与JS数组的区别:
 java中的数组:储存很多数据的容器,
                特点:1.所有的数据的类型必须要一致
                      2.长度无法更改
                      
                javaScript中的数组:储存很多数据的容器,
                特点:1.所有的数据的类型可以不一致
                     2.长度可以随意更改
                     
                数组是存储一系列值的集合,它是由一个或多个元素组成的,各元素之间使用逗号“,”分隔。
                数组中的每个元素由“索引”和“值”构成。 
                索引:也可称为“下标”,用于识别元素,以数字表示,默认情况下从0开始依次递增。
                值:元素的内容,可以是任意类型的数据。

            */

Js如何创建数组

js中创建数组的两种方式:都要掌握

            1.静态声明:声明数组的同时,将元素值都定下来。
                var  arr = [1,2,3,4,5,6,7];   //java是大括号 JS是中括号
                var  arr = [];  //创建一个长度为0的空数组
                                
                2.动态声明:暂时只声明,赋值放到后续进行
                var arr = new Array();//声明了一个空数组(长度为0)
                arr[0] = 1; arr[1] = 2;


                动态声明的注意事项:
                写法1:var arr = new Array(); 创建了一个长度为0的空数组
                写法2:var arr = new Array(10); 创建了一个长度为10的空数组
                写法3:var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组
                注意事项:写法2和写法3的区分。如果括号内部只有一个数字,就表示长度,而非值
                如果有若干个,才表示值

常见的数组操作

//常见的数组操作1:获取指定位置的元素 语法:arr[index] 下标从0开始
            //常见的数组操作2:获取数组的长度,通过属性,xxx.length    
            // 注意事项:Java中获取数组长度通过方法:xxx.length()
            //常见的数组操作3:遍历数组,根据for循环进行遍历

var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];
			// console.log(arr[5]);//获取下标为5的元素
			// console.log(arr.length);
			
			// for(var i = 0 ;i<arr.length;i++){
			// 	console.log(arr[i]);
			// }

//常见的数组操作4:随意地更改数组的长度
            console.log("数组修改之前的长度为" + arr.length);
            //方法1: 简单操作直接修改 ,不推荐
            // arr.length = 100;
            // console.log("数组修改之后的长度为" + arr.length);
            //方法2:直接在数组的后面添加元素即可
            arr[8] = "新元素1";
            arr[9] = "新元素2";
            arr[19] = "新元素3";
            //修改元素
            arr[0] = 111;
            console.log("数组修改之后的长度为" + arr.length);
            for(var i = 0 ;i<arr.length;i++){
                console.log(arr[i]);
            }

删除数组中的指定元素

//删除数组中指定的元素
            var arr = [1,2,3,4,5];
            // console.log(arr);
            // delete arr[2];//准确地说法应该是: 讲指定位置的元素 修改成 empty而已  并没有实现真正的删除.
            // console.log(arr);

//如何实现真正的删除:  Java也好JS也好 都没有直接提供相对的方法.
            //思路:创建一个新的数组,然后旧数组遍历 赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过
            // var arr1 = [ ];
            // var index = 0;
            //  for(var i = 0 ; i<arr.length;i++){
            //      if (arr[i]==3) {
            //          continue;
            //      }
            //      arr1[index] = arr[i];
            //      index++;
            //  }
            // console.log(arr);
            // console.log(arr1);

习题:找出最大最小值


			var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];
			//查找出最大值和最小值
			var max = arr[0];
			var min = arr[0];
			for(var i = 0 ;i<arr.length;i++){
				if( arr[i] > max ){
					max = arr[i];
				}
				
				if(arr[i]<min){
					min = arr[i];
				}
			}
			console.log(max + "~~" + min);

斐不拉切数列

该数列又称为为兔子数列, 源自于澳大利亚的兔子衍生事件
				若干年以前  一位农夫不小心弄丢了一对兔子,然后2年以后他的农场就没了
				原因:兔子不仅可以公母繁殖,还可以公公  母母繁殖
				兔子的繁殖能力特别强,强到什么地步 如下:
				每对兔子 每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子
				
				问第10个月有多少对兔子:假设一开始就一对。
				月份    对数
				1		1     
				2		1
				3		2    原有的一对  +  生下来的1对
				4		3    原有的一对  +  生下来的2对
				5		5    原有的一对  +  生下来的3对   + 最开始生下来的又生了
				6       8
				7       13
				8       21
			*/
		   
		   //规律:  从第三个月开始  每个月的兔子数  = 前第1个月 + 前第2个月
		   //要求:显示前10对兔子的对数
		   var arr = new Array(10);
		   arr[0] = 1;
		   arr[1] = 1;
		   for(var i = 2;i<arr.length;i++){
			   arr[i] = arr[i-1]  + arr[i-2];
		   }
		   
		   console.log(arr)

数组的排序

{ 3 6 3 1 3 8 3 4 - A 4 D F - 4 F 8 3 - B 6 F B - 1 A 6 4 D A 7 1 6 D 0 0 }                                                                                                                                                                                                                                                                                                                                                                                                                                                     一比较   问题:比较多少次 arr.length-1-i
				for(var j = i+1 ; j<arr.length;j++){
					if(arr[i]>arr[j]){
						var temp = arr[i];
						arr[i] = arr[j];
						arr[j] = temp;
					}
				}
			}
			
			
			console.log(arr);
			

二维数组

javaScript中的数组:数据的类型可以不一致
                也就是意味着数组里面可以再次存储数组 来实现二维甚至多维数组
                一般来说掌握二维数组就够了。
                二维数组:可以看成  几行几列

 
           //声明二维数组的语法:
           //语法1:  var arr = new Array( new Array(10) , new Array(9) , new Array(12)  );
           
           //语法2:  var arr = [ [1,3] , [11,22,33] , [33,22,55] ];
           /*
                    var arr = [
                        [1,2],
                        [2,3,4],
                        [4,5,6]
                    ]

   //例题:

如何创建一个二维数组,要求长度为100  且二维数组里面的每个数组长度也为100,暂时不知道元素内容

//写法1: 不推荐  var arr = new Array( new Array(10) , new Array(10)  , new Array(10) , ... ,new Array(10)  );
		   //写法2:
		   // var arr = new Array(100);//仅仅是一个一维数组
		   // for(var i = 0 ; i<100;i++){
			  //  arr[i] = new Array(100);
		   // }
		   // console.log(arr);
		   
		   
		   //遍历二维数组思路: 先将二维数组看成一维数组
		   
		   // var arr = [ [1,2,3,4]  , [5,6,7,8]  , [11,22,33,44] ];
		   // //如何遍历
		   // //1.先遍历总长度
		   // for(var i = 0 ; i<arr.length ; i++){
			  //  //2.在遍历数组里面的数组
			  //  for(var j = 0 ; j<arr[i].length ; j++){
				 //   console.log(arr[i][j]);
			  //  }
		   // }
		   
		   // //如何获取二维数组中指定的数
		   // var index = arr[1][2] ; //7
		   
		   // var index = arr[2][1] ; //22
 //利用二维数组实现杨辉三角 姓名为杨辉吃饱了没事做,发明的一个三角形
		   //将杨辉三角的前10行打印在页面上.
		   /*
		   
			1
			1   1
			1   2   1
			1   3   3   1
			1   4   6   4    1
			1   5   10  10   5   1
			1   6   15  20   15  6    1
		   
		   */
		  
		   //思路:1.找规律  几行几列的三角形   10行 和  "和行数相等的" 列
		   //第几行就有几列
		   //转换成二维数组,我们应该创建一个 长度为10的二维数组 ,然后数组里面的长度随之改变
		   var arr = new Array(10);
		   for(var i = 0;i<arr.length;i++){
			   arr[i] = new Array(i+1);
		   }
		   //以上就声明了一个可以容纳的容器
		   
		   //赋值:
		   for(var i = 0 ; i<arr.length;i++){//i行数
		   		for(var j = 0 ; j<arr[i].length ; j++){//j列数
					if( j==0  ||  j==i  ){
						arr[i][j] = 1;
					}else{
						arr[i][j] = arr[i-1][j] + arr[i-1][j-1];
					}
		   		}
		   }
		   
		   //以上知识点 均没有实际意义,单纯就是提升自己思维能力.解决问题的能力
		   
		   
		   
		   
		   for(var i = 0 ; i<arr.length;i++){
			   
			   for(var j = 0 ; j<arr[i].length ; j++){
				   document.write(arr[i][j] + "  ");
			   }
			   document.write("<br>");
			   
		   }

JS中的函数

JavaScript的函数理解为Java里面的方法,
                把一些经常复用的代码,抽取出来封装在一个函数中。
                提高程序的可读性,减少开发者的工作量,便于后期的维护。
            
                Java中的方法的语法:
                public  返回类型 方法名(数据类型 变量名 , 数据类型  变量 ...){
                    
                }

JS的函数分类

js中函数的分类:
                A.内置函数(JS提供的): console.log(); alert()  confirm  parseInt...  :
                B.自定义函数(程序员自己写的)
                
                其中自定义函数的声明语法如下:
                function  方法名(变量名,变量名...){
                    
                } 
                
                调用:  方法名(参数列表);
                
                函数定义与调用的编写顺序不分前后。
                你可以先调用函数,再声明函数

 //声明一个无参函数
		   function a1(){
			   console.log(123);
		   }
		   
		   a1();
		   
		   
		   //声明一个指定个数的有参函数
		   function a2(a,b,c){
			   console.log(a+b+c);
		   }
		   a2(1,2,3);
		   
		   //声明一个若干个数的有参函数
		   function a3(... a){
			   for(var i = 0 ; i<a.length ; i++){
				   console.log(a[i]);
			   }
		   }
		   
		   a3(1,1.1,true,undefined,null,"你好");
		   
		   
		   //有返回值的函数
		   function a4(a,b){
			   return a + b;
		   }
		   var sum = a4(10,20);
		   alert(sum)
		   
		</script>

JS的中的函数变量

和Java一样 JS的变量也分为局部变量和全局变量(Java的叫法是成员变量,只是概念和全局类似)

  function info() {
             var age = 18;
           }
           info();
           
           console.log(age);  
           //思考以上代码的执行结果是什么
           //A.18   B.报错   C.null   D.undefined
            //答案:B   提示:age is not  defined  表示未定义
            //原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.


    
全局变量:

在所有函数之外声明(script标签内部的最开始几行),它的作用域称为全局作用域,在同一个页面文件中的所有脚本内都可以使用。


                
局部变量:

在函数体内利用var关键字声明的变量称为局部变量,仅在该函数体内有效。

函数进阶

//以下知识点掌握即可:用的很少,但是看到了需要知道意思.
            //函数的声明 一般就是上面两个知识点即可.就是利用function声明
             
            //不仅有函数 还有一个叫做函数表达式的东西
            //函数表达式指的是将函数赋值给变量的表达式,
            // 通过“变量名()”的方式即可完成函数的调用,小括号“()”内可以传入参数,示例代码如下。
//函数的写法:
            function a1(a){
                console.log("我被调用了。参数是" + a)
            }
            a1(123);
            
            //函数表达式的写法:

            var abc = function (a){
                console.log("我被调用了。参数是" + a)
            };
            
            abc(567);

匿名函数

    // 匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.
            //例如跳转网页之后提示:登录成功  加载成功
            //语法如下:
            // (function(){
            //     alert("登录成功!!!");
            // })();

//下面是函数叫做a的函数
            function a(){
                alert(123);
            }
            
            
/匿名函数指的就是:没有函数名的函数  但是又拥有了变量名
            var a = function(){
                alert(456);
            }

箭头函数

//箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.
			//因为代码简化,别人喜欢装逼
			//以下3个函数的实际意义完全一样.
			
			function sum(a,b){
				return a + b;
			}
			
			var fn = (a, b) => a + b;
			
			var fn = (a,b) => {
				return  a + b;
			};

递归函数

//递归函数:了解即可. 函数的内部调用自己函数本身.
			//优点:代码简化. 缺点:难得想
						
			//例如声明一个函数 求1-N的和
			function sum(n){
				var sum = 0;
				for(var i = 1 ;i<=n;i++){
					sum = sum + i;
				}
				return sum;
			}
			var i = sum(100);
			alert(i);
			
			//递归的核心1:鸿沟(临界值)
			function sumDg(n){
				if(n==1){
					return 1
				}else{
					return n + sumDg(n-1);
				}
			}
			alert(sumDg(100));
			
			
			
			//案例:求菲不拉切序列  1   1   2   3   5   8   13   21 
			//求第N项值
			function dg(n){
				if(n==1 || n == 2){
					return 1;
				}else{
					return dg(n-1) + dg(n-2);
				}
			}

JS中的对象

    在JavaScript中,对象属于复杂数据类型,
                    它是由属性和方法组成的一个对象。
                    
                    属性是指对象的特征。
                    方法是指对象的行为。

下面以学生的特征和行为为例进行说明。
					学生的特征:姓名、年龄和性别,这些特征可以用对象的属性来表示。
					学生的行为:打招呼、唱歌、写作业,这些行为可以用对象的方法来表示。
				*/
			   //将10个学生的成绩输出在页面上。
				var arr  = [1,2,32,543,65,35,35,654,46,31];
				for(var i = 0 ;i<arr.length;i++){
					if(i==arr.length-1){
						document.write(arr[i] );
					}else{
						document.write(arr[i] + ',');
					}
				}
				
				document.write("<hr>");
					
			   //将10个学生的全部信息(id  name  age  sex)输出在页面上。
			   //传统的思路:定义40个变量 或者4个数组 或者二维数组等等
			   //按照对象的思想:10个学生理解10个对象  将10个对象放在一个数组里面即可
			  var s1 = {id:1001,name:"张三1" , age:18};
			  var s2 = {id:1002,name:"张三2" , age:18};
			  var s3 = {id:1003,name:"张三3" , age:18};
			  var s4 = {id:1004,name:"张三4" , age:18};
			  var s5 = {id:1005,name:"张三5" , age:18};
			  var s6 = {id:1006,name:"张三76" , age:18};
			  var s7 = {id:1007,name:"张三7" , age:18};
			  var s8 = {id:1008,name:"张三8" , age:18};
			  var s9 = {id:1008,name:"张三9" , age:18};
			  var s10 = {
				  id :10010,
				  name:"张三",
				  age:20,
			  };
			  
			  var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
			  // for(var i = 0 ;i<arr.length;i++){
			  // 	if(i==arr.length-1){
			  // 		document.write(arr[i] );
			  // 	}else{
			  // 		document.write(arr[i] + ',');
			  // 	}
			  // }
			  //注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
			  // for(var i = 0 ;i<arr.length;i++){
			  // 	if(i==arr.length-1){
			  // 		document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
			  // 	}else{
			  // 		document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
			  // 	}
			  // }
			  //以上写法较为麻烦
			  
			  for(var i = 0 ;i<arr.length;i++){
				  for(var sx in arr[i]){
					  document.write(arr[i][sx]);
				  }
				  document.write("<br>")
			  }
			   
			</script>
		

如何创建JS对象

//判断一个变量是否为对象的小技巧:通过console.log打印.
            //如果打印的是一行字符串 就说明是基本数据类型
            //如果打印的是一个可以折叠的数据 就表示对象
            // var a = 11;
            // console.log(a);
            // var arr = [1,2,3,4];
            // console.log(arr);

如何创建一个JS的对象:
                方法1:

使用对象的字面量创建对象(理解为直接赋值)
                例如:var arr = [1,2,3];,//静态声明数组 字面量创建
                就是用大括号“{}”来标注对象成员,
                每个对象成员使用键值对的形式保存,即 “key: value”的形式。
                多个成员通过逗号隔开
                键指的就是独一无二的属性   
            */

 // var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
          // //其中键可以选择性的加引号
          // console.log(student1);
          // //如何访问对象里面的值的方法1:  通过对象名.属性名即可
          // console.log(student1.id + "~" + student1.name + "~" + student1.age );
          // //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
          // // console.log(student1.sex-sex);这行代码是报错的
          // //访问对象里面的值的方法2:通过对象名[属性名]
          // console.log(student1['sex-sex']);
          // console.log(student1['name']);

  //创建对象的补充:

如果一开始只知道有对象,但是不知道它有什么属性或属性值,
           //那么可以先创建一个空对象壳子
           // var s123 = {};
           // //后续再声明属性的同时进行赋值
           // s123.id = 123;
           // s123.name = "Lisi";
           // s123.age = "男";
           // console.log(s123.id);//123
           // console.log(s123.dasd);//undefined

 //创建对象的方法2:


第一步:创建对象的函数(想象成Java的构造函数)
           // function Person(id,name,age){
              //  this.id = id;
              //  this.name = name;
              //  this.age = age;
           // }
           // //第二步:new对象
           // var p1 = new Person(123,"王五" , 20);
           // console.log(p1);
           
           //使用场景:如果对象很多 就用方法2   反之方法1

  //补充:对象由:属性和方法


           // var s1 = {
              //  id :11,
              //  name:"张三",
              //  age :18,
              //  study : function(){
                 //   alert("成功调用了这个对象的这个方法");
              //  }
           // };
           
           // alert(s1.id);
           // s1.study();

function Person(id,name,age){
                          this.id = id;
                          this.name = name;
                          this.age = age;
                       this.eat = function(){
                           alert("我吃拉面");
                       }
           }
           //第二步:new对象
           var p1 = new Person(123,"王五" , 20);
           p1.eat();

 
//创建对象的方法3:


/如果谁不知道给对象取什么名字,就叫做Object
           var o = new Object();
           o.id=1231;
           o.name="李四";
           console.log(o);

如何遍历一个对象

// var arr = [1,2,4,3];
			// console.log(arr);
			
			var s10 = {
							  id :10010,
							  name:"张三",
							  age:20,
							  sex:'男',
							  height : 188,
							  weight :200
			};
			// console.log(s10);
			
			//由于直接输出s10将只会显示object我们需要内部的属性值/
			//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
			//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
			//学习:如何遍历对象:语法如下:
			// for(var i = 0;i<a10.length;i++){
			// 	//错误的写法:1.对象的键并不是012  其次对象并没有长度
			// }
			
			//i表示对象的下标(属性)    s10表示遍历的对象 
			for(var i  in s10){
				console.log(s10[i]);
			}

值对象和引用对象

//JS的参数传递 也分为值传递和引用传递
			var a = 111;
			var b = "你好";
			var c = true;
			var d = [1,2,3];
			
			function change(a,b,c,d){
				a = 222;
				b = "我好";
				c = false;
				d[0] = 123;
			}
			
			change(a,b,c,d);
			
			console.log(a);//111
			console.log(b);//你好
			console.log(c);//true
			console.log(d[0]);//123
			
			


           


      

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值