本文链接：https://blog.csdn.net/lalala_dxf/article/details/124127575

基本包装类型

简介

在 ES 中，数据的分类分为基本数据类型和引用类型。基本包装类型，严格来说不属于上面两个中的任意一个，但是又和这两种类型息息相关。

基本数据类型和引用类型这两个类型其中一个很明显的区别是，引用类型有自己内置的方法，也可以自定义其他方法用来操作数据，而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。
为了便于操作基本类型值，ECMAScript提供了3个特殊引用类型（基本包装类型）：Boolean, Number, String。基本包装类型，和其他引用类型一样，拥有内置的方法可以对数据进行额外操作。

我们先看一个例题

var str = 'test';
//substring(start,end),截取从start到end的字符串，不包括end。
var str2 = str.substring(2);
console.log(str2);

问题：这里的str原本不应该是基本类型嘛，为什么却可以调用对象中的方法呢？
原因：其实，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。
分析：在执行第二行代码时，会自动执行如下步骤：
（1）自动创建 String 类型的一个实例。这个实例时基本包装类型对象
（2）调用实例对象上指定的方法
（3）销毁这个实例对象
也就是说上面的代码可以看成是如下形式：
//用 String 构造函数创建一个实例，这个实例是一个对象
var str = new String('test');
//创建的实例对象中有内置方法共使用者调用，这里的内置方法继承自原型对象
var str2 = str.substring()；
// 最后会自动销毁这个实例
str = null；
上面这三个步骤也适用于Boolean、Number类型。

JS什么时候会自动创建一个对应的基本包装类型对象呢

当读取一个基本类型的值，也就是当需要从内存中后去到它的值时（这个过程其实叫读取模式），后台会自动创建一个基本包装类型的对象。

var str = "hello";
console.log(str); //读取模式，后台自动创建基本包装类型对象

引用类型与基本包装类型的区别

最主要的区别是对象的生存期。
引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中。
基本包装类型：只存在一行代码的执行瞬间，然后立即销毁对象。

var str = 'test';
str.test = 'hello';
console.log(str.test); //undefined

分析：
第二行代码给自动创建的String实例对象添加了test属性，但也只是此刻此行代码执行时生效的，并且此行代码执行后实例对象会立刻被销毁，那么String实例的test属性也就不存在了。
第三行代码执行时，因为是读取模式，所有有重新创建了新的String实例对象，而这个新创建的 String 实例没有 test 属性，结果也就是 undefined。

如何给基本类型添加方法或者属性？

增加对应包装对象的原型方法

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行

var str = 'hello';
String.prototype.last = function (position) {
    let result
    if (typeof (position) !== 'number') return null
    // 返回指定位置的字符
    if (position && position >= 1 && position <= this.length) {
        result = this.charAt(position - 1);
    } else {
        result = null
    }
    return result
};
console.log(str.last(1));

//执行到最后一句代码时，JS会在暗地里做些事情，如下：
// 1.找到基本包装对象，new一个和字符串值相同的对象，
// var str = new String('hello');
// 2.通过这个对象找到了包装对象下的方法并调用 
// str.last();  
// 3.这个对象被销毁
// str = null;

使用new运算符创建String对象

// new运算符
var str = new String('hello');
// 有效属性
str.name = 'HI';
// 有效方法
str.age = function () {
  return 100;
}
console.log(str); //[String: 'hello'] { name: 'HI', age: [Function] }
console.log(typeof str); //object
console.log(typeof str.valueOf()); // 重写valueOf()方法，返回对象表示的基本字符串值
console.log(str.name);  // HI
console.log(str.age()); // 100

注意：在使用 new 运算符创建String，Number，Boolean三种类型的对象时，可以给自己添加属性和方法；或增加对应的包装对象的原型方法；但建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。

常见基本包装类型

1、Boolean类型

Boolean 类型没有特定的属性或者方法。一般直接将Boolean当做一个工具方法来使用。

2、Number类型

2.1 内置属性

内置属性均为静态属性，可以直接调用

属性	描述
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	使有能力向对象添加属性和方法。

console.log(Number.MAX_VALUE); //1.7976931348623157e+308
console.log(Number.MIN_VALUE); //5e-324

2.2 内置方法

方法	描述
toString	把数字转换为字符串，使用指定的基数。
toLocaleString	把数字转换为字符串，使用本地数字格式顺序。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	方法可在对象的值超出指定位数时将其转换为指数计数法。
valueOf	返回一个 Number 对象的基本数字值。

toString

把数字转换为字符串，使用指定的基数。

var num = 123;
console.log(num.toString()); //123

toLocaleString

把数字转换为字符串，使用本地数字格式顺序。

var num = 123;
console.log(num.toLocaleString()); //123

toFixed

把数字转换为字符串，结果的小数点后有指定位数的数字。

var num = 123;
console.log(num.toFixed(2)); // 123.00

toExponential

把对象的值转换为指数计数法。科学计数法

var num = 123;
console.log(num.toExponential()); // 1.23e+2

toPrecision

方法可在对象的值超出指定位数时将其转换为指数计数法。

var num = 123;
console.log(num.toPrecision(2)); // 1.2e+2

valueOf

返回一个 Number 对象的基本数字值。

var num = 123;
console.log(num.valueOf()); // 123 number

3、String类型

3.1 内置属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许向对象添加属性和方法

String 也包含对象的通用方法，比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值。

3.2 内置方法

字符操作方法

charAt(index)
返回指定索引位置的字符。参数index表示字符串中某个位置的数字，即字符在字符串中的下标。（从0开始）

var str = 'hello';
console.log(str.charAt(0)); // h

charCodeAt(index)

以Unicode编码形式返回指定索引位置的字符。参数index表示字符串中某个位置的数字，即字符在字符串中的下标。（下标从0开始）

字符串操作方法

concat(str1,str2…strx)
连接字符串。参数str1,str2…strx 表示将要被连接的字符串。

var str = 'hello';
console.log(str.concat('world', 'hello', 'javascript')); // helloworldhellojavascript

slice(start,end)
提取字符串的片断，并在新的字符串中返回被提取的部分。返回字符串start到end(不包括end)之间位置的字符串，start和end可以为负数。

var str = 'hello';
console.log(str.slice(0,3)); // hel

substring(start,end)
提取字符串中两个指定的索引号之间的字符。返回字符串start到end(不包括end)之间位置的字符串，start和end不可以为负数，没有end的话，提取剩余全部。

var str = 'hello';
console.log(str.substring(0, 3)); // hel
console.log(str.substring(0)); // hello

substr(start,length)
从起始索引号提取字符串中指定数目的字符。返回字符串start(可以为负数)开始的length个字符串。

var str = 'hello';
console.log(str.substr(0, 3)); // hel

字符定位方法

indexOf(str,n)
从n开始搜索第一个str，并将搜索的索引值返回。n为可选的整数参数，合法取值是 0 到 string.length - 1。如省略该参数，则将从字符串的首字符开始检索。没找到则返回-1。

var str = 'hello world';
console.log(str.indexOf('l')); // 2

lastIndexOf(str,n)
从n开始搜索的最后一个str，并将搜索的索引值返回。 n为可选的整数参数，合法取值是 0 到 string.length - 1。如省略该参数，则将从字符串的首字符开始检索，如果没找到则返回-1

var str = 'hello world';
console.log(str.lastIndexOf('l')); // 9

大小写转换方法

方法	描述
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toLocaleLowerCase()	把字符串转换为小写。本地化
toLocaleUpperCase()	把字符串转换为大写。本地化

var str = 'hello world';
// 转换为大写
console.log(str.toUpperCase()); //HELLO WORLD
// 转换为小写
console.log(str.toLowerCase()); //hello world

字符串模式匹配方法

方法	描述
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。

str.replace(参数1,参数2)
功能：替换指定字符串
参数介绍：
参数1是要被替换掉的字符串（或者是使用正则表示匹配到的字符串），参数2是用来替换的字符串（或者是一个回调函数，返回一个字符串）
返回值：返回一个替换后的新字符串

// 准备一个字符串
let str1 = "hello world javascript hello";
let str2 = "hello world javascript hello"
let str3 = "hello world javascript hello"

// 替换从左往右找到的第一个字符串
let newStr1 = str1.replace('hello',"你好")
console.log(newStr1) // 你好 world javascript hello

// 正则匹配，替换从左往右找到的第一个字符串
let newStr2 = str2.replace(/hello/,"你好")
console.log(newStr2); // 你好 world javascript hello

// 通过回调函数返回一个替换数据
let newStr3 = str3.replace(/hello/,function(){return "你好"})
console.log(newStr3); // 你好 world javascript hello

// 交换两个字符串中的单词，用到了正则中的分组
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newStr = str.replace(re, "$2, $1");
// Smith, John
console.log(newStr); // Smith, John

如果想要替换所有找到的字符串那么可以使用正则的全局匹配(g)

str.match(regExp)
功能：字符串匹配
参数：正则表达式

let str1 = "hello world javascript java"
let str2 = "hello world javascript java"

let newStr1 = str1.match(/java/)
let newStr2 = str2.match(/java/g)
console.log(newStr1); // ['java',index: 12,input: 'hello world javascript java',groups: undefined]
console.log(newStr2); // [ 'java', 'java' ]

如果使用 g 标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组。
如果未使用 g 标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。在这种情况下，返回的项目将具有如下所述的其他属性

str.search(regexp)
功能：当你想要知道字符串中是否存在某个模式（pattern）时可使用 search()，类似于正则表达式的 test() 方法。
参数：正则表达式
返回值：如果匹配成功，则 search() 返回正则表达式在字符串中首次匹配项的索引;否则，返回 -1。

let str1 = "hello world javascript java java"
let str2 = "hello world javascript java"

let search1 = str1.search(/hello/)
console.log(search1); // 0

let search2 = str1.search(/java/)
console.log(search2); // 12
let search4 = str1.search(/java/g) // 只会匹配首次出现的字符串
console.log(search4); // 12

let search3 = str1.search("world") // 非正则时会自动转为正则
console.log(search3); // 6

str.split([separator[, limit]])
功能：按指定分隔符分割字符串
参数：separator指定表示每个拆分应发生的点的字符串。limit是一个整数，限定返回的分割片段数量
返回值：返回源字符串以分隔符出现位置分隔而成的一个数组

let str = "我,喜,欢,你"
let arr = str.split(",") // 分割点是 ","一个逗号
console.log(arr); // [ '我', '喜', '欢', '你' ]
console.log(arr[0]); // 我

let str1 = "我,喜,欢,你"
let arr1 = str1.split(",", 2) // 分割点是 ","一个逗号
console.log(arr1); // [ '我', '喜' ]

JS内置对象

1、Math对象

Math 对象用于执行数学任务。

1.1 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

// 获取π的值
var pi = Math.PI;
console.log(pi); //3.141592653589793
// 求平方根
var sqrt_value = Math.sqrt(16);
console.log(sqrt_value); //4

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。通过把 Math 作为对象使用就可以调用其所有属性和方法。

1.2 对象方法

Math对象方法过多，只需掌握常用的即可，其他可参考MDN文档
常用方法如下：

1.2.1 最大值与最小值

Math.min() 求一组数中的最小值

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

Math.max() 求一组数中的最大值

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

1.2.2 将小数值舍入为整数的几个方法

Math.ceil() 向上舍入

console.log(Math.ceil(2.1)); //3

Math.floor() 向下舍入

console.log(Math.floor(2.7)); //2

Math.round() 四舍五入

console.log(Math.round(2.7)); //3
console.log(Math.round(2.1)); //2

1.2.3 随机数

Math.random() 返回大于0小于1的一个随机数 [0，1)

console.log(Math.random()); // 随机数

2、Date对象

Date 对象用于处理日期和时间。是JS提供的内置构造函数。

2.1 创建Date对象

var myDate = new Date();
console.log(myDate); //2022-04-13T06:27:11.467Z
//在node环境和浏览器环境输出不同
//Date 对象会自动把当前日期和时间保存为其初始值。

//==============================================
//new Date()在传入参数的时候，可以获取到一个你传递进去的时间.
var time = new Date('2022-04-13 06:06:06') 
console.log(time); 
//node环境下结果：2022-04-12T22:06:06.000Z
//浏览器环境下结果：Wed Apr 13 2022 06:06:06 GMT+0800 (中国标准时间)

//==============================================
//创建对象时是可以传递多个数字参数的
var time = new Date(2022, 3, 13, 10, 10, 10);
console.log(time);

// 第一个参数表示年
// 第二个参数表示月份，月份从0开始计数，0表示1月，11表示12月
// 第三个参数表示该月份的第几天，1~31
// 第四个参数表示当天的几点，0~23
// 第五个参数表示的是该小时的多少分钟，0~59
// 第六个参数表示该分钟的多少秒，0~59

//node环境下结果：2022-04-13T02:10:10.000Z
//浏览器环境下结果：Wed Apr 13 2022 10:10:10 GMT+0800 (中国标准时间)

2.2 常用对象方法

var time = new Date();

toString()方法

获取当前时间，使用toString()进行转换为当前区的格式。

console.log(time.toString()); //Wed Apr 13 2022 14:50:36 GMT+0800 (中国标准时间)

toLocaleString()

获取当前时间本地化字符串.

console.log(time.toLocaleString());//2022/4/13 14:50:36

getFullYear()

得到指定字符串中的哪一年

console.log(time.getFullYear()) ; //2022

getMonth()

得到指定字符串中的哪一个月份，但需要注意的时月份是从0开始数的，也就是0代表1月，1代表2月，以此类推

console.log(time.getMonth()); //3

getDate()

得到指定字符串中的哪一天。

console.log(time.getDate()) //13

getHours()

得到指定字符串中的哪小时

console.log(time.getHours()) //14

getMinutes()

得到指定字符串中的哪分钟

console.log(time.getMinutes()) //50

getSeconds()

得到指定字符串中的哪秒钟

console.log(time.getSeconds()) //36

getDay()

得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）

console.log(time.getDay()) //3

getTime()

得到执行时间到格林威治时间的毫秒数时间戳

console.log(time.getTime()) //1649832636816

其他补充看一看MDN网或者看下我这篇文章Date对象使用

扩展库

1、Moment.js库

JavaScript日期处理类库。

安装moment库

安装moment库

// 在当前目录下使用node安装moment库(直接在vscode终端操作即可）
npm install moment --save

导入与使用：

// 模块化导入moment
var moment = require('moment');
// 设置本地语言为中文
require('moment/locale/zh-cn')
moment.locale('zh-cn');

浏览器中导入Moment.js库

1、可以从浏览器下载js文件到本地。
在这里插入图片描述
复制链接后，在浏览器搜索栏搜索，页面会显示一堆代码，复制代码，放到本地的js文件中即可。

2、也可以导入在线cdn文件,可以去bootcdn官网导入，要求网络好。

复制script标签后放到head标签里面。

导入文件

<script src="引入的moment.js文件"></script>
<script>
    moment().format();
</script>

时间戳转换

console.log(moment(parseInt(1630334723399)).format('YYYY-MM-DD HH:mm:ss'));

有关format的格式，参考http://momentjs.cn/docs/#/displaying/format/
其他方法请看momentjs文档

2、lodash库

odash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：
（1）遍历 array、object 和 string
（2）对值进行操作和检测
（3）创建符合功能的函数

安装lodash库

nodejs环境下安装

在当前目录下安装lodash库
npm install lodash --save

具体使用

具体介绍和使用直接看这个lodash文档