一、对象
（一）对象介绍
对象：object 是 JavaScript 里面的一种数据类型 可以看作一种无序的数据的集合
可以详细的描述某个事物 null 是空对象
对象是由属性和方法组成的
属性： 手机特征 大小 颜色什么的
方法：能进行的一些行为 手机打电话
<body>
<script>
let 对象名 = {
属性名: 属性值, （属性名最好不要叫做name）
方法名: 函数
}
</script>
</body>（二）对象语法
第一种 语法 用大括号去定义
<body>
<script>
let 对象名 = {}
</script>
</body>第二种 语法 （先了解）
<body>
<script>
let 对象名 = new Object()
</script>
</body>
（三）属性
属性之间用逗号分隔开 属性冒号接具体的属性值
建立一个有很多属性的对象：
<body>
<script>
let goods = {
goodsname: '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
console.log(goods)
</script>
</body>1.对象属性的增删改查
查
查找对象的某个属性
对象名.对象的属性名
<body>
<script>
let goods = {
goodsname: '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
console.log(goods.address)
</script>
</body>
第二种特殊情况：如果想起什么-什么的属性名就得加上引号变成字符串类型的，如果对象里面的属性值是字符串类型的，可以用第二种形式的书写方式。
对象名['类名'] 必须加引号
<body>
<script>
let goods = {
'goods-name': '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
console.log(goods['goods-name'])
</script>
</body>改
更改对象的属性值
对象名.要改的属性值 = 新的属性值
<body>
<script>
let goods = {
goodsname: '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
goods.address = '中央大街'
console.log(goods.address)
</script>
</body>增
往对象中增加新的属性
对象名.新属性 = 新值
<body>
<script>
let goods = {
goodsname: '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
goods.value = '100万'
console.log(goods.value)
</script>
</body>删 （了解即可）
删除对象的属性
delete 对象名.要删的属性
<body>
<script>
let goods = {
goodsname: '臭豆腐',
num: '123',
weight: '18kg',
address: '小区里'
}
delete goods.value
console.log(goods.value)
</script>
</body>
（四）方法
1.方法介绍
数据行为性的信息 一些动作 本质是函数
就是在对象里面的函数 在对象里面叫方法在对象外面叫函数
2.调用方法
对象名.方法名()
document.write() 就是典型的调用方法
<body>
<script>
let goods = {
goodsname: '臭豆腐',
eat: function () {
console.log('好吃')
}
}
goods.eat()
</script>
</body>（五）遍历对象
对象里面数据是无序的 所以不能用前面的 for 循环来写遍历输出了
我们要用一种新的 for 循环
1.for 新语法
下面代码能打印出数组的下标 是字符串格式的 所以很少用来遍历数组 经常用来遍历对象
k 是键值的意思 key 也可以换成别的字母 但是这样专业一点
<body>
<script>
let arr = ['red', 'blue', 'yellow']
for(let k in arr) {
console.log(k)
}
</script>
</body>2.for 遍历对象
下面代码 k 打印出的是对象中的属性 ’uname‘ ’age‘ ’gender‘ 这些且是字符串类型
<body>
<script>
let obj = {
uname: '一个人',
age: 18,
gender: '男'
}
for(let k in obj){
console.log(k)
}
</script>
</body>重点：
for 遍历打印 obj 中属性的值的语法很重要 不能用 obj.k 虽然k是下标但是 k 是字符串类型的变量 就是 'uname' 'age' 'gender' 而obj.属性名 属性名必须是不是字符串的形式，所以我们得用另一种形式的针对字符串的调用 输出方式 就是上面的 obj['属性名']，而k本来就是字符串 我们直接就写 obj[k] 就能成功调用 实现遍历。
（六）数组对象
数组类型的对象
用数组的 [ ] 中括号包含对象的大括号就能定义成功
<body>
<script>
let obj = [
{ uname: '张三', age: 18, gender: '男' },
{ uname: '李四', age: 58, gender: '男' },
{ uname: '王五', age: 18, gender: '男' },
{ uname: '陈六', age: 19, gender: '女' }
]
</script>
</body>三种打印方式：能打印出我们想要的元素
<body>
<script>
let obj = [
{ uname: '张三', age: 18, gender: '男' },
{ uname: '李四', age: 58, gender: '男' },
{ uname: '王五', age: 18, gender: '男' },
{ uname: '陈六', age: 19, gender: '女' }
]
for(let i = 0;i < obj.length;i++)
{
console.log(i) 打印索引号
console.log(obj[i]) 打印每个对象
console.log(obj[i].uname) 打印每个对象的名字
}
</script>
</body>（七）内置对象
JavaScript 内部给我们规定好的对象
例如 document.write()
1.内置对象 - math
数学对象
调用属性：调用PI
math.PI
调用方法：
math.cell(参数) 向上取整
math.floor(参数) 向下取整 和passInt() 很像 但是passInt() 里面能放字符串能
math.round(参数) 四舍五入
math.max(参数，参数。。。)
math.min(参数，参数。。。)
math.abs(参数) 求绝对值
随机数
math.random() 返回一个 [0, 1] 间的小数
在数组中随机选取一个数
<body>
<script>
let arr = ['red', 'green', 'blue']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])
</script>
</body>生成 N - M 之间的数
Math.floor(Math.random() * (M - N + 1)) + N
<body>
<script>
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let a = getRandom(1, 10)
console.log(a)
</script>
</body>二、一些专业知识
1.关键字
有特殊意义的词汇 比如 let var function if else 等
2.保留字
目前没意义 但可能未来会有意义 int short long char
3.标识符
变量名函数的另一种叫法
4.表达式
一些式子配合运算符出现 1 + 1
5.语句
可执行的代码
6.基本数据类型和引用数据类型：
基本数据类型：简单类型 string number Boolean undefined 储存的是值 主要存放在栈中
直接把值存到栈中
引用数据类型： 复杂数据类型 通过 new 创建的对象 object array date 都是引用类型 存的是地址
主要存在堆中， 它们是把地址存到栈中 然后把数值存到堆去
练习：渲染表格
将数组对象内的信息渲染到页面表格中。
结果展示：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 10px 20px;
border-collapse: collapse;
text-align: center;
}
tr:hover {
background-color: antiquewhite;
}
</style>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<script>
let student = [
{ uname: '张三', age: 18, gender: '男' },
{ uname: '李四', age: 58, gender: '男' },
{ uname: '王五', age: 18, gender: '男' },
{ uname: '陈六', age: 19, gender: '女' }
]
for (let i = 0; i < student.length; i++) {
document.write(`
<tr>
<td>${i + 1}</td>
<td>${student[i].uname}</td>
<td>${student[i].age}</td>
<td>${student[i].gender}</td>
</tr>
`)
}
</script>
</table>
</body>
</html>练习：猜数字
结果展示：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<script>
random = Math.floor(Math.random() * 10) + 1
while (1) {
let x = +prompt('请猜测这个数字')
if (random === x) {
alert('猜对啦 厉害！！！')
break
}
else if (x > random) {
alert('有点儿大')
continue
}
else {
alert('有点儿小')
continue
}
}
console.log(random)
</script>
</body>
<ml>