简单聊聊js中的内置对象

javascript的三种对象类型：

1、内置对象，在浏览器中javascript中已经定义好的对象，可以直接拿来使用

2、宿主对象，就是执行JS脚本的环境提供的对象，所有的BOM和DOM都是宿主对象；

3、自定义对象，就是开发人员自己定义的对象。

今天就来聊一聊JS中的内置对象。更详细的请查看MDN官方文档内置对象

常见内置对象	描述
Array	数组
Boolean	布尔对象
Date	日期对象
Error	异常对象
Function	函数构造器
Math	数学对象
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象
Set	集合对象
Map	创建映射

一、Map对象

MDN中的Map文档

Map用来存储键值对结构的数据（key-value）

Object中存储的数据就可以认为是一种键值对结构，二者的主要区别为：

Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串

Map中任何类型的值都可以称为数据的key

1、常用属性和方法

Method	Description
new Map()	创建新的 Map 对象。
map.set( key,value )	为 Map 对象中的键设置值。
map.get(key)	获取 Map 对象中键的值。
map.entries()	返回 Map 对象中键/值对的迭代器对象
map.keys()	以数组形式返回所有key
map.values()	以数组形式返回所有value
map.clear()	删除所有键值对
map.delete(key)	删除指定数据
map.has(key)	检查map中是否包含指定键，返回布尔值。

Property	Description
map.size	获取 Map 对象中某键的值。

注：调用size属性的格式与其他方法不同，

2、示例

// 创建一个Map
const map = new Map()
//添加键值对
map.set("name", "张三")
map.set(NaN, "啊哈")
map.delete(NaN)
// map.clear()   //清除所有内容
console.log(map.get("name"))  // 张三
fruits.get("age");  // 返回 undefined
console.log(map.has("name"))  // true

//map.entries()方法
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]

二、Set

Set用来创建一个集合，它的功能和数组类似，不同点在于Set中不能存储重复的数据

1、属性和方法

方法和属性	描述
new Set()	创建新的 Set 对象。()中可传入数组作为参数
add()	向 Set 添加新元素。
clear()	从 Set 中删除所有元素。
delete()	删除由其值指定的元素。
entries()	返回 Set 对象中值的迭代器对象。
has()	如果值存在则返回 true。
forEach()	为每个元素调用回调。
keys()	返回 Set 对象中值的数组。
values()	与 keys() 相同。
size	返回元素计数。

2、示例

// 创建一个Set
const set = new Set()
//创建时，传入数组作为参数
const arr2 = [1,2,3,2,1,3,4,5,4,6,7,7,8,9,10]
const set2 = new Set(arr2)
//向set中添加数据
set.add(10)

三、Date对象

Date 对象用于处理日期和时间，日期对象可用 new Date() 创建。

1、创建Date对象

1.1、new Date() ;

依据系统设置的当前时间来创建一个Date对象

1
2
3

let today = new Date();

console.log(today); //Wed Aug 31 2022 12:50:27 GMT+0800 (香港标准时间)

2.2、new Date(value)

1
2
3

let day = new Date(1314520);

console.log(day); //Thu Jan 01 1970 08:21:54 GMT+0800 (香港标准时间)

2.3、new Date(dateString);

//"月/日/年 时:分:秒"
d = new Date("2019-12-23T23:34:35")
//年-月-日T时:分:秒
t = new Date("12/23/2022 23:34:35")

2.4、new Date(年份, 月, 日, 时, 分, 秒, 毫秒)

除年与月的值外，其余为可选值

月份从0开始，0表示1月。day从1开始

2、常用属性和方法

更多方法请看W3C和MDN

方法	描述
getFullYear()	获取4位年份
getMonth()	返当前日期的月份（0-11）
getDate()	返回当前是几日(1,31)
getDay()	返回当前日期是周几（0-6） 0表示周日
…	类似的还有返回分钟、秒、毫秒（均从0开始）
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
Date.now()	获取当前的时间戳
toLocaleString()	可以将一个日期转换为本地时间格式的字符串

3、日期的格式化

object.**toLocaleString([locales [, options]])**，可以将一个日期转换为本地时间格式的字符串，可传入的参数如下：

参数用于指定格式化对象时使用的语言环境，默认为当前环境的语言，可以不传(zh-CN 中文中国、 zh-HK 中文香港、en-US 英文美国等)
2.需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置

const d = new Date()
let result = d.toLocaleString("zh-CN", {
	year: "numeric",
    month: "long",
    day: "2-digit",
    weekday: "short",
 })
console.log(result)//2022年8月31日周三

四、String对象

JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

字符串其本质就是一个字符数组,很多方法和数组非常类似

方法	描述
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
concat()	连接字符串。
indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
replace()	使用一个新字符串替换一个指定内容
replaceAll()	使用一个新字符串替换所有指定内容
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

五、正则表达式

正则表达式用来定义一个规则

通过这个规则计算机可以检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来

正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象

更详细的内容可参考W3C的文档以及菜鸟教程文档

1、创建

创建 RegExp 对象的语法：

//语法： new RegExp(pattern, attributes);
let reg = new RegExp("a", "i")  //可通过变量动态创建
let p = "a"
let reg = new RegExp(p, "i")

直接量语法

1	//语法：/pattern/attributes

修饰符	含义	描述
i	ignore - 不区分大小写	将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。
g	global - 全局匹配	查找所有的匹配项。
m	multi line - 多行匹配	使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。
s	特殊字符圆点 . 中包含换行符 \n	默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n。

2、语法

/*
	1.在正则表达式中大部分字符都可以直接写
	2.| 在正则表达式中表示或
	3.[] 表示或（字符集）
		[a-z] 任意的小写字母
		[A-Z] 任意的大写字母
		[a-zA-Z] 任意的字母
		[0-9]任意数字
	4.[^] 表示除了
		[^x] 除了x
	5. . 表示除了换行外的任意字符
	6. 在正则表达式中使用\作为转义字符
	7. 其他的字符集
		\w 任意的单词字符 [A-Za-z0-9_]
		\W 除了单词字符 [^A-Za-z0-9_]
		\d 任意数字 [0-9]
		\D 除了数字 [^0-9]
		\s 空格
		\S 除了空格
		\b 单词边界
		\B 除了单词边界
	8. 开头和结尾
		^ 表示字符串的开头
		$ 表示字符串的结尾
	9.量词
		{m} 正好m个
    	{m,} 至少m个
    	{m,n} m-n个
    	+ 一个以上，相当于{1,}
    	* 任意数量的a
    	? 0-1次 {0,1}
*/

#####RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

3、正则表达式示例

let re = /abc|bad/  //abc或者bad
re = /\./            //存在.
re = /[a-z]/         //任意小写字母
re = /a{3}/          //连续的3个a
re = /^a{3}$/        //开头有三个或三个以上a
re = /^(ab){3}$/      //开头只有3个a

使用exec()方法

let str = "abcaecafcacc"
let re = /a(([a-z])c)/ig   //不区分大小写的全局搜索，加括号可以进行分组，这样早exec()返回的数组中会包含多个值
//若为let re = /a[a-z]c/ig  第一次调用返回得到[abc]，而分组后会得到["abc","bc","b"]
let result = re.exec(str) //调用一次只会返回一个值,返回的是一个对象，可通过索引得到符合的值
console.log(result)
while(result){
	console.log(result[0], result[1], result[2])
	result = re.exec(str)
}

注：exec返回的是一个数组对象，除了里面包括返回的可匹配的值，还包括一些属性，比如在匹配对象的第一个字符在原来字符串中的索引，还包括原字符串。可分别通过index和input读取

let str = "abcaecafcacc"
let re = /a(([a-z])c)/ig   
let result = re.exec(str)
console.log(result[0],result[1],result[2]) //返回"abc","bc","b"
console.log(result.length)//返回3
console.log(result.index) //返回0
console.log(result.input)//返回原字符串，"abcaecafcacc"

4、练习

菜鸟教程的正则表达式测试工具

4.1、找到手机号

//找到字符串中的手机号  （dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd）
//先找到规则：第一位要是1，第二位是3-9，然后是任意九个数字
let re = /1[3-9]\d{9}/g
let str =
    "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
let result
while (result = re.exec(str)) {
	console.log(result[0], result[1], result[2])
}

4.2、隐藏部分号码

//
re = /(1[3-9]\d)\d{4}(\d{4})/g
let str =
    "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
let result
while (result = re.exec(str)) {
	console.log(result[1]+"****"+result[2])
}

4.3、判断是否是一个手机号

1 2	let re = /^1[3-9]\d{9}$/ //开头和结尾都定义 console.log(re.test("13777788888"))//test()会根据是否符合规则返回布尔值

5、字符串的正则表达式

支持正则表达式的 String 对象的方法

方法	描述
search	可以去搜索符合正则表达式的内容第一次在字符串中出现的位置，没有找到则返回-1
match	根据正则表达式去匹配字符串中符合要求的内容，返回一个数组
matchAll	根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)-,它返回的是一个迭代器
replace	根据正则表达式替换字符串中的指定内容
split	把字符串分割为字符串数组。

5.1、split()

let str = "a@b@c@d"
let result = str.split("@") //得到['a','b','c','d']

str = "孙悟空abc猪八戒adc沙和尚"
result = str.split(/a[bd]c/) //得到['孙悟空','猪八戒','沙和尚']

5.2、search

let str = "孙悟空abc猪八戒adc沙和尚"
let result = str.search("abc") //返回3,

str = "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
result = str.search(/1[3-9]\d{9}/)

2.3、replace()

1
2
3

str =  "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
//g表示全局搜索模式，可找到所有匹配的元素，不加g则只会找到一个就停止
result = str.replace(/1[3-9]\d{9}/g, "哈哈哈")

2.4、match与matchAll()

letstr = "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
result = str.match(/1[3-9]\d{9}/g) //返回['13715678903', '13457890657', '13811678908']

result = str.matchAll(/1[3-9](\d{9})/g) //返回的是一个迭代器，可用for-of打印
for(let item of result){
	console.log(item)
}

六、JSON与对象的序列化

在JS中对象的序列化通常是将一个对象转换为字符串（JSON字符串）

序列化的好处：对象转换为字符串后，可以将字符串在不同的语言之间进行传递

如何进行序列化：

在JS中有一个工具类 JSON （JavaScript Object Notation），JS对象序列化后会转换为一个字符串，这个字符串我们称其为JSON字符串
也可以手动的编写JSON字符串，在很多程序的配置文件就是使用JSON编写的
使用方括号保存数组，数组值使用 ,（逗号）分割。

1、语法

数据使用名/值对表示
使用大括号保存对象，每个名称后面跟着一个 ‘:’（冒号），名/值对使用 ,（逗号）分割。

注意事项：

基本语法：

数据使用名/值对表示

JSON字符串的属性名必须使用双引号引起来
JSON中可以使用的属性值（元素）

数字（Number）、字符串（String）必须使用双引号、布尔值（Boolean）、空值（Null）、对象（Object {} ）、数组（Array []）
JSON的格式和JS对象的格式基本上一致的，

注意：JSON字符串如果属性是最后一个，则不要再加,

2、相关函数

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

const obj = {
	name: "孙悟空",
	age: 18,
}
const str = JSON.stringify(obj)//将一个对象转换为JSON字符串
const obj2 = JSON.parse(str)//将一个JSON格式的字符串转换为JS对象

更详细的可学习JSON相关的教程，这里只做简单了解，后续会继续补充相关内容