JavaScript基础知识点总结：从零开始学习JavaScript（五）
如果大家感感兴趣也可以去看：
博客主页：阿猫的故乡
系列专栏：JavaScript专题栏
ajax专栏：ajax知识点
欢迎关注：点赞收藏✍️留言
学习目标：
知道对象数据类型的特征，具备对象数组数据渲染页面的能力
学习内容：
对象
综合案例
学习时间：
- 周一至周五晚上 7 点—晚上9点
- 周六上午 9 点-上午 11 点
- 周日下午 3 点-下午 6 点
学习产出：
对象
- • 什么是对象
在JavaScript中，对象是由一组键值对（属性和方法）组成的数据结构。对象可以用来表示现实世界中的实体，也可以用来存储和操作数据。
对象可以通过两种方式创建：
- 字面量方式：直接使用大括号{}来创建对象，并在大括号内定义属性和方法。
- 构造函数方式：使用构造函数和关键字new来创建对象。
对象的属性可以是任意的JavaScript数据类型，包括字符串、数字、布尔值、数组、函数等。属性可以通过点操作符或方括号操作符来访问和修改。
对象的方法是指对象中的函数。方法可以通过点操作符来调用，并可以访问对象的属性。
对象的特点包括：
- 对象的属性和方法是无序的，可以随意添加、删除和修改。
- 对象可以通过引用来传递。
- 对象可以作为数据的集合，可以使用循环和条件语句来遍历和操作对象的属性和方法。
对象（object）：JavaScript里的一种数据类型
l 可以理解为是一种无序的数据集合， 注意数组是有序的数据集合
l 用来描述某个事物，例如描述一个人
Ø 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
Ø 如果用多个变量保存则比较散，用对象比较统一
l 比如描述 班主任 信息：
Ø 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
Ø 动态行为 (点名, 唱, 跳, rap) => 使用函数表示
- • 对象使用
对象有属性和方法组成
Ø 属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
Ø 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…
对象使用
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
Ø 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
Ø 多个属性之间使用英文 , 分隔
Ø 属性就是依附在对象上的变量（外面是变量，对象内是属性）
Ø 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
ES6最新语法给了JavaScript对象一些新的特性和语法糖。下面是一些ES6最新语法用于JavaScript对象的示例：
- 属性简写： 在ES6中，如果属性名和变量名相同，可以直接使用变量名作为属性名，而无需重复声明。
const name = 'John';
const age = 25;
const person = { name, age };
- 方法简写： 在ES6中，可以使用箭头函数来定义对象的方法。
const person = {
name: 'John',
age: 25,
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello();
- 计算属性名： ES6允许在对象字面量中使用计算属性名，可以在属性名中使用表达式。
const propName = 'name';
const person = {
[propName]: 'John',
age: 25
};
console.log(person.name); // 输出: 'John'
- 对象解构赋值： ES6允许使用解构赋值语法从对象中提取和声明变量。
const person = {
name: 'John',
age: 25
};
const { name, age } = person;
console.log(name); // 输出: 'John'
console.log(age); // 输出: 25
- Object.assign()方法： ES6引入了一个Object.assign()方法，用于将源对象的属性复制到目标对象中。
const person = {
name: 'John',
age: 25
};
const newPerson = Object.assign({}, person); // 复制person对象
console.log(newPerson);
这些是ES6最新语法用于JavaScript对象的一些示例。它们提供了更简洁和方便的方式来操作和定义对象。
对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：
JavaScript对象是一种无序的数据集合，它是由一对花括号（{}）包围的属性和值组成。操作对象的数据通常包括增加（添加新属性）、删除、修改和查询。
- 增加属性：可以通过为对象添加新属性来增加数据。
const person = {}; // 创建空对象
person.name = 'John'; // 增加name属性
person.age = 25; // 增加age属性
- 删除属性：可以使用
delete关键字来删除对象的属性。
const person = {
name: 'John',
age: 25
};
delete person.age; // 删除age属性
- 修改属性：可以通过直接赋值给对象的属性来修改数据。
const person = {
name: 'John',
age: 25
};
person.name = 'Jane'; // 修改name属性的值
- 查询属性：可以使用点号或方括号来访问对象的属性值。
const person = {
name: 'John',
age: 25
};
console.log(person.name); // 输出: 'John'
console.log(person['age']); // 输出: 25
总结来说，JavaScript对象是一种无序的数据集合，可以使用增加、删除、修改和查询等操作来操作对象中的数据。以上是基本的操作语法示例。
属性-查的另外一种写法
l 对于多词属性或则 - 等属性，点操作就不能用了。
l 我们可以采取： 对象[‘属性’] 方式， 单引号和双引号都阔以
练习
请利用[] 语法把对象里面的属性依次打印出来
对象中的方法
l 数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数
1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
- • 遍历对象
目标：能够遍历输出对象里面的元素
l 遍历对象
for 遍历对象的问题：
Ø 对象没有像数组一样的length属性,所以无法确定长度
Ø 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
在ES6中，我们可以使用for...of循环和Object.entries()方法来遍历对象。
- 使用
for...of循环遍历对象的所有属性：
const person = {
name: 'John',
age: 25,
gender: 'male'
};
for (const key in person) {
console.log(key + ': ' + person[key]);
}
输出结果：
name: John
age: 25
gender: male
- 使用
Object.entries()方法来获取对象的属性和值，并使用for...of循环遍历：
const person = {
name: 'John',
age: 25,
gender: 'male'
};
for (const [key, value] of Object.entries(person)) {
console.log(key + ': ' + value);
}
输出结果：
name: John
age: 25
gender: male
以上是使用ES6语法遍历对象的两种方法。for...of循环用于遍历对象的属性，Object.entries()方法用于获取对象的属性和值，并通过解构赋值将其分解为key和value。
下面也是关于黑马的练习项目：
遍历数组对象
需求：根据以上数据渲染生成表格
- • 内置对象
目标：学会调用JavaScript为我们准备好的内置对象
学习路径
-
1. 内置对象是什么
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
l 思考：我们之前用过内置对象吗？
Ø document.write()
Ø console.log()
内置对象是JavaScript语言提供的一些原生对象，它们在执行环境中自动存在，无需额外的声明或引入。这些内置对象提供了一些常用的属性和方法，可以用于处理各种类型的数据和执行各种操作。
JavaScript中的内置对象可以分为以下几类：
-
基本对象：包括
Object、Function、Boolean、Symbol、Error等。这些对象是其他对象的基础，提供了一些共享的属性和方法。 -
数字和日期对象：包括
Number、Math、Date等。Number对象用于处理数字，Math对象提供了一些数学计算相关的方法，Date对象用于处理日期和时间。 -
字符串对象：包括
String对象和RegExp对象。String对象用于处理字符串，提供了各种字符串操作的方法，RegExp对象用于处理正则表达式。 -
集合对象：包括
Array、Set、Map等。Array对象用于表示和操作数组，Set对象用于表示和操作一组无重复值，Map对象用于表示和操作键值对。 -
全局对象：在浏览器环境中是
window对象，在Node.js环境中是global对象。全局对象提供了一些与运行环境相关的属性和方法，如浏览器中的setTimeout、location等。
除了以上的内置对象，还有许多其他的内置对象，如JSON对象、Promise对象、Reflect对象等，它们提供了更高级的功能和特定的操作。
使用这些内置对象，我们可以完成各种常见的操作，如创建对象、调用方法、处理数据等。了解并熟悉这些内置对象对于编写高效的JavaScript代码非常重要。
-
2. 内置对象Math
Math对象是JavaScript中的内置对象之一，提供了一些数学计算相关的属性和方法。以下是Math对象的一些常用属性和方法：
-
Math.PI：表示圆周率的常量，约等于3.14159。 -
Math.abs(x)：返回一个数的绝对值。 -
Math.ceil(x)：返回大于或等于给定数的最小整数。 -
Math.floor(x)：返回小于或等于给定数的最大整数。 -
Math.round(x)：返回给定数的四舍五入值。 -
Math.max(x1, x2, ...)：返回一组数中的最大值。 -
Math.min(x1, x2, ...)：返回一组数中的最小值。 -
Math.random()：返回一个0到1之间的随机数。 -
Math.sqrt(x)：返回给定数的平方根。 -
Math.pow(x, y)：返回给定数的指定次幂。 -
Math.sin(x)、Math.cos(x)、Math.tan(x)：分别返回给定角度的正弦、余弦和正切值。 -
Math.exp(x)：返回e的指定次幂。 -
Math.log(x)：返回给定数的自然对数。 -
Math.floor(Math.random() * (max - min + 1)) + min：生成一个指定范围内的随机整数。
以上只是Math对象的一些常用属性和方法，还有其他一些方法和一些其他常量如三角函数、指数函数、对数函数等。在实际开发中，我们可以利用Math对象进行各种数学计算和处理。
-
3. 生成任意范围随机数
如果你想使用ES6语法来声明函数并生成任意范围的随机数，可以使用以下代码示例：
const getRandomNumber = (min, max) => {
let range = max - min + 1;
return Math.floor(Math.random() * range) + min;
}
// 示例使用
let randomNumber = getRandomNumber(1, 10);
console.log(randomNumber); // 输出1到10之间的随机整数
在上述代码中，我们使用ES6的箭头函数语法来声明了一个名为getRandomNumber的函数。函数内部的逻辑与之前的示例相同。
使用let关键字进行声明的优点是它会创建一个具有块级作用域的变量，因此它的作用范围被限制在函数内部。这可以避免变量被意外地重写或重新赋值，提高代码的可读性和可维护性。