开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第4天，点击查看活动详情”
JavaScript 基础 - 对象
知道对象数据类型的特征，能够利用数组对象渲染页面
- 理解什么是对象，掌握定义对象的语法
- 掌握数学对象的使用
对象
对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
语法
声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
<script>
// 声明字符串类型变量
let str = 'hello world!'
// 声明数值类型变量
let num = 199
// 声明对象类型变量，使用一对花括号
// user 便是一个对象了，目前它是一个空对象
let user = {}
</script>
属性和访问
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成 对出现的，包括属性名和值，它们之间使用英文
:分隔 - 多个属性之间使用英文
,分隔 - 属性就是依附在对象上的变量
- 属性名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<script>
// 通过对象描述一个人的数据信息
// person 是一个对象，它包含了一个属性 name
let person = {
name: '小明', // 描述人的姓名
age: 18, // 描述人的年龄
stature: 185, // 描述人的身高
gender: '男', // 描述人的性别
}
</script>
【增】
扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。
<script>
// 声明一个空的对象（没有任何属性）
let user = {}
// 动态追加属性
user.name = '小明'
user['age'] = 18
// 动态添加与直接定义是一样的，只是语法上更灵活
</script>
【删】
删除对象中的数据 语法：delete对象名.属性
<script>、
let obj = {
uname:'jasmine',
age:'22',
gender:'女',
address:'北京朝阳'
}
delete obj.address
console.log(obj)
</script>
【改】
修改对象中的数据 语法：对象名.属性=新值
改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改
<script>、
let obj = {
uname:'jasmine',
age:'22',
gender:'女'
}
obj.age='18'
console.log(obj.age)
</script>
【查】
声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。
<script>
// 访问人的名字
console.log(person.name) // 小明
// 访问人性别
console.log(person.gender) // 男
// 访问人的身高
console.log(person.stature) // 185
// 或者
console.log(person['stature']) // 185
</script>
方法和调用
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文
,分隔 - 方法是依附在对象中的函数
- 方法名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，我称之为方法调用。
<script>
let person = {
name:'andy',
// 多个属性之间使用英文 , 分隔
sayHi:function(){ //可以有形参
document.write('hi~~')
}，
dance: function(){、
document.write('欢迎你~')
}
}
person.sayHi() //可以有实参
person.dance()
</script>
扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。
<script>
// 声明一个空的对象（没有任何属性，也没有任何方法）
let user = {}
// 动态追加属性
user.name = '小明'
user.['age'] = 18
// 动态添加方法
user.move = function () {
console.log('移动一点距离...')
}
</script>
注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。
null
null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。
遍历对象
for 遍历对象的问题：
-
对象没有像数组一样的length属性,所以无法确定长度
-
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
<script>
let obj = {
uname: 'Jasmine'，
age : 19，
gender : '女'
}
for(let k in obj) {
console.log(k) //结果=属性名'uname' 'age' 'gender'
console.log(obj[k]) //输出属性值 obj[k]
}
</script>
- 一般不用这种方式遍历数组、主要是用来遍历对象，因为 k 是 字符串
- for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
- 由于 k 是变量, 所以必须使用 [ ] 语法解析
- 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值
案例-遍历数组对象
需求：请把下面数据中的对象打印出来：
内置对象
回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。
除了 console 对象外，JavaScritp 还有其它的内置的对象
Math
Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。
属性
- Math.PI，获取圆周率
// 圆周率
console.log(Math.PI); //3.1415926
方法
| 方法名 | 含义 |
|---|---|
| random | 生成0~1之间的随机数 |
| ceil | 向上取整 |
| floor | 向下取整 |
| max | 找最大数 |
| min | 找最小数 |
| pow | 幂运算 |
| abs | 绝对值 |
JavaScript 数学 (w3school.com.cn)
- Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
// 如何生成N-M之间的随机数
function getRandom(N,M){
return Math.floor(Math.random()*(M-N+1))+N
}
console.log(getRandom(4,8))
案例-随机点名
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
- 利用随机函数随机生成一个数字作为索引号
- 数组[随机数] 生成到页面中
- 数组中删除刚才抽中的索引号
let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
let random =Math.floor(Math.random()*arr.length) //1.利用随机函数随机生成一个数字作为索引号
document.write(arr[random]) //2.数组[随机数] 生成到页面中
arr.splice(random,1) //3.splice(起始位置(下标), 删除几个元素)
console.log(arr)
- Math.ceil，数字向上取整
// 舍弃小数部分，整数部分加1
Math.ceil(3.4)
console.log(Math.ceil(3.4)) //4
- Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变
Math.floor(4.68)
console.log(Math.ceil(4.68)) //4
- Math.round，四舍五入取整
// 取整，四舍五入原则
Math.round(5.46539) //5
Math.round(4.849) //5
- Math.max，在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13) //24
- Math.min，在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21) //6
- Math.pow，幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
案例-猜数字游戏
需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字,三次机会猜出来
- 利用随机数生成一个数字
- 需要猜三次，所以需要三次的循环
- 因为条件是结果猜对了，就是判断条件退出，用while循环合适
- 内部判断可以用多分支语句
<script>
function getRandom (N,M) {
return Math.floor(Math.random()*(M-N+1)) +N
}
let random = getRandom(1,10)
let flag = true //开关变量
for(let i=0 ; i<=3 ; i++){
let num = +prompt('请输入1~10之间的一个数字：')
if(num>random){
alert('猜大了，继续加油')
}else if(num<random){
alert('猜小了，继续加油')
}else{
flag = false
alert('猜对啦，真厉害')
break// 退出循环
}
}
//写到for的外面
if(flag){
alert('次数已经用完')
}
</script>
生成随机颜色
需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
分析： 提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符,需要用到数组， let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
提示: rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字、
- 如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取 值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。
- 如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字 符串rgb(255,255,255)格式
<script>、
//1.自定义一个随机颜色函数
function getRandomColor (flag = true ) {
if(flag){
//3.如果是true 则返回#ffffff
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
// 利用for循环随机抽6次，累计到str里面
for(let i=1 ; i<=6 ; i++){
//每次要随机从数组里面抽取一个
// random是数组的索引号，是随机的
let random = Math.floor(Math.random()*arr.length)
str = str +arr[random]
}
return str
}else{
//4.否则是flase则返回rgb(255,255,255)
let r = Math.floor(Math.random()*256)
let g = Math.floor(Math.random()*256)
let b = Math.floor(Math.random()*256)
return `rgb(${r},${g},${b})`
}
}
//2.调用函数 getRandomColor(布尔值)
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())
</script>
