javascript 高级

发表于 2018-10-18 分类于 阅读次数：

沙箱模式

沙箱其实就是一个独立的环境，这个环境中任何的改变，都不会对外部环境产生影响

函数自调用一样，在自调用函数内部的变量是不会影响到外部的，因此函数自调用模式也叫沙箱模式

;(function(window) {
  var fn = function() {
    console.log('这是fn函数')
  }
})(window)
  1. 代码写在自调用函数里面，减少全局污染
  2. 想要在外面使用 fn 函数，可将 fn 暴露到全局 window.fn = fn; 将 fn 函数的地址赋值给了 window 上的 fn 属性
  3. 一般，我们一个 js 文件只会暴露一个核心的功能（函数、方法）： 目的还是为了减少全局污染

严格模式

  • 语法：'use strict'
  • 作用：让 js 引擎以更加严格的模式执行 js 代码
  • 最佳实践：在某个函数内部开启严格模式，而不是在全局环境中开启
  • 注意：
    • 严格模式只对当前作用域起作用
    • 应该在当前作用域最顶端使用use strict，否则严格模式无效
  • 使用严格模式好处：
    • 规范
    • 提高代码执行效率
// 严格模式应该配合沙箱模式一起使用。

// 沙箱模式 + 严格模式：
;(function() {
  'use strict'

})()

严格模式规定

  • 变量必须显示声明
  • 函数参数不能重名
  • 禁止使用八进制
  • 不能使用保留字作为变量名称：implements, interface, let, package, private, protected, public, static, yield
  • 如果不符合上述规范，会直接报错

正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串（数据验证）、将匹配的子串替换（数据删除或替换）或者从某个串中取出符合某个条件的子串等（数据提取）

创建正则表达式

  • 构造函数的方式
// RegExp(regular expression)
var reg = new RegExp(/a/) // 匹配字母中有 a
  • 正则字面量
var reg = /a/

正则有 test 方法，作用是测试字符串是否符合正则表达式的规律，如果符合， 返回 true

console.log(reg.test('abc')) // true
console.log(reg.test('def')) // false

元字符

正则表达式由一些普通字符和元字符组成，普通字符包括大小写字母、数字等，而元字符则具有特殊的含义

常见元字符

\d 匹配一个数字字符。等价于 [0-9]

\D 匹配一个非数字字符。等价于 [^0-9]

\w 匹配包括下划线的任何单词字符。等价于[A-Za-z0-9_]

\W 匹配任何非单词字符。等价于 [^A-Za-z0-9_]

\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [\f\n\r\t\v]

\S 匹配任何非空白字符。等价于 [^\f\n\r\t\v]

\ 将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， n 匹配字符 n。\n 匹配换行符。\\ 匹配 \，\( 则匹配 (。

. 匹配除换行符 \n 之外的任何单字符。要匹配包括 ‘\n’ 在内的任何字符，可用(.|\n)

| 指明两项之间的一个选择。，优先级最低，| 的左右都是单独的整体

() 优先级最高，标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。使用 $0…$9 属性。要匹配这些字符，请使用 \( 和 \) 。每个()就是一个子匹配 ‘\1’和’$1’用来指定第一个子匹配

/f|boot/ // 匹配 `f` 和 `boot`
/(f|b)oot/ // 匹配 `foot` 和 `boot`

空白字符

  • \f 匹配一个换页符
  • \n 匹配一个换行符
  • \r 匹配一个回车符
  • \t 匹配一个制表符
  • \v 匹配一个垂直制表符

字符类的元字符

  • [] 在正则表达式中表示 单个 字符的位置，[] 里面写这个位置可以出现的字符
;/[abc]/ // 匹配 a,b,c 任意一个字符
  • [^] 在中扩号中的 ^ 表示非的意思
// ^ 在方括号表达式开头中使用，此时它表示不接受该字符集合
;/[^abc]/ // 匹配除了a, b, c以外的其他字符
  • [a-z] [1-9]表示范围
;/[a-z]/ // 小写字母
;/[A-Z]/ // 大写字母
;/[0-9]/ // 数字
;/[a-zA-Z0-9]/ // 所有的小写字母和大写字母以及数字

边界类元字符

我们前面学习的正则只要有满足的条件的就会返回 true，并不能做到精确的匹配。

  • ^ 匹配输入字符串的开始位置

  • $ 匹配输入字符串的结尾位置

;/^chuan/ // 以chuan开头
;/chuan$/ // 以chuan结尾
;/^chuan$/ // 精确匹配 chuan

// 精确匹配chuan,表示必须是这个
console.log(/^chuan$/.test('chuanchuan')) // fasle

以后表单校验要精确匹配

  • \b 匹配一个字边界，即字与空格间的位置。如果它位于要匹配的字符串的开始，它在单词的开始处查找匹配项。如果它位于字符串的结尾，它在单词的结尾处查找匹配项。
    /\bCha/ : 匹配 Chapter 的开头三个字符
    /ter\b/ : 匹配 Chapter 的结尾三个字符
  • \B 表示非单词边界。位置并不重要，因为匹配不关心究竟是单词的开头还是结尾。
    /\Bapt/ 表达式匹配 Chapter 中的字符串 apt，但不匹配 aptitude 中的字符串 apt

量词类元字符

量词用来控制出现的次数，一般来说量词和边界会一起使用

  • * 匹配前面的子表达式零次或多次，等价于 {0,}
  • + 匹配前面的子表达式一次或多次，等价于 {1,}
  • ? 匹配前面的子表达式零次或一次，等价于 {0,1} 。当该字符紧跟在任何一个其他限制符 (*, +,?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串
  • {n} n 是一个非负整数。匹配确定的 n 次
  • {n,} n 是一个非负整数。至少匹配 n 次
  • {n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次
// {} 就近修饰单个字符
console.log(/chuan{2}/.test('chuanchuan')) // false
console.log(/(chuan){2}/.test('chuanchuan')) // true
console.log(/chuan{2}/.test('chuann')) // true

其他字符

  • g 全局标记，指定将该表达式应用到输入字符串中能够查找到的尽可能多的匹配
  • i 标记指定不区分大小写。表达式的结尾处
  • m 表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入 m 都可以进行多行匹配

优先级

从高到低的优先级顺序：

  1. \ 转义符
  2. (), (?:) , (?=), [] 圆括号和方括号
  3. *, + , ?, {n}, {n,}, {n,m} 限定符
  4. ^, $, \任何元字符、任何字符 定位点和序列（即：位置和顺序）
  5. | 替换，”或”操作

字符具有高于替换运算符的优先级，使得”m|food”匹配”m”或”food”。若要匹配”mood”或”food”，请使用括号创建子表达式，从而产生”(m|f)ood”。

正则的使用

字符串使用正则

  • replace()
var str = '   123AD  asadf   asadfasf  adf  '
// 1. 替换掉字符串中的所有空白
var str2 = str.replace(/\s/g, '') // g: global, 全局搜索
// 2. 将所有的ad替换成xx
var str2 = str.replace(/ad/g, 'xx')
// 3. 将所有的ad/AD替换成xx
var str2 = str.replace(/ad/gi, 'xx') // i： ignore 忽略大小写

var str = 'abc,efg,123,abc,123,a'
// 4. 所有的逗号替换成句号
var str2 = str.replace(/,/g, '。')

var jsonStr = '[{"name":"张三",score:80},{"name":"张三",score:90},{"name":"张三",score:81}]'
// 5. 把所有成绩都修改成100分
var str2 = jsonStr.replace(/\d{1,2}/g, '100')
  • match() ==> 匹配， 匹配符合正则表达式的字符
var str2 = 'zs的手机号是18938383838, ls的手机号13989907890， ww的手机号是13848962389，zl的手机号是18970890908'
// 需求： 匹配出来所有的手机号, 返回一个数组
var str3 = str2.match(/1[3-9]\d{9}/g)
console.log(str3)

正则的方法

  • test() ==> 测试字符串是否符合正则表达式的规律，符合，就返回 true

  • exec() ==> 提取，提取字符串中符合正则表达式的字符，需要用括号分组， 如果没有进行分组，返回的是符合整个正则表达式的字符

var str = '今天是2018-10-16，我这里的需求是提取出年月日'
// var reg = /\d{4}-\d{2}-\d{2}/;  ==>  符合整个正则表达式的字符
var reg = /(\d{4})-(\d{2})-(\d{2})/ // ==> 有分组存在 ，默认组名为 undefined
var reg2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ // ?<组名> 添加组名
var ret = reg.exec(str) // 提取出分组的内容以下标的形式存在返回的数组里面
var ret2 = reg2.exec(str)
console.log(ret)
console.log(ret2)
// index 代表 匹配到 ret 在 str 中的下标

实例

  • [xyz] 字符集合。匹配所包含的任意一个字符。例如， [abc] 可以匹配 “plain” 中的 ‘a’
  • [^xyz] 负值字符集合。匹配未包含的任意字符。例如， [^abc] 可以匹配 “plain” 中的’p’、’l’、’i’、’n’
  • [a-z] 匹配所有小写字母
  • [-a-z] 或 [a-z-] 匹配所有小写字母和 -
  • [A-Za-z0-9] 匹配任何大写字母小写字母和数字
  • \b([a-z]+)\1\b/gi 一个单词连续出现的位置
  • 将通用资源指示符 (URI) 分解为其组件
var str = 'https://www.baidu.com:80/index.html'
var patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
arr = str.match(patt1)
for (var i = 0; i < arr.length; i++) {
  document.write(arr[i])
  document.write('<br>')
}
// https://www.baidu.com:80/index.html
// https
// www.baidu.com
// :80
// /index.html

后向引用

后向引用 正则表达式一个最重要的特性就是将匹配成功的模式的某部分进行存储供以后使用这一能力

对一个正则表达式模式或部分模式两边添加圆括号将导致相关匹配存储到一个临时缓冲区中，所捕获的每个子匹配都按照在正则表达式模式中从左到右出现的顺序存储。缓冲区编号从 1 开始，最多可存储 99 个捕获的子表达式。每个缓冲区都可以使用 \n 访问，其中 n 为一个标识特定缓冲区的一位或两位十进制数。

可以使用非捕获元字符 ?:、?= 或 ?! 来忽略对这部分正则表达式的保存

?: 非获取匹配。匹配但不获取匹配结果，不存储供以后使用。这在使用 “或” 字符 (|) 来组合一个模式的各个部分是很有用。例如， industr(?:y|ies) 就是一个比 industry|industries 更简略的表达式

?= 正向预查。在任何匹配的字符串开始处匹配查找字符串。非获取匹配，不获取供以后使用。例如，’Windows (?=95|98|NT|2000)’ 能匹配 “Windows 2000” 中的 “Windows” ，但不能匹配 “Windows 3.1” 中的 “Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始

?! 负向预查，在任何不匹配的字符串开始处匹配查找字符串。非获取匹配，不获取供以后使用。例如’Windows (?!95|98|NT|2000)’ 能匹配 “Windows 3.1” 中的 “Windows”，但不能匹配 “Windows 2000” 中的 “Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始

后向引用一个最简单，最有用的应用是提供了确定文字中连续出现两个相同单词的位置的能力。请看下面的句子： Is is the cost of of gasoline going up up? 根据所写内容，上面的句子明显存在单词多次重复的问题。如果能有一种方法无需查找每个单词的重复现象就能修改该句子就好了。下面的 JScript 正则表达式使用一个子表达式就可以实现这一功能

var ss = 'Is is the cost of of gasoline going up up?'
var re = /\b([a-z]+) \1\b/gim
var rv = ss.replace(re, '$1')

在这个示例中，子表达式就是圆括号之间的每一项。所捕获的表达式包括一个或多个字母字符，即由[a-z]+所指定的。该正则表达式的第二部分是对前面所捕获的子匹配的引用，也就是由附加表达式所匹配的第二次出现的单词。\1用来指定第一个子匹配。单词边界元字符确保只检测单独的单词。如果不这样，则诸如 “is issued” 或 “this is” 这样的短语都会被该表达式不正确地识别。