【16.0】JavaScript之对象
【一】对象
- js中的对象是无序的属性集合
- 我们可以把js中的对象想象成键值对，其中值可以是数据或者函数
- 特征-在对象中属性表示
- 行为-在对象中用方法表示
可以看成Python中的字典，但是在JS中的自定义对象要比Python里面的字典操作起来更方便
【二】对象创建
【1】对象字面量（Object Literal）
- 直接使用花括号
{}来创建一个空对象，或者初始化对象时在花括号内直接指定键值对。
var obj = ｛｝
const person = { name: "John Doe", occupation: "Software Engineer" };
【】构造函数new
- 使用
new关键字配合构造函数来创建新对象实例。
var obj = new Object（）
var obj = new Object（）
// 类似于 obj = {}
// 放值
obj.name= "dream"
【2】构造函数（Constructor Function）
（1）概述
- 自定义一个创建具体对象的构造函数，函数内部不需要new构造的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
- 使用时利用new关键字调用自定义的构造函数就可以了
- 一般构造函数首字母需要大写
（2）示例
- 在构造函数内部，
this指针指向即将创建的新对象。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const john = new Person("John", "Doe");
- 也可以简化为利用ES6的类语法
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
const john = new Person("John", "Doe");
【三】对象调用
【1】属性访问
- 直接使用变量名加点(
.)调用属性：objectName.propertyName - 在对象内部使用
this加点调用属性：this.propertyName（适用于方法内部）
const person = {
name: "John Doe",
occupation: "Software Engineer",
getOccupation: function() { return this.occupation; }
};
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.greet: function() { return `Hello, my name is ${this.firstName} ${this.lastName}`;
}
const john = new Person("John", "Doe");
console.log(person.name); // 输出 "John Doe"
console.log(john.firstName); // 输出 "John"
【2】方法调用
- 直接使用变量名加点(
.)调用方法：objectName.methodName() - 在对象内部使用
this加点调用方法：this.methodName()（适用于方法内部）
console.log(person.getOccupation()); // 输出 "Software Engineer"
john.greet(); // 输出 "Hello, my name is John Doe"
【3】索引式访问
- 使用变量名后跟方括号 (
[]) 并传入对应的键名，可以通过字符串或数值作为键名
console.log(person["name"]); // 输出 "John Doe"
john[0] = "Jane"; // 修改 firstName 为 "Jane"
console.log(john[0]); // 输出 "Jane"
【4】for in遍历数组
- 可以通过
for...in循环遍历对象的所有可枚举属性，但不包括原型链上的属性
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(`${key}: ${person[key]}`);
}
}
// name: John Doe
// occupation: Software Engineer
// getOccupation: function() { return this.occupation; }
【四】日期对象Date
-
JavaScript中的日期对象（Date object）用于处理日期和时间。
-
它提供了处理日期、时间和相关操作的方法。
【1】创建日期对象
- 您可以使用
new Date()来创建当前日期和时间的对象实例，或者使用特定日期和时间参数来创建指定的日期对象。
（1）创建当前日期和时间的对象实例
var currentDate = new Date();
（2）创建指定日期和时间的对象实例
var specificDate = new Date(2023, 6, 5, 10, 30, ); // 参数依次为年、月（从开始计数）、日、时、分、秒
（3）结构化时间
let currentDate = new Date()
// undefined
currentDate
// Tue Jul 04 2023 18:03:06 GMT+0800 (香港标准时间)
（4）转时间格式
let currentDate = new Date()
// undefined
currentDate.toLocaleString();
// 2023/7/4 18:03:06'
（5）自定义时间
let specificDate = new Date("2028/11/11 11:11:11");
specificDate.toLocaleString();
// '2028/11/11 11:11:11'
let specificDateOne = new Date(1111,11,11,11,11,11);
specificDateOne.toLocaleString(); // 月份从0开始 0-11月
// '1111/12/11 11:11:11'
【2】内置方法
（1）获取日期和时间信息
let d0 = new Date();
d0.getFullYear();
// 获取年份（四位数）
d0.getMonth();
// 获取月份（0-11）（0表示一月，11表示十二月）
d0.getDate();
// 获取日（月中的某一天）
d0.getDay();
// 获取星期
d0.getHours();
// 获取小时
d0.getMinutes();
// 获取分钟
d0.getSeconds();
// 获取秒数
d0.getMilliseconds();
// 获取毫秒数
d0.getTime();
// 获取时间戳
（2）设置日期和时间
var date = new Date();
date.setFullYear(2024); // 设置年份
date.setMonth(8); // 设置月份（表示一月，11表示十二月）
date.setDate(15); // 设置日期（月中的某一天）
date.setHours(18); // 设置小时
date.setMinutes(45); // 设置分钟
date.setSeconds(30); // 设置秒数
（3）格式化时间
- 日期对象没有内置的格式化方法，但是您可以使用各种方法将日期和时间格式化为所需的字符串格式。
var date = new Date();
var formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串
var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串
【五】JSON对象
【1】Python中
- 在Python中序列化和反序列化使用
- dumps 序列化
- loads 反序列化
Supports the following objects and types by default:
+-------------------+---------------+
| Python | JSON |
+===================+===============+
| dict | object |
+-------------------+---------------+
| list, tuple | array |
+-------------------+---------------+
| str | string |
+-------------------+---------------+
| int, float | number |
+-------------------+---------------+
| True | true |
+-------------------+---------------+
| False | false |
+-------------------+---------------+
| None | null |
+-------------------+---------------+
（1）序列化 (dumps)
json模块提供了dumps()函数，用于将Python对象转换为JSON格式的字符串。
import json
# 示例：创建一个Python字典
data = {
"name": "John Doe",
"age": 30,
"is_student": False,
"hobbies": ["reading", "coding"],
}
# 序列化为JSON字符串
json_string = json.dumps(data, indent=4) # 添加缩进以提高可读性
print(json_string)
# 输出：
# {
# "name": "John Doe",
# "age": 30,
# "is_student": false,
# "hobbies": [
# "reading",
# "coding"
# ]
# }
（2）反序列化 (loads)
json模块同样提供了loads()函数，用于将JSON格式的字符串转换回Python对象。
# 示例：将JSON字符串解析为Python字典
parsed_data = json.loads(json_string)
print(parsed_data)
# 输出：
# {'name': 'John Doe', 'age': 30, 'is_student': False, 'hobbies': ['reading', 'coding']}
【2】JavaScript中
- 在js中也有序列化和反序列化方法
- JSON.stringify() ----> dumps 序列化
- JSON.parse() -----> loads 反序列化
（1）序列化 (stringify)
JSON.stringify()函数可以将JavaScript对象或值转换为JSON格式的字符串。
// 示例：创建一个JavaScript对象
let data = {
name: "John Doe",
age: 30,
isStudent: false,
hobbies: ["reading", "coding"]
};
// 序列化为JSON字符串
let jsonString = JSON.stringify(data, null, 4); // 缩进增加可读性
console.log(jsonString);
// 输出：
// {
// "name": "John Doe",
// "age": 30,
// "isStudent": false,
// "hobbies": [
// "reading",
// "coding"
// ]
// }
（2）反序列化 (parse)
JSON.parse()函数可以将JSON格式的字符串解析回JavaScript对象或值。
// 示例：将JSON字符串解析为JavaScript对象
let parsedData = JSON.parse(jsonString);
console.log(parsedData);
// 输出：
// { name: 'John Doe', age: 30, isStudent: false, hobbies: [ 'reading', 'coding' ] }
【六】正则对象 RegExp
-
正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具。
-
在Python中如果需要使用正则 需要借助于re模块
-
在JavaScript中，我们可以使用RegExp对象来创建和操作正则表达式。
【1】方式一
let reg = new RegExp(正则表达式);
【2】方式二
let reg1 = /正则表达式/
【3】正则方法介绍
（1）test()
- 测试字符串是否匹配正则表达式，并返回布尔值。
var str = "Hello, world!";
var pattern = /Hello/;
var result = pattern.test(str);
console.log(result); // 输出：true
（2）exec()
- 在字符串中搜索匹配正则表达式的内容，并返回结果数组。
- 如果没有匹配的内容，则返回null。
var str = "Hello, world!";
var pattern = /l+/g;
var result = pattern.exec(str);
console.log(result); // 输出：["ll"]
（3）match()
- 在字符串中搜索匹配正则表达式的内容，并返回结果数组。
- 如果没有匹配的内容，则返回null。
var str = "Hello, world!";
var pattern = /l+/g;
var result = str.match(pattern);
console.log(result); // 输出：["ll", "l"]
（4）search()
- 在字符串中搜索匹配正则表达式的内容，并返回第一个匹配的索引位置。
- 如果没有匹配的内容，则返回-1。
var str = "Hello, world!";
var pattern = /lo/;
var result = str.search(pattern);
console.log(result); // 输出：3
（5）replace()
- 将匹配正则表达式的内容替换为指定的字符串，并返回新的字符串。
var str = "Hello, world!";
var pattern = /o/g;
var replacement = "a";
var result = str.replace(pattern, replacement);
console.log(result); // 输出：Hella, warld!
（6）flags
- 返回正则表达式的修饰符标志字符串。
var pattern = /hello/gi;
console.log(pattern.flags); // 输出：gi
-
RegExp对象还有其他一些方法和属性用于对正则表达式进行操作和获取相关信息，如
toString()方法用于将正则表达式转换为字符串。 -
正则表达式是一种强大且灵活的工具，能够处理字符串的模式匹配和替换。在JavaScript中，可以使用RegExp对象来创建、测试和操作正则表达式。
【3】匹配数据
let reg = new RegExp(正则表达式);
reg.test(待匹配内容)
// 获取字符串中的某个字母
let str = "dream eam eam eam"
// 字符串内置方法
str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配
str.match(/m/g) // 全局匹配 g表示全局模式
// 获取字符串中的某个字母
let str = "dream eam eam eam"
undefined
str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配
// ['m', index: 4, input: 'dream eam eam eam', groups: undefined]
str.match(/m/g) // 全局匹配 g表示全局模式
// (4) ['m', 'm', 'm', 'm']
【4】正则的BUG
let reg = /^[a-zA-Z][A-Za-z0-9]/g
reg.test("dream");
（1）全局模式的指针移动
let reg = /^[a-zA-Z][A-Za-z0-9]/g
// 第一次匹配成功 -- 有数据-- 指针移动到尾端
reg.test("dream");
// true
// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
reg.test("dream");
// false
// 第三次匹配成功 -- 有数据-- 指针回到头部
reg.test("dream");
// true
reg.test("dream");
// false
// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
reg.lastIndex
// 0
reg.test("dream");
// true
// 第三次匹配成功 -- 有数据-- 指针回到头部
reg.lastIndex
// 2
（2）匹配数据为空时
let reg = /^[a-zA-Z][A-Za-z0-9]/
reg.test();
let reg = /^[a-zA-Z][A-Za-z0-9]/
// 针对上述表达式 ：没有数据时。默认传进去的参数是 undefined --- 匹配成功
reg.test();
// true
reg.test();
// true
【五】math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
【1】abs(x)
- 返回传入参数的绝对值。参数 x 必须是一个数字类型。
let num = -10;
let absoluteValue = Math.abs(num);
console.log(absoluteValue); // 输出: 10
【2】exp(x)
- 返回 e (自然对数的底数，约为 2.71828) 的 x 次方。x 必须是一个数字类型。
let exponent = 3;
let result = Math.exp(exponent);
console.log(result); // 输出: 20.085536923187668 (近似值)
【3】 floor(x)
- 对传入参数 x 进行向下取整，结果是一个整数。参数 x 必须是一个数字类型。
let num = 3.7;
let flooredNum = Math.floor(num);
console.log(flooredNum); // 输出: 3
【4】log(x)
- 返回传入参数 x 的自然对数（底为 e）。x 必须大于 0，并且是一个数字类型。
let baseTenNum = 100;
let naturalLog = Math.log(baseTenNum);
console.log(naturalLog); // 输出: 4.605170185988092 (近似值，因为 ln(100) ≈ 4.605)
【5】max(x, y)
- 返回两个数 x 和 y 中的最大值。x 和 y 都可以是任意数值类型。
let num1 = 5;
let num2 = 10;
let maxValue = Math.max(num1, num2);
console.log(maxValue); // 输出: 10
【6】min(x, y)
- 返回两个数 x 和 y 中的最小值。x 和 y 都可以是任意数值类型。
let num1 = 5;
let num2 = 10;
let minValue = Math.min(num1, num2);
console.log(minValue); // 输出: 5
【7】pow(x, y)
- 返回 x 的 y 次幂。x 和 y 都必须是数字类型。
let base = 2;
let exponent = 3;
let power = Math.pow(base, exponent);
console.log(power); // 输出: 8
【8】random()
- 生成一个介于 0 (包含) 和 1 (不包含) 之间的伪随机浮点数。
let randomNum = Math.random();
console.log(randomNum); // 输出: 例如 0.1234567890 (每次运行会得到不同的随机数)
【9】round(x)
- 将传入参数 x 四舍五入为最接近的整数。x 必须是一个数字类型。
let num = 3.14;
let roundedNum = Math.round(num);
console.log(roundedNum); // 输出: 3 或 4 (取决于 x 是否接近 3 或 4)
【10】 sin(x)
- 返回传入角度 x (弧度制) 的正弦值。x 必须是一个以弧度表示的角度值。
let angleInRadians = Math.PI / 2;
let sineValue = Math.sin(angleInRadians);
console.log(sineValue); // 输出: 1 (因为 sin(π/2) = 1)
【11】 sqrt(x)
- 返回传入参数 x 的平方根。x 必须是一个非负实数。
let squareRootOfNine = Math.sqrt(9);
console.log(squareRootOfNine); // 输出: 3
【12】tan(x)
- 返回传入角度 x (弧度制) 的正切值。x 必须是一个以弧度表示的角度值。
let angleInRadians = Math.PI / 4;
let tangentValue = Math.tan(angleInRadians);
console.log(tangentValue); // 输出: 1 (因为 tan(π/4) = 1)
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/18036250
