JavaScript 基础 （07）
对象
什么是对象
- 对象（object）：JavaScript里的一种数据类型
- 可以理解为是一种无序的数据集合
- 用来描述某个事物，列如描述一个人
- 人有姓名 、年龄 、性别等信息 、 还有吃饭睡觉打代码等功能
- 如果用多个变量 保存则比较散 ， 用对象比较统一
- 比如描述莫个人 的信息：
- 静态特征（姓名 ， 年龄 ，身高 ， 爱好） => 可以使用数字，字符串，数组 ，布尔类型等表示
- 动态行为 （点名 ， 唱 ，跳 ，rap） =》 使用函数表示
对象使用
对象声明语法
- 描述一个复杂的事物 可以使用对象
- 对象有两个特点 1 属性 2方法
<script>
let person = {
// 姓名
uname: 'andy',
age: 18,
sex: '男',
};
// 打印一下 这个数据的类型
console.log(typeof person);
// 打印一下 这个数据
console.log(person);
</script>
对象有属性和方法组成
- 属性 ： 信息或叫特征（名词）。 比如手机尺寸、颜色、重量等
- 方法： 功能或叫行动（动词）。 比如 手机打电话 、发短信、玩游戏
<script>
// 创建一个对象 用来描述商品
let goods1 = {
// 名称
name: '小米手机',
// 价格
price: 1999,
// 型号
size: '大',
};
// 如果我们访问一个不存在的属性的话 输出 undefined
// console.log(goods1.dfddddddd); // 输出什么 ？
// 访问 使用对象中的某一个属性
// console.log(goods1.name); // 小米手机
// console.log(goods1.price); // 1999
// console.log(goods1.size); // 大
// 把这个数据 显示在网页上
document.write(`商品的名称是:${goods1.name} 商品的价格是${goods1.price} 商品的型号是${goods1.size} `)
// 访问对象的属性 有两种写法
// 1 最常用 对象.属性 goods1.price
// 2 少 对象["属性"] => goods1["price"]
// console.log(goods1["name"]); // 小米手机
// console.log(goods1["price"]); // 1999
// console.log(goods1["size"]); // 大
// document.write(`商品的名称是:${goods1.name} 商品的价格是${goods1.price} 商品的型号是${goods1.size} `) goods1.price
// goods1["name"]
// document.write(`商品的名称是:${goods1.name} 商品的价格是${goods1.price} 商品的型号是${goods1.size} `)
</script>
- 属性都是成对 出现的，包括属性名 和值 ，他们之间使用英文 ： 分隔
- 多个属性之间使用英文 ' ， ' 分隔
- 属性就是依附在对象上的变量（外面是变量， 对象内是属性）
- 属性名可以使用 '' 或 "" ,一般情况下省略，除非名称遇到特殊符号如空格 、 中横线等
案例
- 声明一个产品对象，里面包如下信息
- 对象是一个产品信息可以命名为： goods
- 商品名称命名为： name
- 商品编号： num
- 商品毛重： weight
- 商品产地： address
<script>
let person = {
name:'小米小米10青春版',
num :'100012816024',
weight : '0.55kg',
address:'中国大陆'
}
document.write(`商品名称：${person.name}<br/> 商品编号:${person.num}<br/> 商品毛重：${person.weight}<br/> 商品产地：${person.address}`)
</script>
对象使用
- 声明对象 ，并添加了若干方法后，可以使用 . 调用对象中函数 ， 我称之为方法调用
<script>
let person = {
name: '你好',
sayHi : function (namee) {
document.write(namee)
},
}
// 方法 其实就是一个函数
// 函数 时接收参数
//函数 有返回值
// 函数的使用 函数（）
person.sayHi('😳🍉🐰🚘')
</script>
操作对象
增
- 对象添加新的数据
- 对象名 . 新属性 = 新值
<script>
let person ={
}
// 增加 一个新的属性
person.username = '普通人'
</script>
改
- 增加属性和修改属性都是同样的写法
- 如果该属性对象中没有 ，表示新增
- 如果该属性对象中已经存在 ， 表示修改
<script>
let person ={
username : '程序员'
}
// 修改
person.username = '普通人'
</script>
删
- 删除对象中属性
- delete 对象名 . 属性名
<script>
let person ={
username: '海贼王'
}
// 不想看了 给删掉
delete person.username
console.log(person.username);
</script>
遍历对象
- 对象没有像数组一样的 length 属性，所以无法确定长度
- 对象里面是无序的键值对 ，没有规律 ，不像数组里面有规律的下标
- 遍历对象
<script>
// 数组和对象 都可以遍历
// 数组的遍历 使用 for循环
// 对象的遍历 使用 forin
// 对对象遍历的时候 可以直接获取到 对象的属性名
// 根据对象的属性名获取对象的熟悉值 person[k]
// 创建一个对象
let person = {
age: 18,
username: '普通人',
height: 180,
};
// 遍历对象 forin
for (let k in person) {
// console.log(k);
// console.log(person.k); // 找对象中 属性名 "k"
// console.log(person['k']); // 找对象中 属性名 "k"
// k 表示变量 k = "username"
// console.log(person[k]);
// person["username"] // k 表示变量 k = "username"
console.log(`属性名:${k} 属性值${person[k]} `);
}
</script>
遍历数组对象案例
-
需求：请把下面数据中的对象打印出来：
-
定义一个存储了若干学生信息的数组
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
-
<!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>
<style>
table {
margin: 100px auto;
width: 800px;
border-collapse: collapse;
}
th {
background-color: grey;
font-size: 20px;
}
td {
text-align: center;
height: 50px;
}
</style>
</head>
<body>
<script>
let person = [
{ name: "小明", age: "18", gender: "男", hometown: "河北省" },
{ name: "小红", age: "19", gender: "女", hometown: "河南省" },
{ name: "小刚", age: "17", gender: "男", hometown: "山西省" },
{ name: "小丽", age: "18", gender: "女", hometown: "山东省" },
];
let getHtml = `
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
</thead>
<tbody>
`;
// 遍历生成 tr
for (let index = 0; index < person.length; index++) {
//开头
getHtml += ` <tr>
<td>${index + 1}</td>`;
// 对 对象 做 forin遍历 person[index]
for (const k in person[index]) {
// 数组中的每一个对象
let arr = person[index]
getHtml += ` <td>${arr[k]}</td>
`;
}
getHtml +=` </tr> `
}
getHtml += ` </tbody>
</table>`;
document.write(getHtml);
</script>
</body>
</html>
内置对象
-
Math对象是JavaScript 提供的一个 数学高手 对象
-
提供了一系列做数学运算的方法
-
random：生成0-1之间的随机数（包括0不包括1）
console.log(Math.random()); -
ceil ：向上取整
Math.ceil(0.1) = 1 Math.ceil(0.001) = 1 console.log(Math.ceil(0.1)); // 我能吃西瓜 一次就1个半西瓜 去外面商品买西瓜 = 2 -
floor ： 向下取整
console.log(Math.floor(1.9)); -
max ：找最大数
求最大值 数学对象内置有方法 算出来 最大值和最小值 console.log(Math.max(1,2,3,4,5,6,77,4)); -
min : 找最小值
console.log(Math.min(1,2,3,4,5,6,77,4)); -
pow ：幂运算
// 幂运算 对某个数字 平方 或者 立方。。。 // 2 平方 = 2 * 2 // 2 立方 = 2 * 2 * 2 // console.log(Math.pow(2, 3)); // 2立方 3个2相乘 // console.log(Math.pow(2, 2)); // 2平方 // console.log(Math.pow(3, 2)); // 3 的平方 -
abs ：绝对值
// 绝对值 -1 = 1 -2 = 2 // console.log(Math.abs(-2)); // console.log(Math.abs(-3));
-
案例
- 如何生成 0 -10的随机数
- 如何生成5-10的随机数？
- 如何生成N-M之间的随机数
<script>
// 随机 0 - 10的整数
console.log(Math.round((Math.random()*10)))
// 随机 5 - 10的整数
console.log(Math.round((Math.random()*5 + 5)))
// 理不理解都好 都是规律 Math.random()*(最大值 - 最小值) + 最小值；
function get(min,max) {
return Math.round((Math.random() * (max-min)+min));
}
console.log(get(0,10));
</script>
-
随机点名案例
<script> let person = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操'] function get(min,max) { return Math.round(Math.random()*(max - min) + min) } let index = get(0, person.length - 1 ) console.log(person[index]); //删除数组中重复的元素 person.splice(index,1) // //死循环 只要你数组长度 > 0 我就执行重复的代码 // while (person.length > 0){ // let index = get(0,arr.length - 1) // console.log(person[index]); // person.splice(index,1)//根据元素的下标来删除对应的那个数据 数组中少了一个已经显示过的数据 再次随机输出肯定不会重复 // } </script>
拓展
- 栈（操作系统） ： 由操作系统自动分配释放存放函数的参数值 、局部变量的值等 。其操作方式类似于数据结构中的栈
- 简单数据类型存放到栈里面
- 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
- 引用数据类型存放到堆里面
- 值类型（简单数据类型）： string ，number，boolean，undefined，null
- 值类型变量的数据直接存放在变量（栈空间）中
- 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
- 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
