首页 > 编程语言 >【16.0】JavaScript之对象

【16.0】JavaScript之对象

时间:2024-02-27 10:01:42浏览次数:24  
标签:11 console log 对象 JavaScript let 16.0 var new

【一】对象

  • 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)

标签:11,console,log,对象,JavaScript,let,16.0,var,new
From: https://www.cnblogs.com/dream-ze/p/18036250

相关文章

  • 【15.0】JavaScript之函数
    【一】函数函数function,也叫做功能,方法,函数可以将一段代码封装起来,函数就具备了特定的功能函数的作用就是封装一段代码,将来可以重复使用在Python中定义函数需要用def在JavaScript中定义函数需要用function【二】函数声明【1】先声明再调用函数必须先声明,才能......
  • 【14.0】JavaScript之数组
    【一】什么是数组数组是一组有序的数据集合,数组内部可以存放多个数据,不限制数据类型,数组的长度可以动态调整数组类似于Python当中的列表【二】创建数组创建数据的最简单方式是通过字面量vararr=[]也可以通过数组对象去创建vararr=newArray()存放多个......
  • 【18.0】JavaScript之JS事件案例
    【一】开关灯示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.c1{height:400px;width:40......
  • 【17.0】JavaScript之DOM
    【一】什么是DOM/BOM文档对象模型(DocumentObjectModel,简称DOM)浏览器对象模型(BrowserObjectModel,简称BOM)是JavaScript与网页内容及浏览器环境进行交互的两种核心概念。【1】DOM(1)概述文档对象模型(DOM)是一个编程接口,它以树状结构来表示HTML或XML文档。在D......
  • JavaScript 实现JSON 对象数组以某个属性进行分组处理
    JavaScript实现JSON对象数组以某个属性进行分组处理要在JavaScript中对JSON对象数组的某个属性进行分组处理,你可以使用一个对象来存储分组后的结果。下面是一个简单的示例,演示了如何对JSON对象数组中的某个属性进行分组处理:假设我们有一个JSON对象数组,每个对象都有ca......
  • 【10.0】JavaScript之引入
    【一】JavaScript介绍【1】什么是jsjs也是一门编程语言,他可以写后端代码【2】什么是node.js前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)但是并不能完美的实现【3】JavaScript......
  • 面向对象编程的绑定方法、掩藏属性、装饰器
    一、绑定方法1、绑定给类的方法(@classmethod)12345678910111213141516171819class Oracle():    def __init__(self,ip,port):        self.ip = ip        self.port = port     @classmethod  #该方法......
  • 面向对象的对象的三大特性
    一、封装封装是一种将数据和相关方法组合成一个单独的实体的机制。它将数据(属性)和操作数据的方法(方法)封装在一个对象中,并对外部代码隐藏了内部的实现细节。通过封装,对象可以提供一个公共接口,使得外部代码可以通过该接口访问和操作对象的数据,而不需要了解其内部的具体实现。 ......
  • C# 面向对象
     C#面向对象前言#C#是一种面向对象、类型安全的语言。❓什么是面向对象面向对象编程(OOP)是如今多种编程语言所实现的一种编程范式,包括Java、C++、C#。面向对象编程将一个系统抽象为许多对象的集合,每一个对象代表了这个系统的特定方面。对象包括函数(方法)和......
  • 通过多个字段作为唯一标识对List对象去重
    1、背景List对象定义形式和现有的值如下所示。List<Test>testList=newArrayList<>();[{"ISDEL":"","ATNAM":"Z008_80_PC_4270Y153","AEDTM":"20230808","MATNR":"80.PC......