JavaScript
对象
一、什么是对象
1.对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合
①用来描述某个事物，例如描述一个人 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能 ②如果用多个变量保存则比较散，用对象比较统一 比如描述 班主任 信息： 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示 动态行为 (点名, 唱, 跳, rap) => 使用函数表示
2.对象的特点：无序集合、可详细的描述描述某个事物
二、对象使用
1.目标：掌握对象语法，用它保存多个数据
2.对象声明语法
let 对象名 = {}
//声明一个person的对象
let person= {}
3.对象的基本使用
<script>
let person = {
herName: "dasj",
age: 24,
height: "155cm",
};
// 打印一下 这个数据的类型
console.log(typeof person);
// 打印一下 这个数据
console.log(person);
</script>
4.访问单个属性写法:
①对象名.属性名
②对象名['属性名']
<script>
// 对象名 goods 属性名 name price size
let goods = {
name: "小米",
price: 1999,
size: "XIAOMI-13",
};
// 访问单个属性写法 对象名.属性名
console.log(goods.name); // 小米
console.log(goods.price); // 1999
console.log(goods.size); // XIAOMI-13
console.log(goods.siez); // 如果访问一个不存在的属性siez 会提示undefined
document.write(
`品牌：${goods.name} <br>价格：${goods.price} <br>型号：${goods.size} `
);
// 访问单个属性写法 对象名['属性名']
console.log(goods["name"]); // 小米
console.log(goods["price"]); // 1999
console.log(goods["size"]); // XIAOMI-13
</script>
③属性访问案例
<script>
let name = "color";
let person = {
name: "海贼王",
color: "red",
};
// 访问它
console.log(person.name); //海贼王
console.log(person["name"]);
// person["name"]
console.log(person["color"]); // yellow
console.log(person[name]); // yellow 中括号里 代码没有加字符串 表示一个变量
console.log(person["color"]); // yellow
console.log(person[color]); // 报错 color是一个变量 没有这个变量 报错
console.log(person.gafsad); //undefined
</script>
5.对象有属性和方法的组成
①属性：信息或叫做特征（名词），比如 手机尺寸、颜色、重量等
②方法：功能或叫做行为（动词），比如 手机打电话 发短信 玩游戏等
let 对象名 = {
属性名： 属性值，
方法名： 函数
}
<script>
let person = {
name: "andy",
sayHi: function (msg) {
document.write(msg);
return "来自person的问候";
},
};
// 方法 其实是一个函数
// 函数 是接收参数
// 函数 有返回值
// 函数的使用 函数（）
// 对象访问方法 对象名.方法（）如 下
person.sayHi("大家好<br>");
person.sayHi("hello<br>");
let result = person.sayHi("hello123");
console.log("=========");
console.log(result);
</script>
6.属性需注意事项
①属性成对出现，包括属性名和属性值，以 ： 隔开
②属性之间 以 , 隔开
③属性是依附在对象上的变量，外面叫做变量 对象内称之为属性
④属性名可使用 “ ” 或者 ‘’ ，一般情况下可省略，除非名称遇见特殊符号 如 空格 中横线等
三、操作对象
1.对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查
①查（重新赋值）： 对象名.属性名 、 对象名['属性名'] 、 对象名.方法（）
②改（重新赋值）： 对象名.属性名= 值 、 对象名.方法（）= function（） {}
③增（对象添加新的数据）：对象名.新属性名称 = 新值
<script>
// let person = {
// name: "程序猿",
// };
// 增加一个属性
// person.name = "普通人";
// 修改
// person.name = "普通人";
// 增加属性和修改属性都是同样的写法
// 如果该属性的对象没有 表示新增
// 如果该属性的对象存在 表示修改
// 新增方法
let person = {};
// 新增一个方法 匿名函数 固定写法
person.sayHi = function () {
document.write("这个是我们新增的sayHi方法");
};
person.sayHi(); // 调用方法
</script>
④删（删除对象中的属性）：delete 对象名.属性名
<script>
// 声明一个对象
let person = {
username: "海贼王",
};
// 不想看了 给删除掉
delete person.username; // 删除对象中的 username属性
console.log(person.username); // undefined
</script>
四、遍历对象
1.目标：能够遍历输出对象里面的元素
2.遍历对象 ①对象没有像数组一样的length属性,所以无法确定长度
②对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
3.语法
let 对象名 = {
属性名1：属性值1，
属性名2：属性值2，
属性名3：属性值3，
方法：函数名（）{}
}
// k 可理解为 属性名的数组
for (let k in 对象名) {
console.log(k) // 打印属性名
console.log(对象名[k]) // 打印属性值
}
4.案例
①案例一
<script>
let person = {
name: "adada",
age: 18,
height: 180,
};
// 遍历对象 for in
for (let aa in person) {
// console.log(aa) //查找变量aa
// console.log(person.aa) // 查找对象中 属性名'aa'
// console.log(person['aa']]) // 查找对象中 属性名'aa'
// aa 表示变量 aa='name'
// console.log(person[aa]);
//person['name'] // aa 表示变量 aa='name'
console.log(`属性名：${aa} 属性值：${person[aa]}`);
}
</script>
②案例二---对象---学生列表
<script>
// 填充的内容 由数组构成
let students = [
{ name: "小明", age: 18, gender: "男", hometown: "河北省" },
{ name: "小红", age: 19, gender: "女", hometown: "河南省" },
{ name: "小刚", age: 17, gender: "男", hometown: "山西省" },
{ name: "小丽", age: 18, gender: "女", hometown: "山东省" },
];
//通过table标签 将固定部分表头确认，后通过遍历 将表格进行拼接
let tabltHTML = ` <table border="1" > <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>家乡</th> </tr> </thead> <tbody> `;
// 遍历生成 tr
for (let index = 0; index < students.length; index++) {
// 开头
tabltHTML += `<tr><td>${index + 1}</td> `;
// <td>${index + 1}</td>
// 对 对象 做 forin遍历 students[index]
for (let k in students[index]) {
// person[k] person = students[index]
let person = students[index]; // 数组中的每一个对象
// tabltHTML += ` <td>${students[index][k]}</td> `;
tabltHTML += ` <td>${person[k]}</td> `;
}
// 结尾
tabltHTML += `</tr>`;
}
tabltHTML += ` </tbody> </table>`;
document.write(tabltHTML);
</script>
五、内置对象
1.什么是内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用（已见得document、console也是内置对象）
2.内置对象Math:Math对象是JavaScript提供的一个“数学高手”对象,且提供了一系列做数学运算的方法，方法如下：
①random：生成0-1之间的随机数（包含0不包括1）------ Math.random(解析：返回一个随机数 包含0 不包含1) ②ceil：向上取整 ------ Math.ceil ③floor：向下取整 ------ Math.floor ④max：找最大数 ------ Math.max ⑤min：找最小数 ------ Math.min ⑥pow：幂运算 ------ Math.pow（解析：Math.pow(a,b),a为底数，b为指数，即a的b次方） ⑦abs：绝对值 ------ Math.abs
3.案例---生成任意范围的随机数
<script>
// 随机生成0-10的数字
console.log(Math.random() * 10);
// 随机生成5-10的数字
console.log(Math.random() * 5 + 5);
//随机生成n-m的数字
let max = +prompt("请输入数字");
let min = +prompt("请输入数字");
console.log(Math.random() * (max - min) + min);
</script>
4.案例---随机点名器
①设置数组name，具有length长度,name[0]、name[1]...name[name.length-1]
②通过内置对象Math的数学算法分析：如范围区间内0-10，包含0 不包含10，若要其数值为10，需用到四舍五入round(Math..ceil)-------因此，需搭配任意数random------Math.round(Math.random()
③将数组看做一个区间（0---name.length-1）,则区间内，任意值算法：Math.round(Math.random() *（name.length-1））
④根据需求，由于点名不能够重复，则需设置循环即数组长度>0,则可一直循环下去,添加.splice（）
<script>
let name = ["特等奖", "一等奖", "二等奖", "三等奖", "优秀奖", "谢谢参与"];
// 名字随机输出
// name[0]
// name[1]
// name[2]
// name[3]
// name[4]
// name[5] undefined
// 数组长度有关系
// 要计算 0 - 5 随机数
// let num = Math.round(Math.random() * 5);
// console.log(name[num]);
function getNum(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
// 获取一次 随机数
// let num = getNum(0, name.length - 1);
// console.log(name[num]);
// // 删除数组中某一个元素
// name.splice(num, 1);
//let num2= getNum(0, name.length - 1);
//console.log(name[num2]);
//name.splice(num, 1);
// console.log(name) 输出看是否已经删除
//死循环 只要数组长度>0 代码将重复执行
while (name.length > 0) {
let num = getNum(0, name.length - 1);
console.log(name[num]);
document.write(`<p>${name[num]}</p>`);
name.splice(num, 1);
}
</script>
六、基本数据类型和引用数据类型
1.目标：了解基本数据类型和引用数据类型的存储方式
2.简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
①值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
②引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
3.堆栈空间分配区别
①栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈---------简单数据类型存放到栈里面
②堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 ---------引用数据类型存放到堆里面
4.复杂类型的内存分配!
①引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等 ②引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
