JavaScript之基本引用类型

引用类型是把数据和功能组织在一起的结构
Date(日期和时间) 创建
let time=new Date(); //1.空时获取系统时间和日期2.如果为0时显示1970 年 1 月 1 日午夜(零时) console.log(time)//当前时间和日期 //new Date(year, month, date, hours, minutes, seconds, ms); 参数

访问日期组件
let now=new Date(); //基于当地时区年、月、日、时、分、秒、毫秒、周 console.log(now.getFullYear())//获取Date对象的年份 console.log(now.getMonth())//获取Date对象的月从0~11,0表示一月份依次类推 console.log(now.getDate())//获取Date对象的日期0~31(比较奇怪) console.log(now.getHours())//获取Date对象的小时 console.log(now.getMinutes())//获取Date对象的分钟 console.log(now.getSeconds())//获取Date对象的秒数 console.log(now.getMilliseconds())//获取Date对象的毫秒数 console.log(now.getDay())//一周中的第几天0~6周日到周六 //基于UTC时区的年、月、日、时、分、秒、毫秒、周 //方法同上在get后加上UTC例如:XX.getUTCXX() console.log(now.getTime())//获取时间戳(1970-1-1 00:00:00 UTC+0 开始到现在所经过的毫秒数。) console.log(Date.now())//获取时间戳大力推荐此方法优点众多(方便,快,不会给垃圾处理带来额外开销) console.log(+now)//获取时间戳 console.log(now.getTimezoneOffset())//获取UTC 与本地时区之间的时差,以分钟为单位

设置日期组件
let now=new Date(); //基于当地时区年、月、日、时、分、秒、毫秒、周的篡改 now.setFullYear(year,month,date)//设置Date对象的年份 now.setMonth(month,date)//设置Date对象的月从0~11,0表示一月份依次类推 now.setDate(date)//设置Date对象的日期0~31(比较奇怪) now.setHours(hour,min,sec,ms)//设置Date对象的小时 now.setMinutes(min,sec,ms)//设置Date对象的分钟 now.setSeconds(sec,ms)//设置Date对象的秒数 now.setMilliseconds(ms)//设置Date对象的毫秒数 //由时间戳转日期 now.setTime(时间戳)//返回时间戳对应的日期和时间 //关于UTC时区年、月、日、时、分、秒、毫秒、周的篡改 //方法与当地时区类似在set后加上UTC例如:xx.setUTCxx();

自动校准
//设置超范围的数值,Date会自动校准; //例如: let time=new Date(2022,1,35); console.log(time)// Fri Mar 04 2022 00:00:00 GMT+0800 (中国标准时间)

从字符串中读取日期
Date.parse(str)//str格式YYYY-MM-DDTHH:mm:ss.sssZ /*参数说明: YYYY-MM-DD —— 日期:年-月-日。 字符 "T" 是一个分隔符。 HH:mm:ss.sss —— 时间:小时,分钟,秒,毫秒。 可选字符 'Z' 为 +-hh:mm 格式的时区。单个字符 Z 代表 UTC+0 时区。*/ 例如 Date.parse('2022-03-17T12:09:50.500-08:00')//时间戳 //通过Date对象时间戳转日期 let time=new Date(Date.parse('2022-03-17T12:09:50.500-08:00')) console.log(time)//Fri Mar 18 2022 04:09:50 GMT+0800

日期格式化
let time=new Date(); console.log(time.toDateString())//年月日周几Thu Mar xx xxxx console.log(time.toTimeString())//时分秒 xx:xx:xx GMT+0800 (中国标准时间) console.log(time.toLocaleDateString())//年月日特定格式xxxx/xx/xx console.log(time.toLocaleTimeString)//时分秒 上/下午 xx:xx:xx console.log(time.toUTCString())//显示完整的 UTC 日期Thu, 17 Mar 2022 04:34:47 GMT

RegExp (正则表达式) 正则表达式是搜索和替换字符串的一种强大方式
创建正则表达式的方法:
letregexp=RegExp("pattern", "flags"); //字符串中动态地构造模式 let regexp1=/pattern/igm; //简短语法

字符类:
符号 说明
\ 字符边界
^ 1.匹配输入开始 2.1匹配除方括号内的所有字符
$ 匹配输入结束
* 匹配前一个表达式 0 次或多次,等价于{0,}
+ 匹配前面一个表达式 1 次或者多次 等价于{1,}
? 匹配前面一个表达式 0 次或者 1 次 等价于{0,1}
(x) 匹配 'x' 并且记住匹配项
(?:x) 匹配 'x' 但是不记住匹配项
x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做先行断言
(?<=y)X 匹配'x'仅当'x'前面是'y'.这种叫做后行断言
x(?!y) 仅仅当'x'后面不跟着'y'时匹配'x',这被称为正向否定查找
(? 仅仅当'x'前面不是'y'时匹配'x',这被称为反向否定查找
x | y 匹配‘x’或者‘y’
{n} n 是一个正整数,匹配了前面一个字符刚好出现了 n 次
{n,} n 是一个正整数,匹配前一个字符至少出现了n次
{n,m} n 和 m 都是整数。匹配前面的字符至少n次,最多m次
[xyz] 匹配方括号中的任意字符
2 它匹配任何没有包含在方括号中的字符
[\b] 匹配一个退格(U+0008)
\b 匹配一个词的边界(一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置)
\B 匹配一个非单词边界 1.字符串第一个字符为非“字”字符 2.字符串最后一个字符为非“字”字符3. 两个单词字符之间 4.两个非单词字符之间 5. 空字符串
\cX 当X是处于A到Z之间的字符的时候,匹配字符串中的一个控制符
\f 匹配一个换页符 (U+000C)
\n 匹配一个换行符 (U+000A)
\r 匹配一个回车符 (U+000D)
\t 匹配一个水平制表符 (U+0009)
\v 匹配一个垂直制表符 (U+000B)
\n 在正则表达式中,它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。
\0 匹配 NULL(U+0000)字符, 不要在这后面跟其它小数,因为 \0 是一个八进制转义序列
\xhh 匹配一个两位十六进制数(\x00-\xFF)表示的字符
\uhhhh 匹配一个四位十六进制数表示的 UTF-16 代码单元
\u{hhhh} (仅当设置了u标志时)匹配一个十六进制数表示的 Unicode 字符
\d 数字。
\D 非数字。
\s 空格符号,制表符,换行符。
\S 除了 \s 。
\w 拉丁字母,数字,下划线 '_'。
\W 除了 \w。
. 任何带有 's' 标志的字符,否则为除换行符 \n之外的任何字符。
匹配模式标记:
参数 说明
g 全局模式,表示查找字符串的全部内容,而不是找到第一个匹配的内容就结束。
i 不区分大小写,表示在查找匹配时忽略 pattern 和字符串的大小写。
m 多行模式,表示查找到一行文本末尾时会继续查找。
y 粘附模式,表示只查找从 lastIndex 开始及之后的字符串。
u Unicode 模式,启用 Unicode 匹配。
s dotAll 模式,表示元字符.匹配任何字符(包括\n 或\r)
RegExp 实例属性
属性 类型 说明
global 布尔值 表示是否设置了 g 标记。
ignoreCase 布尔值 表示是否设置了 i 标记。
unicode 布尔值 表示是否设置了 u 标记。
sticky 布尔值 表示是否设置了 y 标记。
lastIndex 整数 表示在源字符串中下一次搜索的开始位置,始终从 0 开始。
multiline 布尔值 表示是否设置了 m 标记。
dotAll 布尔值 表示是否设置了 s 标记。
source 字符串 正则表达式的字面量字符串(不是传给构造函数的模式字符串),没有开头和结尾的斜杠。
flags 字符串 正则表达式的标记字符串。始终以字面量而非传入构造函数的字符串模式形式返回(没有前后斜杠)。
RegExp 实例方法
方法 描述
exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。
test 一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。
match 一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。
matchAll 一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。
search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。
RegExp 构造函数实例属性
全 名 简 写 说 明
input $_ 最后搜索的字符串(非标准特性)
lastMatch $& 最后匹配的文本
lastParen $+ 最后匹配的捕获组(非标准特性)
leftContext $` input 字符串中出现在 lastMatch 前面的文本
rightContext $' input 字符串中出现在 lastMatch 后面的文本
原始值包装类型 为了方便操作原始值,ECMAScript创建了3种特殊的引用类型:Boolean、Number、String,其特点具有其他引用类型的特点,也具备各自原始类型对应的特殊行为。但我们访问原始类型的方法和属性时,后台会自动创建相对应的原始类型包装对象从而暴露出操作对应原始值的方法。
let str="LLY" let str1=str.substring(2)//Y 上面的例子经历了3个过程 1.创建String实例 let str=new String("LLY") 2.调用实例上的特殊方法 let str1=str.substring(2) 3.销毁实例 str=null Number和Boolean包装对象同样经历以上3个阶段

引用值类型和原始值包装类型的区别在生命周期的不同:
使用new实例化引用类型,得到的实例会在离开作用域后销毁,自动创建的原始值包装对象,只在访问的那一行代码的执行期间。
/*注意!!!! 由于原始值包装对象的生命周期只存在于执行期间 所以不能给运行时的原始值添加属性和方法*/ let str="122" str.name="lly" console.log(str.name)//undefined /*注意!!! 使用 new 调用原始值包装类型的构造函数,与调用同名的转型函数并不一样。*/ let value="https://www.it610.com/article/123" let num=Number(value); console.log(typeof num)//Number let num1=new Number(value) console.log(typeof num1)//Object

  • Boolean
    理解和区分原始值Boolean和Boolean对象。
    通过typeof判断类型原始值boolean为Boolean,boolean对象类型为object。
    let falseObj= new Boolean(false); let result = falseObj && true; //类型转换后进行运算(对象隐式转换boolean类型为true) console.log(result); // true let falseValue = https://www.it610.com/article/false; result = falseValue && true; //纯布尔值运算 console.log(result); // false

  • Number
    关于Number类型重写了valueOf()、toLocaleString()和 toString(),valueOf返回Number对象所表示的值,toLocaleString和toString返回数值字符串
  • 继承的方法:
    let num=new Number("1234567890"); console.log(num.valueOf())//1234567890数字类型的数字 console.log(num.toString())//1234567890十进制的数字可以传递一个参数表示返回几进制的数字字符串(2,8,10,16进制数) console.log(num.toLocaleString())//1,234,567,890

  • Number类型对应的特殊行为:
    1.指定小数位数的方法
    xx.toFixed(n)//n表示要保留小数点的位数如果超出指定地小数点位数会采取四舍五入取值
    2.科学计数法
    xx.toExponential(n)//以指数记数的方法显示数字
    3.以上两种计数方法的综合体
    xx.toPrecision(n)//根据情况返回最合理的输出结果,可能是固定长度,也可能是科学记数法形式。这个方法接收一个参数,表示结果中数字的总位数(不包含指数)
    以上三种方法都会采取向上和向下取舍
    4.安全整数
    Number.isInteger(num)//num要判断的参数用于判断是不是一个安全的整数有时也会把小数位的 0可能会让人误以为数值是一个浮点值。
    5.鉴定数值是否是安全范围的整数数值
    Number.isSafeInteger(num)//num要判断的数值(安全范围Max:~+2~53 -1 Min:~-2~53+1)
    6.测试
  • isNaN(value)判断参数是不是NaN
    将其参数转换为数字,然后测试它是否为 NaN:
  • isFinite(value)判断是不是常规数字,常规数字返回true否则false
    7.其他
  • parseInt(value)//从字符串中读取数字,只返回整数部分
  • parseFloat(value)//从字符串中读取数字,可以读取一个小数点,返回的浮点数
  • String
  • 引号3种(1.' '2." "3. (1.允许字符串跨行,2.${…}可以嵌入任意表达式)推荐使用第三种方式)
  • 长度length(通过xx.length获取字符串的长度)
  • JavaScript字符
    //以下方法为常规 let str="abcdefghig" //charAt()返回给定索引位置的字符 str.charAt(0)//a此方法等价于str[0],唯一区别没有参数charAt返回空字符,[]返回undefined //charCodeAt()方法可以查看指定码元的字符编码。 str.charCodeAt(0)//97 a字符对应的字符编码 /*fromCharCode()方法用于根据给定的 UTF-16 码元创建字符串中的字符 特点:可以接受任意多个数值,返回将所有数值对应的字符拼接起来的字符串*/ console.log(String.fromCharCode(97,98,99,100))//abcd //处理 emoji、罕见的数学或象形文字或其他罕见的符号 let str1="abde"; //codePointAt()对应charCodeAt() console.log(str1.length)//6 console.log(str1.charCodeAt(0))//97 console.log(str1.charCodeAt(1))//98 console.log(str1.charCodeAt(2))//55357 console.log(str1.charCodeAt(3))//56834 console.log(str1.charCodeAt(4))//100 console.log(str1.charCodeAt(5))//101 ////// console.log(str1.codePointAt(0))//97 console.log(str1.codePointAt(1))//98 console.log(str1.codePointAt(2))//128514 console.log(str1.codePointAt(3))//56834 console.log(str1.codePointAt(4))//100 console.log(str1.codePointAt(5))//101 //fromCodePoint()对应fromCharCode() console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); //abde console.log(String.fromCodePoint(97, 98, 128522, 100, 101)); //abde //字符串转数组 console.log([...str])//["a", "b", "c", "d", "e", "f", "g", "h", "i", "g"]

  • 字符串操作
    //拼接 let name="ly" let sex="man" let age="18" name.concat(sex,age)//lyman18

  • 改变大小写
    letstr="abc" //所有字符串的转换成大写 console.log(str.toUpperCase())//ABC let str1="EFG" //所有字符串的转换成小写 console.log(str1.toLowerCase())//efg

  • 查找子字符串
    let str="my name is lly" //indexOf(substr,pos)substr要查询的字符pos既定查询的位置 str.indexOf("m",0)//查询到后返回第一次出现的位置,没有查询到返回-1 //lastIndexOf(substr, pos)从末尾开始查询 str.lastIndexOf("y")// //includes(substr,pos)//查询出来有就返回true否则false str.includes('lly')//true //startsWith()//字符串正序开始查询到返回true否则false str.startsWith('my')//true str.startsWith('y')//false //endsWith()//字符串倒序开始查询到返回true否则false str.endsWith('lly')//true str.endsWith('is')//false

  • 获取子字符串
    let str="stringify" //slice(start [, end])获取字符的起始位置以及结束的位置,不包含结束位置的字符,不允许start>end str.slice(0,2)//st str.slice(2)//ringify str.slice(-2,-1)//f //substring可以允许start>end //和slice用法相同区别是该方法允许start大于end//substr(start,length)//获取字符的起始位置以及截取的长度 str.substr(0,2)//st str.substr(-1,1)//y

  • 【JavaScript之基本引用类型】比较字符
    let str="ABC" let str1="a" str.localeCompare(str1)//1 //如果str>str1返回正值否则返回负值

  • 字符串模式匹配方法
    let str="abcd0123456789efghigk" //match()参数为正则表达式或RegExp对象 str.match(/[0-9]+/)// ["0123456789", index: 4, input: "abcd0123456789efghigk", groups: undefined] //search()//参数为正则表达式或RegExp对象 str.search(/[0-9]+/)//0返回匹配字符的索引位置 //replace()第一个参数可以是字符或正则式,第二个参数要替换的内容 str.replace(/[0-9]+/,'@')//abcd@efghigk

  • 其他
    let str= " 123 " //删除字符串前后的空格 str.trim()//123 //字符串重复n次 str.repeat(2)// 123123 let name="lly" //复制字符 //从字符之前填充参数1字符长度。参数2填充字符默认为空 name.padStart(9,"@")//@@@@@@lly //从字符之后填充参数1字符长度。参数2填充字符默认为空 name.padEnd(9,"#")//lly######

    单例内置对象
  • Global
    最特别的对象,代码不会显示的访问,(兜底对象),全局作用下的变量和函数都是Global对象的属性。
  • Global对象的其他方法
  • URL 编码方法
    encodeURI()和 encodeURIComponent()方法用于编码统一资源标识符(URI),以便传给浏览器。
    URI方法: //编码 1.encodeURI()//用于对整个 URI 进行编码, 2.encodeURIComponent()//用于编码 URI 中单独的组件 //两者区别: encodeURI()不会编码属于 URL 组件的特殊字符,encodeURIComponent()会编码它发现的所有非标准字符 let URL='https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles ' console.log(URL)//1 console.log(encodeURI(URL))//2 console.log(encodeURIComponent(URL))//3 1.https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles 2.https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles%20 3.https%3A%2F%2Fsegmentfault.com%2Fu%2Fliluyao_5f4e43431bf0b%2Farticles%20 //解码 3.decodeURI() 4.decodeURIComponent() let url1='https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles%20' let url2='https%3A%2F%2Fsegmentfault.com%2Fu%2Fliluyao_5f4e43431bf0b%2Farticles%20' console.log(decodeURI(url1))//1 console.log(decodeURIComponent(url2))//2 1.https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles 2.https://segmentfault.com/u/liluyao_5f4e43431bf0b/articles

  • eval()(ECMAScript 解释器,最强大的方法)
    /*完整的ECMAScript 解释器,接收一个要执行的ECMAScript字符串参数。 eval()可以把字符串解析成要执行的ECMAScript语句,通过 eval()执行的代码属于该调用所在上下文,被执行的代码与该上下文拥有相同的作用域链。所以在非严格模式下同一执行行上下文中的变量和函数eval内部的代码和外部代码可以相互引用。*/ eval(`console.log("hi")`)//hi 等价 console.log("hi") //通过 eval()定义的任何变量和函数都不会被提升 console.log(name)//Uncaughtname is not defined eval(`var name="lly"`) console.log(name)//lly eval(`function fn(){return 'lly'}`) console.log(fn())//Uncaughtfn is not defined eval(`function fn(){return 'lly'}`) console.log(fn())//lly //在严格模式下,在 eval()内部创建的变量和函数无法被外部访问 //eval()虽然强大,注意慎重使用!!!!!

  • Global 对象属性
属性 说明
undefined 特殊值 undefined
NaN 特殊值 NaN
Infinity 特殊值 Infinity
Object Object 的构造函数
Array Array 的构造函数
Function Function 的构造函数
Boolean Boolean 的构造函数
String String 的构造函数
Number Number 的构造函数
Date Date 的构造函数
RegExp RegExp 的构造函数
Symbol Symbol 的伪构造函数
Error Error 的构造函数
EvalError EvalError 的构造函数
RangeError RangeError 的构造函数
ReferenceError ReferenceError 的构造函数
SyntaxError SyntaxError 的构造函数
TypeError TypeError 的构造函数
URIError URIError 的构造函数
  1. window对象(作为浏览器端Global对象的代理对象)
    获取Global对象的方法
    1.通过window对象直接访问Global对象
    2.let globalObj=function (){
    return this
    }()
  2. Math
    Math对象提供保存数学公式、信息和计算的地方。
  3. Math的属性:
属性 说明
Math.E 自然对数的基数 e 的值
Math.LN10 10 为底的自然对数
Math.LN2 2 为底的自然对数
Math.LOG2E 以 2 为底 e 的对数
Math.LOG10E 以 10 为底 e 的对数
Math.PI π 的值
Math.SQRT1_2 1/2 的平方根
Math.SQRT2 2 的平方根
  • Math的方法
  • 取出数值中的最大和最小值
    //最大值 Math.max(0,1,2,3,4)//4 //最小值 Math.min(0,1,2,3,4)//0

  • 舍入方法
    //小数值舍入成整数 //向上舍入只要小数点大于0就进一位 Math.ceil(1.001)//2 //向下舍入成整数 Math.floor(1.009)//1 //四舍五入。 Math.round(1.49)//1 Math.round(1.5)//2 //返回最接近的单精度(32 位)浮点值 Math.fround(1.0023)//1.0023000240325928

  • 生成随机数方法
    Math.random()//生成0~1的随机数 //生成指定范围的随机数方法 function radomFn(lower,upper){ let choices=upper-lower+1 return Math.floor(Math.random()*choices+lower) } //注意!!!!! /*为了加密而需要生成随机数(传给生成器的输入需要较高的不确定性),那么建议使用 window.crypto. getRandomValues()。*/ cryptoObj.getRandomValues(typedArray); /*typedArray说明包含Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array*/ let array = new Uint32Array(10); window.crypto.getRandomValues(array); //生成随机数

  • 其他方法
方法 说明
Math.abs(x) 返回 x 的绝对值
Math.exp(x) 返回 Math.E 的 x 次幂
Math.expm1(x) 等于 Math.exp(x) - 1
Math.log(x) 返回 x 的自然对数
Math.log1p(x) 等于 1 + Math.log(x)
Math.pow(x, power) 返回 x 的 power 次幂
Math.hypot(...nums) 返回 nums 中每个数平方和的平方根
Math.clz32(x) 返回 32 位整数 x 的前置零的数量
Math.sign(x) 返回表示 x 符号的 1、0、-0 或-1
Math.trunc(x) 返回 x 的整数部分,删除所有小数
Math.sqrt(x) 返回 x 的平方根
Math.cbrt(x) 返回 x 的立方根
Math.acos(x) 返回 x 的反余弦
Math.acosh(x) 返回 x 的反双曲余弦
Math.asin(x) 返回 x 的反正弦
Math.asinh(x) 返回 x 的反双曲正弦
Math.atan(x) 返回 x 的反正切
Math.atanh(x) 返回 x 的反双曲正切
Math.atan2(y, x) 返回 y/x 的反正切
Math.cos(x) 返回 x 的余弦
Math.sin(x) 返回 x 的正弦
Math.tan(x) 返回 x 的正切
  1. a-z ?
  2. xyz ?

    推荐阅读