对前端js高级面向对象的理解？如何理解前端js中的内置对象、对象原型、原型链？

标签：console log 对象前端 js 原型 today 字符串 Math

对象前言

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）对象是javascript中的一个重要的概念，甚至有“JavaScript 中万物皆是对象”的说法。

首先看面向对象

面向对象编程将一个系统抽象为许多对象的集合，每一个对象代表了这个系统的特定方面。对象包括函数（方法）和数据。一个对象可以向其他部分的代码提供一个公共接口，而其他部分的代码可以通过公共接口执行该对象的特定操作，系统的其他部分不需要关心对象内部是如何完成任务的，这样保持了对象自己内部状态的私有性

面向对象的三个基本要素

1.继承

2.封装

3.类与实例

继承

让某个类型的对象获得另一个类型的对象的属性和方法。继承就是子类继承父类的特征和行为，使得子类对象（实例）具有父类的实例域和方法，或子类从父类继承方法，使得子类具有父类相同的行为

如何实现：

看语法：class A extends B{}

分两种情况：

当A和B在同一包下A继承了B中public、protected和默认访问级别的成员变量和成员方法

当A和B不在同一包下，A继承了B中public、protected成员变量和成员方法

假设在我们的学校中，还需要定义一个新的类来代表学生。与教授不同，学生不能为他们自己的作业打分，也不需要教授任何课程，他们的特点是每一个学生都属于一个特定的年级。

然而，学生同样具有一个名字，并且他们可能也想介绍他们自己，因此，我们可能会将学生类的定义写成：

class Student
    properties
        name
        year
    constructor
        Student(name, year)
    methods
        introduceSelf()

在某种层级上，二者实际上是同种事物，他们能够具有相同的属性也是合理的。（Inheritance）

我们可以将人定义为一个新类，即 Person 类，在 Person 类中，我们可以定义所有作为人的通用属性。接下来，我们可以定义 Professor 类和 Student 类由 Person 类派生（derive）而来，在伪代码中定义如下：

class Person
    properties
        name
    constructor
        Person(name)
    methods
        introduceSelf()

class Professor : extends Person
    properties
        teaches
    constructor
        Professor(name, teaches)
    methods
        grade(paper)
        introduceSelf()

class Student : extends Person
    properties
        year
    constructor
        Student(name, year)
    methods
        introduceSelf()

在这种情况下，我们称 Person 类是 Professor 类和 Student 类的超类（superclass）或父类（parent class）。反之，我们称 Professor 类和 Student 类是 Person 类的子类（subclass 或 child class）。

你可能注意到了我们在三个类中都定义了 introduceSelf() 方法。这么做的原因如下：尽管所有人都想要介绍他们自己，但是他们可能会以不同的方式去做这件事


walsh = new Professor("萱", "不是萱");
walsh.introduceSelf(); // '我是你大ye，我是你们的心里学老师。'

summers = new Student("楠不是楠", 1);
summers.introduceSelf(); // '我是楠不是楠，我是大3年级的学生。'

我们可能会为那些不是教授或学生的人设定一个默认的打招呼方式：


pratt = new Person("渲不是萱");
pratt.introduceSelf(); // '我是萱不是萱。'

当一个方法拥有相同的函数名，但是在不同的类中可以具有不同的实现时，我们称这一特性为多态（polymorphism）。当一个方法在子类中替换了父类中的实现时，我们称之为子类重写（override）了父类中的实现

封装

封装(encapsulation)即信息隐蔽。它是指在确定系统的某一部分内容时，应考虑到其它部分的信息及联系都在这一部分的内部进行，外部各部分之间的信息联系应尽可能的少

好处：封装的好处在于，当程序员需要修改一个对象的某个操作时，程序员只需要修改对象对应方法的内部实现即可，而不需要在所有代码中找出该方法的所有实现，并逐一修改。某种意义上来说，封装在对象内部和对象外部设立了一种特别的“防火墙”。

在许多面向对象编程语言中，我们可以使用 private 关键字标记对象的私有部分，也就是外部代码无法直接访问的部分。如果一个属性在被标记为 private 的情况下，外部代码依旧尝试访问该属性，那么通常来说，计算机会抛出一个错误。

class Student : extends Person
    properties
       private year
    constructor
        Student(name, year)
    methods
       introduceSelf()
       canStudyArchery() { return this.year > 1 }

student = new Student('Weber', 1)
student.year // 错误：'year'是学生类的私有属性

例如：加入某种属性允许外界访问，那么提供访问该属性的公开方法。假如狗类有一个名字、年龄属性，不允许外界直接访问属性，但允许提供get和set方法来访问

class Dogs{
    private String name;  //名字
    private String age;   //年龄
    
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }
}

那么我们把属性设为private私有，把对外界提供设置属性的方法设置为public。

有些人会问，既然是对外公开的，为什么不直接把name，age属性设置为public呢，反而还要通过方法来设置，会不会多此一举？

不会，有以下四个原因:

（一）符合现实外因通过内因起作用的客观规律
假设原来狗就有一个叫“旺财”的名字，是对象本身原主人取的，调用了setName()方法【内因】。好了，领养狗的主人打算给狗换个名字“大黄”，他是使用者，也是调用setName()方法【外因】。

（二）灵活控制属性的读和修改的访问级别
比如我只能让使用者知道这狗狗的名字，但却不允许修改他。那就吧setName()设为private私有，getName()设为public公有。

（三）防止使用者错误修改属性
直接调用类的属性，万一改错了怎么办。所以我们可以在公有方法setName()里面添加限制条件，防止使用者错误修改属性。例如，狗狗的年龄的范围要在0~20期间。

public void setAge(int age) {
    if (age >20 || age < 0){
        throw new IllegalArgumentException("口令不合法");
    }
    else {
        this.age = age;
    }
}

（四）有助于对象封装实现细节
如果上述判断年龄合法的过程我们不想对使用者公开，就把这个过程用private封装成一个“透明”的方法。这个判断年龄合法的过程对使用者是透明的。

与封装具有相同含义的一个概念就是透明。对象封装实现细节，也就意味着对象的实现细节对使用者是透明的。透明在这里理解为“看不见”

public void setAge(int age) {
        isLegal();   //判断是否合法
        this.age = age;
    }

private void isLegal(){
    if (age >20 || age < 0){
        throw new IllegalArgumentException("口令不合法");
    }
    else return;
}

类与实例

对象 Object：表示的是某一类事物的抽象的名词和概念，是对一类事物的抽象表示。比如，“人”就是一个对象。
实例：根据类创建出来的一个个具体的“对象”，每个对象都拥有相同的方法，但各自的数据可能不同。比如通过类 Person，创建了两个"人“（对象），分别是张三和李四，张三和李四就是实例，他们身份证号码是不一样的，可能都是男性，可能年龄不一样，但都具有说话或走路等人具有的行为能力。
类 Class：对象在计算机中的表示，如定义一个“人”的类：

<?php

class Person
{
	private $name;

	public function set($name)
	{
		$this->name=$name;
	}

	public function get()
	{
		return $this->name;
	}

	public function run()
	{
		echo $this->name,' can run', PHP_EOL;
	}
}

$zhangsan=new Person; // 创建一个对象或者叫实例化一个对象，该实例是张三
$zhangsan->set('张三');
$lisi->run(); // 张三具有”人“所具备的走路的能力，”走“的方法

$lisi=new Person; // 创建一个对象或者叫实例化一个对象，该实例是李四
$lisi->set('李四');
$lisi->run(); // 李四具有”人“所具备的走路的能力，”走“的方法

通常来说，需要将构造函数作为类定义的一部分明确声明，并且构造函数通常具有和类名相同的函数名。

class Professor
    properties
        name
        teaches
    constructor
        Professor(name, teaches)
    methods
        grade(paper)
        introduceSelf()

在这个例子中，构造函数需要两个参数，因此，我们可以在创建新实例时初始化实例的 name 属性和 teaches 属性。

当我们定义构造函数后，我们就可以创建出具体的教授了。编程语言通常使用 new 关键字来表示执行构造函数。

walsh = new Professor("沃尔什", "心理学");
lillian = new Professor("丽莲", "诗歌");

walsh.teaches; // '心理学'
walsh.introduceSelf(); // '我是沃尔什，我是你们的心理学老师。'

lillian.teaches; // '诗歌'
lillian.introduceSelf(); // '我是丽莲，我是你们的诗歌老师'

这段代码中我们创建了两个对象，这两个对象都是 Professor 类的实例。

什么是内置对象

内置对象：指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法）

内置对象最大的有点就是帮助我们快速开发
JavaScript提供了多个内置对象：Math、Date、Array、String等

Math

先看Math ：

Math对象是JavaScript中的一个内置对象，用于执行数学相关的操作和计算。它不是构造函数，因此不能实例化，而是直接通过Math来调用其方法和属性。

常数：
- Math.PI: 圆周率，约等于3.14159。
- Math.E: 自然对数的底，约等于2.718。
数学方法：
- 绝对值: Math.abs(x) 返回x的绝对值。
- 向上取整: Math.ceil(x) 返回大于或等于x的最小整数。
- 向下取整: Math.floor(x) 返回小于或等于x的最大整数。
- 四舍五入: Math.round(x) 返回x的四舍五入整数。
- 幂运算: Math.pow(x, y) 返回x的y次幂。
- 平方根: Math.sqrt(x) 返回x的平方根。
- 三角函数: Math.sin(x)、Math.cos(x)、Math.tan(x) 返回x的正弦、余弦、正切值。
- 反三角函数: Math.asin(x)、Math.acos(x)、Math.atan(x) 返回x的反正弦、反余弦、反正切值。
- 对数函数: Math.log(x) 返回x的自然对数。
- 指数函数: Math.exp(x) 返回e的x次幂。
- 随机数: Math.random() 返回一个介于0（包括）和1（不包括）之间的随机数。
最值计算：
- 最大值: Math.max(x1, x2, ..., xn) 返回参数中的最大值。
- 最小值: Math.min(x1, x2, ..., xn) 返回参数中的最小值。

如何使用`Math：`

// 返回 x 的绝对值。
console.log(Math.abs(-5.5)); // 输出: 5.5
 
// 返回 x 的反余弦值（以弧度表示）。
console.log(Math.acos(0.5)); // 输出: 1.0471975511965979
 
// 返回 x 的反正弦值（以弧度表示）。
console.log(Math.asin(0.5)); // 输出: 0.5235987755982988
 
// 返回介于 -PI/2 与 PI/2 弧度之间的 x 的反正切值。
console.log(Math.atan(1)); // 输出: 0.7853981633974483
 
// 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
console.log(Math.atan2(1, 1)); // 输出: 0.7853981633974483
 
// 对数进行上舍入。
console.log(Math.ceil(4.3)); // 输出: 5
 
// 返回数的余弦。
console.log(Math.cos(0)); // 输出: 1
 
// 返回 e 的指数。
console.log(Math.exp(1)); // 输出: 2.718281828459045
 
// 对 x 进行下舍入。
console.log(Math.floor(4.7)); // 输出: 4
 
// 返回数的自然对数（底为e）。
console.log(Math.log(Math.E)); // 输出: 1
 
// 返回 x,y,z,...,n 中的最高值。
console.log(Math.max(1, 2, 3)); // 输出: 3
 
// 返回 x,y,z,...,n 中的最低值。
console.log(Math.min(1, 2, 3)); // 输出: 1
 
// 返回 x 的 y 次幂。
console.log(Math.pow(2, 3)); // 输出: 8
 
// 返回 0 ~ 1 之间的随机数。
console.log(Math.random()); // 输出: 随机数
 
// 四舍五入。
console.log(Math.round(4.7)); // 输出: 5
 
// 返回数的正弦。
console.log(Math.sin(Math.PI / 2)); // 输出: 1
 
// 返回数的平方根。
console.log(Math.sqrt(16)); // 输出: 4
 
// 返回角的正切。
console.log(Math.tan(0)); // 输出: 0
 
// 返回一个数的双曲正切函数值。
console.log(Math.tanh(0)); // 输出: 0
 
// 将数字的小数部分去掉，只保留整数部分。
console.log(Math.trunc(4.9)); // 输出: 4

Math实例：

1求两个数的最大值和最小值：

var num1 = 20;
var num2 = 30;

var max = Math.max(num1, num2);
var min = Math.min(num1, num2);

console.log("最大值：" + max);
console.log("最小值：" + min);

生成一个介于1到10之间的随机整数：

var randomInteger = Math.floor(Math.random() * 10) + 1;
console.log("随机整数：" + randomInteger);

计算圆的面积和周长：

// 圆的半径
var radius = 5;

// 计算面积
var area = Math.PI * Math.pow(radius, 2);
console.log("圆的面积为：" + area);

// 计算周长
var circumference = 2 * Math.PI * radius;
console.log("圆的周长为：" + circumference);

Math应用场景

数值操作：执行基本的数值操作，如绝对值、四舍五入、向上取整、向下取整等。
三角函数：计算三角函数，如正弦、余弦、正切等。
指数和对数：执行指数运算和对数运算，如自然指数、自然对数等。
随机数生成：生成随机数，可用于模拟随机事件、游戏开发等场景。
角度转换：在弧度和角度之间进行转换，以及计算两点之间的角度。
最值计算：求一组数中的最大值和最小值。
幂运算：计算数的幂，用于各种数学计算和模型建立中。
双曲函数：计算双曲函数值，用于某些科学和工程领域的计算。
平方根计算：计算数的平方根，常用于几何和物理计算中。

总结Math:

数值操作：Math 对象提供了许多方法来执行数值操作，包括绝对值（Math.abs()）、取整（Math.floor()、Math.ceil()、Math.round()）、求最大值和最小值（Math.max()、Math.min()）、取余数（Math.trunc()）等。

三角函数：Math 对象包含了常见的三角函数，如正弦（Math.sin()）、余弦（Math.cos()）、正切（Math.tan()）以及它们的反函数，如反正弦（Math.asin()）、反余弦（Math.acos()）、反正切（Math.atan()）。

指数和对数：可以使用 Math 对象来执行指数运算（Math.pow()）和对数运算（自然对数 Math.log()、以 2 为底的对数 Math.log2()、以 10 为底的对数 Math.log10()）。

随机数生成：通过 Math.random() 方法可以生成一个在 0（包括）到 1（不包括）之间的随机数。

角度转换：Math 对象提供了用于将角度转换为弧度的方法（Math.degrees()）和将弧度转换为角度的方法（Math.radians()），以及计算两点之间的角度的方法（Math.atan2()）。

其他数学函数：Math 对象还包括一些其他数学函数，如平方根（Math.sqrt()）、双曲函数（Math.sinh()、Math.cosh()、Math.tanh()）、指数函数（Math.exp()）等。

Date

在JavaScript中，Date对象用于处理日期和时间。它允许你创建日期对象，以便执行日期和时间的操作，如获取当前日期和时间、设置特定日期、获取日期的各个部分（年、月、日、小时、分钟、秒等），以及进行日期比较和计算等。

创建对象

可以使用以下四种方法创建

var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

milliseconds 参数是一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。

dateString 参数表示日期的字符串值。

year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒

Date使用

// 示例11：getUTCDate()
var utcDayOfMonth = today.getUTCDate(); // 返回世界时下当天是本月的第几天
console.log("世界时下今天是本月的第 " + utcDayOfMonth + " 天。");
 
// 示例12：getUTCDay()
var utcDayOfWeek = today.getUTCDay(); // 返回世界时下当天是一周中的第几天 (0 ~ 6，分别对应周日到周六)
console.log("世界时下今天是本周的第 " + (utcDayOfWeek + 1) + " 天。");
 
// 示例13：getUTCFullYear()
var utcYear = today.getUTCFullYear(); // 返回世界时下当前年份
console.log("世界时下今年是 " + utcYear + " 年。");
 
// 示例14：getUTCHours()
var utcHour = today.getUTCHours(); // 返回世界时下当前小时数 (0 ~ 23)
console.log("世界时下当前时间是 " + utcHour + " 点。");
 
// 示例15：getUTCMilliseconds()
var utcMilliseconds = today.getUTCMilliseconds(); // 返回世界时下当前毫秒数 (0 ~ 999)
console.log("世界时下当前毫秒数是 " + utcMilliseconds + " 毫秒。");
 
// 示例16：getUTCMinutes()
var utcMinutes = today.getUTCMinutes(); // 返回世界时下当前分钟数 (0 ~ 59)
console.log("世界时下当前分钟数是 " + utcMinutes + " 分钟。");
 
// 示例17：getUTCMonth()
var utcMonth = today.getUTCMonth(); // 返回世界时下当前月份 (0 ~ 11)
console.log("世界时下当前月份是 " + (utcMonth + 1) + " 月。");
 
// 示例18：getUTCSeconds()
var utcSeconds = today.getUTCSeconds(); // 返回世界时下当前秒数 (0 ~ 59)
console.log("世界时下当前秒数是 " + utcSeconds + " 秒。");
 
// 示例19：getYear() - 废弃，不推荐使用
var deprecatedYear = today.getYear(); // 返回当前年份的后两位数，已废弃，请使用 getFullYear() 方法
console.log("废弃方法：当前年份的后两位数为 " + deprecatedYear + "。");
 
// 示例20：parse()
var dateStr = "2024-04-11T12:00:00Z";
var parsedDate = Date.parse(dateStr); // 返回指定日期字符串的毫秒数
console.log("解析后的日期毫秒数为 " + parsedDate + " 毫秒。");
 
// 示例21：setDate()
today.setDate(20); // 设置日期为本月的第20天
console.log("设置后的日期为 " + today);
 
// 示例22：setFullYear()
today.setFullYear(2025); // 设置年份为 2025 年
console.log("设置后的年份为 " + today.getFullYear());
 
// 示例23：setHours()
today.setHours(15); // 设置小时为 15 点
console.log("设置后的小时为 " + today.getHours() + " 点。");
 
// 示例24：setMilliseconds()
today.setMilliseconds(500); // 设置毫秒为 500 毫秒
console.log("设置后的毫秒数为 " + today.getMilliseconds() + " 毫秒。");
 
// 示例25：setMinutes()
today.setMinutes(30); // 设置分钟为 30 分钟
console.log("设置后的分钟数为 " + today.getMinutes() + " 分钟。");
 
// 示例26：setMonth()
today.setMonth(6); // 设置月份为 7 月 (注意：月份是从 0 开始计数的)
console.log("设置后的月份为 " + (today.getMonth() + 1) + " 月。");
 
// 示例27：setSeconds()
today.setSeconds(45); // 设置秒数为 45 秒
console.log("设置后的秒数为 " + today.getSeconds() + " 秒。");
 
// 示例28：setTime()
var newTime = 1648822800000; // 2022 年 3 月 31 日 12:00:00 的毫秒数
today.setTime(newTime); // 设置日期为指定的毫秒数表示的时间
console.log("设置后的日期为 " + today);
 
// 示例29：setUTCDate()
today.setUTCDate(15); // 根据世界时设置日期为本月的第 15 天
console.log("世界时下设置后的日期为 " + today);
 
// 示例30：setUTCFullYear()
today.setUTCFullYear(2023); // 根据世界时设置年份为 2023 年
console.log("世界时下设置后的年份为 " + today.getUTCFullYear());
 
// 示例31：setUTCHours()
today.setUTCHours(8); // 根据世界时设置小时为 8 点
console.log("世界时下设置后的小时为 " + today.getUTCHours() + " 点。");
 
// 示例32：setUTCMilliseconds()
today.setUTCMilliseconds(200); // 根据世界时设置毫秒为 200 毫秒
console.log("世界时下设置后的毫秒数为 " + today.getUTCMilliseconds() + " 毫秒。");
 
// 示例33：setUTCMinutes()
today.setUTCMinutes(45); // 根据世界时设置分钟为 45 分钟
console.log("世界时下设置后的分钟数为 " + today.getUTCMinutes() + " 分钟。");
 
// 示例34：setUTCMonth()
today.setUTCMonth(8); // 根据世界时设置月份为 9 月 (注意：月份是从 0 开始计数的)
console.log("世界时下设置后的月份为 " + (today.getUTCMonth() + 1) + " 月。");
 
// 示例35：setUTCSeconds()
today.setUTCSeconds(20); // 根据世界时设置秒数为 20 秒
console.log("世界时下设置后的秒数为 " + today.getUTCSeconds() + " 秒。");
 
// 示例36：toDateString()
var dateOnlyStr = today.toDateString(); // 将日期部分转换为字符串
console.log("日期部分转换后的字符串为 " + dateOnlyStr);
 
// 示例37：toGMTString() - 已废弃，不推荐使用
var gmtString = today.toGMTString(); // 返回格林威治标准时间的字符串表示，已废弃，请使用 toUTCString() 方法
console.log("废弃方法：格林威治标准时间字符串为 " + gmtString);
 
// 示例38：toISOString()
var isoString = today.toISOString(); // 返回 ISO 标准格式的日期字符串
console.log("ISO 格式的日期字符串为 " + isoString);
 
// 示例39：toJSON()
var jsonString = today.toJSON(); // 返回 JSON 数据格式的日期字符串
console.log("JSON 格式的日期字符串为 " + jsonString);
 
// 示例40：toLocaleDateString()
var localDateString = today.toLocaleDateString(); // 返回根据本地时间格式转换的日期部分字符串
console.log("本地日期字符串为 " + localDateString);
 
// 示例41：toLocaleTimeString()
var localTimeString = today.toLocaleTimeString(); // 返回根据本地时间格式转换的时间部分字符串
console.log("本地时间字符串为 " + localTimeString);
 
// 示例42：toLocaleString()
var localString = today.toLocaleString(); // 返回根据本地时间格式转换的完整日期和时间字符串
console.log("本地日期时间字符串为 " + localString);
 
// 示例43：toString()
var dateString = today.toString(); // 返回日期对象的字符串表示
console.log("日期对象的字符串表示为 " + dateString);
 
// 示例44：toTimeString()
var timeString = today.toTimeString(); // 返回时间部分的字符串表示
console.log("时间部分的字符串表示为 " + timeString);
 
// 示例45：toUTCString()
var utcString = today.toUTCString(); // 返回世界时下的字符串表示
console.log("世界时下的字符串表示为 " + utcString);
 
// 示例46：UTC()
var utcMillisecondsSinceEpoch = Date.UTC(2024, 3, 11, 12, 0, 0); // 返回指定世界时下的毫秒数
console.log("指定世界时下的毫秒数为 " + utcMillisecondsSinceEpoch);
 
// 示例47：valueOf()
var originalValue = today.valueOf(); // 返回日期对象的原始值
console.log("日期对象的原始值为 " + originalValue);

Date实例

简单获取时间展现在网页中


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当前日期示例</title>
</head>
<body>
 
<h1>当前日期</h1>
 
<div id="currentDate"></div>
 
<script>
// 创建一个Date对象，表示当前时间
var today = new Date();
 
// 获取当前年份、月份和日期
var year = today.getFullYear();
var month = today.getMonth() + 1; // 月份是从0开始计数的，所以需要加1
var day = today.getDate();
 
// 格式化月份和日期，使它们保持两位数
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
 
// 构建当前日期的字符串表示
var currentDate = year + '-' + month + '-' + day;
 
// 将当前日期显示在网页上
document.getElementById('currentDate').innerText = "今天是：" + currentDate;
</script>
 
</body>
</html>

Date应用场景

时钟和计时器： 可以使用Date对象来创建动态的时钟和计时器，如上面提到的动态时钟示例。通过获取当前时间并根据时间更新页面上的元素，可以实现时钟和计时器的效果。

日期选择器： 在表单中，可以使用Date对象来创建日期选择器，让用户方便地选择日期。HTML5中提供了<input type="date">来实现原生的日期选择器，也可以通过JavaScript来自定义日期选择器的外观和功能。

日期格式化和解析： 可以使用Date对象的方法来格式化日期和解析日期字符串。这在需要在不同的地方显示日期或者从用户输入中获取日期时非常有用。

计算日期间隔： 可以使用Date对象来计算两个日期之间的时间间隔，比如计算两个事件发生的天数、小时数、分钟数等。

定时任务： 可以使用Date对象和setTimeout()或setInterval()函数来执行定时任务，比如定时发送请求、定时更新页面内容等。

日历应用： 在开发日历应用时，Date对象可以用来管理和显示日期，以及处理用户的操作，比如添加事件、查看日程等功能。

时间戳转换： 可以使用Date对象将时间戳转换为具体的日期和时间，或者将日期和时间转换为时间戳。这在处理时间相关的数据时非常有用。

总结Date：

创建Date对象： 可以使用new关键字和Date构造函数来创建Date对象。如果不传递任何参数，则会创建一个表示当前时间的Date对象。也可以传递年、月、日等参数来创建特定日期的Date对象。

获取日期和时间信息： Date对象提供了一系列方法来获取日期和时间的各个部分，包括年、月、日、时、分、秒、毫秒等。

设置日期和时间信息： 除了获取日期和时间信息外，还可以使用相应的方法来设置日期和时间的各个部分，从而修改Date对象表示的时间。

格式化日期和时间： Date对象提供了几种不同的方法来将日期和时间格式化为字符串，以便显示给用户或者保存到数据库中。

日期运算： 可以使用Date对象进行日期运算，比如计算日期间隔、比较两个日期的大小等。

时区和跨时区操作： Date对象可以自动处理时区差异，并且提供了一些方法来进行时区转换和跨时区操作。

计时器和定时任务： 可以使用Date对象和setTimeout()、setInterval()等函数来执行定时任务，比如定时发送请求、定时更新页面内容等。

时间戳处理： Date对象可以将日期转换为时间戳（表示从1970年1月1日午夜起至特定日期的毫秒数），也可以将时间戳转换为日期。

数组对象

基本信息:

数组是JavaScript的基本语句特性。

-数组是对象的特殊形式。（或者说数组是特殊的对象）
使用typeof 返回的是object对象
-数组继承于object
-严格来说，数组是一种数据结构，而不是数据类型。

-简单来说，数组是一堆数据的统称，用于存储数据，相当于变量。还可以方便查找

-数组具有length属性
length 
是一个可读可写的整数，声明了数组中的元素个数。
我们可以通过length得知数组的长度和数目。
如果数组中的元素是不连续的，它就是比数组中的最后—个元素的下标大1的整数。
改变这个属性的值将截断或扩展数组。
-数组是值的有序集合。每一个值叫做一个元素，而每个元素在数组中都有一个位置，以数字的形式表示出来，称为索引。

数组具有相对应的属性和属性值，也就是索引或者称为下标，可以方便访问元素的数据。

JavaScript数组的索引是基于0的32位数值：第一个元素的索引为0，而最后一个元素的索引就是length-1。

创建数组

有两种方法可以在JavaScript中创建数组：

字面量-隐式创建，其使用方括号：[]
简洁方式-直接示例化，采用new关键字

让我们演示如何使用初始化的数组常量创建fruits数组[]

let fruits = ["Apple", "Mango", "Banana", "Orange"];

声明：

let fruits = [
  "Apple",
  "Mango",
  "Banana",
  "Orange"
];

使用数组构造函数创建的相同数据，该数据用初始化new Array()：

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

这两种方法都会创建一个数组。但是，字面量-隐式创建（方括号[]）方法更为常见和首选，因为new Array()构造函数方法可能会出现不一致和意外的结果

数组索引

数组没有名称/值对。而是使用从0开始的整数值对它们进行索引。

  let fruits = ["Apple", "Mango", "Banana", "Orange"];

数组中的第一个元素是“ Apple”，索引值为0。

最后一个元素是“Orange”，索引值为3。

访问数组中的元素

通过引用方括号中的元素的索引号，可以访问JavaScript数组中的元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];

fruits[0];// 返回 "Apple"
fruits[2];// 返回 "Banana"

数组 length 属性

我们可以使用该length属性找出数组中有多少个元素。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length;   // 返回 4

最后一个元素的索引等于数组的length属性值减去1。

此示例使用length属性显示最后一个元素的值：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

let lastIndex = fruits.length - 1;
fruits[lastIndex];

JavaScript数组是对象

在JavaScript中，数组是一种特殊的对象。

typeofJavaScript中的运算符为数组返回“Object”。

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits;   // 返回 "object"

如何判断变量是否为数组 - Array.isArray()

如您所知，JavaScript typeof运算符为数组返回“Object”。

一个常见的问题是：如何知道变量是否为数组？

为了解决此问题，ECMAScript 5定义了一种新方法Array.isArray()：

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

如果对象是由给定的构造函数创建的，那么还可以使用instanceof操作符返回true：

let fruits = ["Apple", "Mango", "Banana", "Orange"];

if (fruits instanceof Array) {
   // statements to execute
}

将数组传递给函数

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);

function myFunc(arg) {
  for (let elem of arg) {
  document.write(elem, "<br>");
  }
}

从函数返回数组

function myFunc() {
  let fruits = ["Apple", "Mango", "Banana", "Orange"];
  return fruits;
}

let myArray = myFunc();
document.write(myArray);

字符串对象

符串对象，主要作用是对字符串进行处理的支持，字符串对象与字符串是完全不同的概念。

	var  str1= new String(1);   
	var  str2= String (1);
	var  str3= '1';
	str1===str2 //false
	str1===str3 //true
	str2===str3 //false

字符串长度

String.length

	var myString = new String(“hello world”);
	console.log(myString.length);
	//输出字符串的长度

1.charAt() 方法

定义和用法
charAt() 方法可返回指定位置的字符。
语法

stringObject.charAt(index)
//index：必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

tips：
字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

2.concat() 方法

定义和用法
concat() 方法用于连接两个或多个字符串。
语法

	string.concat(stringA,stringB,...,stringN)
	//stringA：必需。将被连接为一个字符串的一个或多个字符串对象。

concat() 方法将把它的所有参数转换成字符串，然后按顺序连接到字符串 string的尾部，并返回连接后的字符串。请注意，string本身并没有被更改。
tips：使用 " + " 运算符来或更优雅的字符串模板·${}·进行字符串的连接运算通常会更简便一些。

3.indexOf() 方法

定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法

	string.indexOf(searchvalue//检索值,fromindex//开始位置)

参数	描述
searchvalue	必需。规定需检索的字符串值。
Fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明
该方法将从头到尾地检索字符串 string，看它是否含有子串 searchvalue。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
tips:
indexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。
实例

	var str="Hello world!" ;
	console.log(str.indexOf("Hello") ) ;//0
	console.log(str.indexOf("World") ); //-1
	console.log(str.indexOf("world")) ;//6

4.lastIndexOf() 方法

定义和用法
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置。
语法

string.lastIndexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取

值是 0 到 string.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
返回值
如果在 string 中的 fromindex 位置之前存在 searchvalue，则返回的是出现的最后一个 searchvalue 的位置。

5.match() 方法

定义和用法
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
语法

	stringObject.match(searchvalue) 
	stringObject.match(regexp)

参数	描述
searchvalue	必需。规定要检索的字符串值。
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

返回值
存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

说明
match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。
否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。
除了这些常规的数组元素之外，返回的数组还含有两个对象属性。
index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。
如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。
不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

返回值
存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

参数	返回值
searchvalue	必需。规定要检索的字符串值。
/regexp/	只执行一次匹配，找不到返回null,找到只有一个，返回搜索到的区配的数据和它在原字符串只的位置信息
/regexp/g	执行全局检索，找不到返回null,找到返回数组，数组存放所有匹配的选项

6.replace() 方法

定义和用法
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法

stringObject.replace(regexp/substr,replacement)

参数	描述
regexp/substr	必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值
一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

说明
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配将由字符串替换。

实例
对段落中的文字进行替换：

   var str = "前轱辘不转后轱辘转思密达" ;
   console.log(str.replace(/思密达/,'습니다')) ;
   //前轱辘不转后轱辘转습니다

6.search() 方法。

定义和用法
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
语法

stringObject.search(regexp)

返回值
stringObject 中第一个与 regexp 相匹配的子串的起始位置。如果没有找到任何匹配的子串，则返回 -1。
参数:regexp：该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。
注释：要执行忽略大小写的检索，请追加标志 i。

7.slice() 方法

定义和用法
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
语法

string.slice(start,end)

返回值
一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

参数	描述
start	要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
End	紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

实例
输出 str 从位置 6 到位置 11 的所有字符：

	 var str = 'Hello happy world!';
	 console.log(str.slice(6,11));
	 //happy

8.split() 方法

定义和用法
split() 方法用于把一个字符串分割成字符串数组。
语法

string.split(separator,howmany)

返回值
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string分割成子串创建的。返回的数组中的字串不包括separator 自身。

参数	描述
separator	必需。字符串或正则表达式，从该参数指定的地方分割 string。
howmany	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

实例
将字符串拆成数组：

		var str="How are you doing today?" 
		console.log(str.split(" "))		// ["How", "are", "you", "doing", "today?"]
		console.log(str.split("")) 		//(24) ["H", "o", "w", " ", "a",....,'y','?']
		console.log(str.split(" ",3))	// ["How", "are", "you"]

对象原型

原型是 JavaScript 对象相互继承特性的机制。在这篇文章中，我们将解释什么是原型，原型链如何工作，以及如何为一个对象设置原型

原型链：

const myObject = {
city: "Madrid",
greet() {
console.log(`来自 ${this.city} 的问候`);
},
};
myObject.greet(); // 来自 Madrid 的问候

这里有一个对象，它具有数据属性 city 和方法 greet()。如果你在控制台中输入对象的名称，然后跟随一个小数点（如同 myObject.），控制台会列出该对象可用的一系列属性。你会看到，除了 city 和 greet 外，还有很多其他属性！

__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
__proto__
city
constructor
greet
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString
toString
valueOf

试着访问其中一个：

JSCopy to Clipboard

myObject.toString(); // "[object Object]"

在 JavaScript 中，有多种设置对象原型的方法，这里我们将介绍两种：Object.create() 和构造函数。

使用 Object.create

Object.create() 方法创建一个新的对象，并允许你指定一个将被用作新对象原型的对象。

这里有个示例：

JSCopy to Clipboard

const personPrototype = {
  greet() {
    console.log("hello!");
  },
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

这里我们创建了一个 personPrototype 对象，它有一个 greet() 方法。然后我们使用 Object.create() 来创建一个以 personPrototype 为原型的新对象。现在我们可以在新对象上调用 greet()，而原型提供了它的实现。

使用构造函数

在 JavaScript 中，所有的函数都有一个名为 prototype 的属性。当你调用一个函数作为构造函数时，这个属性被设置为新构造对象的原型（按照惯例，在名为 __proto__ 的属性中）。

因此，如果我们设置一个构造函数的 prototype，我们可以确保所有用该构造函数创建的对象都被赋予该原型：

JSCopy to Clipboard

const personPrototype = {
  greet() {
    console.log(`你好，我的名字是 ${this.name}！`);
  },
};

function Person(name) {
  this.name = name;
}

Object.assign(Person.prototype, personPrototype);
// 或
// Person.prototype.greet = personPrototype.greet;

这里我们：

创建了一个 personPrototype 对象，它具有 greet() 方法
创建了一个 Person() 构造函数，它初始化了要创建人物对象的名字

然后我们使用 Object.assign 将 personPrototype 中定义的方法绑定到 Person 函数的 prototype 属性上。

在这段代码之后，使用 Person() 创建的对象将获得 Person.prototype 作为其原型，其中自动包含 greet 方法。

JSCopy to Clipboard

const reuben = new Person("Reuben");
reuben.greet(); // 你好，我的名字是 Reuben！

这也解释了为什么我们之前说 myDate 的原型被称为 Date.prototype：它是 Date 构造函数的 prototype 属性。

自有属性

我们使用上面的 Person 构造函数创建的对象有两个属性：

name 属性，在构造函数中设置，在 Person 对象中可以直接看到
greet() 方法，在原型中设置

我们经常看到这种模式，即方法是在原型上定义的，但数据属性是在构造函数中定义的。这是因为方法通常对我们创建的每个对象都是一样的，而我们通常希望每个对象的数据属性都有自己的值（就像这里每个人都有不同的名字）。

直接在对象中定义的属性，如这里的name，被称为自有属性，你可以使用静态方法 Object.hasOwn() 检查一个属性是否是自有属性：

JSCopy to Clipboard

const irma = new Person("Irma");

console.log(Object.hasOwn(irma, "name")); // true
console.log(Object.hasOwn(irma, "greet")); // false

标签：console,log,对象,前端,js,原型,today,字符串,Math
From： https://blog.csdn.net/2301_78320134/article/details/140084716

对前端js高级面向对象的理解？ 如何理解前端js中的内置对象、 对象原型、原型链？

对象前言

首先看面向对象

面向对象的三个基本要素

继承

封装

类与实例

什么是内置对象

Math

先看Math ：

如何使用Math：

Math实例：

1求两个数的最大值和最小值：

Math应用场景

Date

创建对象

可以使用以下四种方法创建

Date使用

Date实例

简单获取时间展现在网页中

Date应用场景

数组对象

创建数组

数组索引

访问数组中的元素

数组 length 属性

JavaScript数组是对象

如何判断变量是否为数组 - Array.isArray()

将数组传递给函数

从函数返回数组

字符串对象

字符串长度

1.charAt() 方法

2.concat() 方法

3.indexOf() 方法

4.lastIndexOf() 方法

5.match() 方法

6.replace() 方法

6.search() 方法。

7.slice() 方法

8.split() 方法

对象原型

原型链：

使用 Object.create

使用构造函数

自有属性

相关文章

赞助商

阅读排行

对前端js高级面向对象的理解？如何理解前端js中的内置对象、对象原型、原型链？

如何使用`Math：`