对象
一、什么是对象
思考：对象是什么，有什么用？
概念（本质）：对象叫object,是JS中的一种数据类型，是一种无序的数据集合。
作用：
1.用于描述某种事物集合，统一归类成一个类，比如一个人有姓名，年龄，爱好等。
2.例如描述我自己的信息：
静态特征：我的姓名，我的年龄，我的身高等（用数字，字符串，数组，布尔类型等表示）
动态特征：我的行为，我会干什么？（用函数表示）
特征：
1.无序数据的集合
2.可以详细描述某个事物
二、对象的使用
1.对象的声明语法和访问
代码：
<script>
//person 就是对象名
let person = {}
</script>
<script>
let person = {
name : `黄某`,
age : 22,
sex : `男`
}
console.log(person.name)
console.log(person["age"])
</script>
2.对象的属性和方法
对象是由属性，方法组成的
1.属性：可以叫做信息或者一些特征（名词）例如姓名年龄等
<script>
let goods = {
name : `小米手机`,
price : 1999,
size : `大尺寸`
}
// 这是开发中常用写法
// document.write(`手机名称:${goods.name}价格:${goods.price}屏幕大小:${goods.size}`)
// 第二种写法
document.write(`手机名称:${goods[`name`]}格:${goods[`price`]}屏幕大小:${goods[`size`]}`)
</script>
注意点：
1.属性名和值 都是要用英文的 : 分隔。
2.多个属性之间使用英文逗号 , 分隔。
3.属性其实可以理解为依附于对象上的变量 如上goods是变量，里面的是属性。
4.属性写法有两种：对象名.属性值 / 对象名[”属性值“]。
5.如果访问一个不存在的属性，输出undefined
2.方法：就是功能和行为（动词），也可以理解为函数。如打电话 做什么事情
<script>
let person = {
name : `黄某`,
sayHi : function (what) {
document.write(what)
return `我是 对象的问候`
}
}
person.sayHi
// 这样输出不会有任何效果，因为函数的使用 必须有（）
// person.sayHi()
// 如果在括号内写实参，那么函数的括号内必须要有形参
person.sayHi(`我是实参<br>`)
// 函数是有返回值的
let result = person.sayHi(`我输出对象问候,看控制面板`)
console.log(result)
</script>
注意点：写在对象内的函数，注意函数的基本使用规则，都是一样的只是外面多了一个对象。
知识细节点：
1.当中括号内没有加字符串，则表示是一个变量。那么就要找有没有这个变量
2.如果没有这个变量，则报错！！！
3.区分好这个知识细节和访问一个不存在的属性的不同点！！！
<script>
let color = `五档路飞`
let username = `color`
let person = {
username : `五档路飞`,
color : `yellow`
}
console.log(person.color)
console.log(person[`color`]);
console.log(person[color]);//输出undefind /= person[`五档路飞`]没有这个值
console.log(person[username]);//输出yellow /= person[`color`] 就是yellow
console.log(person[noone]); // 我报错，没有这个变量
</script>
三、操作对象
本质：其实和数组一样，有增删改查四个操作方式。
1.对象的查询和修改
<script>
// 新增
let person = {}
person.user = `普通人`
console.log(person);
// 修改
let person1 = {
user:`程序员`
}
person1.user = `普通人`
console.log(person1);
// 总结：新增和修改的区别只在于 对象内有没有属性，写法相同
// 新增一个方法
let person2 = {}
// 这是固定写法！！！
person2.sayHi = function () {
document.write(`我是新增的一个方法`)
}
// 调用函数
person2.sayHi()
</script>
2.对象的删除
语法：delete 对象名.属性名
代码：
<script>
let person = {
userName : `海贼王`
}
delete person.userName
</script>
四、遍历对象
语法：遍历对象与数组不同，没有长度和有规律的下标
注意点：
1.for in 遍历的是对象 ，不用于遍历数组
2.K是属性名 对象名[k]是属性值
代码：
<script>
let person = {
age : `18`,
name : `黄某`,
height : 180
}
// 遍历对象 语法：for in
// key 是要遍历的属性名
for (let k in person) {
console.log(k) //K = 属性名 表示的是变量
// 注意不能写成person.k /person[`k`]变成去对象中找叫 K属性名
console.log(person[k]) // 因为K是变量 就是此时 K = 如`age` 打印的是属性值
}
</script>
遍历数组对象案例
<script>
let students=[
{name:'小明', age:18, gender:'男', hometown:'河北省'},
{name:'小红', age:19, gender:'女', hometown:'河南省'},
{name:'小刚', age:17, gender:'男', hometown:'山西省'},
{name:'小丽', age:18, gender:'女', hometown:'山东省'}
]
let html = `<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
for (let index = 0; index <students.length; index++) {
console.log(students[index])
html += `<tr>
<td>${index+1}</td>
<td>${students[index].name}</td>
<td>${students[index].age}</td>
<td>${students[index].gender}</td>
<td>${students[index].hometown}</td>
</tr>`
}
html += `</table>`
document.write(html)
</script>
思考错误点：错误以为刚学习了遍历对象只能用for in ！没有综合考虑需求。
解题思路：
1.首先把静态布局出来
2.分析布局中哪个部分需要遍历（循环）的
3.用之前柱形图案例学过的拼接
4.带入动态数据
代码优化：
<script>
let students=[
{name:'小明', age:18, gender:'男', hometown:'河北省'},
{name:'小红', age:19, gender:'女', hometown:'河南省'},
{name:'小刚', age:17, gender:'男', hometown:'山西省'},
{name:'小丽', age:18, gender:'女', hometown:'山东省'}
]
let html = `<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
// 从大到小分析结构 先要循环整个数组
for (let index = 0; index < students.length; index++) {
html += `<tr><td>${index+1}</td>` //他不需要进行对象遍历 只要循环就行
//遍历 变化的对象 简化了代码 前提 数组中对象是相同类型
for (let key in students[index]) {
html += `<td>${students[index][key]}</td>`
}
html += `</tr>`
}
html += `</table>`
document.write(html)
</script>
优化：用了for in 遍历了对象。优化了代码结构
五、内置对象
1.内置对象是什么
本质：是JS中内部为我们提供的对象，包含各种属性和方法给开发者使用
举例：document.write(); console.log()等
2.内置对象math
其实就是内置的数学运算的对象，包含各种数学运算方法
<script>
// 生成0-1随机数 包含0 不包含10
console.log(Math.random())
// 最大值
console.log(Math.max(1,234,45,345)); //345
// 向上取整
console.log(Math.ceil(0.001));//1
// 幂运算
console.log(Math.pow(2,2));//2*2
console.log(Math.pow(2,3));//2*2*2
// 绝对值
console.log(Math.abs(-23));//23
</script>
3.生成任意范围随机数
思考：
<script>
// parseInt是向下取整 不用
console.log( Math.round(Math.random()*10+1) ); //0-10
console.log(Math.round(Math.random()*5+5) ) // 5-10
// n-m的随机数 *（最大值-最小值）+ 最小值
console.log(Math.round( Math.random()*(M-N)+N ));
</script>
<script>
//把函数封装
function geiRandom(min,max) {
return Math.round( Math.random()*(max-min)+min )
}
console.log(geiRandom(7,12))
</script>
随机数补充
案例，随机点名切不重复
<script>
let arr =[`赵云`, `黄忠`, `关羽`, `张飞`, `马超`, `刘备`, `曹操`]
function geiRandom(min,max) {
return Math.round( Math.random()*(max-min)+min )
}
while (arr.length>0) {
let index=geiRandom(0,arr.length-1)
console.log(arr[index])
arr.splice(index,1)
}
</script>
拓展-基本数据类型和引用数据类型
1.概念：
1.简单的类型叫基本数据类型或值类型
如：let num=100 等字符串，布尔，undefined，null
2.复杂类型又叫引用类型
如：object，array，date等
2.底层原理
栈的细节思路
堆的细节思路
<script>
let num = 100 // 基本数据类型
let num2 =num
num2 = 10000
console.log(num);//100 互不影响
let person = {username:`悟空`} // 引用数据类型
let person2 = person
person2.username=`八戒`
console.log(person);//也是八戒 两个数据地址都一样 所以修改新的 会受影响
</script>
