前言:本篇博客进入到了JavaScript高级程序设计的第五章内容,及JavaScript的基本引用值类型。JavaScript的基本引用值类型有Date、RegExp。以及便于操作原始值类型的原始值包装类型String、Number、Boolean。原始值包装类型提供了操作布尔值、数值、以及字符串的多种方法,将其主要使用到的方法都进行了归纳,JS中的内置对象Global的基础概念以及作用、window对象的基本概念、以及用于数值运算转换的Math内置对象都进行了基本的介绍。
一、基本引用类型Date、RegExp。
要学习基本的引用类型,首先就是要十分明确什么是引用类型。所谓引用类型,就是指将数据和功能组织到一起的结构,它和类有着本质的区别,引用类型有时候也被称之为对象定义。
1.1 Date引用值类型
创建日期对象的基本方式:(需要注意到的是,如果不给其传递参数,则创建的对象将是当前的日期和时间。)
可以使用Date.now()方法返回当前的日期和时间的毫秒数来进行代码执行时间的分析中。
目前支持的日期格式有如下几种:
1、"月/日/年" 比如June/23/2022.
2、"月名 日,年"
3、"周几 月名 日 年 时:分:秒 时区"
4、ISO 8601扩展格式:"YYYY-MM-DDTHH:mm:ss:sssZ"。
//1 使用new操作符来调用Date的构造函数
let date=new Date();
//要基于其他时间和日期创建可以使用如下两种方式Date.parse以及Date.UTC
//在创建时间时传入参数时Date会在后台调用上述两个方法中的一个。
let exampleDate=new Date("June 24,2022");
let example2Date=new Date(Date.UTC(2022,1));
//两个方式的不同点
//1、Date.parse创建的时间是基于本地日期,而不是GMT日期。Date.UTC创建的是GMT时区
1.2 继承的方法
Date的valueOf()方法根本不返回字符串、被重写之后返回的是日期的毫秒表达式。
toString()方法返回的是带有时区信息的日期和时间,时间也是以24小时为单位表示的。
1.3. 格式化时间的方法:
所谓的格式化时间就是将时间以字符串的形式输出:
1.4常用到的创建时间/日期组件的方法:
其中要注意到获取周几和月份中具体日期的方法以及返回值的表示范围。
getTime(); //返回的是日期的毫秒表示,与valueOf()相同。
setTime(milleseconds); //设置当前的时间。
getFullYear(); //返回四位年数
getMounth(); //返回表示月数的数字(0-11分别对应着1-12月)
getDate(); //返回日期中的日(1-31)
getDay(); //返回日期中表示周几的数值,0为周日,6为周六,这一点很重要。
getHours(); //返回日期中的时(0-23);
getMinutes(); //返回日期中的分(0-59);
getSeconds(); //返回日期中的秒。
二、RegExp
2.1 什么是RegExp以及正则表达式
ECMAScript通过RegExp类型支持正则表达式,使用类似于Perl的简介语法进行创建。
关于正则表达式:
又称规则表达式,(Regular Expression,在代码中常简写为regex、regexp或RE),是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"),是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式(规则)的文本。
简而言之就是检查某字符串的内容是否符合预定的规范,前端常用于进行输入的合理性校验。
let expression= / pattern/flags;
上述中的patterns可以是任何简单或复杂的正则表达式,包括字符类、限定符、分组、前向查找和反向引用。其中每个正则表达式都可以带零个或多个flags(标记),用于控制正则表达式的行为。
常用到的正则表达式的标记有如下几个:
2.2 RegExp中的实例方法
1)主要用到的就是exec()方法,仅接收一个参数,就是要应用模式的字符串。
如果找到了匹配项,则返回第一个匹配信息的数组,没有找到则返回null。返回的数组是Array的实例,但是具有额外的两个属性,index和input,index就是字符串中匹配模式的起始位置,input就是需要查找的字符串。
2)另外一个方法就是test(),接收一个字符串参数。如果输入的文本与模式相匹配,则参数返回结果为true、否则返回false,一般常用于if的条件逻辑判断。
3)正则表达式valueOf()返回的是正则表达式的本身。
RegExp 构造函数包含一些属性(这些属性在其他语言中被看成是静态属性)。这些属性适用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。关于这些属性的另一个独特之处,就是可以通过两种方式访问它们。换句话说,这些属性分别有一个长属性名和一个短属性名(Opera 是例外,它不支持短属性名)。下表列出了RegExp 构造函数的属性:
三、原始值包装类型
3.1 什么是原始值类型?
一般而言,原始值类型上并不具备属性和方法,为了更好的操作原始值。ECMAScript提供了三种特殊的引用值类型:Boolean、Number、以及String。每当用到某个原始值的方法或属性时,后台都会创建一个相应的原始包装类型的对象,从而暴露出操作原始值的各种方法;
//创建一个string并进行方法的调用
let s1='Hello JavaScript';
const s2=s1.subString(2);
引用类型和原始值包装类型的区别在于以下:
在通过new 实例化引用类型后,所得到的实例对象会在离开作用域时被销毁,而自动创建的原始值包装类型则只存在于访问它的那行代码执行期间而已。意味着不能在运行时给原始值添加属性和方法。
3.2 Boolean
Boolean对象在ECMAScript中使用到的次数非常少,我们必须理解原始布尔值true和false与Boolean对象的之间的区别很重要,建议永远不需要使用Boolean对象,因为对其进行逻辑运算、instanceof时返回的永远都是true,此时会严重影响最终的结果判断。
3.3Number
Number是对应数值的引用类型。
关于Number所提供的几个将数值格式化为字符串的方法如下:
//1、toFixed()接收返回保留多少小数位的参数。如果超过了则进行四舍五入的操作
const a=19;
console.log(a.toFixed(2)); //输出结果为19.00
//2、toExponential()接收一个参数就是将数值转换为科学计数法后保留的小数的位数。
const a=19;
console.log(a.toExponential(2)); //输出结果为0.19e2
//3、toPrecission()根据情况返回的是最为合理的输出结果,可能是科学计数法、也可能是固定的长度。
const a=19;
console.log(a.toPrecission(2)); //输出结果为19
3.4 String
对应字符串的引用类型
ECMAScript中的字符串是由16位码元组成的,对于多数字符而言,每16位码元对应一个字符。
对于String提供的操作方法我们需要了解的有,常见的字符串类型操作方法如下
//1、charAt()返回字符串中指定位置的字符。
let str = "Hello";
let s = str.charAt(1);
console.log(s);//e
//2、concat()用于连接两个或多个字符串,未改变原有的字符串
let str = "Hello";
let str2 = "World";
let s = str.concat(str2);
console.log(s); //HelloWorld
//3、indexOf()方法 返回某个指定的字符串在字符串中首次出现的位置,未找到则直接返回-1
let str = "Hello";
let s = str.indexOf("e");
console.log(s); //1
//4、includes()方法,检测字符串中是否包含有指定的子字符串
let str = "Hello";
let s = str.includes("e");
console.log(s); //true
//5、repeat()对字符串进行指定的复制次数
let str = "Hello";
let s = str.repeat(2);
console.log(s); //HelloHello
//6、match()方法,在字符串内检索指定的值,找到一个或多个正则表达式的匹配。
let str = "Hello";
let s = str.match(/l/g);
console.log(s); //[ 'l', 'l' ]
//7、trim()用于删除字符串中头尾的空白符,空白符包括了空格、制表符tab、换行符等其他空白符。
let str = " Hello ";
let s = str.trim();
console.log(str); // Hello
console.log(s); //Hello
//8、toLowerCase()和toUpperCase()方法
//将字符串转换为小写或大写形式
let str = "Hello";
let s = str.toLowerCase();
let s2 = str.toUpperCase();
console.log(str); //Hello
console.log(s); //hello
console.log(s2);//HELLO
//9、substring()用于提取字符串介于两个指定下标之间的字符。
let str = "Hello";
let s = str.substring(1, 3);
console.log(str); //Hello
console.log(s); //el
//10、split()方法用于将字符串分割成字符串数组
let str = "Hello";
let s = str.split("e");
console.log(str); //Hello
console.log(s); //[ 'H', 'llo' ]
//11、slice(start,end)方法可以提取字符串的某个部位,并以新的字符串返回被提取的部分。
//一般默认不包括end位的字符,如果没有指定,则直接截取到末尾。
let str = "Hello";
let s = str.slice(1, 2);
console.log(s); //e
//12、search()方法用于检索字符串中指定字符串、或检索与正则表达式相匹配的子字符串,返回的是与指定查找的字符串或者正则表达式相匹配的String对象的起始位置。
let str = "Hello";
let s = str.search("lo");
console.log(s); //3
//13、replace(searchVlaue,newValue)用于在字符产中一些字符提取另外一些字符,或者替换与正则表达式相匹配的子串。
let str = "Hello";
let s = str.replace("l", "o");
console.log(s); //Heolo
//14、replaceAll()方法用于在字符串中用一些字符串替换另外一些字符,或替换一个与正则表达式相匹配的子串,此函数会替换所有匹配到的子字符串。
let str = "Hello";
let s = str.replaceAll("l", "o");
console.log(s); //Heooo
四、单例内置对象Global和Math
4.1 内置对象的定义
什么是内置的对象呢?就是任何由ECMAScript所提供的,与宿主环境无关,并在ECMAScript开始执行时就存在的对象。之前所接触到的大部分内置对象比如Array、Object和String类型。
4.2 Global
在全局作用域中所定义的变量和函数都会变成Global对象的属性。
1)补充说明:URI与URL.
什么是URI?
URI,统一资源标志符(Uniform Resource Identifier, URI),表示的是web上每一种可用的资源,如 HTML文档、图像、视频片段、程序等都由一个URI进行标识的。
URI的结构组成:
URI通常由三部分组成:
①资源的命名机制;
②存放资源的主机名;
③资源自身的名称。
(注意:这只是一般URI资源的命名方式,只要是可以唯一标识资源的都被称为URI,上面三条合在一起是URI的充分不必要条件)
<3>URI举例
如:https://blog.csdn.net/qq_32595453/article/details/79516787
我们可以这样解释它:
①这是一个可以通过https协议访问的资源,
②位于主机 blog.csdn.net上,
③通过“/qq_32595453/article/details/79516787”可以对该资源进行唯一标识(注意,这个不一定是完整的路径)
什么是URL?
URL是URI的一个子集。它是Uniform Resource Locator的缩写,译为“统一资源定位 符”。
通俗地说,URL是Internet上描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上。
采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。URL是URI概念的一种实现方式。
URL的一般格式为(带方括号[]的为可选项):
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
URL的格式由三部分组成:
①第一部分是协议(或称为服务方式)。
②第二部分是存有该资源的主机IP地址(有时也包括端口号)。
③第三部分是主机资源的具体地址,如目录和文件名等。
第一部分和第二部分用“://”符号隔开,
第二部分和第三部分用“/”符号隔开。
第一部分和第二部分是不可缺少的,第三部分有时可以省略。
2) URL编码方式:
encodeURI()和encodeURIComponent()方法用于编码统一资源定位符,以便传递给浏览器。
有效的URL不能包含某些字符、比如空格。使用URL编码方式来编码URL可以让浏览器能够理解它们。
encodeURI()用于对整个的URI进行编码,encodeURIComponent()方法用于编码URL中的单独的组件,其实这一点从名字上就能看得出来两者的区别了。例如,Homepage | Wiley value.htm),而
encodeURIComponent()
主要用于对URI中的某一段(illegal value.htm)进行编码一般来说encodeURIComponent()方法使用的频率比encodeURI()方法会更高。
与之相对的两个方法是decodeURIComponent()和decodeURI(),这两个解码方式分别将上述对应的进行解码操作。
encodeURI()
不会对本身属于URI大的特殊字符进行编码,例如冒号、正斜杠、问号和井号;而encodeURIComponent()
则会对它发现的任何非标准字符进行编码。
最后的eval()方法不多说,其作用都应该知晓,就是将字符串转换成JS的代码语句进行执行。
需要注意的是,任意通过eval()定义的变量和函数都不会被提升,因为其在解析代码的时候,他们是被包含在一个字符串中的,只有在eval()执行的时候才会被创建。
4.3 Global对象属性·
Global对象作为兜底的对象,其具有很多属性,所有的原生引用类型的构造函数,像Object和Function,也都是Global对象的属性。
4.4 window对象
ECMAScript中没有指明如何直接访问Globald对象,但是Web浏览器都将此全局对象作为window对象的一部分加以实现的。因此全局作用域中所声明的所有变量和函数,就都成了window对象的属性。
var color="red";
function sayColor(){
alert(window.color);
}
window.sayColor(); //"red"
/*这里定义了一个名为color的全局变量和一个名为sayColor()的全局函数。
在sayColor()内部,可以通过window.color来访问color变量 ,以说明全局变量是window对象的属性
。然后又使用window.sayColor()来直接通过window对象调用这个函数,结果就显示在了警告框中*/
另外一种取得Gobal对象的方法如下:
var global=function(){
return this;
}();
/*以上代码创建了一个立即调用的函数表达式,返回this的值。如前所述,在没有给函数明确指定this值的情况下(无论通过将函数添加为对象的方法,还是通过调用call()或apply(),this值等于Global对象*/
/*而像这样通过简单地返回this来取得Global对象,在任何执行环境下都是可行的*/
4.5 Math对象
ECMAScript提供了Math对象作为保存数学公式、信息和计算的属性和方法。主要的属性如下:
主要的方法有:
1、Math.min()和Math.max()方法,接收任意多的数值,返回其中的最大或最小值。
2、Math.ceil()始终向上舍入最为接近的整数。
3、Math.floor()始终向下舍入为最接近的整数。
4、Math,round()执行四舍五入后的结果。
5、Math.fround()方法返回数值最接近的单精度(32)位浮点值表示。
6、Math.random()返回一个0-1的随机数,其中包含0但是不包含1。
其余的涉及到运算的方法有如下几个:
Math.pow()
:指数运算Math.sqrt()
:平方根Math.log()
:自然对数Math.exp()
:e的指数Math.abs(): 绝对值。
五、总结归纳
JavaScript中的原始值类型和引用值类型构成了其语言的基本数据类型,熟悉两者的定义和不同点对于我们从事开发工作而言具有重要的意义,在本章中关于基本引用值类型Date和RegExp的定义和基本属性方法进行了总结归纳,为了便于操作原始值类原始值包装类型中给我们提供了很多操作字符串、数值以及布尔值的方法,常见的操作方法必须烂熟于心。JavaScript的内置对象具有很多的属性方法,其中选择了Global和Math进行了简单的介绍,对于数值的运算操作经常的使用到Math内置对象的基本属性方法。
JavaScript高级程序设计读书进度135/865
不论得失、便是得。 2022/06/24