【前端JS交互篇】数组对象、字符串对象、正则表达式、Date日期对象

一、数组对象

数组对象是JS中的一个内置对象，其内置了很多方法和属性供我们使用。

想要理解数组对象，先要理解什么是数组？

前面讲过变量，变量是用来存储信息的容器，但是一个变量只能存储一条信息。而数组呢，可以看作是存储多条信息的容器，其存储的数据可以是我们学过的任意数据类型。

JavaScript 基础到高级
Canvas游戏开发
原生JavaScipt案例合集
JavaScript +DOM基础

数组由中括号进行包裹，存储的数据之间使用逗号隔开。如：

var arr = [10,"hello",true,null,undefined,Math.random(),function(){},new Object()]

数组是一系列数据的集合，所以数据是有长度的，通过 length 属性可以获取数组中元素的个数。

数组具有索引，索引从 0 开始，依次递增，最大的索引值 arr.length - 1。

通过索引可以获取其在数组中对应的值，如：

​ 数组中的第一个值 arr[0]

​ 数组中的最后一个值 arr[arr.length - 1]

通过指定索引不仅可以获取值，还可以用来对值进行修改操作。

1.1 数组对象的创建方式

• 字面量的方式 var arr = [10,20,30,40,50,60]

 var arr = [10,20,30,40,50,60];
console.log("arr:",arr);

//通过索引获取值
console.log("数组arr中第一个元素是：",arr[0]);
console.log("数组中元素的个数：",arr.length);
console.log("数组arr中最后一个元素是：",arr[arr.length - 1]);

//通过索引修改值
arr[2] = 300;
console.log("arr:",arr);

//通过索引添加值
arr[6] = 70;
console.log("arr:",arr);

• 通过new关键字 var arr = new Array();
  • 如果 new Array(arg) 中的参数 arg 只是一个数值类型的整数，那么代表的是数组的长度
  • 如果上面参数 arg 是其它数据类型，或者是多个参数，那么代表的是数组中的元素

var array = new Array();
console.log("array:",array);//array: []  这是一个空数组

array = new Array(10);
console.log("array:",array);//array: (10) [empty × 10]  这是一个长度未10的数组，但是数组中没有值
// 通过索引添加值
array[0] = 100;
array[1] = 200;
array[8] = 900;
array[9] = 1000;
array[14] = 14000;
console.log("array:",array);//array: (10) [100, 200, empty × 6, 900, 1000]

array = new Array("10");
console.log("array:",array);//array: ["10"]

// array = new Array(3.14);
// console.log("array:",array);//RangeError: Invalid array length

array = new Array(10,20);
console.log("array:",array);//array: (2) [10, 20]

1.2 数组中的属性

length 属性用于获取数组中元素的个数

constructor 获取数组对象的构造函数

var arr = [10,20,30,40];
console.log("arr:",arr,"数据类型：",typeof arr);//arr: (4) [10, 20, 30, 40] 数据类型： object

//length 获取数组中元素的个数
console.log("数组中元素的个数：",arr.length);//数组中元素的个数： 4

//construtor 获取指定对象构造函数
console.log("数组的构造函数：",arr.constructor);//数组的构造函数： ƒ Array() { [native code] }

//构造函数和普通函数，最明显的区别就是构造函数的首字母大写

1.3 数组中的方法

1. 数组转字符串的方法

   toString() 将数组对象转换成字符串对象

   ​ 这个方法没有参数

   ​ 返回值是一个字符串

   join(seperator?) 将数组对象按照指定的分隔符转换成字符串对象

   ​ 参数 seperator 可选参数。指定分隔符号，是一个字符串类型

   ​ 返回值是一个字符串

   var arr = [10,20,30,40,50,60];
   console.log("arr:",arr,"数据类型：",typeof arr);//arr: (6) [10, 20, 30, 40, 50, 60] 数据类型： object
   
   // toString()   将数组对象转换成字符串对象
   var str = arr.toString();
   console.log("str:",str,"数据类型：",typeof str);//str: 10,20,30,40,50,60 数据类型： string
   
   // join(seperator?)    将数组对象按照指定的分隔符转换成字符串对象
   var str2 = arr.join();
   console.log("str2:",str2,"数据类型：",typeof str2);//str2: 10,20,30,40,50,60 数据类型： string
   
   str2 = arr.join("&");
   console.log("str2:",str2,"数据类型：",typeof str2);//str2: 10&20&30&40&50&60 数据类型： string
   

2. 数组首尾操作方法

   push(args…) 向数组的末尾追加一个或多个元素

   unshift(args…) 向数组的起始位置追加一个或多个元素

   ​ 参数 args 要向数组中添加的数据，可以是任意数据类型

   ​ 返回值 添加数据后，新的数组长度

   ​ 这两个方法，都使原数组结构发生了改变

   pop() 删除数组中最后一项

   shift() 删除数组中的第一项

   ​ 这两个方法没有参数

   ​ 返回值 返回删除的那一项元素

   var arr = ["苹果","樱桃","猕猴桃","葡萄"];
   console.log("原arr:",arr);//原arr: (4) ["苹果", "樱桃", "猕猴桃", "葡萄"
   
   // push(args...)  向数组的末尾追加一个或多个元素
   var len = arr.push("橙子","桃");
   console.log("结尾添加两项后arr:",arr);//结尾添加一项后arr: (6) ["苹果", "樱桃", "猕猴桃", "葡萄", "橙子", "桃"]
   console.log("结尾添加两项后数组长度：",len);//结尾添加两项后数组长度： 6
   
   // unshift(args...)  向数组的起始位置追加一个或多个元素
   var len2 = arr.unshift("西瓜","柠檬");
   console.log("起始位置追加两项后arr:",arr);//起始位置追加两项后arr: (8) ["西瓜", "柠檬", "苹果", "樱桃", "猕猴桃", "葡萄", "橙子", "桃"]
   console.log("起始位置追加两项后数组长度:",arr.length);//起始位置追加两项后数组长度: 8
   
   // pop()  删除数组中最后一项
   var tipEle = arr.pop();
   console.log("删除最后一项后arr:",arr);//(7) ["西瓜", "柠檬", "苹果", "樱桃", "猕猴桃", "葡萄", "橙子"]
   console.log("删除的元素是：",tipEle);//删除的元素是： 桃
   
   // shift() 删除数组中的第一项
   var headEle = arr.shift();
   console.log("删除第一项后arr:",arr);//删除第一项后arr: (6) ["柠檬", "苹果", "樱桃", "猕猴桃", "葡萄", "橙子"]
   console.log("删除的元素是：",headEle);//删除的元素是： 西瓜
   

3. 插入、删除、替换的方法

   splice(startIndex,delCount,addEles…) 在指定索引处，删除指定数量的元素，并追加新的元素

   ​ 参数 startIndex 插入或删除元素的起始索引

   ​ delCount 指定索引处开始删除的元素的个数

   ​ addEles… 在指定索引处插入一个或多个元素

   ​ 返回值 返回的是删除的元素组成的数组

   var arr = [10,20,30,40,50,60];
   console.log("arr:",arr);//arr: (6) [10, 20, 30, 40, 50, 60]
   // splice(startIndex,delCount,addEles...)   在指定索引处，删除指定数量的元素，并追加新的元素
   var delEles = arr.splice();
   console.log("arr:",arr,"delEles:",delEles);//arr: (6) [10, 20, 30, 40, 50, 60] delEles: []
   
   delEles = arr.splice(4);//指定一个起始索引，那么就会删除这个索引后面所有的元素
   console.log("arr:",arr,"delEles:",delEles);//arr: (4) [10, 20, 30, 40] delEles: (2) [50, 60]
   
   delEles = arr.splice(2,1);
   console.log("arr:",arr,"delEles:",delEles);//arr: (3) [10, 20, 40] delEles: [30]
   
   delEles = arr.splice(1,0,300,500,600,800);
   console.log("arr:",arr,"delEles:",delEles);//arr: (7) [10, 300, 500, 600, 800, 20, 40] delEles: []
   

4. 数组拼接 和 数组片段截取

   concat(args) 拼接一个或多个元素或数组

   ​ 参数 args 拼接的元素或数组

   ​ 返回值是拼接后的新数组

   slice(startIndex,endIndex) 截取指定索引之间的元素

   ​ 参数 startIndex 截取数组的起始索引

   ​ endIndex 截取数组的结束索引；可以省略，如果省略，截取到数组的末尾

   ​ 返回值 截取的元素组成的新数组

   上面两个方法，不会改变原数组

   var arr = ["苹果","香蕉","橘子","火龙果","猕猴桃"];
   console.log("原数组arr:",arr);//原数组arr: (5) ["苹果", "香蕉", "橘子", "火龙果", "猕猴桃"]
   
   // concat(args)  拼接一个或多个元素或数组
   var newArr = arr.concat("橙子","柚子",["西瓜","桃"]);
   console.log("拼接后arr:",arr);//拼接后arr: (5) ["苹果", "香蕉", "橘子", "火龙果", "猕猴桃"]
   console.log("拼接后返回的数组newArr:",newArr);拼接后返回的数组newArr: (9) ["苹果", "香蕉", "橘子", "火龙果", "猕猴桃", "橙子", "柚子", "西瓜", "桃"]
   
   
   // slice(startIndex,endIndex)  截取指定索引之间的元素
   //指定一个起始索引，一直截取到最后
   var sliceArr = newArr.slice(6);
   console.log("截取后newArr:",newArr);//截取后newArr: (9) ["苹果", "香蕉", "橘子", "火龙果", "猕猴桃", "橙子", "柚子", "西瓜", "桃"]
   console.log("截取的数组：",sliceArr);//截取的数组： (3) ["柚子", "西瓜", "桃"]
   
   //指定两个参数：截取两个索引之间的数组片段  左闭右开
   sliceArr = newArr.slice(3,6);
   console.log("截取的数组：",sliceArr);//截取的数组： (3) ["火龙果", "猕猴桃", "橙子"]
   

5. 倒叙 和 排序

   reverse() 对数组中的元素进行倒叙排列；没有参数

   sort(callbackfn) 对数组中的元素进行排序

   ​ 参数 callbackfn是一个回调函数，通过这个回调函数指定排序的规则

   两个方法改变了原数组

   var arr = [10,20,30,40,50,60];
   console.log("原数组arr:",arr);//原数组arr: (6) [10, 20, 30, 40, 50, 60]
   
   // reverse() 对数组中的元素进行倒叙排列；没有参数
   arr.reverse();
   console.log("倒叙后arr:",arr);//倒叙后arr: (6) [60, 50, 40, 30, 20, 10]
   
   
   // sort(callbackfn)  对数组中的元素进行排序
   var array = [10,8,34,90,23,123,67,89];
   console.log("原array:",array);//原array: (8) [10, 8, 34, 90, 23, 123, 67, 89]
   //不添加任何参数，默认按照 ASCII码 排序
   array.sort();
   console.log("默认排序后array:",array);//默认排序后array: (8) [10, 123, 23, 34, 67, 8, 89, 90]
   
   //通过 回调函数指定排序的规则
   //指定升序的规则(按照数值大小)
   array.sort(function (a,b) {
       return a - b;
   });
   console.log("指定升序的规则array:",array);//指定升序的规则array: (8) [8, 10, 23, 34, 67, 89, 90, 123]
   
   //指定降序的规则(按照数值大小)
   array.sort(function (a,b) {
       return b - a;
   });
   console.log("指定降序的规则array:",array);//指定降序的规则array: (8) [123, 90, 89, 67, 34, 23, 10, 8]
   

   1.4 数组的遍历

   使用for循环，一一获取数组中的元素

   var arr = ["苹果", "香蕉", "橘子", "火龙果", "猕猴桃", "橙子", "柚子", "西瓜", "桃"];
   
   //使用 for 循环对数组进行遍历，也就是一一获取数组中的元素   数组索引从0开始
   for (var i = 0; i < arr.length; i++) {
       console.log("数组中第" + (i + 1) + "个元素是：" + arr[i]);
   }
   

二、字符串对象

前面介绍数据类型时，介绍过字符串是由引号包裹的文本。

字符串除了可能是基本数据类型外，还可能使引用数据类型，所以它比较特殊。其它比较特殊的放在高级课中讲

字符串是一个类数组，既然是类数组，就具有索引和长度，索引从 0开始，长度通过 length 属性获取

类数组可以通过索引去读取对应的值，但是不能添加和修改。

举例：“Hello” ‘男’

2.1 字符串对象的创建方式

• 字面量的方式 var str = “Hello World!”；

• new关键字 var str = new String();

  String()构造函数中可以添加字符串参数 如 var str = new String(“Hello World!”)

  //字符串对象的创建方式一: 字面量的方式
  var str = "Hello String";
  console.log("str:",str,"数据类型：",typeof str);//str: Hello String 数据类型： string 这是一个基本数据类型
  
  //通过索引去读取对应的字符
  console.log("字符串中的第一个字符：",str[0]);//字符串中的第一个字符： H
  console.log("字符串中字符的个数：",str.length);//字符串中字符的个数： 12
  console.log("字符串中的最后一个字符：",str[str.length - 1]);//字符串中的最后一个字符： g
  
  //通过索引不可以修改和添加字符
  str[5] = "&";
  console.log("str:",str);//str: Hello String
  
  //字符串对象的创建方式二：new 关键字
  var str2 = new String();
  console.log("str2:",str2,"数据类型：",typeof str2);//str2: String {""} 数据类型： object  这是一个引用数据类型
  
  str2 = new String("Hello new String");
  console.log("str2:",str2);//str2: String {"Hello new String"}
  

2.2 字符串对象的属性

length 获取字符串中字符的个数

constructor 获取字符串对象的构造函数

var str = "Hello World!";
// length  获取字符串中字符的个数
console.log("str长度：",str.length);//str长度： 12

// constructor  获取字符串对象的构造函数
console.log("str的构造函数：",str.constructor);//str的构造函数： ƒ String() { [native code] }

2.3 字符串对象方法

• concat(args…) 方法拼接一个或多个字符或字符串

​ 参数 args 字符或字符串

//字符串拼接方法一：利用 + 运算符   只要是有字符串存在的 + 运算都是字符串拼接操作
var str = "Hello";
console.log("str:",str);//str: Hello

str += " World";
console.log("+拼接字符串str:",str);//+拼接字符串str: Hello World

//字符串拼接方式二：利用 concat() 方法
var newStr = str.concat("!"," Welcome to code World!")
console.log("concat拼接后原字符串str:",str);//concat拼接后原字符串str: Hello World  原字符串没有发生改变
console.log("concat拼接后返回的新字符串newStr:",newStr);//concat拼接后返回的新字符串newStr: Hello World! Welcome to code World!

• split(splitter,limit) 方法用来按照指定的切割符切割字符串

​ 参数 splitter 指定切割符，可以省略

​ limit 切割后，数组保留的长度

​ 返回值是切割后的字符组成的数组

//split(splitor)  方法用来按照指定的切割符切割字符串
var str = "Hello World! Welcome to code World!";
console.log("str:",str);//str: Hello World! Welcome to code World!

//不给任何参数:将整个字符串作为数组的元素
var arr = str.split();
console.log("arr:",arr);//arr: ["Hello World! Welcome to code World!"]

//给一个参数，切割符
arr = str.split(" ");
console.log("arr:",arr);//arr: (6) ["Hello", "World!", "Welcome", "to", "code", "World!"]

//给两个参数，限定切割后数组的长度
arr = str.split(" ",2);
console.log("arr:",arr);//arr: (2) ["Hello", "World!"]

• 截取字符串的方法

  slice(startIndex,endIndex) 获取指定索引之间的字符串片段，左闭右开

  subString(startIndex,endIndex) 获取指定索引之间的字符串片段，左闭右开

  subStr(startIndex,howmany) 获取指定索引处开始指定数量的字符串片段

  返回值都是截取的字符串片段

  var str = "Hello World! Welcome to code World!";
  console.log("str:",str);//str: Hello World! Welcome to code World!
  
  // slice(startIndex,endIndex)  获取指定索引之间的字符串片段，左闭右开
  //没有任何参数  直接相当于复制字符串
  var sliceStr = str.slice();
  console.log("sliceStr:",sliceStr);//sliceStr: Hello World! Welcome to code World!
  
  //指定一个参数  从这个指定的索引开始截取到字符串的最后
  sliceStr = str.slice(13);
  console.log("sliceStr:",sliceStr);//sliceStr: Welcome to code World!
  
  //指定两个参数  获取两个参数之间的字符串片段 [a,b)
  sliceStr = str.slice(13,20);
  console.log("sliceStr:",sliceStr);//sliceStr: Welcome
  
  // substring(startIndex,endIndex) 获取指定索引之间的字符串片段，左闭右开
  //用法 同slice  可以不设置参数、一个参数、两个参数
  subStr = str.substring(13,20);
  console.log(subStr);//Welcome
  
  // substr(startIndex,howmany)  获取指定索引处开始指定数量的字符串片段
  var newStr = str.substr();
  console.log("newStr:",newStr);// newStr: Hello World! Welcome to code World!
  
  newStr = str.substr(13);
  console.log("newStr:",newStr);//newStr: Welcome to code World!
  
  //两个参数：第一个参数是截取的起始索引  第二个参数截取的字符个数
  newStr = str.substr(13,7);
  console.log("newStr:",newStr);//newStr: Welcome
  

• 索引相关的方法

  charAt(index) 获取指定索引处的字符 ( [index]也能获取)

  indexOf(searchVale,startIndex?) 从指定索引处开始查找指定字符第一次出现的索引值，如果找不到返回-1

  lastIndexOf(searchVale,startIndex?) 从指定索引处开始查找指定字符最后一次出现的索引值

  var str = "Hello World! Welcome to code World!";
  // charAt(index)  获取指定索引处的字符 ( [index]也能获取)
  var code = str.charAt(7);
  console.log("code:",code);//code: o
  
  code = str[7];
  console.log("code:",code);//code: o
  //同样 charAt 方式也是只能读取数据 不能修改数据
  
  
  // indexOf(searchVale,startIndex?)  从指定索引处开始查找指定字符第一次出现的索引值，如果找不到返回-1
  //只有一个参数，默认从第一个索引开始查找
  var idx = str.indexOf("o");
  console.log("查找的o在字符串中第一次出现的位置：",idx);//查找的o在字符串中第一次出现的位置： 4
  
  //两个参数：第一个参数为要查找字符或字符片段   第二个参数指定起始查找的索引
  idx = str.indexOf("o",12);
  console.log("从索引12开始查找的o在字符串中第一次出现的位置：",idx);//从索引12开始查找的o在字符串中第一次出现的位置： 17
  
  // lastIndexOf(searchVale,startIndex?) 从指定索引处开始查找指定字符最后一次出现的索引值
  // 用法同 indexOf() 只不过从后往前找，但是索引还是正向从0开始计算
  var lIdx = str.lastIndexOf("o");
  console.log("o在字符串中最后一次出现的索引：",lIdx);//o在字符串中最后一次出现的索引： 30
  

三、正则表达式对象

概述：

​ 正则表达式(regular expression)描述了一种字符串匹配模式(pattern);

​ 可以用来检查一个串中是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

3.1 正则表达式对象的创建方式

• 字面量的方式 var patt = /匹配模式/修饰符;

  ​ / / 边界的意思 修饰符可以省略

  //正则表达式操作的式字符串
  var str = "Hello China! 你好，中国！"
  
  //匹配汉字  Unicode码   是一个固定用法，中文只能在正则表达式里这样表示
  var patt = /[\u4e00-\u9fa5]/;
  //test()  匹配指定字符串中是否含有指定规则的字符  返回一个布尔值，匹配成功 返回true 否则返回false
  console.log(patt.test(str));//true
  console.log(patt.test("hehe"));//false
  

• 使用new关键字 var patt = new RegExp(/匹配模式/,修饰符);

  //匹配字符串中是否含有数字
  var reg = new RegExp(/[0-9]/);
  console.log(reg.test("hehe"));//false
  console.log(reg.test("hehe123"));//true
  

3.2 正则表达式中的方法

test() 检测一个字符串是否匹配某种模式，如果字符串中含有匹配的文本，则返回true，否则返回false

exec() 检索字符串中的指定值；返回符合指定规则的第一个字符或字符串信息，返回值是一个数组；

var patt = /[\u4e00-\u9fa5]/;
// test()  检测一个字符串是否匹配某种模式，如果字符串中含有匹配的文本，则返回true，否则返回false
console.log(patt.test("test方法检测本字符串中是否含有汉字！！"));//true
console.log(patt.test("test method test string has chinese ?"));//false

// exec()  检索字符串中的指定值；返回符合指定规则的第一个字符或字符串信息，返回值是一个数组；
console.log(patt.exec("exec检测本字符串符合规则的第一个字符！！"));//["检", index: 4, input: "exec检测本字符串符合规则的第一个字符！！"]
console.log(patt.exec("exec method get the first chinese char in string"));//null

3.3 字符串中可以使用正则表达式的方法

split() 按照指定的匹配模式去切割字符串，返回切割后的字符串组成的数组

replace() 按照指定的规则替换字符串中的字符

search() 查找符合指定匹配规则的字符在原字符串中第一次出现的位置

match() 查找符合指定规则的字符或字符串信息，并返回一个数组

var str = "你好，Jack! 欢迎来到中国!";

// split()   按照指定的匹配模式去切割字符串，返回切割后的字符串组成的数组
var arr = str.split(' ');
console.log("arr:",arr);//arr: (2) ["你好，Jack!", "欢迎来到中国!"]

var pattArr = str.split(/\s/);// \s 正则表达式中的元字符 代表空格
console.log("pattArr:",pattArr);//pattArr: (2) ["你好，Jack!", "欢迎来到中国!"]

// replace()  按照指定的规则替换字符串中的字符  返回一个新的字符串
//替换 字符串片段 Jack
var rStr = str.replace("Jack","Lucy");
console.log("rStr:",rStr);//rStr: 你好，Lucy! 欢迎来到中国!

var regStr = str.replace(/Jack/,"David");
console.log("regStr",regStr);//regStr 你好，David! 欢迎来到中国!

//替换 ! 为 。
rStr = str.replace("!","。");
console.log("rStr:",rStr);//rStr: 你好，Jack。 欢迎来到中国!  只能替换一个

var regStr = str.replace(/!/g,"。");// 正则表达式中的修饰符  g 执行全局匹配  会将所有匹配到的内容进行替换
console.log("regStr",regStr);//regStr 你好，Jack。 欢迎来到中国。

// search()  查找符合指定匹配规则的字符在原字符串中第一次出现的位置
var idx = str.search("!");
console.log("idx:",idx);//idx: 7

var regIdx = str.search(/[a-z]/);//正则表达式中的匹配模式 [a-z] 匹配的是所有的小写英文字母
console.log("regIdx:",regIdx);//regIdx: 4

match() 和 exec() 方法的区别：

// 匹配中文的正则表达式
var patt = /[\u4e00-\u9fa5]/;

//声明一个字符串
var str = "你好，Jack! 欢迎来到中国!";

// exec()  正则表达式中的方法。检索字符串中的指定值；返回符合指定规则的第一个字符或字符串信息，返回值是一个数组；
var execArr = patt.exec(str);
console.log("execArr:",execArr);//execArr: ["你", index: 0, input: "你好，Jack! 欢迎来到中国!"]

// match()  字符串方法。查找符合指定规则的字符或字符串信息，并返回一个数组
var matchArr = str.match(patt);
console.log("matchArr:",matchArr);//matchArr: ["你", index: 0, input: "你好，Jack! 欢迎来到中国!"]

//执行全局匹配的正则表达式
var patt2 = /[\u4e00-\u9fa5]/g;

execArr = patt2.exec(str);
console.log("execArr:",execArr);//execArr: ["你", index: 0, input: "你好，Jack! 欢迎来到中国!"]

matchArr = str.match(patt2);
console.log("matchArr:",matchArr);//matchArr: (8) ["你", "好", "欢", "迎", "来", "到", "中", "国"]

//区别：一个是正则表达式中的方法，正则表达式对象才可以调用；一个是字符串中的方法，只能是字符串对象进行调用
//在执行全局匹配时，修饰符 g 对 exec 方法无效

3.4 修饰符

g 执行全局匹配

i 执行忽略大小写的匹配

m 执行多行匹配

// g   执行全局匹配
var pass = "xshls123";
var arr = pass.match(/[s-z]/);
console.log("没有执行全局匹配，返回第一个符合条件元素组成的数组：",arr);
//匹配结果：没有执行全局匹配，返回第一个符合条件元素组成的数组： ["x", index: 0, input: "xshls123"]

arr = pass.match(/[s-z]/g);
console.log("执行全局匹配，返回所有符合条件元素组成的数组：",arr);
//匹配结果：执行全局匹配，返回所有符合条件元素组成的数组： (3) ["x", "s", "s"]


// i   执行忽略大小写的匹配
var str = "Hello World!";
var arr2 = str.match(/[A-K]/g);
console.log("没有执行忽略大小写的操作arr2:",arr2);//没有执行忽略大小写的操作arr2: ["H"]

var arr2 = str.match(/[A-K]/gi);
console.log("执行忽略大小写的操作arr2:",arr2);//执行忽略大小写的操作arr2: (3) ["H", "e", "d"]


// m  执行多行匹配
var mStr = "Hello\nWorld";  // \n 换行的转义字符
console.log("mStr:",mStr);

//匹配字符串中的单词是否有以 W 开头的单词
var patt = /^W/; // ^ 正则表达式中的量词，代表以 指定模式开头  注意此 ^ 位置紧跟在起始边界后面
var flag = patt.test(mStr);
console.log("没有执行多行匹配的结果：",flag === true ? "存在W开头的单词" : "不存在W开头的单词");
//打印结果 没有执行多行匹配的结果： 不存在W开头的单词

patt = /^W/m;
flag = patt.test(mStr);
console.log("执行多行匹配的结果：",flag === true ? "存在W开头的单词" : "不存在W开头的单词");
//打印结果  执行多行匹配的结果： 存在W开头的单词

练习：获取字符串 “Hello Jack!! 欢迎你来到中国！！” 中所有的汉字。

3.5 方括号

用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

注意：[A-z] 这里有六个特殊的字符存在于 Z 到 a之间，所以严格意义上讲，它并不能真正的匹配所有英文字母，因为还有可能匹配到特殊字符。详见 ASCII 码表。

var str = "an123Zs`+=ex|\hg[000]*^44ioS";
var patt = /[A-z]/g;

console.log(str.match(patt));//(15) ["a", "n", "Z", "s", "`", "e", "x", "h", "g", "[", "]", "^", "i", "o", "S"]

//严格上，如果只是匹配所有的大小写英文字母，请使用以下匹配方式
// patt = /[A-Za-z]/g;
patt = /[A-Z]/gi;
console.log(str.match(patt));//(11) ["a", "n", "Z", "s", "e", "x", "h", "g", "i", "o", "S"]

// [abc]查找方括号之间的任何字符。
patt = /[a3Zo85vs]/gi;
console.log(str.match(patt));//(6) ["a", "3", "Z", "s", "o", "S"]

// [^abc]查找任何不在方括号之间的字符。
patt = /[^a3Zo85vs]/gi;
console.log(str.match(patt));//(21) ["n", "1", "2", "`", "+", "=", "e", "x", "|", "h", "g", "[", "0", "0", "0", "]", "*", "^", "4", "4", "i"]    

3.6 元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

var str = "Hello123";
//指定匹配规则，匹配所有的数字
// var patt = /[0-9]/g;
var patt = /\d/g;
console.log(str.match(patt));//(3) ["1", "2", "3"]

//指定匹配规则，匹配所有的非数字
// patt = /[^0-9]/g;
patt = /\D/g;
console.log(str.match(patt));//(5) ["H", "e", "l", "l", "o"]

3.7 量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

3.8 分组

虽然量词的出现，能帮助我们处理一排密紧相连的同类型字符。但这是不够的，我们用中括号表示范围内选择，大括号表示重复次数。如果想获取重复多个字符，我们就要用小括号进行分组了。

// 重复出现多个字符
console.log("abcabcabchhh".match(/(abc){3}/g));

分组的反向引用

反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号，通过“\编号(在正则表达式中)”，“$编号（在正则表达式外）”进行引用。从1开始计数。有一个分组就对应一个编码。

如果替换参数为一个函数，能对我们截取到的字符串进行进一步操作，更加灵活多变。带函数的方式是我们用的比较多的。

//反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号，通过“\编号(在正则表达式中)”，
// “$编号（在正则表达式外）”进行引用。从1开始计数。有一个分组就对应一个编码。
var patt = /(stu)(tea)\1\2\1/;
console.log(patt.test("stutea"));//false
console.log(patt.test("stuteastutea"));//false
console.log(patt.test("stuteastuteastu"));//true

console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);

中文

匹配中文：[\u4e00-\u9fa5]

四、Date对象

Date对象可以存储任意一个日期，并且可以精确到毫秒数(1/1000秒);

4.1 Date对象的创建

• var d = new Date(); //Date 对象会自动把当前日期和时间保存为其初始值
• var d = new Date(milliseconds); //new Date(100000000000);
• var d = new Date(dateString); //new Date(“Oct 11,2015”);
• var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); //new Date(2016,4,1); 2016年5月1日 0-11代表1-12月

4.2 Date对象中的转换方法

• toString() 把Date对象转换为字符串
• toLocaleString() 根据本地时间格式，把Date对象转换为字符串
• toDateString() 把Date对象的日期部分转换为字符串
• toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串
• toTimeString() 把 Date对象的时间部分转换为字符串
• toLocaleTimeString() 据本地时间格式，把 Date 对象的时间部分转换为字符串
• valueOf() 返回Date对象的原始值;这里的原始值指的是1970年1月1日以来(到指定日期时间)的毫秒数，与getTime()方法获取的值一样 myDate.valueOf();

4.3 Date对象中的get/set方法

• get/setTime() 返回/设置时间，单位毫秒数，计算从1970年1月1日零时到日期对象所指的日期的毫秒数 myDate.setTime(2000000000000);
• get/setFullYear() 返回/设置四位数的Date对象年份
• get/setMonth() 返回/设置Date对象月份 (0 ~ 11 代表 1-12月)
• get/setDate() 返回/设置Date对象一个月中的某一天 (1 ~ 31)
• getDay() 从 Date对象返回一周中的某一天 (返回值是0<周日>到6<周六>之间的一个整数)
• get/setHours() 返回/设置Date对象的小时 (0 ~ 23)
• get/setMinutes() 返回/设置Date对象的分钟 (0 ~ 59)
• get/setSeconds() 返回/设置Date对象的秒数 (0 ~ 59)

4.4 封装日期格式化函数：

/**
 * 获取当前时间并进行格式化输出  "2019年05月01日 星期六 13时:06分:01秒"
 * @function formatdate
 * @returns 当前日期和时间
 */
function formatdate(){
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var theDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var week = date.getDay();
    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return year + "年" + month + "月" + theDate + "日\t" + weeks[week] + "\t" + hour + "时:" + min + "分:" + second + "秒";
}

4.5 Date静态方法

Date.now() 获取当前时间