JavaScript高级程序设计之基本引用类型


Posted in Javascript onNovember 17, 2021

前言:

引用值(对象)都是某个特定的引用类型的实例对象,例如 Date类型、Function类型,RegExp 正则表达式类型等等。JavaScript内置了一些常用的引用类型给开发者使用。

1、Date

下面3个方法返回的单位为毫秒的时间戳

let t1 = Date.UTC(2020, 11, 7, 22,14)
let t2 = Date.parse("5/23/2020")
let t3 = Date.now()

parse 接收的参数格式可以为:

JavaScript高级程序设计之基本引用类型

Date() 构造函数接收的参数有很多种,可以不接收任何参数,也可以接收时间戳,还可以是UTC函数和parse函数接收的参数

let t4 = new Date()
let t5 = new Date(2020, 11, 7)  // 月份从0开始
let t6 = new Date("5/23/2020")

Date 类型提供了相当于的函数,可自行查阅相关API

2、RegExp

JavaScript中,正则表达式使用如下方式表示

let  express = /pattern/flags;
  • g :全局模式,表示查找字符串的全部内容,而不是找到第一个匹配的内容就结束。
  • i :不区分大小写,表示在查找匹配时忽略 pattern 和字符串的大小写。
  • m :多行模式,表示查找到一行文本末尾时会继续查找。
  • u :Unicode 模式,启用 Unicode 匹配。
  • s : dotAll 模式,表示元字符 . 匹配任何字符(包括 \n 或 \r )。

除了用字面量形式表示正则表达式之外,还可以使用RegExp构造函数创建。

let p1 = /[cb]at/i

let p2 = new RegExp("[cb]at", "i")

两者等效。

RegExp对象有两个重要的方法,分别是exectest方法

let p1 = /[cb]at/i
let text = "hello cat bat nihao"

matches = p1.exec(text)

console.log(matches.index)
console.log(matches.input)
console.log(matches[0])  //cat

如果正则表达式匹配的话,返回的 matches Array数组对象, 不匹配返回的就是null。 另外 matches 还有两个额外的属性 indexinput 。 index 是匹配的其实位置。input就是要查找的字符串。 数组里面的元素其实就是正则表达式中的捕获分组。如果没有分组,第0个元素就是匹配的那个字符串。

let p1 = /([cb]a(t))/i
console.log(matches[0])  //cat
console.log(matches[1])  //cat
console.log(matches[2])  //t

test 方法返回的是布尔值,用于判断字符串是否匹配正则表达式。

let matched = /\d+/g.test("13")
console.log(matched)  //true

这里还要解释一下flag里面的那个g的作用, 现在看起来好像没什么用,看下面这个例子就能明白

let p1 = /[cb]at/gi
let text = "hello cat bat nihao"
console.log(p1.exec(text)) // ["cat", index: 6, input: "hello cat bat nihao", groups: undefined]
console.log(p1.exec(text))  //["bat", index: 10, input: "hello cat bat nihao", groups: undefined]

text 这个字符串中,其实有两处是匹配正则表达式的,但是我们调用exec的适合,matches数组里面的元素是cat,并没有bat。 当我第二次执行exec 的适合,返回的就是bat了。如果没有g,不管调用多少次,返回的都是cat。找到第一个匹配的内容就结束了。

另外,字符串提供了很多方法,接收正则表达式作为参数,可以用于正则表达式匹配,字符串替换、查找指定字符串或则分组。

JavaScript高级程序设计之基本引用类型

3、原始包装类型

BooleanNumberString 这三个引用类型是原始类型对应的包装类型, 当在原始值身上用到某些方法时,会自动将原始值包装成对应的引用类型。比如上面字符串提供的那些方法,原始值本来是没有这些方法的,但是String类型就有。 这种机制使得原始值也能拥有对象的行为。

原始包装类型有如下特点,可以注意下:

let s1 = "hello"
s1.name = "sex"
console.log(s1.name) //undefined

为什么s1.name undefined 呢? 执行第二行代码的时候,会将s1转换为了包装类型, 执行完这行代码时,该类型的对象其实就被回收了。然后在第三行又创建了一个包装类型的对象,但是这个时候并没有name属性,所以就是undefined。 除非显示的创建一个String对象。

let s1 = "hello"
s1 = new String(s1)
s1.name = "sex"
console.log(s1.name)

对于Number, 使用 new 和 不适用 new 的区别

let value = 25
let number = Number(value)
obj = new Number(value)

console.log(typeof number)  //number
console.log(typeof obj)  //object

console.log(number instanceof Number)  //false  原始值不是任何类型的实例对象
console.log(obj instanceof Number)   //true

number 是原始值, obj Number类型的对象。

Number对象有个toFxied 方法用于将数值格式化为字符串, 用于保留指定位小数

let num = 10.007
console.log(num.toFixed(2))  //10.01

对于String,提供了非常多的操作字符串的方法,可以按照实例全部手敲一遍。

4、其他内置对象

全局作用域下面的变量,常用的一些单独的函数如evelparseIntisNaN,还有原始引用类型的构造函数 StringBooleanNumber FunctionArray都是Global的属性。但是我们没法显示的访问Global对象。另外encodeURIencodeURIComponent 在处理URL的适合非常有用。

url = "http://www.baidu.com/vue. js"
console.log(encodeURI(url))   //http://www.baidu.com/vue.%20js
console.log(encodeURIComponent(url))  // http%3A%2F%2Fwww.baidu.com%2Fvue.%20js

与之对应的解码函数是decodeURIdecodeURIComponent

在浏览器中,window对象作为了Global的代理对象,全局作用域下面的变量可以通过window对象来访问。

var name = "zhang"
console.log(window.name)
Math对象
console.log(Math.max(1,2,3,4))  // 最大值
console.log(Math.min(3,3,4))  // 最小值

console.log(Math.ceil("1.2"))  //向上取整
console.log(Math.floor(3.3))  //向下取整
console.log(Math.round(3.6))  //四舍五入取整

到此这篇关于JavaScript高级程序设计之基本引用类型的文章就介绍到这了,更多相关JavaScrip基本引用类型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
小程序实现录音功能
Sep 22 Javascript
JavaScript高级程序设计之变量与作用域
javascript对象3个属性特征
详细聊聊浏览器是如何看闭包的
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
react 路由Link配置详解
Nov 11 #Javascript
React Fragment介绍与使用详解
Nov 11 #Javascript
在js中修改html body的样式
Nov 11 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php中长文章分页显示实现代码
2012/09/29 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
javascript操作css属性
2013/12/30 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
生产班组长岗位职责
2014/01/05 职场文书
20岁生日感言
2014/01/13 职场文书
计算机相关的自我评价
2014/01/15 职场文书
中专自我鉴定
2014/02/05 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python