JavaScript基础知识点总结：从零开始学习JavaScript（五）

 

如果大家感感兴趣也可以去看：

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

🎉欢迎关注：👍点赞🙌收藏✍️留言

学习目标：

 知道对象数据类型的特征，具备对象数组数据渲染页面的能力

---

学习内容：

对象
综合案例
 

---

学习时间：

• 周一至周五晚上 7 点—晚上9点
• 周六上午 9 点-上午 11 点
• 周日下午 3 点-下午 6 点

---

学习产出：

对象

• • 什么是对象

在JavaScript中，对象是由一组键值对（属性和方法）组成的数据结构。对象可以用来表示现实世界中的实体，也可以用来存储和操作数据。

对象可以通过两种方式创建：

1. 字面量方式：直接使用大括号{}来创建对象，并在大括号内定义属性和方法。
2. 构造函数方式：使用构造函数和关键字new来创建对象。

对象的属性可以是任意的JavaScript数据类型，包括字符串、数字、布尔值、数组、函数等。属性可以通过点操作符或方括号操作符来访问和修改。

对象的方法是指对象中的函数。方法可以通过点操作符来调用，并可以访问对象的属性。

对象的特点包括：

1. 对象的属性和方法是无序的，可以随意添加、删除和修改。
2. 对象可以通过引用来传递。
3. 对象可以作为数据的集合，可以使用循环和条件语句来遍历和操作对象的属性和方法。

对象（object）：JavaScript里的一种数据类型
l 可以理解为是一种无序的数据集合， 注意数组是有序的数据集合
l 用来描述某个事物，例如描述一个人
        Ø 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
        Ø 如果用多个变量保存则比较散，用对象比较统一
l 比如描述 班主任 信息：
        Ø 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
        Ø 动态行为 (点名, 唱, 跳, rap) => 使用函数表示
 

• • 对象使用

 对象有属性和方法组成

        Ø 属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
        Ø 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…

对象使用

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

Ø 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
Ø 多个属性之间使用英文 , 分隔
Ø 属性就是依附在对象上的变量（外面是变量，对象内是属性）
Ø 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
 

ES6最新语法给了JavaScript对象一些新的特性和语法糖。下面是一些ES6最新语法用于JavaScript对象的示例：

1. 属性简写： 在ES6中，如果属性名和变量名相同，可以直接使用变量名作为属性名，而无需重复声明。

const name = 'John';
const age = 25;

const person = { name, age };

1. 方法简写： 在ES6中，可以使用箭头函数来定义对象的方法。

const person = {
  name: 'John',
  age: 25,
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.sayHello();

1. 计算属性名： ES6允许在对象字面量中使用计算属性名，可以在属性名中使用表达式。

const propName = 'name';

const person = {
  [propName]: 'John',
  age: 25
};
console.log(person.name); // 输出: 'John'

1. 对象解构赋值： ES6允许使用解构赋值语法从对象中提取和声明变量。

const person = {
  name: 'John',
  age: 25
};

const { name, age } = person;
console.log(name); // 输出: 'John'
console.log(age); // 输出: 25

1. Object.assign()方法： ES6引入了一个Object.assign()方法，用于将源对象的属性复制到目标对象中。

const person = {
  name: 'John',
  age: 25
};

const newPerson = Object.assign({}, person); // 复制person对象
console.log(newPerson);

这些是ES6最新语法用于JavaScript对象的一些示例。它们提供了更简洁和方便的方式来操作和定义对象。

对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：
 

JavaScript对象是一种无序的数据集合，它是由一对花括号（{}）包围的属性和值组成。操作对象的数据通常包括增加（添加新属性）、删除、修改和查询。

1. 增加属性：可以通过为对象添加新属性来增加数据。

const person = {}; // 创建空对象

person.name = 'John'; // 增加name属性
person.age = 25; // 增加age属性

1. 删除属性：可以使用delete关键字来删除对象的属性。

const person = {
  name: 'John',
  age: 25
};

delete person.age; // 删除age属性

1. 修改属性：可以通过直接赋值给对象的属性来修改数据。

const person = {
  name: 'John',
  age: 25
};

person.name = 'Jane'; // 修改name属性的值

1. 查询属性：可以使用点号或方括号来访问对象的属性值。

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()方法来遍历对象。

1. 使用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

1. 使用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中的内置对象可以分为以下几类：

1. 基本对象：包括Object、Function、Boolean、Symbol、Error等。这些对象是其他对象的基础，提供了一些共享的属性和方法。

2. 数字和日期对象：包括Number、Math、Date等。Number对象用于处理数字，Math对象提供了一些数学计算相关的方法，Date对象用于处理日期和时间。

3. 字符串对象：包括String对象和RegExp对象。String对象用于处理字符串，提供了各种字符串操作的方法，RegExp对象用于处理正则表达式。

4. 集合对象：包括Array、Set、Map等。Array对象用于表示和操作数组，Set对象用于表示和操作一组无重复值，Map对象用于表示和操作键值对。

5. 全局对象：在浏览器环境中是window对象，在Node.js环境中是global对象。全局对象提供了一些与运行环境相关的属性和方法，如浏览器中的setTimeout、location等。

除了以上的内置对象，还有许多其他的内置对象，如JSON对象、Promise对象、Reflect对象等，它们提供了更高级的功能和特定的操作。

使用这些内置对象，我们可以完成各种常见的操作，如创建对象、调用方法、处理数据等。了解并熟悉这些内置对象对于编写高效的JavaScript代码非常重要。

• 2. 内置对象Math

Math对象是JavaScript中的内置对象之一，提供了一些数学计算相关的属性和方法。以下是Math对象的一些常用属性和方法：

1. Math.PI：表示圆周率的常量，约等于3.14159。

2. Math.abs(x)：返回一个数的绝对值。

3. Math.ceil(x)：返回大于或等于给定数的最小整数。

4. Math.floor(x)：返回小于或等于给定数的最大整数。

5. Math.round(x)：返回给定数的四舍五入值。

6. Math.max(x1, x2, ...)：返回一组数中的最大值。

7. Math.min(x1, x2, ...)：返回一组数中的最小值。

8. Math.random()：返回一个0到1之间的随机数。

9. Math.sqrt(x)：返回给定数的平方根。

10. Math.pow(x, y)：返回给定数的指定次幂。

11. Math.sin(x)、Math.cos(x)、Math.tan(x)：分别返回给定角度的正弦、余弦和正切值。

12. Math.exp(x)：返回e的指定次幂。

13. Math.log(x)：返回给定数的自然对数。

14. 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关键字进行声明的优点是它会创建一个具有块级作用域的变量，因此它的作用范围被限制在函数内部。这可以避免变量被意外地重写或重新赋值，提高代码的可读性和可维护性。