一、数组对象
数组对象是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 数组中的方法
-
数组转字符串的方法
toString() 将数组对象转换成字符串对象
这个方法没有参数
返回值是一个字符串
join(seperator?) 将数组对象按照指定的分隔符转换成字符串对象
参数 seperator 可选参数。指定分隔符号,是一个字符串类型
返回值是一个字符串
javascriptvar 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
-
数组首尾操作方法
push(args...) 向数组的末尾追加一个或多个元素
unshift(args...) 向数组的起始位置追加一个或多个元素
参数 args 要向数组中添加的数据,可以是任意数据类型
返回值 添加数据后,新的数组长度
这两个方法,都使原数组结构发生了改变
pop() 删除数组中最后一项
shift() 删除数组中的第一项
这两个方法没有参数
返回值 返回删除的那一项元素
perlvar 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);//删除的元素是: 西瓜
-
插入、删除、替换的方法
splice(startIndex,delCount,addEles...) 在指定索引处,删除指定数量的元素,并追加新的元素
参数 startIndex 插入或删除元素的起始索引
delCount 指定索引处开始删除的元素的个数
addEles... 在指定索引处插入一个或多个元素
返回值 返回的是删除的元素组成的数组
javascriptvar 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: []
-
数组拼接 和 数组片段截取
concat(args) 拼接一个或多个元素或数组
参数 args 拼接的元素或数组
返回值是拼接后的新数组
slice(startIndex,endIndex) 截取指定索引之间的元素
参数 startIndex 截取数组的起始索引
endIndex 截取数组的结束索引;可以省略,如果省略,截取到数组的末尾
返回值 截取的元素组成的新数组
上面两个方法,不会改变原数组
luavar 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) ["火龙果", "猕猴桃", "橙子"]
-
倒叙 和 排序
reverse() 对数组中的元素进行倒叙排列;没有参数
sort(callbackfn) 对数组中的元素进行排序
参数 callbackfn是一个回调函数,通过这个回调函数指定排序的规则
两个方法改变了原数组
cvar 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循环,一一获取数组中的元素
cssvar 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) 获取指定索引处开始指定数量的字符串片段
返回值都是截取的字符串片段
javascriptvar 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?) 从指定索引处开始查找指定字符最后一次出现的索引值
javascriptvar 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() 获取当前时间