1.对象介绍
对象作用：一个变量存储多个数据
对象与数组异同点
相同点：一个变量存储多个数据
不同点：
数组有序存储：元素与下标 一 一对应
对象无序存储：属性名与属性值 一 一 对应（键值对）
//需求 ： 存储一个人的信息（name 海海, age ：18 , sex ： ‘男’） //1.使用三个变量存储 //弊端 : (1)代码冗余 （2）不好维护 let name = '海海'; let age = 18; let sex = '男'; //2.使用数组存储 ： 一个变量存储多个数据 //弊端 ： 代码阅读性不高 let arr = ['海海',18,'男']; console.log(arr); //3.使用对象 ： 一个变量存储多个数据，阅读性更高 let object = {name:'海海',age:18,sex:'男'}; //let object = {'name':'海海','age':18,'sex':'男'}; //这个也可以 console.log(object); //点语法取值 ： console.log(object.name); /* 数组和对象的异同点 相同点：都是复杂数据类型，一个变量存储多个数据 不同点：存储方式不一样 数组 ： 连续存储，元素与下标一一对应 对象： 不连续存储，属性名和属性值一一对应 */
2.对象取值与赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 1.对象作用 ： 一个变量存储多个数据 a:数组和对象的异同点 相同点：都是复杂数据类型，一个变量存储多个数据 不同点：存储方式不一样 数组 ： 连续存储，元素与下标一一对应 对象： 不连续存储，属性名和属性值一一对应 2.对象语法 a.声明： let 对象名 = {属性名:属性值} b.取值： 对象名.属性名 属性存在，则获取属性值 属性不存在，则获取undefined c.赋值： 对象名.属性名 = 值 属性存在，则修改属性值 属性不存在，则动态添加属性 */ //1.声明语法 ： let 对象名 = { 属性名:属性值，属性名:属性值 }; let kid = { name:'海海', age:18, sex:'男' }; //2.取值语法 : 点语法 ： 对象名.属性名 //2.1 属性名存在 ，则是获取属性值 console.log(kid.sex);//男 //2.2 属性名不存在,则获取undefined console.log(kid.bgf);//undefined //3.赋值语法 : 对象名.属性名 = 值 //3.1 属性名存在， 则是修改属性值 kid.name = '海海'; console.log(kid); //3.2 属性名不存在， kid.hobby = '李白'; console.log(kid); //4.对象取值还有一种方式：字符串语法 console.log(kid['hobby']); </script> </body> </html>
3.对象属性补充
- 对象的属性名字也可以为数字（或数字字符串），但是一般不建议这么使用（数字使用数组更效果更好）
- 数字属性的取值和赋值访问需要使用字符串语法
<script> //1.数字声明对象属性 let obj = {0:1,2:2}; //不会自动从0开始，而且不需要连续 //2.数字属性的访问：字符串语法访问 console.log(obj[0]); //1 //console.log(obj.0); //语法错误 //3.动态添加数字属性 obj[5] = 5; console.log(obj); //{0:1,2:2,5:5} </script>
4.复杂对象
<script> /* 1.对象作用 ： 一个变量存储多个数据 a:数组和对象的异同点 相同点：都是复杂数据类型，一个变量存储多个数据 不同点：存储方式不一样 数组 ： 连续存储，元素与下标一一对应 对象： 不连续存储，属性名和属性值一一对应 2.对象语法 a.声明： let 对象名 = {属性名:属性值} b.取值： 对象名.属性名 属性存在，则获取属性值 属性不存在，则获取undefined c.赋值： 对象名.属性名 = 值 属性存在，则修改属性值 属性不存在，则动态添加属性 3.对象初始化 let 对象名 = { 属性名:属性值 } */ // // /* 1.声明空对象 ： let 对象名= {}; 2.对象的初始化 : 声明的时候赋值 语法： let 对象名 = { 属性名:属性值 } 3. 函数有两种称呼 函数 ： 方法 ：有归属感。 如果对象的属性值是函数，习惯上称之为对象的方法 */ </script>
5.对象遍历
- 挨个读取对象中的每个属性：属性名和属性值
- 特定语法
for(let 属性名变量 in 对象变量){ //属性名就是对象中的每一个属性 //属性值通过：对象[属性名]访问：属性名是一个变量，不能使用. }
<script> let person = { name:'海海', age: 18, sex: '男' }; /* 1.对象的遍历 ： 获取对象的每一个属性值 2.复习数组的遍历语法 固定的for循环： for(let i = 0;i<数组.length;i++){ 数组名[i] } 3.对象无法使用数组的遍历语法，对象的遍历有专用的for循环结构 for-in循环 ： for(let key in 对象名){ 对象名[key] } *** 注意点： 只能使用字符串语法取属性值 *** */ for(let key in person){ console.log(key);//属性名字符串 //获取属性值 // console.log(person.key); // console.log(person['key']); console.log(person[key]); }; //遍历对象一般是遍历复杂对象：即对象内部套对象，每个内部对象都是一组数据，简单一维对象都是直接访问，不进行遍历 </script>
6.方法中的this关键字
this是对象内部的变量：代表调用者对象
<script> /* this : 谁调用我，我就指向谁 */ let banzhang = { name: '海海', age: 18, sex: '男', sayHi:function(){ /* 弊端 ： 对象名变化，代码也要修改 */ // console.log('你好呀，我的名字叫' + banzhang.name + '我的年龄是' + banzhang.age ); console.log('你好呀，我的名字叫' + this.name + '我的年龄是' + this.age ); } }; banzhang.sayHi(); banzhang.name = '小陈'; banzhang.sayHi(); //普通函数的归属为window对象，所以普通函数内部的this代表window对象的调用者 function fn(){ console.log(this); //Window } fn(); </script>
7.对象的另一种声明方式
对象可以使用Object对象进行实例化得到
<script> //1.（最常用）简洁方式： let 对象名 = { 属性名：属性值 } let p1 = {name:'海海'}; //2.构造函数： //构造函数：如果调用一个函数使用了new关键字，这个函数成为构造函数 let p2 = new Object( {name : '海海'} ); /*这两种方式没有任何区别，只是语法不同而已*/ console.log ( p1 ); console.log ( p2 ); </script>
