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

一、数组对象

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

想要理解数组对象,先要理解什么是数组?

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

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

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

javascript 复制代码
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]
javascript 复制代码
 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 是其它数据类型,或者是多个参数,那么代表的是数组中的元素
ini 复制代码
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 获取数组对象的构造函数

javascript 复制代码
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 可选参数。指定分隔符号,是一个字符串类型

    ​ 返回值是一个字符串

    javascript 复制代码
    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() 删除数组中的第一项

    ​ 这两个方法没有参数

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

    perl 复制代码
    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... 在指定索引处插入一个或多个元素

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

    javascript 复制代码
    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 截取数组的结束索引;可以省略,如果省略,截取到数组的末尾

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

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

    lua 复制代码
    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是一个回调函数,通过这个回调函数指定排序的规则

    两个方法改变了原数组

    c 复制代码
    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循环,一一获取数组中的元素

    css 复制代码
    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!")

    javascript 复制代码
    //字符串对象的创建方式一: 字面量的方式
    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 获取字符串对象的构造函数

javascript 复制代码
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 字符或字符串

javascript 复制代码
//字符串拼接方法一:利用 + 运算符   只要是有字符串存在的 + 运算都是字符串拼接操作
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 切割后,数组保留的长度

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

perl 复制代码
//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) 获取指定索引处开始指定数量的字符串片段

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

    javascript 复制代码
    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?) 从指定索引处开始查找指定字符最后一次出现的索引值

    javascript 复制代码
    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 = /匹配模式/修饰符;

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

    javascript 复制代码
    //正则表达式操作的式字符串
    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(/匹配模式/,修饰符);

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

3.2 正则表达式中的方法

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

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

javascript 复制代码
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() 查找符合指定规则的字符或字符串信息,并返回一个数组

javascript 复制代码
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() 方法的区别:

python 复制代码
// 匹配中文的正则表达式
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 执行多行匹配

ini 复制代码
// 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 码表。

css 复制代码
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 字符。
ini 复制代码
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](www.runoob.com/jsref/jsref...) 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

3.8 分组

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

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

分组的反向引用

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

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

javascript 复制代码
//反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号,通过"\编号(在正则表达式中)",
// "$编号(在正则表达式外)"进行引用。从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 封装日期格式化函数:

ini 复制代码
/**
 * 获取当前时间并进行格式化输出  "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() 获取当前时间

相关推荐
耶啵奶膘25 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro