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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JS实现队列的先进先出功能示例
2017/05/10 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
解放思想演讲稿
2014/09/11 职场文书
甲午大海战观后感
2015/06/02 职场文书
优质护理服务心得体会
2016/01/22 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js