七.数据分类[Object]

JS 中的封装、继承和多态

1.Date

刷新

全屏/自适应

时间转换

var str = "2015-6-10 14:53:00"
//2015年06月10日 14时53分00秒
var reg = /^(\d{4})[-/](\d{1,2})[-/](\d{1,2}) +(\d{1,2}):(\d{1,2}):(\d{1,2})$/g
var ary = []
str.replace(reg, function () {
  ary = [].slice.call(arguments).slice(1, 7)
})
console.log(ary)
var resStr = "{0}年{1}月{2}日 {3}时{4}分{5}秒"
reg = /{(\d+)}/g
resStr = resStr.replace(reg, function () {
  var num = arguments[1],
    val = ary[num]
  return val.length == 1 ? "0" + val : val
})
console.log(resStr)

2.RegExp

正则的捕获:正则的 exec 方法、字符串的 match 方法、字符串的 replace 方法

正则：它是一个规则，用来处理字符串的一个规则（正则就是用来处理字符串的）

• test: 判断一个字符串是否符合我们制定的规则

var reg = /\d/ //包含一个0-9之间的数字
console.log(reg.test("开")) //false
console.log(reg.test("1")) //true
console.log(reg.test("前端2015")) //true

//2-->如何创建一个正则：
//字面量方式
var reg = /\d/
//实列创建方式
var reg = new RegExp("")
/* 正则的元字符和一些简单的应用 */
//元字符：
//每一个正则表达式都是由元字符和修饰符组成的

//[元字符]-->在//之间具有意义的一些字符
//1、具有特殊意义的元字符
//\：转义字符，转译后面字符所代表的含义
//^：以某一个元字符开始
//$：以某一个元字符结束
//\n：匹配一个换行符
//.：除了\n以外的任意字符

//()：分组-->把一个大正则本身划分为几个小的正则
var reg = /^(\d+)qianduan(\d+)$/

//x|y：x或者y中的一个
//[xyz]：x或者y或者y中的一个
//[^xyz]除了三个以外的任何一个字符
//[a-z]：a-z之间的任何一个字符
//[^a-z]：除了a-z之间的任何一个字符
//\d：一个0-9之间的数组  \D:除了0-9之间的数字以外的任何字符
//\b:一个边界符 "w1 w2 w3"
//\w：数字、字母、下划线中的任意一个字符  [0-9a-zA-Z_]
//\s：匹配一个空白字符 空格、一个制表符（TAB键）、换页符...

var reg = /\d/ //-->包含一个0-9之间的数字
console.log(reg.test("zh0023")) //-->true
var reg = /^\d$/ //-->只能是一个0-9之间的数字
console.log(reg.test("9")) //-->true
console.log(reg.test("012")) //-->false

//2、代表出现次数的量词元字符
//*：出现零到多次
//+：出现一到多次
//?：出现零次或者一次
//{n}：出现n此
//{n,}：出现n到多次
//{n,m}：出现n到m次

var reg = /^\d+$/
console.log(reg.test("2015"))

/* 元字符应用 */
//1、有效数字的正则 正数、负数、零、小数
//"."可以出现也可以不出现，一旦出现，后面必须跟着一个或者多个数字
//最开始可以有+/-也可以没有
//整数部分，一位数可以是0-9之间的一个，多位数不能以0开头

//[]
//在[]中出现的所有字符都是代表本身意思的字符

var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/

/* 正则创建方式的区别 */
var name = "qianduan"
//在字面量方式中，我们//之间包起来的所有内容都是元字符，有的具有特殊的意义，大部分都是代表本身含义的普通的元字符
var reg = /^\d+"+name+"\d+$/
console.log(reg.test("2015qianduan2016")) //-->false
console.log(reg.test('015"""nameeee"2016')) //-->true
//对于这样的需求，我们只能用实列创建的方式了
var reg = new RegExp("^\\d+" + name + "\\d+$", "g")
console.log(reg.test("2015qianduan2016")) //-->true
//字面量方式和实列创建的方式在正则中的区别
//1、字面量方式出现的一切都是元字符，所以不能进行变量值的拼接，而实列创建的方式可以
//2、字面量方式中直接写\d就可以，而在实列中需要把它转译\\d

/* 编写简单的正则表达式 */
//年龄介于18~65之间（18-19、20-59、60-65）
//[]中不识别两位数 /^[12]$/-->1或者2
///^[\w-]$/-->数字、字母、下划线、中杆中的一个

var reg = /^[12-68]$/ //-->1、2-6中的一个、8 三个中的一个
var reg = /^(1[8-9]|[2-5]\d|6[0-5])$/

//验证邮箱的正则
var reg = /^[\w.-]+@[0-9a-zA-Z]+(\.[a-zA-Z]{2,4})$/

/* 懒惰性和贪婪性 */
//exec-->正则捕获
//每一次捕获的时候都是先进行默认的匹配，如果没有匹配成功，捕获的结果是null，只有匹配的内容我们才能捕获到
//1、捕获到的内容时一个数组，数组中的第一项是当前大正则捕获的内容
//index：捕获内容在字符串中开始的索引位置
//input：捕获的原始字符串
var reg = /\d+/
var str = "qianduan2015kaifa2016"
var res = reg.exec(str)
console.log(reg.lastIndex)
console.log(res) //[ '2015', index: 7, input: 'qianduan2015kaifa2016' ]
console.log(reg.lastIndex) //-->0 说明我们第二次捕获的时候也是要从字符串索引0处开始查找

//2、如何解决懒惰性 在正则的末尾加一个修饰符"g"
//修饰符：g、i、m
//global（g）：全局匹配
//ignoreCase(i)：忽略大小写匹配
//multiline（m）：多行匹配
var reg = /\d+/g
var str = "qianduan2015kaifa2016"
var res = reg.exec(str)
console.log(res)
console.log(reg.exec(str))
console.log(reg.exec(str))

var reg = /\d+/g
var str = "zhufsd32zhang234asd"
var ary = []
var res = reg.exec(str)
while (res) {
  ary.push(res[0])
  res = reg.exec(str)
}
console.log(ary)

//4、贪婪性：正则的每一次捕获都是按照匹配嘴唇的结果捕获的，例如2符合正则2015也符合正则，我们默认捕获2015
//5、如何解决正则的贪婪性-->在量词元字符后面添加一个？即可
//?在正则中有很多的作用
//放在一个普通的元字符后面代表出现0-1次 /\d?/ -->数字可能出现也可能不出现
//放在一个量词的元字符后面是取消捕获时的贪婪性
var reg = /\d+?/g
var ary = [],
  res = reg.exec(str)
while (res) {
  ary.push(res[0])
  res = reg.exec(str)
}

//字符串中的match方法 -->把所有和正则匹配的字符都获取到
var reg = /\d+?/g
var str = "fasd11212asdf1211sd"
var ary = str.match(reg)

//虽然在当前的情况下match比我们的exec简洁但是match中存在一些自己处理不了的问题：在分组捕获的情况下，match只能捕获到大正则匹配的内容，而对于小正则捕获的内容时无法捕获的

/* 分组捕获 */
//正则分组：
//1、改变优先级
//2、分组引用
//\2代表和第二个分组出现一模一样的内容 ；\1和第一个分组出现一模一样的内容；
//一模一样：和对应的分组中的内容的值都要一样
var reg = /^(\w)\1(\w)\2$/
console.log(reg.test("zzff")) //-->true
console.log(reg.test("z0f_")) //-->false

//3、分组捕获-->正则在捕获的时候，不仅仅把大正则匹配的内容捕获到，而且还把小分组匹配的内容捕获到
//?: 在分组中 ？： 的意思是只匹配不捕获
var reg = /^/
var str = ""
console.log(str.exec(reg))
console.log(str.match(reg)) //-->和exec的结果是一样的

//
var reg = /qianduan(\d+)/g
var str = "qianduan1234z"

/* replace */
//replace：把原有的字符替换成新的字符
//在不使用正则的情况下，每当执行一次只能替换一个字符
var str = "qianduan2015qianduan2016"
// str = str.replace("qianduan","qianduankaifa").replace("qianduan","qianduankaifa")没有实现需求
str = str.replace(/qianduan/g, "qianduankaifa")
//replace第一项的值是一个正则，它的实现原理
//首先我们和exec捕获一样，把所有和我们正则匹配的都捕获到，然后把捕获的内容替换成我们需要替换的新内容
///qianduan/g 按照这个正则把str中所有可以匹配的都捕获到，然后统一都替换成我们""qianduanpeixuan"
str = str.replace(/qianduan/g, function () {
  console, log("ok")
  return "qianduankaifa"
})
//第二个参数换成一个函数
//1、匿名函数执行多少次，取决于正则能在字符串中捕获多少次 -->正则捕获两次，所以我们的匿名函数也执行两次
//2、每一次执行匿名函数，里面传递的参数值arguments和我们自己通过exec捕获到的结果是非常类似的（即使正则有分组，我们同样可以通过arguments捕获到的内容）
//3、return ：你返回的结果是啥，就相当于把当前这一次大正则捕获的内容替换成你返回的内容
var str = "qianduan2015qianduan2016"
str = str.replace(/\d+/g, function () {
  console.log(RegExp.$1) //获取第一个分组捕获的内容
  return 1 //我返回的 1把每一次大正则匹配捕获的内容都替换了
})
console.log(str)

/* 正则捕获专题复习 */

2.1 exec

捕获符合正则规则的字符串

2.1.1 语法

var reg = /\d/ // 捕获字符串中包含的一个0-9之间的数字
console.log(reg.exec("开")) // --> null
console.log(reg.exec("1")) // --> [ '1', index: 0, input: '1' ]

2.1.2 元字符详解及应用实例

• 1.c{n}匹配固定的 n 个

var reg = /c{3}/
var str = "cssscsss"
reg.exec(str)
//["c", index: 0, input: "cssscsss", groups: undefined]

• 2.c{m,n}匹配最少 m 个，最多 n 个

var reg = /m{2,6}/
var str = "middle mmmm"
reg.exec(str)
//["mmmm", index: 7, input: "middle mmmm", groups: undefined]

• 3.c{n}表示最少匹配 n 个 c，最多不限制

var reg = /c{2,}/
var str = "cccmdddccc"
reg.exec(str)
//["ccc", index: 0, input: "cccmdddccc", groups: undefined]

• 4.懒惰性

加修饰符“g”，可以取消捕获时候的懒惰性

原理：正则有一个 lastindex 属性，它代表下一次正则捕获的开始索引，但是默认这个值永远是 0，也就是不管执行几次 exec 都用从新从头开始捕获，所以获取的都是同一个结果，而加了修饰符'g'，每次 exec 执行完成之后，我们的 lastindex 属性值都等于当前捕获内容的后一个索引，下一次从这之后继续查找捕获，这样就可以一次次的执行，把想要的结果都捕获到了

var reg = /\d+?/g
var str = "qianduan2015huiwang2014"
var ary = reg.exec(str)
console.log(ary)
console.log(reg.lastIndex)
var ary = reg.exec(str)
console.log(ary)
console.log(reg.lastIndex)
var res = reg.exec(str),
  ary = []
while (res) {
  ary.push(res[0])
  res = reg.exec(str)
}
console.log(ary)

2.2 match

2.2.1 案例

var reg = /\d+?/g
var str = "qianduan2015kaifa2018"
// var ary = str._match(reg);
// console.log(ary);
//match一次性把符合大正则都存放在一个数组中，如果也需要捕获小分组中的内容，match是不活不到的
String.prototype._match = function (reg) {
  var ary = []
  var res = reg.exec(this)
  while (res) {
    ary.push(res[0])
    res = reg.exec(this)
  }
  return ary
}
var ary = str._match(reg)
console.log(ary)

2.2.2 分组捕获

在正则捕获的时候，我们添加分组，不仅仅可以把大正则匹配的内容捕获，而且还可以把小分组代表的子正则匹配的内容一起捕获出来

• (?:xxx)分组只匹配不捕获

var str = "my name is {0},my age is {1},i come from {2},i love {3}~~"
var ary = ["小麦", 28, "湖南", "javascript"]
// var ss=str.replace(/{(\d)}/g, function() {
//   return ary[arguments[1]]
// });
var ss = str.replace(/{(\d)}/g, function (l, s, i, t) {
  return ary[s]
})
console.log(ss)

2.3 replace

• 将原有的字符替换成我们的新的字符

var str = "qianduankaifa~qianduanjiaoyu~"
var str = str.replace(/qianduan/g, "小麦")
console.log(str)

//原理：先按照正则制定的规则，到我们的字符串中把正则匹配的内容捕获到，然后在每一次捕获到之后，都把捕获的内容替换成新的内容
//1、我们正则表达式捕获到几次，对应后面的function就要执行几次
//2、每一次执行function 的时候，我们都可以获取我们捕获的内容-->和我们单独执行一次exec捕获的内容一致
//argument[0] -->exec捕获数组的第一项 -->大正则捕获的内容
//argument[0] -->exec捕获数组的index -->开始捕获的索引
//argument[0] -->exec捕获数组input -->捕获的原始字符串
//不仅如此，我们小分组捕获的内容，在这里同样也可以获取到
//3、我们在function中，通过return来返回我们要替换额内容 -->return是啥就把大正则捕获的内容进行替换
//不写return ,默认是用undefined来进行替换的
//如果不写实现替换的话，捕获内容是啥，我们就返回啥 return argumnets[0]
str = str.replace(/(zhu)(feng)/, function () {})
str.replace(/(zhu)(feng)/, function () {})

• 将小写的数字替换成大写的中文数字

var str = "全日制第七期学费:9800"
var ary = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]
str = str.replace(/\d/g, function () {
  return ary[arguments[0]]
})
console.log(str)

• 获取一个字符串中出现次数最多的字符，并且获取出现的次数

var str = "qianduankaifawolaikaifajs"
var obj = {}
str.replace(/[a-z]/gi, function () {
  var val = arguments[0]
  obj[val] >= 1 ? (obj[val] += 1) : (obj[val] = 1)
})
console.log(obj)

• 获取最多出现的次数

var maxNum = 0
for (var key in obj) {
  obj[key] > maxNum && (maxNum = obj[key])
}
console.log(maxNum)

• 获取最多出现次数的字符

var array = []
for (var key in obj) {
  obj[key] === maxNum && array.push(key)
}
console.log(array)

• 模板引擎实现的初步原理

// var str = "my name is {0},my age is {1},i come from {2},i love {3}~";
// var ary = ["催军力", 18, "china", "javaScript"];
// str = str.replace(/{(\d+)}/g, function() {
//   return ary[arguments[1]];
// });
// console.log(str);

var str = "my name is {0},my age is {1},i come from {2},i love {3}~"
var ary = ["催军力", "18", "china", "javaScript"]
str = str.replace(/{(\d+)}/g, function () {
  return ary[RegExp.$1]
})
console.log(str)

• "2015-9-22 13:10:0" -->"2015 年 09 月 22 日 13 时 10 分 00 秒"

var ary = []
var str = "2015-9-22 13:10:0"
str.replace(/\d+/g, function () {
  ary.push(arguments[0])
})
console.log(ary)
var moduleStr = "{0}年{1}月{2}日 {3}时{4}分{5}秒"
moduleStr = moduleStr.replace(/{(\d+)}/g, function () {
  if (+ary[arguments[1]] < 10) {
    return "0" + ary[arguments[1]]
  } else {
    return ary[arguments[1]]
  }
})
console.log(moduleStr)

• 把一个字符串中所有的单词的首字母大写 "Zhu Feng Pei Xun"

var str = "zhu feng pei xun"
str = " " + str
str = str
  .replace(/\s[a-z]/g, function () {
    return arguments[0].toLocaleUpperCase()
  })
  .replace(" ", "")
console.log(str)

• queryURLParameter

//var str = "http://kbs.sports.qq.com/kbsweb/game.html?mid=100000&cid-1234343&app=1.0";
/* 
把ur中的参数都获取到，并且保存成如下格式
var obj ={
    mid:"100000",
    cid:"1467086",
    app:"1.0"
}
*/
var str =
  "http://kbs.sports.qq.com/kbsweb/game.html?mid=100000&cid=1234343&app=1.0"
var reg = /([^?=&]+)=([^?=&]+)/g
var obj = {}
str.replace(reg, function () {
  obj[arguments[1]] = arguments[2]
})
console.log(obj)

2.4 正则表达式

1.非打印字符

字符	描述
\cx	匹配由 x 指明的控制字符
\f	匹配一个换页符
\n	匹配一个换行符
\r	匹配一个回车符
\s	匹配任何空白符，包括空格、制表符、换页符等
\S	匹配任何非空白字符
\t	匹配一个制表符
\v	匹配一个垂直制表符

2.特殊字符

特殊字符	描述
$	匹配输入字符串的结束位置
()	标记一个子表达式的开始和结束位置，子表达式可以获取供以后使用
*	匹配前面的子表达式零次或多次
+	匹配子表达式一次或多次
.	匹配除换行符\n 之外的任何单字符

3.限定符

限定符	描述
^	开头
$	结尾
*	匹配零次或多次{0,}
+	匹配一次或多次{1,}
?	匹配一次或 0 次{0,1}
{n}	匹配确定的 n 次
{n,}	至少匹配 n 次
{m,n}	匹配 m 到 n 次

4.定位符

3.Math

4.Object

//delete obj.age 真删除
//obj.age = null 假删除
//js中的对象、类、实列的区别
//对象是泛指，js中万物皆对象，类是对对象的具体细分，实例是类中的一个具体的事物3