JS学习笔记(四)基本引用类型

JS学习笔记(四)基本引用类型


引用值(对象)是某个特定引用类型的实例,ES中,引用类型(对象定义)是把数据和功能组织到一起的结构,不是类

一、 Date

Date类型将日期保存为自1970年1月1日零时至今所经过的毫秒数

let now = new Date();

不传参数时,创建的对象将保存当前日期和时间

 

1.1 Date.parse()

Date.parse() 方法接收一个表示日期的字符串参数,尝试将这个字符串转换为表示该日期的毫秒数。日期格式有:

  • “月/日/年”,如:“5/23/2019”
  • “月名 日,年”,如:“May 23,2019”
  • “周几 月名 日 年 时:分:秒 时区”,如:“Tue May 23 2019 00:00:00 GMT-0700”
  • ISO 8601 扩展格式 “YYYY-MM-DDTHH:mm:ss:sssZ”,如:2019-05-23T00:00:00(只适用于兼容ES5)

注意:日期一定是字符串,要加引号

let someDate = new Date(Date.parse("May 23,2019"));
let someDate = new Date("May 23,2019"); //也可行,后台会调用Date.parse()

 

1.2 Date.UTC()

也返回日期的毫秒表示,传给Date.UTC()的参数是年、零起点月数(1月是0,2月是1…)、日(131)、时(023)、分、秒和毫秒。年和月是必须的。不提供日默认为1日

// GMT时间2005年5月5日下午5点55分55秒
let allFives = new Date(Date.UTC(2005,4,5,17,55,55))

let allFives = new Date(2005,4,5,17,55,55)
//会被Date构造函数隐式调用,但是此时创建的是本地日期,不是GMT日期

注意:因为是从0开始的月份,所以月份必须是4

 

1.3 Date.now()

返回表示方法执行时日期和时间的毫秒数,可以方便的用在代码解析中

//起始时间
let start = Date.now();
// 调用函数
doSomething();
//结束时间
let stop = Date.now();
result = stop - start;

 

1.4 时间戳

1.通过 valueOf()、getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
2. +new Date()
var date1 = +new Date();
console.log(date1);
3. H5新增的Date.now()
console.log(Date.now());

 

1.5 继承的方法

Date类型重写了toLocaleString() 、toLocaleString() 、Date类型的方法

  • Date类型的 toLocaleString() 方法返回与浏览器运行的本地环境一致的日期和时间格式中包含着AM和PM。但不包含时区信息。toLocaleString() 方法返回带时区信息的日期和时间,时间是24小时制的。
toLocaleString() - 2/1/2019 12:00:00 AM
toString() - Thu Feb 1 2019 00:00:00 GMT-0800
  • Date类型的Date类型的方法根本不返回字符串,返回日期的毫秒表示。所以操作符(大于小于)可以使用返回的值

 

1.6 日期格式化方法

都返回字符串

  • toDateString():显示日期中的周几、月、日、年
  • toTimeString():显示日期中的时、分、秒和时区
  • toLocaleDateString():显示日期中的周几、月、日、年
  • toLocaleTimeString():显示日期中的时、分、秒
  • toUTCString():显示完整的UTC日期

方法因浏览器而异

 

1.7 日期/时间组件方法

UTC日期指没有时区偏移的日期

 

1.8 倒计时案例

function countDown(time) {
    var nowTime = +new Date(); //返回当前时间的总毫秒数
    var inputTime = +new Date(time); //返用用户输入时间的总毫秒数
    var times = (inputTime - nowTime) / 1000; //times 是剩余时间
    var d = parseInt(times / 60 / 60 / 24); //天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);  //分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60) //秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-1-1 00:00:00')); //输出:105天13时57分44秒

 

二、RegExp

ES通过RegExp类型支持正则表达式

语法:

let expression = /pattern/flags;

pattern可以是任何简单或复杂的正则表达式,包括字符类、限定符、分组、向前查找和反向引用。每个正则表达式可以带零个或多个flags(标记),用于控制正则表达式的行为

匹配模式的标记如下:

  • g:全局模式,表示查找字符串的全部内容,而不是找到第一个匹配内容就结束
  • i:不区分大小写,表示在查找匹配时忽略pattern和字符串的大小写
  • m:多行模式,表示查找到一行文本末尾时会继续查找
  • y:粘附模式,表示只查找从lastIndex开始及之后的字符串
  • u:Unicode模式,启用Unicode
  • s:dotAll模式,表示元字符。匹配任何字符(包括\n),元字符在模式中必须转义,包括:( [ { \ ^ $ | ) ] } ? * + . 元字符在正则表达式中有多种功能,要匹配字符本身就必须使用反斜杠转义。

用字面量形式定义正则表达式的例子:

// 匹配所有的“at”
let pattern = /at/g;

// 匹配第一个“bat”或“cat”,忽略大小写
let pattern2 = /[bc]at/i;

// 匹配所有以“at”结尾的三字符组合,忽略大小写
let pattern3 = /.at/gi;
// 有元字符
// 匹配第一个“[bc]at”,忽略大小写
let pattern = /\[bc\]at/i;

// 匹配所有以“.at”,忽略大小写
let pattern3 = /\.at/gi;

用RegExp定义正则表达式的例子:

// 匹配第一个“bat”或“cat”,忽略大小写
let pattern = new RegExp("[bc]at","i");

注意:

  • RegExp构造函数的两个参数都是字符串。某些情况下需要二次转义
字面量模式对应字符串
/\[bc\]at/“\\[bc\\]at”
/\.at/“\\.at”
/name\/age/“name\/age”
/\d.\d{1,2}/“\\d.\\d{1,2}”
/\w\\hello\\123/“\\w\\\\hello\\\\123”

 

2.1 RegExp 实例属性

  • global:布尔,是否设置g标记
  • ignoreCase:布尔,是否设置i标记
  • unicode:布尔,是否设置u标记
  • sticky:布尔,是否设置y标记
  • lastIndex:整数,表示在源字符串中下一次搜索的开始位置,始终从0开始
  • multiline:布尔,是否设置m标记
  • dotAll:布尔,是否设置s标记
  • source:正则表达式的字面量字符串(不是传给构造函数的模式字符串),没有开头和结尾的斜杠
  • flags:正则表达式的标记字符串。始终字面量而非传入构造函数的字符串模式形式返回(没有开头和结尾的斜杠
let pattern = /\[bc\]at/i;
let pattern = new RegExp("\\[bc\\]at","i");

console.log(pattern.source); // "\[bc\]at"
console.log(pattern.flags); // "i"

 

2.2 RegExp 实例方法

2.2.1 exec()方法

exec() 方法主要用于配合捕获组使用。只接收一个

参数,即要应用模式的字符串。若找到了匹配项,则返回包含第一个匹配项的数组。若没找到匹配项,则返回null;返回的数组包含两个属性:index和input。index:字符串中匹配模式的起始位置,input:要查找的字符串.

  • 数组的第一个元素时匹配整个模式的字符串,其他元素是与表达式中的捕获组匹配的字符串
let text = "mom and dad and baby";
let pattern = /mom ( and dad ( and baby)?)?/gi; //包含两个捕获组。“ and baby”以及外部的“ and dad”或“and dad and baby”

let matches = pattern.exec(text);

console.log(matches.index); //0
console.log(matches.input); //"mom and dad and baby"
console.log(matches[0]);	//"mom and dad and baby"
console.log(matches[1]);	//" and dad and baby"
console.log(matches[2]);	//" and baby"
  • 若模式设置了全局标志g,则每次调用exec()都会在字符串中向前搜索下一个匹配项。若未设置,只会返回第一个匹配信息
let text = "cat, bat, sat, fat";
let pattern = /.at/g;
let matches = pattern.exec(text);

console.log(matches.index); 	//0
console.log(matches[0]);		//cat
console.log(pattern.lastIndex); //3

console.log(matches.index); 	//5
console.log(matches[0]);		//bat
console.log(pattern.lastIndex); //8

console.log(matches.index); 	//10
console.log(matches[0]);		//sat
console.log(pattern.lastIndex); //13
  • 若模式设置了粘附标记y,则每次exec()就只会在lastIndex的位置上寻找匹配项。粘附标记覆盖全局标记

 

2.2.2 test() 方法

接收一个字符串参数。若输入的文本与匹配模式匹配,则参数返回ture,否则返回false。适用于只想测试模式是否匹配,而不需要实际匹配内容的情况。经常用在if语句中

let text = "000-00-0000";
let pattern = /\d{3}-\d{2}-\d{4}/;
if(pattern.test(text)){
	console.log("The pattern is mae=tched.")
}

 

2.2.3 RegExp构造函数属性

RegExp构造函数本身有属性,每个属性都有一个全名和一个简写。

全名简写说明
input$_最后搜索的字符串(非标准特性)
lastMatch$&最后匹配的文本
lastParen$+最后匹配的捕获组(非标准特性)
leftContext$`input字符串中出现在lastMatch前面的文本
rightContext$’input字符串中出现在lastMatch后面的文本
let text = "this has been a short summer";
let pattern = /(.)hort/g;

if(pattern.test(text)){
    console.log(RegExp.input);          //this has been a short summer
    console.log(RegExp.leftContext);	//this has been a
    console.log(RegExp.rightContext);	//summer
    console.log(RegExp.lastMatch);		//short
    console.log(RegExp.lastParen);		//s
}

以上代码创建了一个模式,用于搜索任何后跟“hort”的字符,并把第一个字符放进捕获组中

RegExp还有几个构造函数属性,可以存储最多9个捕获组的匹配项。通过$1RegExp.$9来访问,包含第一19个捕获组的匹配项,在调用exec()或test()时,这些属性就会被填充:

let text = "this has been a short summer";
let pattern = /(..)or(.)/g;

if(pattern.test(text)){
    console.log(RegExp.$1); //sh
    console.log(RegExp.$2); //t
}

 

2.3 原始值包装类型

为方便操作原始值,ES提供了3种特殊的引用类型:Boolean、Number和String。Object构造函数能够根据传入值的类型返回相应的原始值包装类型实例

每当用到每个原始值的方法或属性时,后台都会自动创建一个相应原始包装类型的对象,后台执行过程如下:

  1. 创建一个String类型的实例
  2. 调用实例的特定方法
  3. 销毁实例

引用类型(创造的是原始包装类型的对象)与原始包装类型的主要区别在于对象的生命周期

  • 通过new实例化引用类型后,得到的原始包装类型的实例会在离开作用域只被销毁
  • 自动创建的原始值包装对象则只存在于访问它的那行代码执行期间

 

2.3.1 Boolean

Boolean是布尔值的引用类型

let falseObject = new Boolean(false);
let result = falseObject && true;
console.log(result); //true

这里不是布尔算数,falseObject是一个对象,而所有的对象在布尔值表达式中都会自动转换为true

建议永远不要使用Boolean,容易产生歧义

 

2.3.2 Number
1. toFixed()

返回包含指定小数点位数的数值字符串,若数值本身的小数位超过指定的位数,则四舍五入到最接近的小数位

let num = 10;
console.log(num.toFixed(2)); //"10.00"
2. toExponential()

返回以科学计数法表示的数值字符串,接收一个参数,指定小数位数

let num = 10;
console.log(num.toExponential(1)); //"1.0e+1"
3. toPrecision()

根据情况返回最合理的输出结果,可能是固定长度,也可能是科学计数法

4. isInteger()

用于辨别一个数值是否保存为整数。有时小数位的0可能会让人误认为数值是一个浮点值

console.log(Numeber.isInteger(1));    //true
console.log(Numeber.isInteger(1.00)); //true
console.log(Numeber.isInteger(1.01)); //false

 

2.3.3 String
1.JavaScript字符

JavaScript字符由16位码元组成。多数字符16位码元对应一个字符

charAt()

charAt() 方法返回给定索引位置的字符,由传给方法的整数参数指定

let mes = "abcde";
console.log(mes.charAt(2));  //"c"
charCodeAt()

查看指定码元的字符编码。返回指定索引位置的码元值

let mes = "abcde";
console.log(mes.charCodeAt(2));  //99
fromCharCode()

用于根据给定的UTF-16码元创建字符串中的字符。此方法可以接受任意多个数值,并返回将所有数值对应的字符拼起来的字符串

console.log(String.fromCharCode(97,98,99,100,101));  //"abcde"

 

2. normalize() 方法

unicode提供了4中规范化形式:NFD、NFC、NFKD、NFKC

let a1 = String.fromCharCode(0x00c5),
    a2 = String.fromCharCode(0x212B),
    a3 = String.fromCharCode(0x0041,0x030A);

console.log(a1.normalize("NFD") == a2.normalize("NFD"))  //true

 

3. 字符串操作方法
concat()

用于将一个或多个字符串拼接成一个新字符串。可以接收多个参数,即可以一次性拼接多个字符串

let str = "hello ";
let result = stringValue.concat("world");
console.log(result); //"hello world"
slice()、substring()、substr()

第一个参数都是子字符串开始的位置。slice()和substrin()的第二个参数是结束的位置。substr()第二个参数表示返回的子字符串数量。省略第二个参数,提取到末尾

let str = "hello world"; 
console.log(str.slice(3,7));        //"lo w"
console.log(str.substring(3,7));	//"lo w"
console.log(str.substr(3,7));		//"lo worl"

 

4. 字符串位置方法
indexOf()、lastIndexOf()

 

5. 字符串包含方法
startWith()、endsWith()、includes()
let mes = "foobarbaz";

console.log(mes.startsWith("foo"));	//true
console.log(mes.startsWith("bar"));	//false
console.log(mes.endsWith("baz"));	//true
console.log(mes.endsWith("bar"));	//false
console.log(mes.includes("bar"));	//true
console.log(mes.includes("foo"));	//false
  • startWith()、includes()接收的第二个参数表示开始搜索的位置

  • endWith()接受的第二个参数表示应该当作字符串末尾的位置(子字符串的位置)。若不提供,则默认为字符串长度。

    let mes = "foobarbaz";
    console.log(mes.endsWith("bar",6));	//true
    

 

6. trim()

会创建字符串的一个副本,删除前、后所有空格符,再返回结果

  • 原始字符串是不受影响的
  • trimLeft()和trimRight()分别用于从字符串开始和末尾清理空格符

 

7. repeat()

接收一个整数参数,表示要将字符串复制多少次,然后返回拼接所有副本后的结果

let mes = "na";
console.log(mes.repeat(5)+"fatman");
// na na na na na fatman

 

8. padStart()和padEnd()

padStart()和padEnd()会复制字符串,若小于指定长度,则在相应一边填充字符,直至满足长度条件第一个参数是长度,第二个是可选的填充字符串,默认为空格(U+0020)

let str = "foo";

console.log(ste.padStart(6));       //"   foo"
console.log(ste.padStart(9,"."));	//"......foo"
console.log(ste.padEnd(9,"."));		//"foo......"

第二个参数如果提供了多个字符的字符串,则将其拼接并截断以匹配指定长度。此外如果长度小于或等于字符串长度,则会返回原始字符串

let str = "foo";

console.log(ste.padStart(8,"bar")); //"barbafoo"
console.log(ste.padEnd(2));			//"foo"

 

9. 字符串迭代与解构

字符串的原型上暴露了一个@@iterator 方法,表示可以迭代字符串的每个字符

解构方法:在字符串前面加三个.,即…

let str = "abcde";

console.log([...str]);      // ["a","b","c","d","e"]
console.log([...str][0]);	// "a"

 

10. 字符串大小写转换
toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()

toLocaleLowerCase()、toLocaleUpperCase()是基于特定地区实现

 

11. 字符串模式匹配方法
match()方法

本质跟RegExp对象的exec()方法相同**。match()方法接受一个参数,可以是一个正则表达式字符串,也可以是一个RegExp对象。**

let text = "cat,bat,sat,fat";
let pattern = /.at/;

// 等价于pattern.exec(text);
let matches = text.match(pattern);

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

 

search()方法

从开头向后开始匹配,返回模式第一个匹配的位置索引,若没找到则返回-1

 

replace()方法

第二个参数是字符串的情况下,有几个特殊的字符序列,可用来插入正则表达式操作的值

字符序列替换文本
$$$
$&匹配整个模式的子字符串。与RegExp.lastMatch
$’匹配的子字符串之后的字符串。与RegExp.rightContext
$`匹配的子字符串之前的字符串。与RegExp.leftContext同
$n匹配第n个捕获组的字符串。n为0~9.若无捕获组,则为空字符串
$nn匹配第nn个捕获组的字符串。n为01~99.若无捕获组,则为空字符串
let text = "cat,bat,sat,fat";

result = text.replace(/(.at)/g,"word($1)");
console.log(result); //word(cat),word(bat),word(sat),word(fat)

 

split()

第一个参数分隔符可以是字符串也可以是RegExp对象。第二个参数为数组大小

let text = "cat,bat,sat,fat";

let res1 = text.split(",");     //["cat","bat","sat","fat"]
let res1 = text.split(",",2);	//["cat","bat"]
let res1 = text.split(/[^,]+/);	//["", ",", ",", ",", ""]  

 

12. localeCompare()

比较两个字符串,返回下面3个值中的一个

  • 若按照字母表顺序,字符串应该排在字符串参数前头,则返回负值(通常是-1)
  • 若字符串与字符串参数相等,则返回0
  • 如果按照字母表顺序,字符串应该排在字符串参数后头,则返回正值(通常是1)
let str = "yellow";

console.log(str.localeCompare("brick"));	//1 brick为字符串参数
console.log(str.localeCompare("yellow"));	//0
console.log(str.localeCompare("zoo"));		//-1

 

三、单例内置对象

js中的对象分为:自定义对象,内置对象,浏览器对象

MDN:https://develpoer.mozilla.org/zh-CN

内置对象定义:任何由ES实现提供、与宿主环境无关,并在ES程序开始执行时就已经存在的对象。Object、Array、String、Global和Math都是内置对象

3.1 Global

Global对象为一种兜底对象,他所针对的是不属于任何对象的属性和方法。在全局作用域中定义的变量和函数都会变成Global对象的属性。

1. URL编码方法
encodeURI()和encodeURIComponent()
let uri = "http://www.wrox.com/illegal value.js#start";

//http://www.wrox.com/illegal%20value.js#start
console.log(encodeURI(uri)); 

//http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.js%23start
console.log(encodeURIComponent(uri));

encodeURI()和encodeURIComponent()的区别:

  • encodeURI()不会编码属于URL组件的特殊字符,如:冒号,斜杠、问号、井号。所以使用encodeURI()编码整个URI
  • encodeURIComponent()会编码他发现的所有非标准字符(非字母),所以encodeURIComponent()只编码那些会追加到已有URI后面的字符串
decodeURI()和 decodeURIComponent()
let uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.js%23start";

//http%3A%2F%2Fwww.wrox.com%2Fillegal value.js%23start
console.log(decodeURI(uri)); 

//http://www.wrox.com/illegal value.js#start
console.log(decodeURIComponent(uri));

 

2. eval()

此方法就是一个完整的ES解释器,它接收一个参数,即一个要执行的ES字符串

  • 当解释器发现 eval()调用时,会将参数解释为实际的ES语句,然后将其插入到该位置。通过eval()执行的代码属于该调用所在上下文,被执行的代码与该上下文拥有相同二点作用域链。即定义在包含上下文中的变量可以在eval()调用内部被引用。
let mes = "hello world";
eval("console.log(msg)"); 
  • 类似的,可以在eval()内部定义一个函数或变量,然后再外部代码中引用
eval("function sayHi() { console.log('hi');}");
sayHi();
  • 通过eval()定义的任何变量和函数都不会提升,因为再解析代码时,他们是被包含在一个字符串中的,在eval()执行时才会被创建

  • 严格模式下,在eval()内部创建的变量和函数无法被外部访问

 

3. window对象

浏览器将window对象实现为Global对象的代理。所有全局作用域中声明的变量和函数都变为window的属性

var color = "red";
function sayColor(){
    console.log(window.color);
}
window.sayColor();//"red"
let global = function() {
	return this;
}

当函数没有明确指定this值的情况下执行时,this值等于Global对象。调用一个简单返回this的函数是在任何执行上下文中获取Global对象的通用方式

 

3.2 Math

1. Math对象属性
属性说明
Math.E自然对数的基数e的值
Math.LN1010为底的自然对数
Math.LN22为底的自然对数
Math.LOG2E以2为底e的对数
Math.LOG10E以10为底e的对数
Math.PIΠ的值
Math.SQRT1_21/2的平方根
Math.SQRT22的平方根

 

2. min()和max()

两个方法都可以接收任意多个参数。可用扩展操作符求数组中的最大最小值:

let values = [1,2,3,4,5,6,7];
let max = Math.max(...values); //相当于解构
let max = Math.max(values); // 错误的,参数只能为一组数值,而不能是变量
console.log(max); //7

 

3. 舍入方法

Math.ceil()、Math.floor()、Math.round()、Math.fround()

  • Math.ceil():向上舍入为最接近的整数
  • Math.floor():向下舍入为最接近的整数
  • Math.round():四舍五入
  • Math.fround():返回数值最接近的单精度浮点值表示

 

4. random()

返回一个0~1范围内的随机数,包含0不包含1

通过函数算出可选总数和最小可能的值:

function selectFrom(lowerValue,upperValue) {
	let choices = upperValue - lowerValue + 1;
    return Math.floor(Math.random() * choices + lowerValue);
}

let num = selectFrom(2,10);
console.log(num); //2~10 范围内的数,包含2和10
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值