对象是什么?
对象是Js里面的一种数据类型,是一种无序的数据集合。
对象的使用:
语法:
let 对象名 = {};
对象有属性和方法
属性:信息或特征(名词),比如手机尺寸、颜色、重量等
数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量(外面是变量,对象内是属性)
属性名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
方法:功能或者行为(动词),比如手机大段话、发短信、玩游戏
语法:
let 对象名 = {
属性名:属性值,
方法名:函数
}
对象的方法:
数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。
- 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
对象方法的访问:
声明对象,并添加了若干方法后,可以使用 . 调用对象中函数,我称之为方法调用。
注意: 千万别忘了给方法名后面加小括号
let person = {
//属性:
userName: "boy",
age: 18,
gender: 'man',
//方法:
jump: function () {
console.log("jumpjump");
}
};
console.log(person);
//调用方法
person.jump();
操作对象:增删查改
1.查询对象的属性
方式一:对象名.属性名
方式二:对象名[“属性名”]
2.修改对象的属性
方式一:对象名.属性名 = 新的属性值;
方式二:对象名[“属性名”] = 新的属性值;
3.新增对象的属性
方式一:对象名.新属性名 = 属性值;
方式二:对象名[“新属性名”] = 属性值;
注意:无论是属性或者是方法,同一对象中出现名称一样的,后面的会覆盖前面的。
4.删除对象的属性
delete 对象名.属性名
注意:删除一个未声明的属性也不会报错
遍历对象
for in 语法
for(let k in obj){
console.log(k);
console.log(obj[k]);
}
<script>
let goods = {
name: "小米(MI)",
numb: 100012816024,
weight: '0.55kg',
address: '中国',
singsong: function () {
console.log('sing a song');
}
}
// 遍历对象
// for in语法
for (let key in goods) {
console.log(key);
console.log(goods[key]);
//不能用goods.key,这个代表读取对象的key属性
}
// for in 可以用在数组上,但是不推荐
//注意: 对象确实是无序的,如果要按序遍历;对象不是首选方式;(数组才是按序的)
// 对象的遍历顺序扩展(了解):
// 一般无序之中其实有序(不同浏览器,可能有不同的实现;也就是说这个规律非标准)
// 一般: 先遍历属性名为数字的属性; 按从小到大的顺序输入; 然后按书写顺序,输出其他字符串型的属性;
</script>
案例:
<script>
// 需求:请把下面数据中的对象打印出来:
// 整体思路:
// 目标:使用 document.write(整个table的html代码)
// 1. 拼接 整个table的html代码
// 2. 整个table的html代码拆分:
// 2.1 : 前部分 (表头等 静态部分) tableStart
// 2.2 : 中间部分 (需要遍历数组,以及遍历对象,拼接成的 4个tr字符串)
// 2.3 : 后部分 (闭合标签 静态部分)tableEnd
// 3. document.write(整个table的html代码)
// 定义一个存储了若干学生信息的数组
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
// table结构前部分
let tableStart = `
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
</thead>
<tbody class="tbody">`;
//tableBody 部分
let tableBody = "";
// for循环去遍历数组
// 构建4个tr 字符串
for (let i = 0; i < students.length; i++) {
// 声明一个变量去装student[i]的数据
let obj = students[i];
tableBody += `
<tr>
<td>${i + 1}</td>
<td>${obj.name}</td>
<td>${obj.age}</td>
<td>${obj.gender}</td>
<td>${obj.hometown}</td>
</td>
</tr>
`}
// table结构后部分
let tableEnd = `</tbody>
</table>`;
table = tableStart + tableBody + tableEnd;
document.write(table);
</script>
内置对象
内置对象是什么?JavaScript内部提供的对象,包含各种属性和方法给开发者调用
document.write()、console.log()也是属于内置对象。
内置对象Math:
Math对象是JavaScript提供的一个“数学高手”对象
提供了一系列做数学运算的方法:
random:生成0-1之间的随机数(包含0不包括1)
// random方法:生成0-1的随机数,包含0,不包含1
let num = Math.random();
ceil:向上取整
// ceil 天花板,向上取整
let num = Math.random();
num = Math.ceil(num);
floor:向下取整
// floor地板,向下取整
let num = Math.random();
num = Math.floor(num);
max:找最大数
console.log("max:", Math.max(11, 22, 55, 44, 33, 77));//77
min:找最小数
console.log("min:", Math.min(11, 22, 55, 44, 33, 77));//11
随机数进阶:
如何生成0-10的随机数呢?
// 一.随机生成0-10(包含10)的整数
// 分析:
// 1.Math.random()随机生成0-1的随机小数(最大值无限接近1但不等于1)
// 2.Math.random()*11生成0-11的随机小数(最大值无限接近11但不等于11)
// 3.利用Math.floor向下取整去除随机小数得到0-10的整数
// 4.声明一个num变量去装这个整数,并输出
let num = Math.floor(Math.random() * 11);
console.log(num);
如何生成5-10的随机数?
// 二:随机生成5-10(包含10)的整数
// 分析:
// 1.Math.random()生成0-1的随机小数(最大值无限接近1但不等于1),乘以5就能生成0-5的随机小数(最大值无限接近5但不等于5)
// 2.Math.random() * 5 再加1【Math.random() * (5 + 1)】得到最大值无限接近6但不等于6的随机小数,之后整个式子加 5 即可生成5-10(无限接近11)的整数。
// 3.利用Math.floor向下取整得到5-10(无限接近11向下取整之后就能得10)的整数
// 4.声明一个num1变量去装整数并输出
let num1 = Math.floor(Math.random() * (5 + 1) + 5);
console.log(num1);
如何生成M-N之间的随机数?
// 三:随机生成M-N(包含N)整数
// 分析:
// 1.Math.random()生成0-1的随机小数(最大值无限接近1但不等于1),乘以N-M即可生成0~N-M的随机小数(最大值无限接近M但不等于M)
// 2.Math.random()*N-M 再加1【Math.random() * (N-M + 1)】得到最大值无限接近(N-M+1)但不等于(N-M+1)的随机小数,之后整个式子加M 即可生成从M(无限接近M)开始到N结束的整数。
// 3.利用Math.floor向下取整得到M~N(无限接近N+1,向下取整之后就能得N)的整数
// 4.声明一个num2变量去装整数并输出
let M = 10,
N = 20;
let num2 = Math.floor(Math.random() * (N - M + 1) + M);
console.log('M-N(包含N)的随机整数', num2);