【前端红宝书】温故知新 第五章 基本引用类型

318 阅读10分钟

前言

在日常开发工作中,基本用的都是框架了,总感觉不得其精髓,所以想着把红宝书多看几遍,再练习的同时,能将自己的理解以及笔记记下来,便于加深记忆。希望自己的基础知识能很扎实,遇到问题不能只靠度娘,能做到看到错误就能知道错误的根源。文章末尾有彩蛋

理解对象

对象(引用值)是某个特定引用类型的实例,引用类型又是一种把数据以及功能组织到一起的结构,从字面意思上来看好像和“类”的定义比较像,但是和类并不是一个概念。 正则表达式中小括号的作用:将字符串分组并保存匹配的文本

基本JavaScript数据类型

1.Date

const mydate = new Date();

Date()构造函数没有参数时,mydate的值为“Tue Jun 18 2024 09:34:13 GMT+0800 (中国标准时间)”,这是基于当前时间创建的一个Date类型的对象,如果要想创建其他时间的对象,需要使用Date.parse()和Date.UTC(),先通过这两个辅助方法将指定的日期格式转换为对应的毫秒数,然后将得到的毫秒数传给Date构造函数。

1.1Date.parse()

指定的日期传入格式: “月/日/年”,如“3/5/2024” “月名 日,年”,如“May 23,2024”(月名要为英文) “周几 月名 日 年 时:分:秒 时区”,如“Tue May 23 2019 00:00:00 GMT-0700” "YYYY-MM-DDTHH:mm:ss:sssZ",如2019-05-23T08:00:00 如果把上述日期的格式直接传递给Date构造函数,那么Date会在后台调用Date.parse()函数,也就是说 new Date("3/5/2024") ===new Date(Date.parse("3/5/2024"))

1.2 Date.UTC()

指定的日期传入格式 年,月(从0开始),日(1-31),时(0-23),分,秒,毫秒,如:new Date(Date.UTC(2024,0,1,16,19,0,0))//Tue Jan 02 2024 00:19:00 GMT+0800 (中国标准时间)

1.3 Date.now()

表示返回执行时日期和时间的毫秒数

1.4 toLocaleString()、toString()

const time = new Date(Date.UTC(2024,0,1,16,19,0,0))
time.toLocaleString() //2024/1/2上午12:19:00
time.toString() //Tue Jan 02 2024 00:19:00 GMT+0800 (中国标准时间)

1.5日期/时间组件方法

const time = new Date(2024,0,1,16,19)
time.getFullYear() //2024
time.getMonth() //0
time.getDate() //1
time.getHours()//16
time.getMinutes() //19
time.getSeconds() //0
time.getDay()  //1 星期1

原始值与原始值包装类型

1.Boolean

Boolean是对应布尔值的引用类型,

let falseObject = new Boolean(false) 
console.log(typeof falseObject) //object  
console.log(falseObject instanceof Boolean) //true

2.Number

Number是对应数值的引用类型,

let numberObj = new Number(10)

2.1toString()

该方法可以接收进制数,将数值转换为对应的进制,

let num = 10
console.log(num.toString())//"10" 
console.log(num.toString(10))//"10" 
console.log(num.toString(2))//"1010" 
console.log(num.toString(8))//"12" 
console.log(num.toString(16))//"a"

2.2toFixed()

用于返回指定小数点位数的数值字符串

console.log(num.toFixed(2)) //"10.00" 

如果数值本身的小数点位超出了toFixed()给定的参数,进行四舍五入保留参数位数,

let num = 10.983 console.log(num.toFixed(2)) //"10.98"

注意toFixed()的参数范围一般为(0-20)

2.3 isInteger()

属于ES6新增方法,用于判断数值是否为整数值

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

3.String

String是对应字符串的引用类型

let stringObject = new String("hello")

要注意的是String对象中的方法都可以在字符串原始值中调用

let stringValue = "hello"
console.log(stringValue.length)

此时stringValue并不是一个对象,只是一个字符串,但是它可以使用String对象中的length属性,

3.1charAt()

作用是找到该位置上的字符,

let stringValue = "hello world" console.log(stringValue.charAt(2)) //"l"

3.2拼接字符串 concat()

用于将一个或者多个字符串拼接成一个新字符串,

let str = "你好"
console.log(str.concat("代码"))  //"你好代码"
let manyResult = str.concat("1","2") 
console.log(manyResult) //"你好12"

3.3 提取字符串 slice() substr() substring()

这三个方法都可以接受1个或者两个参数,如果是一个参数,则返回从第一个参数开始的位置截取,

console.log("hello".slice(1)) //"ello"
console.log("hello".substr(1)) //"ello" 
console.log("hello".substring(1)) //"ello"

如果是两个参数,slice()和substring()则返回的是从第一个参数开始截取到第二参数停止,而substr()则返回从第一个参数开始截取,第二个参数代表要返回的字符数量,

console.log("hello".slice(1,3)) //"el"
console.log("hello".substr(1,3)) //"ell" 
console.log("hello".substring(1,3)) //"el"

注意:当某个参数为负值时,这个三个方法又不同 slice方法会将负值参数加上字符串长度

console.log("hello".slice("-1")) //o
console.log("hello".slice(1,"-1")) //ell

substr方法将第一个负值参数当成字符串长度加上该值,将第二个负参数值转换为0.

console.log("hello".substr("-1")) //"o"
console.log("hello".substr("-1","-8")) //""

substring方法会将所有负参数值都转换为0

console.log("hello".substring("-1")) //"hello"
console.log("hello".substring("-1","-8")) //""

3.4 字符串位置方法 indexOf()和lastIndexOf()

这两个方法都是从字符串中搜索传入的字符串,返回该字符在字符串中的位置,区别是,indexOf是从前往后搜索,lastIndexOf()是从后往前搜索,如果没找到则返回-1

console.log("hello".indexOf("l")) //2
console.log("hello".lastIndexOf("l")) //3

3.5 字符串包含方法 startsWith() endsWith() includes()

startsWidth()可接收一个或者两个参数,一个参数是会从索引位置为0开始搜索,

console.log("hello".startsWith("he")) //true

两个参数时 代表从哪个位置开始搜索

console.log("hello".startsWith("el",1)) //true

endsWith()也可接收一个或者两个参数,一个参数是从(字符串长度-传入字符串长度)的索引开始搜索

console.log("hello".endsWith("ell"))//false
console.log("hello".endsWith("llo"))//true

两个参数时第二个参数只代表字符串的长度,就比如本来"hello"的长度为5,但是我的第二个参数为2,那就代表第一个参数为(2-传入的字符串长度)

console.log("hello".endsWith("he",2)) //true

includes()也可接收一个或者两个参数,一个参数检查整个字符串,

console.log("hello".includes("he")) //true

两个参数时 代表从哪个位置开始搜索

console.log("hello".includes("el",1)) //true

4.trim()

作用时删除字符串中空格,但是不会改变字符串本身,只是创建了该字符串的副本

let str = "   hello   "
console.log(str.trim()) //"hello"
console.log(str) // "   hello   "

5.repeat()

复制字符串

console.log("hello".repeat(2)) //hellohello

6.padStart()和padEnd()

padStart()会在字符串前面填充指定字符,字符的个数由第第一个参数决定(如果字符串的长度小于第一个参数,则会用第二参数字符去填充直到长度相等),第二参数是用哪些字符来填充

console.log("hello".padStart(6,".")) //".hello"
//padEnd()也一样,只不过是从结尾填充
console.log("hello".padEnd(6,".")) //"hello."

7.字符串的迭代与解构

因为字符串的原型上有个迭代方法,所以可以使用for of 访问每个字符

for (let c of "12345"){
console.log(c) 
}
//1
//2
//3
//4
//5

解构

let str = "12345"  
console.log([...str]) //["1","2","3","4","5"]

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

其中toLoweCase和toUpperCase是原有的,比较常用而那两个则是在特定地区用的,因为有的少数语言转换要用地区特定方法。

9.字符串模式匹配方法

9.1 match()

接收一个正则表达式或者字符串的参数

let text = "cat,bat,sat,fat"
let pattern = /.at/
let matchValue =  text.match(pattern)
console.log(matchValue[0]) //"cat"

9.2 search()

也是接收一个参数(正则表达式或者字符串)返回第一个匹配位置的索引,如果没有匹配则返回-1

let text = "cat,bat,sat,fat"
console.log(text.search("at")) //0

9.3 replace()

接收两个参数,第一个参数可以是字符串或者正则表达式,第二个参数可以是字符串或者函数,如果第一个参数是字符串,只会替换首次匹配的字符串,如果想替换所有匹配的字符串,第一个参数需要使用正则表达式并且带全局标记g

let text = "cat,bat,sat,fat"
console.log(text.replace('at','end')) //"cend,bat,sat,fat"
console.log(text.replace(/at/g,"end")) //"cend,bend,send,fend"

10.Math

10.1 min()和max()

用于确定一组数值中的最小值和最大值

console.log(Math.min(3,18,1,9))  //1
console.log(Math.max(3,18,1,9))  //18

10.2 舍入方法

Math.ceil()向上取整

console.log(Math.ceil(25.48)) //26

Math.floor()向下取整

console.log(Math.floor(25.48)) //25

Math.round() 四舍五入

console.log(Math.round(25.4)) //25
console.log(Math.round(25.5)) //26

10.3 random()方法

作用是随机返回一个0-1范围内的随机数,包含0但是不包含1

console.log(Math.random()) //0.43643837764623705

如果想生成1-10范围内的随机数

console.log(Math.floor(Math.random()*10+1))
彩蛋

感谢大伙儿将文章看完,事情是这样的,最近公司网络安全检查,因为不能说的原因,公司停止了研发和生产工作,所以上班期间就狂摸鱼,某一天中午吃饭的时候,一同事说这日子太闲了,下班去送外卖吧,我当时没在意,然后下午我日常摸鱼(是真的摸鱼有图为证)的时候,突然脑子一机灵想到,我自己有小电驴,然后公司还能免费充电,送外卖这不是零成本的买卖么,一晚上接个10单,一单平均4块,那不就是40块,那一个月不就1200大洋了!!!,比交通补还高(公司一个月交通补才400...)起飞!!!然后我就开始注册某家外卖公司的众包APP,一系列操作都整好之后,下了班,我开始了我的第一次送外卖,从晚上8点开始收到系统派送的第一单,是去一家宠物店去取药,然后送到与宠物店相距2公里的一个小区,系统规定的时间是40分钟(时间这么宽裕估计是有新手保护机制),我到了宠物店,我满脸笑容走进店里,老板还以为我是顾客呢,也满面笑容迎着我,但是当我说出美团21号的字眼时,老板脸上的笑是随着我说出这个几个字的速度去消退的,然后一脸不耐烦的指向门口的一个架子上,虽没说一个字但是以我从微表情专家的角度上去解读老板说了一万字...当时我的心里突然觉着,那些专职跑外卖的是不是都是这样的,不过无所谓只要能挣钱,wudiaosuowei,取了货和老板打了个招呼,骑上电驴,直奔顾客地址处,当时时间还有30多分钟吧,我要是一路正常速度走,完全没问题,但是那一刻我好像被外卖之神附身了,油门拧到底,红灯左右看一眼,没车我就过,速度基本都是40KM/h,平时出去玩的时候看跑外卖的师傅开的都飞快,当时就想,这不是拿命挣钱么。当我亲身去经历这些的时候,我真不知道为啥开这么快,当时脑子里就是想赶紧把东西送到顾客手里,也没想着送完这单接下单,最后我用时3分钟到了顾客所在的小区,因为小区比较老,单元号也没有,一顿猛问,花费了大概10分钟左右最终将商品送到客户手里。这一晚上我最终接了4单。昨天晚上是跑外卖的第二天,我接了10单(从8点跑了12点整),说句不要脸的话昨晚做梦都在跑外卖(儿骗)。这两天的外卖经历,真的给我留下很多印象,什么坟地送蚊香、高架上的外卖店、什么一个路灯都没有的八面神(一个社区的名字)、烂尾楼盘配送地址等等...这些经历留着下篇文章再说。

附上摸鱼图

IMG_20240620_112214.jpg