JavaScript基础视频教程总结（081-090章）
程序员文章站
2022-10-04 16:34:01
所有基础课程链接： 1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章） 5. JavaScript基 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>081-090章总结</title>
</head>
<body>
<pre>
081. date对象
在js中使用date对象来表示一个时间
</pre>
<script type="text/javascript">
console.log("--第081--");
//如果直接使用构造函数创建一个date对象，则会封装为当前代码执行的时间
var d01 = new date();
console.log(d01)
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年 时:分:秒
var d02 = new date("2/18/2011 11:10:30")
console.log(d02)
// getdate() - 获取当前日期对象是几日
var curdate = d02.getdate()
console.log(curdate)
// getday() - 获取当前日期对象时周几 - 会返回一个0-6的值 0 表示周日 1表示周一
var curday = d01.getday()
console.log("今天是周"+curday)
//getmonth() 获取当前时间对象的月份 -会返回一个0-11的值 0 表示1月 11 表示12月
var curmonth = d01.getmonth()
console.log("本月是"+(curmonth+1)+"月")
// getfullyear() - 获取当前日期对象的年份
var curyear = d01.getfullyear()
console.log("今年是"+curyear+"年")
/*
* gettime()
* - 获取当前日期对象的时间戳
* - 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
* 到当前日期所花费的毫秒数（1秒 = 1000毫秒）
* - 计算机底层在保存时间时使用都是时间戳
*/
var gettime = d01.gettime()
console.log(gettime)
console.log( gettime/1000/60/60/24/365 )
//利用时间戳来测试代码的执行的性能
//获取当前的时间戳
var start = date.now()
for(var i=0 ; i<30 ; i++){
console.log(i)
}
var end = date.now()
console.log("代码执行了"+(end-start)+"毫秒");
</script>
<pre>
082. math
- math和其他的对象不同，它不是一个构造函数，
它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
math 对象属性
1. math.pi 表示的圆周率
math 对象方法
1. math.abs(x) 返回数的绝对值
2. math.ceil(x) 对数进行上舍入
3. math.floor(x) 对数进行下舍入
4. math.round(x) 可以对一个数进行四舍五入取整
5. math.max(x,y) 返回 x 和 y 中的最高值
6. math.min(x,y) 返回 x 和 y 中的最低值
7. math.pow(x,y) 返回 x 的 y 次幂
8. math.sqrt(x) 返回数的平方根
9. math.random() 返回 0 ~ 1 之间的随机数(小数)
</pre>
<div id="randomcolor">随机颜色</div>
<script type="text/javascript">
console.log("--第082--");
var pi = math.pi
console.log(pi)
var znum1 = 5.1
var znum2 = 5.9
var fnum1 = -5.1
var fnum2 = -5.9
var abs1 = math.abs(znum1)
var abs2 = math.abs(fnum1)
console.log(abs1)
console.log(abs2)
console.log("-------")
var ceil1 = math.ceil(znum1)
var ceil2 = math.ceil(znum2)
var ceil3 = math.ceil(fnum1)
var ceil4 = math.ceil(fnum2)
console.log(ceil1) // 6
console.log(ceil2) // 6
console.log(ceil3) // -5
console.log(ceil4) // -5
var floor1 = math.floor(znum1)
var floor2 = math.floor(znum2)
var floor3 = math.floor(fnum1)
var floor4 = math.floor(fnum2)
console.log(floor1) // 5
console.log(floor2) // 5
console.log(floor3) // -6
console.log(floor4) // -6
var round1 = math.round(znum1)
var round2 = math.round(znum2)
var round3 = math.round(fnum1)
var round4 = math.round(fnum2)
console.log(round1) // 5
console.log(round2) // 6
console.log(round3) // -5
console.log(round4) // -6
var max1 = math.max(1,2,3,10,18)
var max2 = math.max(-1,-2.1,-2.9,-3,-10,-18)
console.log(max1) // 18
console.log(max2) // -1
var min1 = math.min(1,2,3,10,18)
var min2 = math.min(-1,-2.1,-2.9,-3,-10,-18)
console.log(min1) // 1
console.log(min2) // -18
var pow = math.pow(2,4)
console.log(pow) // 16
var sqrt = math.sqrt(2)
console.log(sqrt) // 1.414
var random1 = math.random()
console.log(random1)
// 产生随机整数，包含下限值，但不包括上限值
function randomnoupp(lower,upper){
return math.floor( math.random()*(upper-lower) + lower )
}
// 产生随机整数，包含下限值，包括上限值
function random(lower,upper){
return math.floor( math.random()*(upper-lower+1) + lower )
}
var random2 = randomnoupp(1,10)
var random3 = random(1,10)
console.log(random2)
console.log(random3)
// 扩展随机颜色值
function randomcolor(){
var r =random(0,255),g =random(0,255),b =random(0,255)
var result = "rgb("+r+","+g+","+b+"0"
return result
}
var random_color = document.getelementbyid("randomcolor")
random_color.style.color = randomcolor()
</script>
<pre>
083. 包装类
基本类型：undefined, null, boolean, number, string
引用类型：object, array, date, regexp （其实就是对象）
js中只有对象才有属性和方法，原始值没有属性和方法
那么我们平常求字符串的长度 用length属性不是没有问题吗？
在js中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
string() - 可以将基本数据类型字符串转换为string对象
number() - 可以将基本数据类型的数字转换为number对象
boolean() - 可以将基本数据类型的布尔值转换为boolean对象
但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
引用类型与基本包装类型的区别：
它们的对象生命周期不同：
引用类型：使用new创建引用类型的实例，在执行数据流离开当前作用域时会一直存储在内存中。
基本包装类型：自动创建基本包装类型的对象，只执行一行代码的瞬间之后就会立即销毁。
</pre>
<script type="text/javascript">
console.log("--第083--");
var num = new number(3);
var num2 = new number(3);
var str = new string("hello");
var str2 = new string("hello");
var bool = new boolean(true);
var bool2 = true;
console.log(typeof num) //object
console.log(num == num2) //false 比较的是对象的地址
var b = new boolean(false);
if(b){
console.log("我运行了~~~"); // b为对象转换为boolean，都为true
}
/*
* 方法和属性之能添加给对象，不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时，
* 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
* 调用完以后，在将其转换为基本数据类型
*/
var s = 123
s = s.tostring()
console.log(s) // "123"
console.log(typeof s) // string
var s2 =456
s2.hello="hello"
console.log(s2) // 456
console.log(s2.hello) //undefined
var str="hello word";
// 1.创建出一个和基本类型值相同的对象
//var str = new string("hello world");
// 2.这个对象就可以调用包装对象下的方法，并且返回结给long变量
//var long = str.length;
// 3.之后这个临时创建的对象就被销毁了
//str = null;
//因为str没有length属性 所以执行这步之前后台会自动执行以上三步操作
var long = str.length;
console.log(long); // 10
console.log(str.hello) //undefined
</script>
<pre>
084. 字符串的方法
在底层字符串是以字符数组的形式保存的,["a","b""c"]
length属性-可以用来获取字符串的长度
charat()-可以返回字符串中指定位置的字符,根据索引获取指定的字符,从0开始
charcodeat()-获取指定位置字符的字符编码（unicode编码）
string.formcharcode()-可以根据字符编码去获取字符
concat()-可以用来连接两个或多个字符串
indexof()
- 该方法可以检索一个字符串中是否含有指定内容
- 如果字符串中含有该内容，则会返回其第一次出现的索引
- 如果没有找到指定的内容，则返回-1
- 可以指定一个第二个参数，指定开始查找的位置
lastindexof()
- 该方法的用法和indexof()一样，
- 不同的是indexof是从前往后找，
- 而lastindexof是从后往前找
- 也可以指定开始查找的位置
slice(x,y)
- 可以从字符串中截取指定的内容
- 不会影响原字符串，而是将截取到内容返回
- 参数：
第一个，开始位置的索引（包括开始位置）
第二个，结束位置的索引（不包括结束位置）
- 如果省略第二个参数，则会截取到后边所有的
- 也可以传递一个负数作为参数，负数的话将会从后边计算
substring(x,y)- 可以用来截取一个字符串，可以slice()类似
- 参数：
- 第一个：开始截取位置的索引（包括开始位置）
- 第二个：结束位置的索引（不包括结束位置）
- 不同的是这个方法不能接受负值作为参数，
如果传递了一个负值，则默认使用0
- 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
substr(x,y)-用来截取字符串
- 参数：
1.截取开始位置的索引
2.截取的长度
split()-可以将一个字符串拆分为一个数组
- 参数：
- 需要一个字符串作为参数，将会根据该字符串去拆分数组
如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
touppercase()-将一个字符串转换为大写并返回
tolowercase()-将一个字符串转换为小写并返回
</pre>
<script type="text/javascript">
console.log("--第084--");
var basestr = "abcdefg"
var basestr2 = "aabbcdcc"
var strlength = basestr.length
console.log("strlength=" + strlength) //7
var charat = basestr.charat(3)
console.log("charat=" + charat) // d
var charcodeat = basestr.charcodeat(0)
console.log("charcodeat=" + charcodeat) //97
var formcharcode = string.fromcharcode(97)
console.log("formcharcode=" + formcharcode) //a
var concat = basestr.concat("hijklmn","opqist")
console.log("concat=" + concat) //abcdefghijklmnopqist
var indexof1 = basestr2.indexof("c")
var indexof2 = basestr2.indexof("e")
console.log("indexof1=" + indexof1) // 4
console.log("indexof2=" + indexof2) // -1
var lastindexof1 = basestr2.lastindexof("c",5)
var lastindexof2 = basestr2.lastindexof("e")
console.log("lastindexof1=" + lastindexof1) // 4
console.log("lastindexof2=" + lastindexof2) // -1
var slice = basestr.slice(1,3)
var slice2 = basestr.slice(1,-1)
console.log("slice=" + slice) // bc
console.log("slice2=" + slice2) // bcdef
var substring = basestr.substring(1,3)
var substring2 = basestr.substring(3,-3)
console.log("substring=" + substring) // bc
console.log("substring2=" + substring2) // abc
var substr = basestr.substr(1,3)
var substr2 = basestr.substr(3,0)
console.log("substr=" + substr) // bcd
console.log("substr2=" + substr2) // 空
console.log(typeof substr2) // string
var split =basestr.split("d")
console.log("split=" + split) // abc,efg
console.log(typeof split) // object
console.log(array.isarray(split)) //true
var touppercase =basestr.touppercase()
console.log("touppercase=" + touppercase) // abcefg
var tolowercase =basestr.tolowercase()
console.log("tolowercase=" + tolowercase) // abcefg
</script>
<pre>
085. 正则表达式的简介
正则表达式（英语：regular expression，在代码中常简写为regex、regexp或re）
使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
</pre>
<script type="text/javascript">
console.log("--第085--");
//创建正则表达式的对象
/*
* 语法：
* var 变量 = new regexp("正则表达式","匹配模式");
* 使用typeof检查正则对象，会返回object
* var reg = new regexp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
* 在构造函数中可以传递一个匹配模式作为第二个参数，
* 可以是
* i 忽略大小写
* g 执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了
* m 多行查找
*/
var reg = new regexp("a","g");
var str = "a";
/*
* 正则表达式的方法：
* test()
* - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则， 如果符合则返回true，否则返回false
*/
var result = reg.test(str);
console.log(result); //false
console.log(reg.test("acaaaa")); //false
console.log(reg.test("acaaaa")); //true
</script>
<pre>
086. 正则语法
使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式
注意：//里面表达式前后不能有空格
使用字面量的方式创建更加简单
使用构造函数创建更加灵活
</pre>
<script type="text/javascript">
console.log("--第086--");
// var reg = new regexp("a","g");
var reg = /a/g
console.log(typeof reg) // object
console.log(reg.test("abc")) //true
// 使用 | 表示或者的意思
reg = /a|b|c/;
console.log(reg.test("ab")) //true
console.log(reg.test("a")) //false
console.log(reg.test("de")) //false
// 创建一个正则表达式检查一个字符串中是否有字母
/*
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [a-z] 任意大写字母
* [a-z] 任意字母
* [0-9] 任意数字
*/
var reg = /[a-z]/
console.log(reg.test("de")) //true
// 检查一个字符串中是否含有 abc 或 adc 或 aec
var reg = /a[bde]c/
// [^...] 表达式用于查找任何不在方括号之间的字符，有一个不在即为true。
reg = /[^ab]/;
console.log(reg.test("de")) //true
console.log(reg.test("ab")) //false
reg = /[^0-9]/;
console.log(reg.test("ab")) //true
console.log(reg.test("123aaa")) //true //有一个不在即为true
console.log(reg.test("123")) //false
console.log(reg.test("abs")) //true
</script>
<pre>
087. 字符串和正则相关的方法
split()
- 可以将一个字符串拆分为一个数组
- 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
- 这个方法即使不指定全局匹配，也会全都插分
- 如果分割符在串的头和尾在在头和尾加上空值
search()
- 可以搜索字符串中是否含有指定内容
- 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
- 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
- serach()只会查找第一个，即使设置全局匹配也没用
match()
- 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
- 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
- match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
replace(x,y)
- 可以将字符串中指定内容替换为新的内容
- 参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容
- 默认只会替换第一个
</pre>
<script type="text/javascript">
console.log("第087");
var regstr = "a1a2b3c4d5f"
var splitresult = regstr.split(/[a-z]/)
console.log(splitresult) // ["", "1", "2", "3", "4", "5", ""]
var searchresult = regstr.search(/[a-z]/)
console.log(searchresult) // 0
var matchresult = regstr.match(/[a-z]/g)
console.log(matchresult) // ["a", "a", "b", "c", "d", "f"]
var replaceresult = regstr.replace(/[a-z]/g , '*')
console.log(replaceresult) // *1*2*3*4*5*
console.log(regstr) // a1a2b3c4d5f
</script>
<pre>
088. 正则表达式语法
量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
贪婪量词 n+ 从后往前一个个匹配，只匹配一次，设全局也没用
惰性量词 n+? 从前往后一个个匹配,设全局有用
,支配量词(js不支持)n++ 匹配整个字符串
</pre>
<script type="text/javascript">
console.log("第088");
// {n, m} 匹配前一项至少n次,但是不能超过m次
// {n, } 匹配前一项n次,或者多次
// {n} 匹配前一项恰好n次
// ? 匹配前一项0次或1次,也就是说前一项是可选的. 等价于 {0, 1}
// + 匹配前一项1次或多次,等价于{1,}
// * 匹配前一项0次或多次.等价于{0,}
//检查一个字符串中是否含有aaa
var regexp = /a{3}/
// ababab
var regexp = /(ab){3}/
// abc ,abbc ,abbbc
reg = /ab{1,3}c/;
console.log( reg.test("abc") ) //true
console.log( reg.test("abbc") ) //true
console.log( reg.test("abbbc") ) //true
console.log( reg.test("abbbbc") ) //false
//检查一个字符串中是否以a开头
// ^ 表示开头
// $ 表示结尾
//如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
reg = /^a$/
console.log(reg.test("a")) // true
console.log(reg.test("aa")) // false
// 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
var regmobile = /^1[3-9][0-9]{9}$/
console.log(regmobile.test("11000000000")) //false
console.log(regmobile.test("11000000000sss")) //false
console.log(regmobile.test("15111111111")) //true
</script>
<pre>
089. 正则表达式语法2
检查一个字符串中是否含有 .
. 表示任意字符
在正则表达式中使用\作为转义字符
\. 来表示.
\\ 表示\
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
如果要使用\则需要使用\\来代替
</pre>
<script type="text/javascript">
console.log("第089");
var reg = /\./;
reg = /\\/;
reg = new regexp("\\.");
reg = new regexp("\\\\");
// [...] 位于括号之内的任意字符
// [^...] 不在括号之中的任意字符
// . 除了换行符之外的任意字符,等价于[^\n]
// \w 任何单字字符, 等价于[a-z0-9_]
// \w 任何非单字字符,等价于[^a-z0-9_]
// \s 任何空白符,等价于[\ t \ n \ r \ f \ v]
// \s 任何非空白符,等价于[^\ t \ n \ r \ f \ v]
// \d 任何数字,等价于[0-9]
// \d 除了数字之外的任何字符,等价于[^0-9]
// \b 单词边界
// \b 除了单词边界
reg = /\w/;
reg = /\w/;
reg = /\d/;
reg = /\d/;
reg = /\s/;
reg = /\s/;
// 创建一个正则表达式检查一个字符串中是否含有单词child
var regchild = /\bchild\b/
console.log(regchild.test("hellochild")) // false
console.log(regchild.test("hello childddd")) // false
console.log(regchild.test("hello child")) // true
// 去除空格
var str = " sss he llo fff ";
str = str.replace( /^\s*|\s*$/g ,'') //去头尾
str = str.replace( /\s{2,}/g ,' ') // 去中间
console.log(str)
</script>
<pre>
090. 邮件的正则
</pre>
<script type="text/javascript">
console.log("第090");
// 01asqq.ss_fdsa@01asqq.com.cn
// 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
var regmail = /^\w{3,}(\.|\w+)*@[a-z0-9]+(\.[a-z]{2,5}){1,2}$/
console.log(regmail.test("as_.wfsfeas@sfsd5.com.cn")) //true
</script>
</body>
</html>
所有基础课程链接：
1.javascript基础视频教程总结（001-010章） 2.javascript基础视频教程总结（011-020章） 3. javascript基础视频教程总结（021-030章） 4. javascript基础视频教程总结（031-040章）
5. javascript基础视频教程总结（041-050章） 6. javascript基础视频教程总结（051-060章） 7. javascript基础视频教程总结（061-070章） 8. javascript基础视频教程总结（071-080章）
9. javascript基础视频教程总结（081-090章） 10. javascript基础视频教程总结（091-100章） 11. javascript基础视频教程总结（101-110章） 12. javascript基础视频教程总结（111-120章）
13. javascript基础视频教程总结（121-130章） 14. javascript基础视频教程总结（131-140章）
另外，欢迎关注我的
上一篇： python timeit模块
下一篇： Django2.1简介及安装