简单聊聊js中的内置对象
文章目录
- 一、Map对象
- 1、常用属性和方法
- 2、示例
- 二、Set
- 1、属性和方法
- 2、示例
- 三、Date对象
- 1、创建Date对象
- 1.1、*new Date() ;*
- 2.2、*new Date(value)*
- 2.3、*new Date(dateString);*
- 2.4、new Date(年份, 月, 日, 时, 分, 秒, 毫秒)
- 2、常用属性和方法
- 3、日期的格式化
- 四、String对象
- 五、正则表达式
- 1、创建
- 2、语法
- 3、正则表达式示例
- 4、练习
- 4.1、找到手机号
- 4.2、隐藏部分号码
- 4.3、判断是否是一个手机号
- 5、字符串的正则表达式
- 5.1、split()
- 5.2、search
- 2.3、replace()
- 2.4、match与matchAll()
- 六、JSON与对象的序列化
- 1、语法
- 2、相关函数
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对象
let today = new Date();console.log(today); //Wed Aug 31 2022 12:50:27 GMT+0800 (香港标准时间)
2.2、new Date(value)
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")
直接量语法
//语法:/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] 除了x5. . 表示除了换行外的任意字符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、判断是否是一个手机号
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()
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相关的教程,这里只做简单了解,后续会继续补充相关内容
简单聊聊js中的内置对象相关推荐
- JS中的内置对象 --- Math、Date、Array、String
1. 基本概念区分 实例对象:通过构造函数创建出来,实例化对象.实例方法必须通过实例对象调用 静态对象(内置对象): 不需要创建, 直接就是一个对象,方法(静态方法)直接通过这个对象名调用.静态方法必 ...
- js中的内置对象(详细篇)
在js里,一切皆为或者皆可以被用作对象.可通过new一个对象或者直接以字面量形式创建变量(如var i="aaa"),所有变量都有对象的性质.注意:通过字面量创建的对象在调用属性和 ...
- javascript中的内置对象和数据结构
文章目录 简介 基础类型 undefined Boolean和Boolean对象 Number和BigInt String Symbol null Object Function Date Array ...
- 前端JS学习笔记——内置对象Math、Date 、Array、String
目录 1.Math常用方法 2.Date()方法 如何获取Date的时间戳 Date()方法的使用 格式化日期时间 格式化输出一串时间日期 倒计时功能 3.Array方法 创建数组对象的两种方法 检测 ...
- 12JavaScript中的内置对象
技术交流QQ群:1027579432,欢迎你的加入! 1.内置对象 JavaScript中的对象分为3种:自定义对象.内置对象.浏览器对象: 前两种对象是JS中的基础内容,属于ECMAScript,第 ...
- js数据类型、内置对象以及装箱拆箱操作
数据类型 基本类型: Number,String,Boolean,Null,Undefined,Symbol.BigInt 访问:基本数据类型的值是按值访问的. 存储:基本类型的变量是存放在栈内存(S ...
- JavaScript中的内置对象
一.什么是内置对象 js本身已经写好的对象,我们可以直接使用不需要定义它. 常见的内置对象有 Data.Array,Math.RegExp.Error.String.... Array高级API so ...
- jsp中的内置对象(9个)、作用
jsp内置对象 定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量 JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): 1.request对象 客户 ...
- JavaScript(九):JavaScript中的内置对象
一.对象的概念 对象是一种特殊的数据类型(object). 拥有一系列的属性和方法. 分为内置对象和自定义对象. 二.String对象 String对象用来支持对于字符串的处理. 1.属性 lengt ...
最新文章
- 【行业看点】量子通信 量子计算机 量子列车…… 量子的世界究竟多精彩?
- PAT A1030 动态规划
- c语言编程 三角波,周期矩形波、周期锯齿波、周期三角波,C语言程序.doc
- 抽象SQL查询:SQL-MAP技术的使用
- LeetCode 359. 日志速率限制器(哈希map)
- 你真的了解 ConcurrentHashMap 吗?
- [BJOI2017]树的难题 点分治,线段树合并
- html dom子节点,HTML DOM 节点
- Activiti7 表介绍
- LDC1314 学习资料
- iphone机型分辨率
- 【PPT】幻灯片放映中常用快捷键
- 服务器ie浏览器总是未响应,win7电脑IE浏览器总是未响应怎么办 IE浏览器无响应原因解决方法...
- python拟合二次函数_Python 最小二乘法 拟合 二次曲线
- openssl 的编译(linux、Ubuntu) 和 交叉编译(arm、Hi3531A)的问题分析、解决
- B2B2C 商城系统 WSTMart_v2.0.6_180726程序发布
- Android开发:Shape详细解读
- 第1讲 2.2人机交互
- MT6129射频处理器,MT6129芯片原理资料介绍
- 在gmail中使用邮件模板功能
热门文章
- Python前景介绍
- 电脑怎样显示wifi连接到服务器,电脑如何打开wifi连接到服务器地址
- Python框架浅谈
- HDOJnbsp;nbsp;2602nbsp;nbsp;nbsp;Bonenbsp;Collector
- Mac怎么配置maven环境
- 经典再现,用python画出剑仙一中的绝美桃花林
- Linux上如何清理内存缓存、缓冲与交换空间?
- AxureRP使用技巧
- Java实现地下城游戏(动态规划)
- [基础服务] [kubernetes] KubeSphere 基于 Kubernetes (K8S)的安装