记录自己学习的知识和相关资料,方便以后查阅学习,侵权可删!
js进阶相关知识(2)
3. 严格模式
3.1 什么是严格模式
JavaScript 除了正常模式外,还提供严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。
严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改:
1 消除 JavaScript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
2 消除代码运行的一些不安全之处,保证代码运行的安全。
3 提高编译器效率,增加运行速度。
4 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 JavaScript 做好铺垫。比如一些保留字如:class,enum,export,extends 不能做变量名
3.2 开启严格模式
严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。
1 为脚本开启严格模式
为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语法“use strict”;(或 ‘use strict’ ;)。
2 为函数开启严格模式
要给某个函数开启严格模式,需要把“use strict”;(或 ‘use strict’ ;) 声明放在函数体所有语句之前。
4. 高阶函数
高阶函数是对其他函数进行操作的函数,它接受函数作为参数或将参数作为返回值输出。
函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。
5. 闭包
5.1 变量作用域
变量根据作用域的不同分为两种:全局变量和局部变量。
1 函数内部可以使用全局变量
2 函数外部不可以使用局部变量
3 当函数执行完毕,本作用域内的局部变量会销毁。
5.2 什么是闭包
闭包( closure) 指有权访问另一个函数作用域中变量的函数。 ---- JavaScript 高级程序设计
简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。
函数外面的作用域可以访问函数内部的局部变量。
闭包的主要作用:延伸了变量的作用范围
闭包应用
1. 点击 li 打印当前索引号
for(var i = 0; i < lis.length; i++){
// 利用 for 循环创建了4个立即执行函数
// 立即执行函数也称为小闭包因为立即执行函数里面的任何一个函数都可以使用它的 i 这变量
(function(i){
lis[i].onclick = function( ){
console.log(i);
}
})(i);
}
2. 3秒钟之后打印 li 内容
for(var i = 0; i < lis.length; i ++ ){
(function(i){
setTimeout(function(){
console.log(lis[i].innHTML);
},3000)
})(i);
}
3. 计算打车价格
// 闭包应用-计算打车价格
// 打车起步价 13元(3公里内),之后每多一公里增加 5块钱。用户输入公里数就可以计算打车价格
// 如果有拥堵情况,总价格多收取 10块钱拥堵费
var car = (function(){
var start = 13;
var total = 0;
return{
// 正常的总价
price:function(n){
if(n <= 3){
total = total;
}else{
total = start + (n - 3) * 5
}
return total;
},
// 拥堵之后的费用
yd:function(flag){
return flag ? total + 10: total;
}
})()
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33
console.log(car.price(1)); // 13
console.log(car.yd(false)); // 13
6. 递归
6.1 什么是递归?
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数*。
简单理解:函数内部自己调用自己,这个函数就是递归函数。
递归函数的作用和循环效果一样。
由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件 return。
6.4 浅拷贝和深拷贝
1 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用
2 深拷贝拷贝多层,每一级别的数据都会拷贝(利用函数递归的方式来进行深拷贝)
3 Object.assign(target, ...souces) es6 新增方法可以浅拷贝(语法糖)
正则表达式
1. 正则表达式概述
1.1 什么是正则表达式
正则表达式( Regular Expression ) 是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。
正则表达式通常被用来检索、替换某些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文**(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)**等。
1.2 正则表达式的特点
1 灵活性、逻辑性和功能性非常的强。
2 可以迅速地用极简单的方式达到字符串的复杂控制。
3 对于刚接触的人来说,晦涩难懂。
4 实际开发中,一般都是直接复制写好的正则表达式,但是要求会使用正则表达式并且根据实际情况修改正则表达式。
2. 正则表达式在 JavaScript 中的使用
2.1 创建正则表达式
在 JavaScript 中,可以通过两种方式创建一个正则表达式。
1. 通过调用 RegExp 对象的构造函数创建
var 变量名 = new RegExp(/ 表达式 /);
2. 通过字面量创建
var 变量名 = / 表达式 /;
2.2 测试正则表达式 test
test( ) 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。
regexObj.test( str )
1 regexObj 是写的正则表达式
2 str 我们要测试的文本
3 就是检测 str 是否符合我们写的正则表达式规范
3. 正则表达式中的特殊字符
3.1 正则表达式的组成
一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,,比如/ab*c/。其中特殊字符也被称为元字符,在正则表达式中具有特殊意义的专用符号,如^ 、$、+ 等。
特殊字符非常多,可以参考:
● MDN:里面正则表达式内容
● jQuery 手册:正则表达式部分内容
● 正则测试工具:tool.oschina.net/regex
3.2 边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符。
^ : 表示匹配行首的文本(以谁开始)
$ :表示匹配行尾的文本(以谁结束)
3.3 字符类
字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
范围符
[a-z] 方括号内部 范围符 - (表示从什么到什么之间)
字符组合
[a-zA-Z0-9]
[^] 方括号内部 取反符 ^
[^abc]
3.4 量词符
量词符用来设定某个模式出现的次数。
简单理解:就是让下面的字符串重复多少次
量词 说明
*:重复零次或更多次
+:重复一次或更多次
?:重复零次或一次
{n}:重复n次
{n, }:重复n次或更多次
{n,m}: 重复n到m次
量词是设定某个模式出现的次数。
[a-zA-Z0-9]{6,16} (表示输入的是在6-16之间的数量)
3.5 括号总结
1 大括号 量词符 里面表示重复次数
2 中括号 字符集合 匹配方括号中的任意字符
3 小括号 表示优先级
3.6 预定义类
预定义类指的是某些常见模式的简写模式。
预定义 说明
\d : 匹配0-9之间的任一数字,相当于[0-9]
\D : 匹配所有0-9之外的字符,相当于[ ^0-9]
\w : 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]
\W : 除所有字母、数字和下划线以外的字符,相当于[ ^A-Za-z0-9_]
\s : 匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S : 匹配非空格的字符,相当于 [ ^\t\r\n\v\f]
4. 正则表达式中的替换
4.1 replace 替换
replace( ) 方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp,subst,replacement)
1 第一个参数:被替换的字符串 或者 正则表达式
2 第二个参数:替换的字符串
3 返回值是一个替换完毕的新字符串
4.2 正则表达式参数
/表达式/[switch]
switch(也称为修饰符)按照什么样的模式来匹配。有三种值:
● g:全局匹配
● i:忽略大小写
● gi:全局匹配 + 忽略大小写