[JS红宝书笔记]基本引用类型

496 阅读9分钟

序言

首先回顾一下上一章节:介绍了原始值和引用值、执行上下文、作用域还有垃圾回收四部分,许多知识点需要额外翻看文章才能好好“咀嚼”。这一章节上一章节的引用值相关,介绍基本引用类型,动笔。

MIND

基本引用类型.mind

引用类型

引用类型是把数据和功能组织在一起的结构。

引用值(由多个值构成的对象)是由某个特定引用类型的实例,通过 new 操作符和构造函数(创建新对象的函数)来创建引用值。

let now = new Date();
  • 实例:now
  • 操作符:new
  • 引用类型:Date
  • 构造函数:Date()

其实函数也是构造函数,放到后文讲解,这章讲解像 Date 的一些原生引用类型

Date

  • 定义:参考 java.util.Date,将日期保存为自协调世界时(UTC)时间 1970/1/1 午夜至今所经过的毫秒数
  • 作用:精确表示 1970/1/1 午夜之前及之后 285 616 年的日期
  • 创建:let d = new Date()
  • 传参:不传入参数时保存为当前日期和时间,当传入毫秒参数时,是创建相应的日期对象。

辅助方法

为解决传参麻烦,提供两种传参辅助函数和一个获取当前时间的函数

Date.parse("12/11/2020"); // 1607616000000
Date.UTC(2020, 11); // 1606780800000
Date.now(); // 1607915682375
  • Date.parse()
    • 作用:将时间字符串转换为该时间的毫秒数
    • 传参格式:
      • “月/日/年”,如"12/11/2020"
      • “月名 日,年”,如"Dec 11,2020"
      • “周几 月名 日 年 时:分:秒 时区”,如"Fri Dec 11 2020 00:00:00 GMT-0700"
    • 错误传参:非以上模式,函数返回 NaN
  • Date.UTC():
    • 作用:将传入参数转换为对应时间的毫秒数
    • 传参格式:年、零起点月数(0 代表一月)、日(1~31)、时(0~23)、分、秒和毫秒,年月是必须参数,例(2020,11)
    • 错误传参:非以上模式,函数返回 NaN
  • Date.now():返回执行时日期和时间的毫秒数

继承方法

const d = new Date(2020, 11, 11);
console.log(d.valueOf()); // 1607616000000
console.log(d.toString());	// "Fri Dec 11 2020 00:00:00 GMT+0800 (中国标准时间)"
console.log(d.toLocaleString()); // "2020/12/11"
  • valueOf(): 日期的毫秒表示
  • toString(): 带时区信息的日期和时间
  • toLocaleString(): 返回与浏览器运行的本地环境一致的日期和时间

格式化方法

以下方式的输出会因浏览器产生差异,不能用于多浏览器统一输出日期时间

let d = new Date(); // Mon Dec 14 2020 11:15:57 GMT+0800 (中国标准时间)
d.toDateString(); // "Mon Dec 14 2020"
d.toTimeString(); // "11:15:57 GMT+0800 (中国标准时间)"
d.toLocaleDateString(); // "2020/12/14"
d.toLocaleTimeString(); // "上午11:15:57"
d.toUTCString(); // "Mon, 14 Dec 2020 03:15:57 GMT"
  • toDateString(): 周几、月、日、年
  • toTimeString(): 时、分、秒和时区,如
  • toLocaleDateString(): 周几、月、日、年
  • toLocaleTimeString(): 时、分、秒
  • toUTCString(): 完整的 UTC 日期

组件方法

除 getTime() 和 setTime() 外,以下方法都有 UTC 形式,如 getUTCFullYear

  • 毫秒:getTime()、setTime(milliseconds)
  • 年:getFullYear()、、setFullYear(year)
  • 月:getMonth()、setMonth(month)
  • 日:getDate()、setDate(date)
  • 周几:getDay()、setDay(day)
  • 时:getHours()、setHours(hours)
  • 分:getMinutes()、setMinutes(minutes)
  • 秒:getSeconds()、setSeconds(seconds)
  • 毫秒:getMillseconds()、setMillseconds(millseconds)
  • 偏移量:getTimezoneOffset()

RegExp

  • 定义:用于将文本和模式匹配的对象
  • 创建:let expression = /pattern/flagslet pattern = new RegExp(pattern, flag)
  • 传参:pattern 传入正则表达式,flag 传入标记来控制正则表达式行为

flag

  • g:全局模式,找到多个符合要求的内容
  • i:不区分大小写
  • m:多行模式,文本末尾继续寻找
  • y:粘附模式,从 lastIndex 开始向后寻找
  • u:Unicode模式
  • s:dotAll模式,表示元字符 .匹配

实例属性

与 flag 相关

  • global:g
  • ignoreCase:i
  • unicode:u
  • sticky:y
  • lastIndex:元字符下次搜索的位置,始终从 0 开始,配合 sticky
  • multiline:m
  • dotAll:s
  • source:正则表达式的字面量字符串,没有开头结尾斜杠
  • flags:正则表达式的标记字符串

实例方法

  • exec()
    • 作用:用于配合捕获组使用匹配字符串
    • 传参:一个,应用模式的字符串
    • 返回:找到返回第一个匹配信息的数组,否则返回 null
    • 例子:
      let text = "mom and dad and baby";
      let pattern = /mom( and dad( and baby)?)?/gi; // (...)是捕获组,将匹配部分作为单独项,括号后方两次会将括号作为整体
      
      let matched = 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" 第二个
      
  • test()
    • 作用:测试模式是否匹配,而无需匹配实际内容
    • 传参:字符串参数
    • 返回:输入文本与模式匹配,返回 true,否则返回 false
    • 例子:
      let text = "1-23-456";
      let pattern = /\d{1}-\d{2}-\d{3}/;
      console.log(pattern.test(text)); // true
      

继承方法

  • valueOf():正则表达式本身
  • toString():正则表达式的字面量表示
  • toLocaleString():正则表达式的字面量表示

构造函数属性

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

if (pattern.test(text)) {
	console.log(RegExp.input); // this has been a short winter
	console.log(RegExp.lastMatch); // short
	console.log(RegExp.lastParen); // s
	console.log(RegExp.leftContext); // this has been a
	console.log(RegExp.rightContext); //  winter
}
全名简写说明
input$_最后搜索的字符串
lastMatch$&最后匹配的文本
lastParen$+最后匹配的捕获组
leftContent$`input 字符串中出现在 lastMatch 前面的文本
rightContent$'input 字符串中出现在 lastMatch 后面的文本

原始包装类型

  • 定义:ES 提供三种原始包装类型用来方便操作原始值,包括 Boolean、Number、String。
  • 作用:后台创建响应原始包装对象类型的对象,暴露出操作原始值的各种方法
  • 区别:与引用类型相比,基础值包装类型创建的对象在访问执行后销毁,而引用类型创建对象在作用域销毁后销毁
  • 例子:
    let n1 = 32;
    let n2 = n1.valueOf(); // n1 作为原始值本身没有 valueOf() 方法的,但却可以返回
    
    // 后台执行
    let objN1 = new Number(32); // 创建 Number 类型的实例
    let ObjN2 = objN1.valueOf(); // 调用实例上的特定方法
    objN1 = null; // 销毁实例
    

Boolean

  • 定义:布尔值的引用类型
  • 创建:let booleanObj = new Boolean(true)
  • 传参:true 或 false
  • 继承方法:
    • valueOf():true、false
    • toString():"true"、"false"
    • toLocaleString():"true"、"false"

Number

  • 定义:数值的引用类型
  • 创建:let numberObj = new Number(10)
  • 传参:数值
  • 继承方法:
    • valueOf():原始数值
    • toString():数值的字符串形式
    • toLocaleString():数值的字符串形式
  • 其他方法:
    • toFixed():传入保留小数位参数,返回对应位数的数值字符串
    • toExponential():传入保留小数位参数,返回对应位数的科学计数法
    • toPrecision():根据传入参数来决定调用 toFixed() 还是 toExponential(),返回最合理的输出结果

String

  • 定义:字符串的引用类型
  • 创建:let stringObj = new String("hello world")
  • 传参:数值
  • 继承方法:
    • valueOf():原始字符串值
    • toString():原始字符串值
    • toLocaleString():原始字符串值
  • 其他方法:
    • 字符串
      • charAt(index):返回给定索引位置的字符
      • charCodeAt(index):返回给定索引位置的字符编码
    • 拼接
      • concat(string1, string2, ...):拼接多个字符串
    • 提取
      • slice(startIndex,endIndex): 提取 startIndex 到 endIndex(可选)的字符串,参数为负加上字符串长度转正
      • subString(startIndex,endIndex): 提取 startIndex 到 endIndex(可选)的字符串,参数为负转 0
      • subStri(startIndex,length):提取 statIndex 开始 length 长度的字符串,startIndex 负值加字符串长度转正
    • 位置
      • indexOf(string):查找字符串索引,找到第一个返回 index,否则返回 -1
      • lastIndexOf(string):从字符末尾查找,找到第一个返回 index,否则返回 -1
    • 包含
      • startsWith(string):开头是否包含,返回 true/false
      • endsWitch(string):结尾头是否包含,返回 true/false
      • includes(string):整个字符串是否包含,返回 true/false
    • 去除空格
      • trim():创建字符串的副本,去除前后所有空格,再返回结果
    • 复制
      • repeat(time):将字符串拼接 time 次,返回副本
      • padStart(length, string):字符串长度小于 length 时,开头填充 string(可选)或空格
      • padEnd(length, string):字符串长度小于 length 时,结尾填充 string(可选)或空格
    • 迭代
      • next():利用字符串原型上 @@iterator,进行迭代字符串每一个字符
    • 转换
      • toLowerCase():小写
      • toLocaleLowerCase():根据地区小写
      • toUpperCase():大写
      • toLocaleUpperCase():根据地区大写
    • 匹配
      • match(params):params 可以是正则表达式或 RegExp 对象,本质与上文的 RegExp 对象的 exec() 方法相同
      • search(params):params 与 match 一样,返回匹配索引
      • replace(params1, params2):params1 与 match 一样,params2 传入字符串或函数,用来替代。如果 params1 是字符串,则替换第一个字符串,如果是正则表达式带全局标记,替代所有匹配值
      • split(params,length):params 可以是字符串或 RegExp 对象,length(可选) 表示分隔形成的数组大小
    • 比较
      • localeCompare(string):根据字母表顺序,string 在前返回 1,相同返回 0 ,在后返回 -1

单例内置对象

  • 定义:任何由 ECMAScript 定义提供、与宿主环境无关,并在 ECMAScript 程序开始执行时就存在的变量。
  • 作用:内置对象已经实例化,无需显示实例化内置对象

global

  • 定义:针对不属于对象的属性和方法的一种兜底对象。
  • 范围:全局作用域中定义的变量和函数都是该对象的属性
  • 特殊方法:
  • 属性: undefinde、NaN、infinity、Object、Array、Function、Boolean、String、Number、Date、RegExp、Symbol、Error、EvaError、RangeError、ReferenceError、SyntaxError、TypeError、TypeError、URIError
  • 访问:浏览器将 window 对象作为 Global 对象的代理,所以能够通过 window 对象访问全局作用域中声明的变量和函数 最特别的对象,不被显示访问。

Math

  • 定义:Math 对象保存数学公式、信息和计算,提供一些辅助计算的属性和方法
  • 属性
    • E:自然对象的基数 e 的值
    • LN10:10 为底的自然对数
    • LN2:2 为底的自然对数
    • LOG2E:2 为底 e 的倍数
    • LOG10E:10 为底 e 的倍数
    • PI:π
    • SQRT1_2:1/2 的平方根
    • SQRT2:2的平方根
  • 常用方法
    • 最值:min() 和 max()
    • 舍入:(例如 25.9)
      • ceil():向上舍入(26)
      • floor():向下舍入(25)
      • round():四色五入(26)
      • fround():最接近的单精度(32位)浮点值(25.899999618530273)
    • 随机:random() 返回 0~1 的随机数,包含 0,不包含 1

总结

第五章讲解基本引用类型,包括:

  • Date
  • RegExp
  • 原始包装类型
    • Boolean
    • Number
    • String
  • 单例内置对象
    • global
    • Math 下一章节是集合引用类型