JavaScript：内置函数：Math / Number / Date / Array / 字符串 / Regex / 类型转换

点击观看清晰的B站视频

当前系列： Javascript入门

JavaScript中有一些内置（bulid-in）的函数。所谓内置，就是这些函数可以在JavaScript运行环境（比如浏览器）中直接调用

这些函数大部分由类和对象（复习）组织，所以又被称之为方法。

比如console.log()，console是类，log()是它的方法。

Math类

可以认为Math是一个静态类。

Math类提供的静态方法，常用的有

abs()：取绝对值
取整：
- ceil()：向上取整
- floor()：向下取整
- round()：四舍五入取整
random()：会生成一个小于1的随机小数
@想一想@：如果得到一个1000以内的随机正整数？
```
Math.ceil(Math.random()*1000)
```

Number

JavaScript奇怪的地方在于，如果我们要四舍五（六）入到n位小数位，需要用到的是包装类Number的实例方法toFixed(n)：

7.654.toFixed(2)   //"7.65"
7.658.toFixed(2)   //"7.66"

更奇怪的是，他们返的是字符串！稍不注意，就会搞出bug来：

3.16.toFixed(1)+1    //结果是多少？

Date

日期对象，表示时间（复习）

获得日期对象

系统当前日期：new Date()

还可以按：年,月,日,小时,分钟,秒……指定的日期：new Date(2019,4,20,.....) ，但是等等，为什么是5月？因为Javascript的月份（注意：仅仅只有月份）是从0开始计数的。

然鹅，new Date()还可以传字符串。试一试：new Date('2019/4/20')，这时候你发现又是4月了，ʅ(‾◡◝)ʃ

get和set

拿到一个Date对象，我们就可以调用它的getXXX()方法，获得它的年与日等

getYear()：奇怪是事又发生了
```
new Date().getYear()  //121
```
结果不是2021，而是121（@想一想@：为什么？）
要想获得2021，需要使用：
```
new Date().getFullYear()
```
getMonth()：理所当然的（？），返回从0开始的计数：
```
new Date('2021/4/24').getMonth()  //3
```
getDate()：注意不是getDay()
getDay()：返回星期几
getHours()：小时
……

相应的，setXXX可用于修改日期，如果指定的日期值 n ：

就在本年/月/周……内，直接设定在本年/月/周……第 n 月/周/日；否则
在其时间范围外
增/减。所以可用于日期的增减运算：
```
date.setDate(date.getDate()+20)
```
小技巧：获取某月最后一天 => 先获取该月下个月，然后设置其Date为0：
```
date.setDate(0);
```

注意setXXX()有返回值的，返回的是时间戳。该时间戳可以传入new Date()获得对应的时间对象：

new Date(1662362192893);

时间戳

Date有一个parse()方法，会返回从1970年1月1日零时整的GMT时区开始计时的时间戳（单位：毫秒）。

注意记忆陷阱：getYear()是从1900年起算，但时间戳是从1970年算，(*/ω＼*)

//不是0，而是-8*60*60，想一想：为什么？
Date.parse(new Date(1970,0,1,0,0,0))

时间戳可以作为参数直接传递给new Date()：

new Date(1000*60*60*24)

两个日期直接的差，也是用毫秒表示：然后我们可以再转换成天/小时/分钟/秒等

PS：总体来说，相较于其他语言（Java/C#），JavaScript的日期运算体验是非常差的，所以很多前端开发人员喜欢引入第三方的JS日期库，但每多引入一个外部库，性能就要降低一分，项目结构的复杂度也增加一分，如何权衡，看项目组了……

数组Array

数组其实是一个Array对象：

let students = new Array();
students[0]="atai";

复习：JavaScript的数组，其实是个链表。

所以其length是可以改变的，会将数组：（演示）

截短：顺序从左到右
变长：undefined填充

还有以下一些常用方法：（注意方法是改变调用数组，还是返回一个新数组）

indexOf()：获取下标，-1表示没有找到
concat()：连接多个数组
slice()：截取一段内容，同string的substring()
push() 和 pop()：和“栈”（stack）类似，但栈的出入口在数组末尾
shift() 和 unshift()：从数组头部删除/添加元素
sort() 和 reverse()：试一试sort()的排序标准？
```
[1,18,7,92,2].sort()// [ 1, 18, 2, 7, 92 ] what?
```
因为JavaScript默认的排序规则是“将其视为字符串并按字符集顺序”。要按数值大小排序，可以加一个回调函数：
```
[1,18,7,92,2].sort(function(a, b){
   return a>b ? 1 : -1;   //返回值只能是1或-1，不能是bool值
})
```

字符串

字符串可以理解为由单个字符组成的数组（但不是String类对象，在JavaScript中它是值类型数据）。所以它可以像数组一样使用：

属性：length
下标[]：（从0开始）

但是，注意：字符串是“不可更改（imutable）”的，所以str[3]='x'无效，同样的，以下所有字符串方法都不会修改原字符串，而是返回一个新字符串。

以下方法皆通过字符串对象调用，是实例方法：

indexOf(target)：返回target在字符串中的位置（索引值），找不到就返回-1
```
'源栈欢迎你'.indexOf('你')   //4
'源栈欢迎你'.indexOf('飞哥')   //-1
```
substring(?start, ?end) ：截取从start开始（默认为0），到end为止（默认为最后）的字符串
```
'源栈欢迎你'.substring(2,4)    //'欢迎'
'源栈欢迎你'.substring(2)      //'欢迎你'
```
substring()经常和indexOf()联合使用，@想一想@：干嘛用呢？
replace(a,b)：用a替换b。注意：replace()不会改变字符串的内容，需要重新赋值一次
```
'源栈欢迎你'.replace('你','您');
```
toUpperCase()/toLowerCase()：转换为大写/小写，主要用于忽略大小写的比较（先转换再比较）
```
if('FeiGe'.toLowerCase() == 'feige'){ 
```

RegExp

复习：正则表达式

创建对象

有两种方式获得正则表达式对象：

字面量：两个斜杠（//）包裹，如：/\d/g，注意不要加引号
RegExp构造函数：（表达式会动态改变时使用）
```
let regex = new RegExp("\d", "gi");
```

其中，//后或RegExp()的第二个参数，可以是值为gim的指示标志（在方法中演示区分）：

g：global，默认只匹配一行，加g之后表示匹配整个字符串，
i：ignore case，默认区分大小写
m：multiple line，用得少了，一般用g代替，或者gm共用

方法

准备数据：

let reg = /\d/gim,
    str = `http://17bang.ren`;

以下方法是正则表达式对象的实例方法，由正则表达式对象引导（.出来）：

test()：Regexp方法，返回 true/false
exec()：Regexp方法
- 找不到的话，返回null
- 如果找到的话，
exec()可以反复调用，如果需要找到所有匹配项，一般使用while循环：（演示gim，如果没有g的话，不会顺序查找，就会死循环！内存泄露）
```
//将reg.exec(str)的结果赋值给result
let result = reg.exec(str);
//使用truthy判断result的值是不是null
while (result) {
    console.log(result.length);
    console.log(result[0] + ': ' + result.index);
    result = reg.exec(str);
};
//没有匹配之后，result为null
console.log(result);
```

以下方法是String对象的实例方法，由字符串引导（.出来），参数可以是正则表达式（也可以是字符串）：

search()：同indexOf()
```
console.log(str.search(reg));   //7
```
match()：用数组返回所有匹配的字符串（比exec()好用太多……）
```
str.match(reg)
```

replace(reg, callback)：通过reg找到要替换的内容，然后用回调函数callback的返回结果进行替换

let result = str.replace(reg, function (match, index) {
    //参数match: 匹配成功的字符串
    //参数index：字符串所在的位置（索引）
    //return：用于替换 匹配成功字符串 的字符串
    return match.toUpperCase() + 'with index:' + index;
});

关于分组

match如果要获取group的话，必须要使用命名捕获分组

let reg = /Code(?<id>\d+)/gim,
    str = `/Code/23`;

.group.id

类型转换

有时候我们拿到的数据是一种类型（比如是字符串），但接下来我们要将其“转化”为另外的类型（比如数值）进行运算，这时候就需要进行类型转换。

Javascript的类型转换也让人一言难尽啊！o(╥﹏╥)o

to字符串

最方便的方式是：+""。

但是JavaScript并不推荐这种（hack）方式，而是搞出了String()和toString()。

toString()友好一些（其他编程语言也有这么一个方法），然鹅也并不好用：null/undefined/{}都无法调用，[]又还能行，唉~~

123.toString()   //123.toString()：不要问我为什么，因为这就是JavaScript……
123..toString()
(123).toString()
null.toString()   //报错
[].toString()    //返回空字符串 ……

String()安全一些，但怪怪的……

to数值

也是一样有hack方式+，JavaScript安利的“正规”方法：

parseInt() ：转换成整数（int）类型
parseFloat()：转换成小数（float）类型

常见面试题：parseInt(str)和+str的区别

总体上感觉，

parse()会把参数转换成字符串格式，然后按字符进行解析
+会与后面的值进行数值运算，拿到结果

但JavaScript不同类型间的“字符串转换”和“数值转换/运算”也玄学一样的存在，所以还是挨个记吧：

字符串以数值开头的，parse()都能够解析，+不一定

parseInt('32abc')    //32
+'32abc'    //NaN
//然鹅
parseInt('')    //NaN
+''    //0

bool和数组类型：+能转，parse()反而不行

parseInt(true)    //NaN
+true    //1
parseInt([])    //NaN
+[]    //0

匿名对象/undefined，都无法解析

parseInt({})
+{}
parseInt(undefined)
+undefined

null又出幺蛾子
```
+null    //0
parseInt(null)    //NaN
```

其他

bool值一般不转换（复习truthy）

字符串转时间，一般用new Date(str)

时间转字符串，要求特定格式，比如2022年8月28日，或2022-8-28：没有现成的，¯\_(ツ)_/¯

进行转换之前，一般都要进行（正则）检验，确保数据可以进行转换，否则很容易埋雷！

作业

本章作业名为：build-in.html

创建一个函数getRandom(max, min)
- 能返回一个大于min小于max的随机整数
- 如果没有指定min的话，默认为0
- 连max都不指定的话，max也不设上限
完成编程基础-时间的作业
输入一个字符串，输出其字母颠倒后的结果。如：yuanzhan -> nahznauy
使用JavaScript内置字符串函数，处理 “‘源栈’：飞哥小班教学，线下免费收看” ：将“飞哥”改成“大神”，“线下”改成“线上”。
将数组['why','gIT','vs2019','community','VERSION']规范化，让所有元素：

首字母大写开头，其他字母小写
截去超过6个字符的部分，如'community'将变成'Commun'

在上述数组头部加上小鱼老师，末尾加上大飞哥
遍历下面这一段话中所有字符，
- 统计出其中有多少个英文单词（注意“多个空格”“标点没空格”“数字空格”……）
- 并取出所有数字（1+20+02+2007），求和：
1）Yuanzhan,one of the most famous training course， who aim to provide the best service for those who want to change their life by learning computer program skill was created by Mr. YeFei, who first was a lawyer after graduted from the Southwest University of Political Science and Law with the Economic and Law bachelor degrees in 20 02 but at last came into the IT field as a software developer in 2007.... ..
使用正则表达式：【难：在正则】
1. 判断某个字符串是否是小数（正负小数都可以）
2. 完成第7题
3. 将一段话中的所有单词首字母变成大写
4. 将HTML标签中所有以zyf-开头的属性去掉（尽可能多的制造测试用例，比如：<a lzyf-old=''，或者：<span>zyf---+---fyz</span> ……）

学习笔记

源栈学历

键盘敲烂，月薪过万；作业不做，等于没学！

任何问题，都可以直接加 QQ群：273534701

在当前系列 Javascript入门中继续学习：

上一课： JavaScript：函数特色：一等公民 / 参数匹配 / 函数提升 / 回调传参

下一课： JavaScript：DOM元素增删改查 / form表单操作

多快好省！前端后端，线上线下，名师精讲

先学习，后付费；
不满意，不要钱。
编程培训班，我就选源栈

更多了解加：

QQ群：273534701

答疑解惑，远程debug……

B站源栈-小九的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号：源栈一起帮

二维码

Math类

Number

Date

获得日期对象

get和set

时间戳

数组Array

字符串

RegExp

创建对象

方法

关于分组

类型转换

to字符串

to数值

其他

作业

作业

求助答疑

英语单词

自测答题

模拟面试

学习笔记

作业提交

任何问题，都可以直接加 QQ群：273534701

在当前系列 Javascript入门中继续学习：

QQ群：273534701

B站源栈-小九的直播间

公众号：源栈一起帮

线上

线下

Math类

Number

Date

获得日期对象

get和set

时间戳

数组Array

字符串

RegExp

创建对象

方法

关于分组

类型转换

to字符串

to数值

其他

作业

作业

任何问题，都可以直接加 QQ群：273534701

在当前系列 Javascript入门 中继续学习：

公众号：源栈一起帮

在当前系列 Javascript入门中继续学习：