JavaScript基础知识点总结:从零开始学习JavaScript(五)

JavaScript基础知识点总结:从零开始学习JavaScript(五)_第1张图片 

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

博客主页:阿猫的故乡

系列专栏:JavaScript专题栏

ajax专栏:ajax知识点

欢迎关注:点赞收藏✍️留言

学习目标:

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


学习内容:

对象
综合案例
 


学习时间:

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

学习产出:

对象

  • • 什么是对象

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

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

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

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

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

对象的特点包括:

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

对象(object):JavaScript里的一种数据类型
l 可以理解为是一种无序的数据集合, 注意数组是有序的数据集合
l 用来描述某个事物,例如描述一个人
        Ø 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
        Ø 如果用多个变量保存则比较散,用对象比较统一

l 比如描述 班主任 信息:
        Ø 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
        Ø 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

 

  • • 对象使用

JavaScript基础知识点总结:从零开始学习JavaScript(五)_第2张图片

 对象有属性和方法组成

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

对象使用

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

JavaScript基础知识点总结:从零开始学习JavaScript(五)_第3张图片
Ø 属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
Ø 多个属性之间使用英文 , 分隔
Ø 属性就是依附在对象上的变量(外面是变量,对象内是属性)
Ø 属性名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
 

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 数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数

JavaScript基础知识点总结:从零开始学习JavaScript(五)_第4张图片 

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()方法用于获取对象的属性和值,并通过解构赋值将其分解为keyvalue

下面也是关于黑马的练习项目:

遍历数组对象
需求:根据以上数据渲染生成表格
JavaScript基础知识点总结:从零开始学习JavaScript(五)_第5张图片 

 

  • • 内置对象 

目标:学会调用JavaScript为我们准备好的内置对象
学习路径

  • 1. 内置对象是什么

JavaScript内部提供的对象,包含各种属性和方法给开发者调用
l 思考:我们之前用过内置对象吗?
        Ø document.write()
        Ø console.log()

内置对象是JavaScript语言提供的一些原生对象,它们在执行环境中自动存在,无需额外的声明或引入。这些内置对象提供了一些常用的属性和方法,可以用于处理各种类型的数据和执行各种操作。

JavaScript中的内置对象可以分为以下几类:

  1. 基本对象:包括ObjectFunctionBooleanSymbolError等。这些对象是其他对象的基础,提供了一些共享的属性和方法。

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

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

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

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

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

你可能感兴趣的:(前端,基础详细,JavaScript,学习,javascript,开发语言)