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>
?下一章：JavaScript入门第十六章（对象经典面试题）
|