JS基础4_对象/数组

3.对象

         对象：是引用数据类型，是一组属性和方法的集合。

（1）JS中的对象

         内置对象：（JS提供的）、宿主对象：（根据JS不同的执行环境来划分）、自定义对象：（自己创建的对象）

（2）自定义对象：

         对象字面（直接）量、内置构造函数、自定义构造函数

（3）对象字面量

         使用对象字面量创建对象：使用大括号 { }  创建空对象；

                                                                 属性名和属性值之间用冒号隔开；

                                                                 多组属性之间用逗号隔开；

                                                                 属性名引号可加可不加，如果含有特殊字符必须加引号

//练习：创建一个人对象，添加姓名，性别，年龄	//练习创建一个员工对象，包含编号、姓名、性别、生日、工资、所属部门编号
var person={name:'tom',sex:1,age:25}; console.log(person)

（4）访问对象属性

         对象.属性名      对象['属性名']  如果属性名不加引号，会认为是变量

         可以添加之前不存在的属性  对象.属性名=值   对象['属性']='值'

  (如果访问不存在的属性，返回值是undefined。)

//练习：创建一个电脑对象，包含的属性有屏幕尺寸、品牌、颜色、内存大小；获取品牌的属性值，修改颜色的属性值，添加产地属性

var computer={size:22,brand:'asus',color:'block',memory:'8G'}; console.log(computer.brand); computer.color='red';   //修改属性值 computer.madeIn='china';  //添加不存在的属性 console.log(computer);

 

 

 

 

 

（5）内置构造函数创建对象

         new Object()  //创建一个空对象O字母大写     需要单独添加每一个属性

         对象.属性值='属性值'        对象.['属性值']='属性值'

//练习：使用内置构造函数创建用户对象，包含编号、用户名、密码、邮箱、手机

var user= new Object(); user.id=1; user['name']='anny'; user.pwd='1234'; user['emal']='12@anny'; user.phone=13122223333; console.log(user);

（6）遍历对象中的属性

         访问对象中的每一个属性（访问所有属性）

for(var key in 对象){   key   对象中每个属性名   对象[key]  通过属性名找对应的属性值 }

//练习：创建对象，包含若干个成绩属性，遍历对象中的属性获取总成绩.

var score={chinese:85,math:90,english:85,physical:86}; var sum=0;   //提前声明sum用于保存总和 for(var key in score){          sum+=score[key]; } console.log(sum);

 

（7）对象中的方法

         方法也称成员方法，对应的是一个匿名函数

var person={   name:'jerry',   say:function(){  //say就是成员方法     this.name // this指代当前的对象   } } person.say();//调用成员方法

var person={name:'tom',sex:'男',age:25,        //成员方法        say:function(){     console.log('我的名字叫'+this.name);        console.log('我的名字叫'+person.name); }}; person.say(); //调用成员方法

练习：创建一个圆对象，包含半径、圆周率属性；添加获取面积和获取周长的方法分别返回对应的值。

尝试可构造函数创建对象，并添加属性和方法

var circle={r:10,PI:3.14,          area:function(){          console.log('面积是'+this.r*this.r*this.PI);},          grith:function(){          console.log('周长是'+this.r*this.PI*2);          }}; circle.area(); circle.grith();

//构造函数方法 var circle=new Object(); circle.r=10; circle.PI=3.14; circle.getArea=function(){   return this. this.r*this.r*this.PI;}; circle.getLength=function(){   return this.r*this.PI*2;}; console.log('面积是'+circle.getArea()); console.log('面积是'+circle.getLength());

（8）检测对象中是否含有属性

         对象.属性名 === undefined      true——>不存在 ； false——>存在

    '属性名'  in 对象              true——>存在 ；  false——> 不存在

    对象.hasOwnProperty('属性名')    true——>存在 ； false——> 不存在

 

4. 数组

         数组：由多个元素组成的集合，每个元素就是一个数据

1 创建数组

（1）数组字面量

    [元素1,元素2,元素3,.....]                  var a=[81,92,73,84];

 

（2）内置构造函数

         new Array(元素1,元素2,元素3,....)  

    new Array(3)  初始化元素个数为3，后期可以添加更多元素

var car2=new Array('白马','黑马','宝马','飞马'); console.log(car2);

var car=new Array(2); car[0]='A'; car[1]='B'; console.log(car);

（3）访问数组中的元素

         数组[下标]   ——>   下标从0开始，第一个元素的下标是0，最后一个元素下标是长度-1

（4）数组的长度

         数组.length       可以获取到数组中的元素个数

  在数组的末尾添加元素   ——> 数组[数组.length]=值

2.数组的分类

         数组的分类可以分为：索引数组和关联数组

         索引数组：以0以上的整数作为下标

         关联数组：以字符串作为下标，只能单独的添加元素

3.数组遍历

（1）for-in

for(var key in 数组){   key 要遍历的数组元素的下标(数字也可以是字符串)       数组[key] 获取下标对应的元素 }

         PS：既可以遍历关联数组，也可以遍历索引数组

（2）循环    for、while、do ...while......

for(var i=0;i<数组.length;i++){   i代表下标   数组[i] 代表下标对应的元素 }

         PS：循环只能遍历索引数组，无法遍历关联数组。

 

练习：创建数组，包含多个学生的成绩，获取总成绩
ar score=[80,90,95,100,85]; var sum=0; for(var key in score){          sum+=score[key]; } console.log(sum);	var score=[80,90,95,100,85]; for(var i=0,sum2=0;i<score.length;i++){          sum2+=score[i]; } console.log(sum2);

//练习：创建数组，包含多个姓名，把tom全部改为‘汤姆’，tom的次数	var arr=['jake','tom','anny','tom','salary','tom']; for(var i=0,count=0;i<arr.length;i++){          if(arr[i]=='tom'){                    //arr[i]='汤姆';                    count++;          } } //console.log(arr); console.log(count);
var arr=['jake','tom','anny','tom','salary','tom']; for(var i=0;i<arr.length;i++){          if(arr[i]=='tom'){                    arr[i]='汤姆';          } } console.log(arr);

 

4.数组API(方法)

         API (application programming interface) 应用程序编程接口，预定义好的一些方法或函数

                            API  作用--参数--返回值

toString()	将数组中的元素按照逗号分隔组合成字符串
join('-')	将数组中的元素按照指定的字符分隔转换为字符串，默认是逗号。
concat(arr1,arr2,...)	拼接多个数组
slice(satrt,end)	截取数组中的元素，start开始的下标，end结束的下标，不包含end本身，如果是负数表示倒数；返回一个数组
splice(start,count,value1,value2..)	删除数组中的元素，start开始的下标，count删除的数量，value表示删除后补充的元素；返回删除的元素，原数组会发生变化
reverse()	翻转数组中的元素
sort()	对数组中的元素排序，默认是按照Unicode码从小到大 对数字排序     sort(function(a,b){      /回调函数   return a-b;   //从小到大   //return b-a;    //从大到小 })
push()	在数组的末尾添加元素，返回添加后的长度，原数组会发生变化
pop()	删除数组末尾的一个元素，返回删除的元素，原数组会发生变化
unshift()	在数组的开头添加元素，返回添加后的长度
shift()	在数组的开头删除一个元素，返回删除的元素

//练习：创建数组a~g，每个字母是一个元素，分别截取cd,f,b,把截取的结果拼接成一个新的数组	//练习：创建数组，a~h,每个字母是一个元素，删除d、e，替换f为m，在下标为1的位置插入字母z
var arr=['a','b','c','d','e','f','g']; var arr2=arr.slice(2,4); console.log(arr2);  //cd var arr3=arr.slice(-2,-1); console.log(arr3);  //f var arr4=arr.slice(1,2); console.log(arr4);  //b console.log(arr2.concat(arr3,arr4));  //cdfb	var arr=['a','b','c','d','e','f','g','h']; console.log('删除d、e:'+arr.splice(3,2)); console.log(arr); // [ 'a', 'b', 'c', 'f', 'g', 'h' ] console.log('替换f为m:'+arr.splice(3,1,'m')); console.log(arr); // [ 'a', 'b', 'c', 'm', 'g', 'h' ] console.log('在下标为1的位置插入字母z:'+arr.splice(1,0,'z')); // [ 'a', 'z', 'b', 'c', 'm', 'g', 'h' ] console.log(arr);

练习：遍历数组，实现翻转数组中的元素

练习：使用冒泡排序，将数组中的数字从小到大排序（循环嵌套）

var arr=[1,2,3,4,5,6]; var arr1=[]; for(var i=0;i<arr.length;i++){          arr1[i]=arr[arr.length-1-i]; } console.log(arr1);

var arr=[31,21,5,2,36,6,99,4,101,2]; //外层循环：控制比较轮数 从0开始，次数小于长度-1 for(var i=1;i<arr.length;i++){          //内层循环：控制每轮比较次数  数组长度-i          for(var j=0;j<arr.length-i;j++){          //如果当前的元素(j)大于下一个元素(j+1)，则交换位置                    if(arr[j]>arr[j+1]){                             var t=arr[j];                             arr[j]=arr[j+1];                             arr[j+1]=t;                    }        }   } console.log(arr);

 

5.二维数组

         二维数组：数组中的每个元素也是数组    var arr=[ [], [], []... ]

  访问二维数组中的元素      arr[下标][下标];

 

数组=null；//数组赋值为null，不再指向任何一个堆内存数据，就会释放堆内存空间