JS基础基本类型

╰+攻爆jí腚メ 2023-10-06 21:39 117阅读 0赞

#### 阅读目录 ####

*  原始数据类型
 *  类型检测
 *   *  typeof
     *  instanceof
     *  值类型与对象
 *  String
 *   *  声明定义
     *  转义符号
     *  连接运算符
     *  模板字面量
     *  标签模板
     *  获取长度
     *  大小写转换
     *  移除空白
     *  获取单字符
     *  截取字符串
     *  查找字符串
     *   *  indexOf
         *  lastIndexOf
         *  search
         *  includes
         *  startsWith
         *  endsWith
     *  替换字符串
     *   *  replace
     *  重复生成
     *  类型转换
 *  Boolean
 *   *  声明定义
     *  隐式转换
     *  显式转换
     *   *  实例操作
 *  Number
 *   *  声明定义
     *  基本函数
     *  NaN
     *  类型转换
     *   *  Number
         *  parseInt
         *  parseFloat
     *  舍入操作
     *  浮点精度
     *   *  处理方式
         *  推荐做法
 *  Math
 *   *  取极限值
     *  舍入处理
     *  random
 *  Date
 *   *  声明日期
     *  类型转换
     *  对象方法
     *   *  下面是系统提供的日期时间方法，
         *  Moment.js是一个轻量级的JavaScript时间库

## 原始数据类型 ##

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>boolean</td> 
   <td>布尔类型</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>声明null值的特殊关键字</td> 
  </tr> 
  <tr> 
   <td>undefined</td> 
   <td>代表变量未定义</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>整数或浮点数</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>bigint</td> 
   <td>大整数，例如lert n = 10<strong>n</strong>;</td> 
  </tr> 
 </tbody> 
</table>

## 类型检测 ##

### typeof ###

typeof 用于返回以下原始类型

*  基本类型：number/string/boolean
 *  function
 *  object
 *  undefined

可以使用 typeof 用于判断数据的类型

let a = 1;
    console.log(typeof a); //number
    
    let b = "1";
    console.log(typeof b); //string
    
    //未赋值或不存在的变量返回 undefined
    var hd;
    console.log(typeof hd);
    
    function run() {
        }
    console.log(typeof run); //function
    
    let c = [1, 2, 3];
    console.log(typeof c); //object
    
    let d = {
         name: "wgchen" };
    console.log(typeof d); //object

### instanceof ###

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

也可以理解为是否为某个对象的实例，typeof不能区分数组，但 instanceof 则可以。

### 值类型与对象 ###

下面是使用字面量与对象方法创建字符串，返回的是不同类型。

let hd = "wgchen";
    let cms = new String("willem"); 
    console.log(typeof hd, typeof cms); //string object

只有对象才有方法使用，但在JS中也可以使用值类型调用方法，因为它会在执行时将值类型转为对象。

let hd = "wgchen";
    let cms = new String("willem");
    console.log(hd.length); // 6
    console.log(cms.length); // 6

## String ##

字符串类型是使用非常多的数据类型，也是相对简单的数据类型。

### 声明定义 ###

使用对象形式创建字符串

let hd = new String('wgchen');
    
    // 获取字符串长度
    console.log(hd.length);
    
    // 获取字符串
    console.log(hd.toString());

![在这里插入图片描述][7798b5dd45f14742acc88709f1d34f26.png]  
字符串使用单、双引号包裹，单、双引号使用结果没有区别。

let content = 'wgchen';
    console.log(content);

### 转义符号 ###

有些字符有双层含义，需要使用 `\`转义符号进行含义转换。  
下例中引号为字符串边界符，如果输出引号时需要使用转义符号。

let content = 'wgchen \'willem\'';
    console.log(content);

![在这里插入图片描述][5c5a393e7d2440bbbb190487b9609c29.png]  
常用转义符号列表如下

<table> 
 <thead> 
  <tr> 
   <th>符号</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\t</td> 
   <td>制表符 tab缩进</td> 
  </tr> 
  <tr> 
   <td>\n</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>\\</td> 
   <td>斜杠符号</td> 
  </tr> 
  <tr> 
   <td>\'</td> 
   <td>单引号</td> 
  </tr> 
  <tr> 
   <td>\"</td> 
   <td>双引号R</td> 
  </tr> 
 </tbody> 
</table>

var str = '输出 \n 换行,\n输出空格：xx\bxx,\n输出斜杠\\,\n输出双引号\"\n输出单引号\'\n输出tab缩进：\ttab缩进'
    console.log(str)

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

### 连接运算符 ###

使用 `+` 可以连接多个内容组合成字符串，经常用于组合输出内容使用。

let year = 2010,
    name = 'wgchen';
    console.log(name + '于' + year + '年');

使用 `+=` 在字符串上追回字符内容

let web = 'wgchen';
    web += '网址：wgchen.blog.csdn.net';
    console.log(web); // wgchen网址：wgchen.blog.csdn.net

### 模板字面量 ###

使用 `...` 符号包裹的字符串中可以写入变量与表达式
    
    let url = 'wgchen.blog.csdn.net';
    console.log(`wgchen网址是${
          url}`); // wgchen网址是wgchen.blog.csdn.net

支持换行操作不会产生错误

let url = 'wgchen.blog.csdn.net';
    document.write(`wgchen网址是：${
          url}
    大家可以在网站上学习到很多技术知识`);

![在这里插入图片描述][4f07fb12a0a9472f85b9e959d0a2a9e9.png]  
使用表达式

function show(title) {
        
    	return `wgchen`;
    }
    console.log(`${
          show()}`)

模板字面量支持嵌套使用

![在这里插入图片描述][d426b8d3f48545c688efea1b84dbb400.png]

![在这里插入图片描述][e4efaf3719214828a3db2857449ad99e.png]

### 标签模板 ###

标签模板是提取出普通字符串与变量，交由标签函数处理

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 1]  
下面例子将标题中有 wgchen 的使用标签模板加上链接

![在这里插入图片描述][c865cf3d88624db6a935c9d6c6d92a10.png]

### 获取长度 ###

使用 `length` 属性可以获取字符串长度

console.log("wgchen.blog.csdn.net".length)

### 大小写转换 ###

将字符转换成大写格式

console.log('wgchen.blog.csdn.net'.toUpperCase()); // WGCHEN.BLOG.CSDN.NET

转字符为小写格式

console.log('WGCHEN.BLOG.CSDN.NET'.toLowerCase()); // wgchen.blog.csdn.net

### 移除空白 ###

使用 `trim` 删除字符串左右的空白字符

let str = '   wgchen.blog.csdn.net  ';
    console.log(str.length);
    console.log(str.trim().length);

![在这里插入图片描述][21bca870b48d4245ac67111d1f220dd0.png]  
使用 `trimLeft` 删除左边空白，使用 `trimRight` 删除右边空白

let name = '   wgchen.blog.csdn.net  ';
    console.log(name);
    console.log(name.trimLeft());
    console.log(name.trimRight());

![在这里插入图片描述][2dfa729af543469ba9a63806250e16e0.png]

### 获取单字符 ###

根据从0开始的位置获取字符

console.log('wgchen'.charAt(3))

![在这里插入图片描述][90c2520e7ba741dfa7ea4256c8d7c8ce.png]  
使用数字索引获取字符串

console.log('wgchen'[3])

### 截取字符串 ###

使用 `slice、substr、substring` 函数都可以截取字符串。

slice、substring 第二个参数为截取的结束位置  
substr 第二个参数指定获取字符数量

let hd = 'wgchen.blog.csdn.net';
    console.log(hd.slice(3)); // hen.blog.csdn.net
    console.log(hd.substr(3)); // hen.blog.csdn.net
    console.log(hd.substring(3)); // hen.blog.csdn.net
    
    console.log(hd.slice(3, 6)); // hen
    console.log(hd.substring(3, 6)); // hen
    console.log(hd.substring(3, 0)); // wgc 较小的做为起始位置
    console.log(hd.substr(3, 6)); // hen.bl
    
    console.log(hd.slice(3, -1)); // hen.blog.csdn.ne 第二个为负数表示从后面算的字符
    console.log(hd.slice(-2));// et 从末尾取
    console.log(hd.substring(3, -9)); // wgc 负数转为0
    console.log(hd.substr(-3, 2)); // ne 从后面第三个开始取两个

### 查找字符串 ###

#### indexOf ####

从开始获取字符串位置，检测不到时返回 `-1`

let hd = 'wgchen.blog.csdn.net';
    
    console.log('wgchen.blog.csdn.net'.indexOf('e')); // 9
    console.log('wgchen.blog.csdn.net'.indexOf('e', 5)); // 18 从第5个字符向后搜索

![在这里插入图片描述][6eb7c9ba67414ac5979011c75cea66e8.png]

#### lastIndexOf ####

从结尾来搜索字符串位置

console.log('wgchen.blog.csdn.net'.lastIndexOf('e')); // 18
    
    // 4 从第7个字符向前搜索
    console.log('wgchen.blog.csdn.net'.lastIndexOf('e', 7));

#### search ####

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索

let str = 'wgchen.blog.csdn.net';
    
    console.log(str.search("net"));
    console.log(str.search(/\.net/i));

![在这里插入图片描述][9a7d4b361c1d4c9f97e59583ad195f17.png]

#### includes ####

includes 字符串中是否包含指定的值，第二个参数指查找开始位置

console.log('wgchen.blog.csdn.net'.includes('e')); //true
    console.log('wgchen.blog.csdn.net'.includes('g', 2)); //true

#### startsWith ####

startsWith 是否是指定位置开始，第二个参数为查找的开始位置。

console.log('wgchen.blog.csdn.net'.startsWith('w')); //true
    console.log('wgchen.blog.csdn.net'.startsWith('g', 1)); //true

#### endsWith ####

endsWith 是否是指定位置结束，第二个参数为查找的结束位置。

console.log('wgchen.blog.csdn.net'.endsWith('net')); //true
    console.log('wgchen.blog.csdn.net'.endsWith('e', 19)); //true

下面是查找关键词的示例

const words = ["php", "css"];
    const title = "我爱在热爱学习php与css知识";
    
    const status = words.some(word => {
        
      return title.includes(word);
    });
    console.log(status); // true

### 替换字符串 ###

#### replace ####

replace 方法用于字符串的替换操作

let str = 'wgchen.blog.csdn.net';
    web = str.replace("wgchen", "willem");
    console.log(web); // willem.blog.csdn.net

默认只替换一次，如果全局替换需要使用正则。

let str = "2023/02/12";
    console.log(str.replace(/\//g, "-")); // 2023-02-12

使用字符串替换来生成关键词链接

![在这里插入图片描述][c15b02056e1c4243b65b2f4f64bd39e4.png]  
使用正则表达式完成替换

/*正则表达式修饰符
    /u 表示按unicode(utf-8)匹配（主要针对多字节比如汉字）
    /g 全局匹配（全文查找出现的所有匹配字符，返回的结果可以是多个；如果不加/g最多只会匹配一个）
    */
    let res = "wgchen.博客.csdn.net".replace("博客", str => {
        
      return "blog";
    });
    console.log(res); // wgchen.blog.csdn.net

### 重复生成 ###

下例是根据参数重复生成星号

function star(num = 3) {
        
    	return '*'.repeat(num);
    }
    console.log(star());

下面是模糊后三位电话号码

let phone = "98765432101";
    console.log(phone.slice(0, -3) + "*".repeat(3));

### 类型转换 ###

分隔字母

let name = "wgchen";
    console.log(name.split(""));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]  
将字符串转换为数组

console.log("1,2,3".split(",")); //[1,2,3]

隐式类型转换会根据类型自动转换类型

let hd = 99 + '';
    console.log(typeof hd); //string

使用 String 构造函数可以显示转换字符串类型

let hd = 99;
    console.log(typeof String(hd));

js中大部分类型都是对象，可以使用类方法 toString 转化为字符串

let hd = 99;
    console.log(typeof hd.toString()); //string
    
    let arr = ['wgchen', 'willem'];
    console.log(typeof arr.toString()); //string

## Boolean ##

布尔类型包括 true 与 false 两个值，开发中使用较多的数据类型。

### 声明定义 ###

使用对象形式创建布尔类型

console.log(new Boolean(true)); //true
    console.log(new Boolean(false)); //false

但建议使用字面量创建布尔类型

let hd =true;

### 隐式转换 ###

基本上所有类型都可以隐式转换为 Boolean类型。

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>true</th> 
   <th>false</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>String</td> 
   <td>非空字符串</td> 
   <td>空字符串</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>非0的数值</td> 
   <td>0 、NaN</td> 
  </tr> 
  <tr> 
   <td>Array</td> 
   <td>数组不参与比较时</td> 
   <td>参与比较的空数组</td> 
  </tr> 
  <tr> 
   <td>Object</td> 
   <td>所有对象</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>undefined</td> 
   <td>无</td> 
   <td>undefined</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>无</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>NaN</td> 
   <td>无</td> 
   <td>NaN</td> 
  </tr> 
 </tbody> 
</table>

当与 boolean 类型比较时，会将两边类型统一为数字1或0。

如果使用 Boolean 与数值比较时，会进行隐式类型转换 true 转为 1，false 转为0。

console.log(3 == true); //false
    console.log(0 == false); //true

下面是一个典型的例子，  
字符串在与Boolean比较时，两边都为转换为数值类型后再进行比较。

console.log(Number("wgchen")); //NaN
    console.log(Boolean("wgchen")); //true
    console.log("wgchen" == true); //false
    console.log("1" == true); //true

数组的表现与字符串原理一样，会先转换为数值

console.log(Number([])); //0
    console.log(Number([3])); //3
    console.log(Number([1, 2, 3])); //NaN
    console.log([] == false); //true
    console.log([1] == true); //true
    console.log([1, 2, 3] == true); //false

引用类型的Boolean值为真，如对象和数组

if ([]) console.log("true");  // true
    if ({
        }) console.log("true"); // true

### 显式转换 ###

使用 `!!` 转换布尔类型

let hd = '';
    console.log(!!hd); //false
    
    hd = 0;
    console.log(!!hd); //false
    
    hd = null;
    console.log(!!hd); //false
    
    hd = new Date("2020-2-22 10:33");
    console.log(!!hd); //true

使用 Boolean 函数可以显式转换为布尔类型

let hd = '';
    console.log(Boolean(hd)); //false
    
    hd = 0;
    console.log(Boolean(hd)); //false
    
    hd = null;
    console.log(Boolean(hd)); //false
    
    hd = new Date("2020-2-22 10:33");
    console.log(Boolean(hd)); //true

#### 实例操作 ####

下面使用Boolean类型判断用户的输入，并给出不同的反馈。

while (true) {
        
        let n = prompt("请输入后盾人成立年份").trim();
        if (!n) continue;
        
        alert(n == 2010 ? "回答正确" : "答案错误！看看官网了解下");
        break;
    }

![在这里插入图片描述][bcf17804dd31465cb4614f6ba0107fd0.gif_pic_center]

## Number ##

### 声明定义 ###

使用对象方式声明

let hd = new Number(3);
    console.log(hd+3); //6

Number用于表示整数和浮点数，数字是 Number实例化的对象，  
可以使用对象提供的丰富方法。

let num = 99;
    console.log(typeof num);

### 基本函数 ###

判断是否为整数

console.log(Number.isInteger(1.2));

指定返回的小数位数可以四舍五入

console.log((16.556).toFixed(2)); // 16.56

### NaN ###

表示无效的数值，下例计算将产生NaN结果。

console.log(Number("wgchen")); //NaN
    
    console.log(2 / 'wgchen'); //NaN

NaN不能使用 `==` 比较，使用以下代码来判断结果是否正确

var res = 2 / 'wgchen';
    if (Number.isNaN(res)) {
        
    	console.log('Error');
    }

也可以使用 `Object.is` 方法判断两个值是否完全相同

var res = 2 / 'wgchen';
    console.log(Object.is(res, NaN));

### 类型转换 ###

#### Number ####

使用Number函数基本上可以转换所有类型

console.log(Number('wgchen')); //NaN
    console.log(Number(true));	//1
    console.log(Number(false));	//0
    console.log(Number('9'));	//9
    console.log(Number([]));	//0
    console.log(Number([5]));	//5
    console.log(Number([5, 2]));	//NaN
    console.log(Number({
        }));	//NaN

#### parseInt ####

提取字符串开始去除空白后的数字转为整数。

console.log(parseInt('  99houdunren'));	//99
    console.log(parseInt('18.55'));	//18

#### parseFloat ####

转换字符串为浮点数，忽略字符串前面空白字符。

console.log(parseFloat('  99houdunren'));	//99
    console.log(parseFloat('18.55'));	//18.55

比如从表单获取的数字是字符串类型需要类型转换才可以计算，下面使用乘法进行隐式类型转换。

<input type="text" name="num" value="66">
    
    <script>
      let num = document.querySelector("[name='num']").value;
      console.log(num + 5); //665
    
      console.log(num * 1 + 5); //71
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

### 舍入操作 ###

使用 `toFixed` 可对数值舍入操作，参数指定保存的小数位

console.log(1.556.toFixed(2)); //1.56

### 浮点精度 ###

大部分编程语言在浮点数计算时都会有精度误差问题，下面来看JS中的表现形式

let hd = 0.1 + 0.2
    console.log(hd) // 结果：0.30000000000000004

这是因为计算机以二进制处理数值类型，上面的0.1与0.2转为二进制后是无穷的

//0.0001100110011001100110011001100110011001100110011001101
    console.log((0.1).toString(2)) 
    
    //0.001100110011001100110011001100110011001100110011001101
    console.log((0.2).toString(2))

#### 处理方式 ####

一种方式使用 `toFixed`方法进行小数截取

console.log((0.1 + 0.2).toFixed(2)) //0.3
    
    console.log(1.0 - 0.9) //0.09999999999999998
    console.log((1.0 - 0.9).toFixed(2)) //0.10

将小数转为整数进行计算后，再转为小数也可以解决精度问题

Number.prototype.add = function (num) {
        
        //取两个数值中小数位最大的
        let n1 = this.toString().split('.')[1].length
        let n2 = num.toString().split('.')[1].length
    
        //得到10的N次幂
        let m = Math.pow(10, Math.max(n1, n2))
    
        return (this * m + num * m) / m
    }
    console.log((0.1).add(0.2)) // 0.3

#### 推荐做法 ####

市面上已经存在很多针对数学计算的库 `mathjs (opens new window)`、`decimal.js (opens new window)`等，我们就不需要自己构建了。

下面来演示使用 `decimal.js (opens new window)` 进行浮点计算。

## Math ##

Math 对象提供了众多方法用来进行数学计算，下面我们介绍常用的方法，更多方法使用请查看 MDN官网 (opens new window)了解。

### 取极限值 ###

使用 min 与 max 可以取得最小与最大值。

console.log(Math.min(1, 2, 3));  // 1
    
    console.log(Math.max(1, 2, 3));  // 3

使用 `apply` 来从数组中取值

console.log(Math.max.apply(Math, [1, 2, 3])); // 3

### 舍入处理 ###

取最接近的向上整数

console.log(Math.ceil(1.111)); //2

得到最接近的向下整数

console.log(Math.floor(1.555)); //1

四舍五入处理

console.log(Math.round(1.5)); //2

### random ###

random 方法用于返回 `>=0` 且 `<1` 的随机数（包括0但不包括1）。

返回 `0~5` 的随机数，不包括 `5`

const number = Math.floor(Math.random() * 5);
    console.log(number);

返回 `0~5` 的随机数，包括 `5`

const number = Math.floor(Math.random() * (5+1));
    console.log(number);

下面取 `2~5` 的随机数（不包括5）  
公式为：`min+Math.floor(Math.random()*(Max-min))`

const number = Math.floor(Math.random() * (5 - 2)) + 2;
    console.log(number);

下面取 `2~5` 的随机数（包括5）  
公式为：`min+Math.floor(Math.random()*(Max-min+1))`

const number = Math.floor(Math.random() * (5 - 2 + 1)) + 2;
    console.log(number);

下面是随机点名的示例

let stus = ['小明', '张三', '王五', '爱情'];
    let pos = Math.floor(Math.random() * stus.length);
    
    console.log(stus[pos]);

随机取第二到第三间的学生，即 `1~2` 的值

let stus = ['小明', '张三', '王五', '爱情'];
    let pos = Math.floor(Math.random() * (3-1)) + 1;
    
    console.log(stus[pos]);

## Date ##

网站中处理日期时间是很常用的功能，通过 Date 类型提供的丰富功能可以非常方便的操作。

### 声明日期 ###

获取当前日期时间

let now = new Date();
    console.log(now); // Tue Jan 25 2022 18:08:30 GMT+0800 (中国标准时间)
    console.log(typeof date); // undefined
    console.log(now * 1); //获取时间戳 1643105326842
    
    //直接使用函数获取当前时间
    console.log(Date());  // Tue Jan 25 2022 18:08:46 GMT+0800 (中国标准时间)
    console.log(typeof Date()); //string
    
    //获取当前时间戳单位毫秒
    console.log(Date.now()); // 1643105326842

计算脚本执行时间

const start = Date.now();
    for (let i = 0; i < 2000000; i++) {
        }
    
    const end = Date.now();
    console.log(end - start);

当然也可以使用控制台测试

console.time("testFor");
    for (let i = 0; i < 20000000; i++) {
        }
    console.timeEnd("testFor"); // testFor: 17.18603515625 ms

根据指定的日期与时间定义日期对象

let now = new Date('2028-02-22 03:25:02');
    console.log(now); // Tue Feb 22 2028 03:25:02 GMT+0800 (中国标准时间)
    
    now = new Date(2028, 4, 5, 1, 22, 16);
    console.log(now); // Fri May 05 2028 01:22:16 GMT+0800 (中国标准时间)

使用展示运算符处理更方便

let info = [2020, 2, 20, 10, 15, 32];
    let date = new Date(...info);
    console.dir(date);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 2]

### 类型转换 ###

将日期转为数值类型就是转为时间戳单位是毫秒

let hd = new Date("2020-2-22 10:33:12");
    
    console.log(hd * 1); // 1582338792000
    console.log(Number(hd)); // 1582338792000
    console.log(hd.valueOf()) // 1582338792000
    console.log(hd.getTime()); // 1582338792000

有时后台提供的日期为时间戳格式，下面是将时间戳转换为标准日期的方法

const param = [1990, 2, 22, 13, 22, 19];
    const date = new Date(...param);
    const timestamp = date.getTime();
    
    console.log(timestamp); // 638083339000
    
    // Thu Mar 22 1990 13:22:19 GMT+0800 (中国标准时间)
    console.log(new Date(timestamp));

### 对象方法 ###

格式化输出日期

let time = new Date();
    console.log(
      `${
          time.getFullYear()}-${
          time.getMonth()}-${
          time.getDate()} ${
          time.getHours()}:${
          time.getMinutes()}:${
          time.getSeconds()}`
    ); // 2022-0-25 18:18:19

封装函数用于复用

#### 下面是系统提供的日期时间方法， ####

更多方法请查看 MDN官网：  
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Date

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Date()</td> 
   <td>返回当日的日期和时间。</td> 
  </tr> 
  <tr> 
   <td>getDate()</td> 
   <td>从 Date 对象返回一个月中的某一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td>getDay()</td> 
   <td>从 Date 对象返回一周中的某一天 (0 ~ 6)。</td> 
  </tr> 
  <tr> 
   <td>getMonth()</td> 
   <td>从 Date 对象返回月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td>getFullYear()</td> 
   <td>从 Date 对象以四位数字返回年份。</td> 
  </tr> 
  <tr> 
   <td>getYear()</td> 
   <td>请使用 getFullYear() 方法代替。</td> 
  </tr> 
  <tr> 
   <td>getHours()</td> 
   <td>返回 Date 对象的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td>getMinutes()</td> 
   <td>返回 Date 对象的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>getSeconds()</td> 
   <td>返回 Date 对象的秒数 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>getMilliseconds()</td> 
   <td>返回 Date 对象的毫秒(0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td>getTime()</td> 
   <td>返回 1970 年 1 月 1 日至今的毫秒数。</td> 
  </tr> 
  <tr> 
   <td>getTimezoneOffset()</td> 
   <td>返回本地时间与格林威治标准时间 (GMT) 的分钟差。</td> 
  </tr> 
  <tr> 
   <td>getUTCDate()</td> 
   <td>根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td>getUTCDay()</td> 
   <td>根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。</td> 
  </tr> 
  <tr> 
   <td>getUTCMonth()</td> 
   <td>根据世界时从 Date 对象返回月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td>getUTCFullYear()</td> 
   <td>根据世界时从 Date 对象返回四位数的年份。</td> 
  </tr> 
  <tr> 
   <td>getUTCHours()</td> 
   <td>根据世界时返回 Date 对象的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td>getUTCMinutes()</td> 
   <td>根据世界时返回 Date 对象的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>getUTCSeconds()</td> 
   <td>根据世界时返回 Date 对象的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>getUTCMilliseconds()</td> 
   <td>根据世界时返回 Date 对象的毫秒(0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td>parse()</td> 
   <td>返回1970年1月1日午夜到指定日期（字符串）的毫秒数。</td> 
  </tr> 
  <tr> 
   <td>setDate()</td> 
   <td>设置 Date 对象中月的某一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td>setMonth()</td> 
   <td>设置 Date 对象中月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td>setFullYear()</td> 
   <td>设置 Date 对象中的年份（四位数字）。</td> 
  </tr> 
  <tr> 
   <td>setYear()</td> 
   <td>请使用 setFullYear() 方法代替。</td> 
  </tr> 
  <tr> 
   <td>setHours()</td> 
   <td>设置 Date 对象中的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td>setMinutes()</td> 
   <td>设置 Date 对象中的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>setSeconds()</td> 
   <td>设置 Date 对象中的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>setMilliseconds()</td> 
   <td>设置 Date 对象中的毫秒 (0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td>setTime()</td> 
   <td>以毫秒设置 Date 对象。</td> 
  </tr> 
  <tr> 
   <td>setUTCDate()</td> 
   <td>根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td>setUTCMonth()</td> 
   <td>根据世界时设置 Date 对象中的月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td>setUTCFullYear()</td> 
   <td>根据世界时设置 Date 对象中的年份（四位数字）。</td> 
  </tr> 
  <tr> 
   <td>setUTCHours()</td> 
   <td>根据世界时设置 Date 对象中的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td>setUTCMinutes()</td> 
   <td>根据世界时设置 Date 对象中的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>setUTCSeconds()</td> 
   <td>根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td>setUTCMilliseconds()</td> 
   <td>根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td>toSource()</td> 
   <td>返回该对象的源代码。</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toTimeString()</td> 
   <td>把 Date 对象的时间部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toDateString()</td> 
   <td>把 Date 对象的日期部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toGMTString()</td> 
   <td>请使用 toUTCString() 方法代替。</td> 
  </tr> 
  <tr> 
   <td>toUTCString()</td> 
   <td>根据世界时，把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toLocaleString()</td> 
   <td>根据本地时间格式，把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toLocaleTimeString()</td> 
   <td>根据本地时间格式，把 Date 对象的时间部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>toLocaleDateString()</td> 
   <td>根据本地时间格式，把 Date 对象的日期部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>UTC()</td> 
   <td>根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回 Date 对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

#### Moment.js是一个轻量级的JavaScript时间库 ####

它方便了日常开发中对时间的操作，提高了开发效率。

中文官网 http://momentjs.cn (opens new window)  
英文官网 https://momentjs.com

[7798b5dd45f14742acc88709f1d34f26.png]: https://img-blog.csdnimg.cn/7798b5dd45f14742acc88709f1d34f26.png
[5c5a393e7d2440bbbb190487b9609c29.png]: https://img-blog.csdnimg.cn/5c5a393e7d2440bbbb190487b9609c29.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/48f3824b85c84f4b8405277bc1a54043.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[4f07fb12a0a9472f85b9e959d0a2a9e9.png]: https://img-blog.csdnimg.cn/4f07fb12a0a9472f85b9e959d0a2a9e9.png
[d426b8d3f48545c688efea1b84dbb400.png]: https://img-blog.csdnimg.cn/d426b8d3f48545c688efea1b84dbb400.png
[e4efaf3719214828a3db2857449ad99e.png]: https://img-blog.csdnimg.cn/e4efaf3719214828a3db2857449ad99e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/4336335f16c14acbb6855563b2be4232.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[c865cf3d88624db6a935c9d6c6d92a10.png]: https://img-blog.csdnimg.cn/c865cf3d88624db6a935c9d6c6d92a10.png
[21bca870b48d4245ac67111d1f220dd0.png]: https://img-blog.csdnimg.cn/21bca870b48d4245ac67111d1f220dd0.png
[2dfa729af543469ba9a63806250e16e0.png]: https://img-blog.csdnimg.cn/2dfa729af543469ba9a63806250e16e0.png
[90c2520e7ba741dfa7ea4256c8d7c8ce.png]: https://img-blog.csdnimg.cn/90c2520e7ba741dfa7ea4256c8d7c8ce.png
[6eb7c9ba67414ac5979011c75cea66e8.png]: https://img-blog.csdnimg.cn/6eb7c9ba67414ac5979011c75cea66e8.png
[9a7d4b361c1d4c9f97e59583ad195f17.png]: https://img-blog.csdnimg.cn/9a7d4b361c1d4c9f97e59583ad195f17.png
[c15b02056e1c4243b65b2f4f64bd39e4.png]: https://img-blog.csdnimg.cn/c15b02056e1c4243b65b2f4f64bd39e4.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5292545ce5f5402ca01ba67842a03ec2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[bcf17804dd31465cb4614f6ba0107fd0.gif_pic_center]: https://img-blog.csdnimg.cn/bcf17804dd31465cb4614f6ba0107fd0.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/007c41b238da49a6a5a26279f1e4ae67.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/3615f514f5264261a52a1481e377240e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16