red
red
1、什么是对象?
对象是JavaScript 里的一种数据类型;可以理解为是一种无序的数据集合;
用来描述某个事物,例如描述一个人信息
2、对象怎么声明?
let 对象名 = {}
例如:
//声明了一个person的对象
let person = {}
3、对象由哪几部分组成的?
属性和方法组成的。
```go
let 对象名 = {
属性名 :属性值,
方法名:函数
}
4、对象访问属性有哪两种方式
对象.属性
对象['属性']
5、对象有顺序吗?
没有
6、两种对象方式有什么不同?
点后面的属性名一定不要加引号
[]里面的属性名一定加引号
7、对象中的方法和属性有什么区别?
属性是静态的;方法是动态的
8、对象方法可以传递参数吗?
可以,跟函数使用方法基本一致。
操作对象
增删改查
查:直接 对象.属性
增 改 :
会去对象里面找是否有 sex 这个属性,如果有则更新值修改;如果没有这个属性,就直接新增属性
obj.sex = '男'
删:
//删除 了解
delete obj.uname
console.log(obj)
9、对象是如何声明和使用的?
1、用{}把一堆数据包起来
2、多个属性和方法之间用逗号隔开
3、console.log输出 方便查看对象里有哪些属性和方法
10、如何动态添加属性和方法?
1、对象如果有这个属性相当于重新赋值
2、对象如果没有这个属性相当于动态添加一个属性
遍历对象
1、对象没有像数组一元的length属性,所以无法确定长度
2、对象里面是无序的键值对,没有规律.不像数组里面有规律的下标。
let obj = {
uname : 'andy',
age : 18,
sex : '男'
}
for (let k in obj) {
console.log(k)//打印属性名
console.log(obj[k]) //打印属性值
}
11、遍历 对象用哪个语句?
for in
12、遍历对象中, for k in obj,获得对象属性是哪个?活得值是哪个?
获得对象属性是k
获得值是 obj[k]
13、内置对象math?
math对象是JavaScript提供的一个对象
如:random:生成0-1之间的随机数(包含0不包含1)
ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
14、生成任意范围随机数?
1、如何生成0-10的随机数?
Math.floor(Math.random()*(10+1))
2、如何生成5-10的随机数?
Math.floor(Math.random()* (5+1)) +5
3、如何生成N-M之间的随机数?
Math.floor(Math.random()* (M - N + 1))+N
**
15、之前用过的内置对象有
**
document.write()
console.log()
案例一 : 声明产品对象
// 声明产品对象
let goods = {
name: '小米10青春版',
num: '100012816024',
weight : '0.55kg',
address : '中国大陆'
}
// 对象['属性名']
document.write(goods['name'])
// 对象.属性名
document.write(`名字:${goods.name} ,产品号:${goods.num} 重量:${goods.weight} 产地:${goods.address}`)
案例二 调用方法名
let person = {
uname : '刘',
age : 18,
sex: '男',
//方法名:function(){}
sayHi: function() {
console.log('hi~')
},
mtv: function(s) {
console.log(s)
}
}
console.log(person.uname)
//调用函数名
person.sayHi()
// 实参有内容,形参要传参
person.mtv('无间道')
案例三 对象中的方法
//对象是有属性和方法组成的,那么属性和方法都要写在对象里面
let dh = {
// 属性
uname : '刘',
// 方法 方法名:function(){}
sing: function() {
console.log('唱歌')
},
dance: function(dance) {
console.log(dance)
}
}
//外部使用 对象.方法名()
dh.sing()
dh.dance('开心的马骝')
案例四 : 对象中的增删改查
这是查 和改
let obj = {
uname : '小明',
age : 18
}
// 查
console.log(obj.age)
//修改 对象.属性 = 新值
obj.age = 82
console.log(obj)
删和新增
//新增一个属性 js 可以非常方便的动态新增属性或者方法
//会去对象里面找是否有 sex 这个属性,如果有则更新值修改;如果没有这个属性,就直接新增属性
let obj = {
uname : '小明',
age : 18
}
obj.sex = '男'
console.log(obj)
obj.sing = function () {
console.log('hi')
}
console.log(obj)
//删除 了解
delete obj.uname
console.log(obj)
案例四 遍历对象
let obj = {
uname: 'andy',
age: 18,
sex: '男'
}
// k是变量名字 这个可以随便起 obj 是对象名字
for (let k in obj) {
// console.log(k)//打印属性名
// console.log(obj[k]) //打印属性值
console.log(`${k}:${obj[k]}`) //打印属性名和属性值
}
案例五: 对象案例 ; 静态值换成动态值
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<!-- <table>
<caption>学生列表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>家乡</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
<tr>
<td>2</td>
<td>小王</td>
<td>18</td>
<td>女</td>
<td>河南省</td>
</tr>
<tr>
<td>3</td>
<td>小段</td>
<td>21</td>
<td>男</td>
<td>河南省</td>
</tr>
<tr>
<td>4</td>
<td>小贺</td>
<td>21</td>
<td>女</td>
<td>新疆省</td>
</tr>
</table> -->
<script>
//数组 里面可以放任何的数据类型
// let arr = [1,'pink',true,undefined,null,{},[]]
// console.log(arr)
let students = [
{ name: '椋焜', age: '18', gender: '男', hometown: '河北省' },
{ name: '椋琪', age: '17', gender: '女', hometown: '河南省' },
{ name: '英达', age: '18', gender: '男', hometown: '河南省' },
{ name: '老鹰', age: '21', gender: '男', hometown: '新疆省' },
]
// //循环遍历整个对象
// for(let i = 0 ; i < students.length ; i++) {
// // console.log(students[i])
// // 能得到某个对象的值
// console.log(students[i].name)
// }
// 遍历数组
// 需求:根据以上数据渲染生成表格
// 分析:1、打印表格 头部和尾部
document.write(`
<table>
<caption>学生列表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>家乡</td>
</tr>
`)
// 2、中间的行遍历数组,然后填充对象数据
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${i + 1}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>
`)
}
document.write(`</table>`)
</script>
</body>
</html>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
/* 为表格设置合并边框模型 */
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
/* 行 高亮 */
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
案例六 内置对象 就是随便数 向上取整、向下取整、就近取整、
向上取整
console.log(Math.random())//随机数 返回的是0-1之间小数(包括0不包括1)
console.log(Math.ceil(1.1))//Math.ceil 向上取整,返回的整数
console.log(Math.ceil(1.5))
console.log(Math.ceil(1.9))
向下取整
console.log(Math.floor(1.1))Math.floor 向下取整,返回的整数
console.log(Math.floor(1.5))
console.log(Math.floor(1.9))
就近取整
console.log(Math.round(1.1)) //round 是就近取整,返回的是整数
console.log(Math.round(1.5))
console.log(Math.round(-1.5)) //这个比较特殊 返回的是-1
console.log(Math.round(-1.9))//返回-2 就近取整,负数返回的也是整数
最大值 和最小值
//最大值 最小值
console.log(Math.max(1,5,9,21))
console.log(Math.min(1,5,9,21))
案例七 N -M 之间的一个随机数公式
第一步:
//求得是 N -M 之间的一个随机数公式
let random = Math.floor(Math.random() * (10-1+1))+1 //每次刷新的是 1-10
console.log(random)
//封装一个随机函数 min到max
//第一步
function getRandom(min,max) {
return Math.floor(Math.random() * (M-N +1))+N
}
第二步:
//第二步 把形参放入到公式里面
function getRandom(min,max) {
return Math.floor(Math.random() * (max-min +1))+min
}
getRandom(1,10)
console.log(getRandom(1,10))
let random = getRandom(1,10)
console.log(random)
案例八 随机点名案例
// 随机点名案例
// 需求:请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
function getRandom(min,max) {
return Math.floor(Math.random() * (max-min +1))+min
}
// 声明一个数组
let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
// document.write(`${arr[0]}`) //返回数组第一个赵云
//生成一个随机数
let random = getRandom(0,arr.length -1)
// document.write(`${random}`) //取得数组中的随机下标
document.write(`${arr[random]}`) //根据数组的下标取得随机名字
案例九 : 随机点名,不能重复 (显示名字的时候,数组里边不显示它)
// 随机点名案例 不能重复显示
// 分析:1、利用随机函数随机生成一个数字作为索引号
// 2、数组[随机数]生成到页面中
// 3、数组中删除刚才抽中的索引号
// 随机点名案例
// 需求:请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
function getRandom(min,max) {
return Math.floor(Math.random() * (max-min +1))+min
}
// 声明一个数组
let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
// document.write(`${arr[0]}`) //返回数组第一个赵云
//生成一个随机数
let random = getRandom(0,arr.length -1)
// document.write(`${random}`) //取得数组中的随机下标
document.write(`${arr[random]}`) //根据数组的下标取得随机名字
// // 从哪里删,删除几个
arr.splice(random,1)
console.log(arr) //打印 数组,看显示的内容有没有从数组中删掉
案例十 : 猜字游戏
// 猜数字游戏
// 需求:程序随机生成1~10之间的一个数字,用户输入一个数字
// 1、如果大于该数字,就提示,数字猜大了,继续猜。
// 2、如果小于该数字,就提示,数字猜小了,继续猜。
// 3、如果猜对了,就提示猜对了,程序结束。
// 分析:
// 1、利用随机数生成一个数字
// 2、需要一直猜,所以需要不断的循环
// 3、因为条件是结果猜对了,就是判断条件退出,用while循环合适
// 4、内部判断可以用多分支语句。
// ---------------------------------------------------
// 1、随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
//生成1~10之间的随机数
let random = getRandom(1, 10)
console.log(random)
// 用户输入,不断的弹框 直到输入正确为止。
while (true) {
let num = + prompt('请您输入一个1~10的数字:')
// 1、如果大于该数字,就提示,数字猜大了,继续猜。
// 2、如果小于该数字,就提示,数字猜小了,继续猜。
// 3、如果猜对了,就提示猜对了,程序结束。
// 使用三个分支
if( random <num) {
alert('私密马赛,您猜大了')
}else if ( random > num ) {
alert('比亚乃,你猜小了')
}else {
alert('萨瓦迪卡 ,你猜对了')
// return 退出函数
break; //break 退出整个循环
}
}