文章目录
1. 对象
1.1. 概念
对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
1.2. 语法
声明对象类型变量，使用一对花括号。
// user 便是一个对象了，目前它是一个空对象
let user = {};
1.3. 属性和访问
- 属性都是成对出现的，包括属性名和值，它们之间使用英文
:分隔。 - 多个属性之间使用英文
,分隔。 - 属性就是依附在对象上的变量。
- 属性名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
let person = {
name: "小明", // 描述人的姓名
age: 19, // 描述人的年龄
stature: 185, // 描述人的身高
gender: "男", // 描述人的性别
};
1.4. 方法和调用
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔。
- 多个属性之间使用英文
,分隔。 - 方法是依附在对象中的函数。
- 方法名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
let person = {
name: "小明",
age: 18,
singing: function () {
console.log("唱歌");
},
run: function () {
console.log("跑步");
},
};
1.5. 遍历对象
let obj = {
uname: "小明",
};
for (let k in obj) {
// k 属性名 字符串 带引号 obj.'uname' k === 'uname'
// obj[k] 属性值 obj['uname'] obj[k]
}
for in 不提倡遍历数组 因为 k 是 字符串 。
2. 面向对象
面向对象就是找到不用的对象，实现我们所需要的功能。
2.1. 面向对象和面向过程的区别
面向过程：完成一件事，需要多少个步骤(重点关注的是步骤)。
面向对象：完成一件事，需要多少个对象(重点关注的是对象)。
3. 类
3.1. 定义
对具有相同属性和行为的事物的统称。
这里创建一个最简单的类(只有类名，没有属性和方法)。
3.1.1. 创建类
通过构造函数：函数名是大写开头，将来使用 new 关键字来调用。
//创建对象:造一个人
const p1 = new Person();
console.log(p1);
console.log(typeof p1);
const p2 = new Person();
console.log(p2);
console.log(typeof p2);
3.1.2. 运行结果
3.2. 类的三要素
- 类名
- 属性：事物的特征
- 行为：事物所具备的功能
3.2.1. 语法
function 类名(参数1, 参数2) {
//属性
this.属性名1 = 参数1;
this.属性名2 = 参数2;
//方法
this.方法名 = function () {
方法体;
};
}
3.2.2. 创建类
const 对象名 = new 类名() / 构造函数名(实际参数1, 实际参数2);
3.2.3. 属性和方法的调用
对象.属性名 — 获取属性值
对象.属性名 = 新值 — 修改属性值
对象.方法名(实际参数)
3.2.4. 字面量方式创建对象
语法：
const 对象名 = {} //空的对象
const 对象名 = {
属性名:属性值
方法名:匿名函数
}
示例：
const student = {};
console.log(student);
const stu = {
name: "张三",
age: 21,
study: function () {
console.log("学习");
},
};
console.log(stu);
console.log(stu.name);
stu.study();
3.3. 类的练习
写一个汽车类
属性
品牌
颜色
方法
开车/行驶
/* 定义一个汽车类 */
function Car(brand, color) {
//定义属性
this.brand = brand;
this.color = color;
//定义方法
this.drive = function () {
console.log("开车");
};
}
//创建一个byd对象
const car1 = new Car("比亚迪", "蓝色");
//访问属性
console.log(car1.brand);
//调用方法
car1.drive();
//修改属性值
car1.brand = "理想";
console.log(car1);
//创建一个bmw
const car2 = new Car("宝马", "黑色");
console.log(car2);
car2.drive();
4. Math 对象
4.1. 含义
Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。
4.2. 属性
- Math.PI，获取圆周率
// 圆周率
console.log(Math.PI);
4.3. 方法
- Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random();
- Math.ceil，数字向上取整
// 舍弃小数部分，整数部分加1
Math.ceil(3.4); //3
- Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变
Math.floor(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 次方
- Math.sqrt，平方根
// 求某数的平方根
Math.sqrt(16);
4.4. 随机生成整数
//规律:生成min-max之间的随机整数 [min,max]
Math.floor(Math.random() * (max - min + 1)) + min;
4.5. 随机点名器
const arr = ["张三", "李四", "王五", "赵六"];
//生成随机索引 [0,arr.length-1]
const index = Math.floor(Math.random() * arr.length);
//根据索引打印学生
console.log(arr[index]);
4.6. 随机点名器-面向对象版本
- 先创建学生类，再创建 4 个学生对象
- 将学生对象添加到数组中
- 获取随机的学生对象
- 调用学生对象中的自我介绍方法
//定义一个学生类
function Student(name, age, home) {
//属性
this.name = name;
this.age = age;
this.home = home;
//方法
this.intro = function () {
console.log(`我是${this.name},今年${this.age}岁,来自${this.home}`);
};
}
//创建4个学生对象
const s1 = new Student("张三", 23, "广西");
const s2 = new Student("李四", 24, "广东");
const s3 = new Student("王五", 25, "山东");
const s4 = new Student("赵六", 26, "山西");
const arr = [s1, s2, s3, s4];
//生成随机索引 [0,arr.length-1]
const index = Math.floor(Math.random() * arr.length);
//根据索引打印学生对象
const stu = arr[index];
console.log(stu);
//自我介绍
stu.intro();
4.7. 猜拳游戏
题目：
猜拳游戏
玩家A 输入 石头|剪刀|布
玩家B(由电脑随机生成) [石头,剪刀,布]
判断
A赢 A出石头-B剪刀 A出剪刀-B布 A出布-B石头
平局 A出拳=B出拳
B赢 剩下情况
示例代码：
//获取玩家的出拳
const palyerA = prompt("请输入你的出拳,石头/剪刀/布");
const arr = ["石头", "剪刀", "布"];
const index = Math.floor(Math.random() * arr.length);
const palyerB = arr[index];
//判断
if (
(palyerA == "石头" && palyerB == "剪刀") ||
(palyerA == "剪刀" && palyerB == "布") ||
(palyerA == "布" && palyerB == "石头")
) {
alert("玩家A获胜");
} else if (palyerA == palyerB) {
alert("平局");
} else {
alert("玩家B获胜");
}
alert(`玩家A的出拳是${palyerA}----玩家B的出拳是${palyerB}`);
