- JS基础篇学习
- JS简介
- 1第一个程序
- 2循环1-9999
- 3JS规范
- 4JS历史
- JS调试
- 1查询变量输出
- 2JS调试工具
- 基本语法
- 基本类型
- 运算符和表达式
- 语句
- 1条件语句
- 2循环语句
- 3with语句
- 4异常捕获语句
- 数值
- i
- ii
- 字符串
- i
- ii
- 对象
- 1创建对象
- 2添加属性和方法
- 找出对象由哪个方法构造出的获取某个对象的构造函数
- 把对象转换成字符串
- 获取对象的原始值
- 判断对象是否含有某个属性某个属性是否由继承得来
- 数组
- i
- ii
- iii
- 函数
- i
- 1函数语法
- 函数定义
- 函数调用
- 函数参数
- ii
- 作用域
- 作为对象属性来使用
- 构造函数
- 原型
- Date
- 创建日期
- 获取日期信息
- 设置日期信息
- 日期选择器
- 日期对象转化数值对象DateNumber
- 数值对象转化日期对象NumberDate
- RegExp正则表达式
- 正则表达式
- i
- ii
- JSON
- 1JSONparsetextrevier
- JSONsringifyvaluereplacer space
JS基础篇学习
JS简介
1、第一个程序
2、循环1-9999
var number=1;
while(number<10000){
document.write('<p>'+number+'</p>');
number=number+1;
}3、JS规范
- 语法规范
- DOM规范
4、JS历史
JS调试
1、查询变量输出
- alter（） 对话框的方式弹出数值，需要点击对话框，不建议使用
- console.log() 在console中进行变量输出，实际开发中变量较多，不是用
2、JS调试工具
以chrome为例
用到source，local和global查看局部和全局变量，可以在watch中添加想看到的变量；
同时可以在source面板中打开console面板，可以在其中输入和修改一些变量的值
调试步骤如下：
1.点击source面板中，左边框中需要的文件（当文件很多时，可以通过Ctrl+O来查找想要的文件）
2.找到想查看的函数，在其前点击插入断点(当文件中函数很多时，可以通过Ctrl+Shift+O来查找想要的函数)
3.点击上图中右边框（即下图最上端按钮）进行调试，按钮作用分别为：继续执行按钮、单步执行、跳入、跳出
在global和local中观察全局和局部变量，在watch中添加想观察的变量（如下图中添加b变量）
可以使用console进行调试，具体操作为点击Esc调出console面板，在其中添加要观察的变量；同样点击Esc退出console面板
4.选中要进入的函数，点击图中进入函数按钮进入想查看的函数
点击进入函数按钮后，跳转到相应函数的位置
点击跳出函数按钮后，跳出函数执行下一语句
5.调试完想让函数继续执行,点击下图中继续执行按钮
- 单步执行和进入函数区别:点击选中的函数,单机单步执行会运行函数然后跳转到下一条语句;点击进入函数会跳转到选中的函数
- 在console面板中可以改变变量的值
基本语法
1.直接量
2.变量
变量像一个一个盒子，给其命不同名子，来装东西。
- 命名的过程叫声明变量，语法如下
var 变量名；
声明单个变量：var age;
声明多个变量：var age,name,sex;3.标识符
如下图中的变量名、函数名、函数中参数名称、对象名称
标识符命名规范
- 命名要求：
- 以字母、下滑线、美元标识符（$）开头
- 以字母、下滑线、美元标识符（$）和数字组成
eg:
var abc;
var _abc;
var $abc;
var _abc1$;
function $$abc_(){}- 注：标识符不能用关键词和保留字
- 标识符是大小写敏感的
4.语句
- 结尾要加分号
- 语句可以嵌套
5.注释
- 单行注释：以“//”开头
- 块级注释：以“/* ”开头，以“ */”结尾 ; 不可以嵌套
基本类型
- Number
- String
用单引号或者双引号引起来的类型
var name ="athree";
var month='March';
var num='3.3'; 在''里所以是String类型- Boolean
一般用于条件语句
- true
- false
- Object
- Null
- Undefined
- 值：undefined
- 出现场景：
1.已声明未赋值的变量
var a;
console.log(a);//undefined2.获取对象不存在的属性var obj ={a:1,b:2};
console.log(obj.c);//undefined类型识别：
- typeof
var num;
typeof num;//undefined
var num=1;
typeof num;//number
var cat=null;(表示空对象，返回仍为对象)
typeof cat;//object原始类型和引用类型
- 原始类型
- Number
- String
- Boolean
- Null
- Undefined
- 引用类型
- Object
原始类型和引用类型区别
运算符和表达式
- 操作符
-一元操作符
前++和后++区别：
前++：先+1再赋值
后++：先赋值再+1
-算数操作符
注：+和-可以做一元操作符
-关系操作符（返回类型为布尔型）
-相等操作符
“==”做运算时会类型转化
var num=4;
num ==4;//true
var num=“4”；
num ==4;//true
0==false;//true
2==true;//false
''==0;//true-逻辑操作符
- 逻辑“！”取得是布尔值
- 逻辑“&&”是二元操作，需要两个数
var result= true && false;
规则：如果第一个操作数转化为布尔型为true的话结果为第二个操作数；如果第一个操作数转化为布尔型结果为flase的话结果为第一个操作数；
“&&”是一个短路的操作，如果前编一个操作数为false的话，第二个操作数不会执行
var num=0;
var result = false&&num++;//num=0- 逻辑“||”是二元操作，需要两个数
var result= true || false;
规则：如果第一个操作数转化为布尔型为true的话结果为第一个操作数；如果第一个操作数转化为布尔型结果为flase的话结果为第二个操作数；
“||”是一个短路的操作，如果前编一个操作数为true的话，第二个操作数不会执行
var num=0;
var result = 3 || num++;//num=0 -赋值操作符 ![这里写图片描述]() -条件操作符
- ？：
- 布尔表达式 ？ 表达式1：表达式2；
true ? 表达式1 : 表达式2;//表达式1
flase ? 表达式1 : 表达式2;//表达式2
var sex = true;
result = sex ? '男' : '女';-逗号操作符
通过逗号操作符可以在一个语句中执行多个操作
var num1=3,num2=6,num3=9;-对象操作符
new: 通过new可以获取一个对象的实例;var cat=new Object();
delect:删除一个对象的属性；
.和[]获取对象的一个属性:
instanceof:判断某个变量是否为某个对象的实例
in:判断某个属性是否在对象中
-位操作符
位操作时，转化为32位的二进制进行操作
-操作符优先级
不确定优先级时,加()来提升优先级
- 表达式
把直接量变量组合起来就是表达式。
eg：
5
5+4;
(5+4)*(6-7)
(5+4)*(6-7)||!flag注：相等操作符“==”详细的类型转换，可以参考下JavaScript中的相等性判断；
关于操作符的优先级，可以参考下运算符优先级
语句
常用语句：
- 条件语句
- 循环语句
- with语句
- 异常捕获语句
1、条件语句
if(条件){语句1}else{语句2}
var isMale = true;
if(isMale){
document.write('男');
} else {
document.write('女');
}if(条件){语句1}else if(条件2){语句2}else{语句3}
var score = 70;
if(score > 80){
document.write('A');
} else if(score > 60){
document.write('B');
} else {
document.write('C');
}switch(表达式){
case 值1：语句
break；
case 值2：语句
break；
default：语句
}
var degree = 'B';
switch(degree){
case 'A':
document.write('优秀');
break;
case 'B':
document.write('良好');
break;
default:
document.write('合格');
}2、循环语句
while(表达式){语句};
var i = 1;
while(i <= 10){
document.write(i);
i++;
}//12345678910do{语句} while (表达式);//无论while表达式值是否为真都先执行一次do中的语句
var i = 11;
do{
document.write(i);
i++;
}while(i <= 10)//11for(初始化 ; 循环条件 ; 更新表达式){语句}
for(var i = 1; i <= 10; i++){
document.write(i);
}break:跳出循环体
for(var i = 1;i <= 10;i++){
if(i == 5){break;}
document.write(i);
}
//i=5时循环跳出，不会执行后面的循环，输出是1234continue:跳出当前循环
for(var i = 1;i <= 10;i++){
if(i == 5){continue;}
document.write(i);
}
//i=5时，跳出当前循环，后面的循环继续，输出是1234678910for(属性名in对象){语句}
可以遍历对象中的属性名
var cat = {
name:'kitty',
age:2,
mew:function(){
console.log('喵喵喵');
}
}
for(var p in cat){
document.write(p + ' ')
}
//name age mew3、with语句
with(表达式){语句}
作用：把代码中作用域指向对象
4、异常捕获语句
try{
语句
}catch(exception){
语句
}finally{
语句
}try中语句有错时执行到catch中语句；finally中的语句不管try中语句是否对都执行
try{
document.write(notDefined);
}catch(error){
console.log(error);
alert(error);
}finally{
alert('finally');
}数值
i
- 1、绝对值：Math.abs(x)
- 2、四舍五入：Math.round(x) //可以将浮点型转化为整型
- 3、 向上取整：Math.ceil(x)
- 4、 向下取整：Math.floor(x)
比较
- 取最大值：Math.max([value1[,value2[, … ]]])
Math.max(1,2) //2
Math.max(-1,-2,-3) //-1- 取最小值：Math.min([value1[,value2[, … ]]])
Math.min(1,2) //1
Math.min(-1,-2,-3) //-3- 生成随机数：Math.random()
注：范围 [0 , 1)
- Math的其他方法
ii
- 需求一
JS中获取输入框里的值实际是字符串，而不是数字。
- parseInt(string , radix)
radix表示要输入的是几进制数（通常为十进制，不写默认即可）
parseInt('1.1') // 1
parseInt('1.9') // 1
parseInt('1b2.4') // 1从第一个字符开始，如果碰到非数字，非数字全部忽略掉
parseInt('www') // NaN- 需求二
- parseFloat(string)
保留小数点，浮点型
parseFloat('100.1') // 100.1
parseFloat('12.4b5') // 12.4
parseFloat('www') // NaN- Number (value)
用于把值转化成数字，例如当用户输入1.23b时，非数字存在错误
Number('100.1') // 100.1
Number('12.4b5') // NaN只要有识别不了就完全识别不了
Number('www') // NaN比较
- 需求三：保留两位小数
- num.toFixed(digits)
(100.123).toFixed(2) // "100.12"输出结果是字符串
(100.123).toFixed(0) // "100"如何获取一个大于等于0且小于等于9的随机整数？
Math.floor(Math.random()*10);字符串
i
1、字符串格式：”字符串内容(数字、文字、空)” ; ‘字符串内容(数字、文字、空)’
- 需求一：判断字符长度
;.ljmnzcx
str.length
eg : “micromajor”.length // 10
var userName = input.value;
if(userName.length < 6){
alert("要求大于等于6个字符");
}- 需求二：不能以”-“开头
str. charAt(index)//所以值index表示字符串中的位置
“micromajor”.charAt(0) // “m”
“micromajor”.charAt(100) // “”
var userName = input.value;
if(userName.charAt(0) == "-"){
alert("不能以“-”开头");
}- 需求三：
str.indexOf(searchValue[ , fromIndex])//fromIndex:从哪个所以位置开始找
“micro-major”.indexOf(“-“) // 5(返回-索引位置)
“micro-major-web”.indexOf(“-“) // 5(返回第一个-索引位置)
“micro-major”.indexOf(“major”) // 6(当成一个整体，返回第一个字母索引位置)
“micromajor”.indexOf(“-“) // -1(找不到时输出-1，用来判断字符串中是否存在)
var userName = input.value;
if(userName.indexOf("-") == -1){
alert("必须包含“-”");
}- 需求三
str.search(regexp)//参数为正则
“micromajor163”.search(/[0-9]/) // 10(返回数字的索引位置)
“micromajor163”.search(/[A-Z]/) // -1
var userName = input.value;
if(userName.search(/[0-9]/) != -1){
alert("不能含有数字");
}str.match(regexp)
“micromajor163”.match(/[0-9]/) // [“1”]返回匹配值结果为数组
“micromajor163”.match(/[0-9]/g)// “1”,”6”,”3”
“micromajor163”.match(/[A-Z]/) // null
ii
- 找到并替换
str.replace(regexp|substr , newSubstr | function)
"micromajor163".replace("163","###") // "micromajor###"
"micromajor163".replace(/[0-9]/,"#") // "micromajor#63"
"micromajor163".replace(/[0-9]/g,"#") // "micromajor###"
"micromajor163".replace(/[0-9]/g,"") // "micromajor"- 取第一个所以到第二个索引之间的数取出来（第二个索引不包含）
str.substring(indexA [, indexB])//[]内容可以不写
"micromajor".substring(5,7) // "ma"
"micromajor".substring(5) // "major"str.slice(beginSlice[, endSlice])
**注：与substring区别，slice可以传入负数**
"micromajor".slice(5,7) // "ma"
"micromajor".slice(5) // "major"
"micromajor".slice(1,-1) // "icromajo"（-1表示从后往前数，不取到的）
"micromajor".slice(-3) // "jor"str.substr(start [, length])
"micromajor".substr(5,2) // "ma"
"micromajor".substr(5) // "major"- 需求
str.split ([separator] [, limit]) //separator是用的分隔符
"micro major".split(" ") // ["micro","major"]
"micro major".split(" ",1) // ["micro"]
"micro2major".split(/[0-9]/) // ["micro","major"]- 字符串变小写
str.toLowerCase()
“MicroMajor”.toLowerCase() // “micromajor”
- 字符串变大写
str.totoUpperCase()
“MicroMajor”.toUpperCase() // “MICROMAJOR”
- 需求：字符串连接
“0571” + “-” + “88888888” // “0571-88888888”
var area = areaInput.value; //0571
var tel = telInput.value; //88888888
var number = area + '-' + tel; //0571-88888888- 转字符串
String()
String(163) // "163"
String(null) // "null"- 转义字符
"micro\"major" // "micro"major"
"micro\\major" // "micro\major"
"micro\tmajor" // "micro major"- JavaScript特殊字符转义字符对照表
问：想要去除一个字符串的第一个字符，有哪些方法可以实现
str.slice(1);
str.substr(1);
str.substring(1);
对象
拥有一些属性和方法的集合
1、创建对象
- new Object()
var car = new Object();
var car ={}; //通过直接量的方法，常用。2、添加属性和方法
var car = {
color : "red",
run : function(){alert("run")}
};
//对象属性可以是字符串也可以是函数
//两个键值对之间要有“,”分开- 访问对象
car.color; // "red"
car.run(); // alert("run")
car["color"]; // "red"
car["run"](); // alert("run")- 对定义好的对象增加属性和方法
var car = {
color : "red",
run : function(){alert("run")}
};
car.type = "suv";
car.stop = function(){alert("stop")};- 修改定义好的对象的属性和方法
var car = {
color : "red",
run : function(){alert("run")}
};
car.color = "white";
car.run = function(){alert("run2")};- 删除属性和方法
var car = {
color : "red",
run : function(){alert("run")}
};
delete car.color;
car.color; // undefined找出对象由哪个方法构造出的（获取某个对象的构造函数）
- obj.constructor
var car = {
color : "red",
run : function(){alert("run")}
};
car.constructor; // Objectvar num = new Number(123);
num.constructor; // Number把对象转换成字符串
- obj.toString()
var num = new Number(123);
num.toString(); // "123"获取对象的原始值
- obj.valueOf()
var num = new Number(123);
num.valueOf(); // 123判断对象是否含有某个属性/某个属性是否由继承得来
var car = {
color : "red",
run : function(){alert("run")}
};
car.hasOwnProperty("color"); // true
car.hasOwnProperty("logo"); // false数组
i
- 创建数组
var array = new Array();
var array = [ ];
var array = [1,6,3];var array = [
163,
"netease",
{color:"red"},
[],
true
];- 需求：
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];- 数组有多少元素
arr.length
students.length; // 3
students = [];
students.length; // 0- 获取数组元素
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students[0]; // {id:1,score:80}
students[0].score; // 80- 修改数组元素
students[1].score = 60;- 获取数组中某个元素的索引或者判断数组中是否存在某个元素
arr.indexOf (searchElement [, fromIndex = 0])
var telephones = [110,120,114];
telephones.indexOf(120); // 1
telephones.indexOf(119); // -1- 遍历
arr.forEach (callback [, thisArg])//callback回调函数，每遍历一次把参数传递给回调函数执行
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
var editScore = function(item,index,array){
item.score += 5;
};
students.forEach(editScore);ii
- 把数组数据倒置
arr.reverse()
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.reverse();
students[0].score; // 70arr.sort ([compareFaction])//回调函数可以不存
注：该方法改变了原来数组
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
//函数作用成绩由高到低排：[（b.score-a.score）<0 ]==>a排在b的前面
[（b.score-a.score）>0 ]==>a排在b的后面
//函数作用成绩由低到高排a.score-b.score
var byScore = function(a,b){
return b.score-a.score;
};
students.sort(byScore);- 不传回调函数，按Unicode编码顺序排
var studentNames = ["wq","xl","gp"];
studentNames.sort();
studentNames; // ["gp","wq","xl"]- 在已有数组中加入一些元素(往后添加)
arr.push(element1, … ,elementN)//新添加元素在数组最后
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.push({id:4,score:90});
/**------插入后数组值-------**/
{id:1,score:80},
{id:2,score:50},
{id:3,score:70},
{id:4,score:90},
/**一次可添加多个**/
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.push({id:4,score:90},{id:5,score:60});- 在已有数组中加入一些元素(往前添加)
arr.unshift(element1, … ,elementN)//新添加元素在数组最后
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.unshift({id:4,score:90});
/**------插入后数组值-------**/
{id:4,score:90},
{id:1,score:80},
{id:2,score:50},
{id:3,score:70},- 获取数组中第一个元素,并删除第一个元素
arr.shift()
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.shift(); // {id:1,score:80}
/**数组变为**/
[
{id:2,score:50},
{id:3,score:70}
]- 获取数组中最后一个元素,并删除最后一个元素
arr.pop()
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.pop(); // {id:3,score:70}
/**数组变为**/
[
{id:1,score:80},
{id:2,score:50},
]- 在任意位置插入删除
arr.splice(index , howMany[, ele1 [, … [, eleN]]])
//index 为从哪个索引位置开始
//howMany为删除多少个元素
//[, ele1 [, … [, eleN]]]为要插入的元素
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.splice(1,1,{id:4,score:90});
/**数组变为**/
[
{id:1,score:80},
{id:4,score:90},
{id:3,score:70}
]- 删除效果
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.splice(1,1);
/**数组变为**/
[
{id:1,score:80},
{id:3,score:70}
]- 插入效果
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
students.splice(1,0,{id:4,score:90});
/**数组变为**/
{id:1,score:80},
{id:4,score:90},
{id:2,score:50},
{id:3,score:70}- 注：
iii
- 拷贝复制数组里面的一些元素（没改变原来数组）
arr.slice(begin [, end]) //从[begin位置开始，end索引位置结束)
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
var newStudents = students.slice(0,2);
***结果***
{id:1,score:80},
{id:2,score:50},- end不写时，拷贝全部
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
var newStudents = students.slice(0);- 连接多个数组
arr.concat(value1 , … ,valueN)
var students1 = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
];
var students2 = [
{id:4,score:90},
{id:5,score:60}
];
var students3 = [
{id:6,score:40},
{id:7,score:30}
];
var newStudents = students1.concat(students2,students3);- 数组拼成字符串
arr.join([separator])
var emails = ["wq@","gp@","xl@"];
emails.join(";"); // "wq@;gp@;xl@"- 改变原来数组，并保留原来数组
arr.map(callback [, thisArg])
//原来方法
var scores = [60,70,80,90];
var newScores = [];
var addScore = function(item,index,array){
newScores.push(item+5);
};
scores.forEach(addScore);
newScores; // [65,75,85,95]var scores = [60,70,80,90];
var addScore = function(item,index,array){
return item+5; //注意return
};
scores.map(addScore); // [65,75,85,95]arr.reduce(callback ,[initialValue])
var students = [
{id:1,score:80},
{id:2,score:50},
{id:3,score:70}
]; //前面结果,遍历到的当前元素,当前元素的索引位置,数组本身
var sum = function(previousResult,item,index,array){
return previousResult+item.score;
};
students.reduce(sum,0); // 200- 注
对一个数组（每项都是数值）求和，有哪些方法？
var arr=[1,2,3,4,5];
var sum=0;
var i=0;
//for
for(i in arr){
sum+=arr[i];
};
//while
while(i<arr.length){
sum+=arr[i];
i++;
};
//do while
do{
sum+=arr[i];
i++;
}while(i<arr.length);
//forEach
var fun=function(item,index,array){
sum+=item;
};
arr.forEach(fun);
//reduce
sum=function(pr,item,index,array){
return pr+item;
};
sum=arr.reduce(sum,0);
console.log(sum);函数
i
1、函数语法
- function 函数名([形参列表]){
执行代码;
} - 函数名([实参列表])
function add(number0,number1){
var sum = number0+number1;
return sum;
}
var x = add(3,6);函数定义
- 1.函数声明
- 2.函数表达式
函数调用
Created with Raphaël 2.1.0 开始 实参列表赋值给形参列表 执行代码 return后面的值返回出来，就是函数调用的结果 结束
函数参数
- 实参量少于形参
- 实参量多于形参
多余的实参放在arguments里 - add实参不定时依然能够求出实参的值
需求:
add(2, 3); // 5
add(2, 3, 4); // 9
add(2, 3, 4, 5); // 14
函数:
function add() {
var length = arguments.length,
sum = 0,
parameter;
for (var i = 0; i < length; i++) {
parameter = arguments[i];
sum = sum + parameter;
}
return sum;
}- 参数为原始类型:值传递(值本身不变，相当于拷贝了一下值)
-参数为对象类型:引用传递
ii
作用域
- 变量起作用的的范围
作为对象属性来使用
- 用this指向调用它的对象
构造函数
减少产生同类型的时间和代码量
- 构造函数结果相当于return this,this的值
原型
- 下图中红色部分存公共的
- 下图中point拥有隐藏方法使得它可以找到相应的对象
Date
- 当前时间
new Date();- 具体时间：2017年3月9日
new Date(2017,2,9);//月份从0开始创建日期
- new Date();
- new Date(value);
- new Date(year , month [, day [, hour [, minutes[,seconds[,miliseconds]]]]]);
获取日期信息
date.getXXX()
date.getFullYear();//获取年
date.getMonth();//获取月
date.getDate();//获取日
date.getHours();//获取时
date.getMinutes();//获取分
date.getSeconds();//获取秒- 日期格式化
function padding(number){
return number < 10 ? '0' + number : '' + number;
}//作用当月份或者日期的值小于10时在前面补0
function format(date){
return date.getFullYear()
+ '-'
+ padding(date.getMonth() + 1)
+ '-'
+ padding(date.getDate())
+ ' '
+ padding(date.getHours())
+ ':'
+ padding(date.getMinutes())
+ ':'
+ padding(date.getSeconds());
}设置日期信息
date.setXXX()
date.setFullYear();//设置取年
date.setMonth();//设置取月
date.setDate();//设置取日
date.setHours();//设置取时
date.setMinutes();//设置取分
date.setSeconds();//设置取秒日期选择器
- 需求:求天数
function getDays(year, month){
var date = new Date(year, month, 0);
return date.getDate();
}日期对象转化数值对象(Date——>Number)
前端传入服务器保存时，存入的也是number
数值对象转化日期对象(Number——>Date)
RegExp正则表达式
正则表达式
i
- 描述字符串规则的表达式
- /pattern/attrs /属性/规则
- new RegExp(pattern , attrs)
- 测试正则表达式与指定字符串是否匹配
regexObj.test(str)
/1596668888/.test('159666888') //false
/1596668888/.test('1596668888') //true
/1596668888/.test('x1596668888y') //true 指定字符串中只要包含这个格式就正确匹配- 锚点
- 匹配一个位置
^ :起始位置
$ :结尾位置
\b :单词边界
/^1596668888$/.test('x1596668888y') //false- 字符类
- 匹配一类字符中的一个
[abc] : a或b或c
[0-9] :一个数字
[^0-9] :非数字的一个字符
[a-Z] :一个字母
. :任一字符(换行除外)
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test(value)- 元字符
- 具有特殊意义的字符
^、$、\b
\d :[0-9]
\D :[^\d]
\s :空白符
\S :[^\s]
\w :[A-Za-z0-9_]
\W :[^\w]
/^1\d\d\d\d\d\d\d\d\d\d$/.test(value)- 量词
- 出现的次数
{m,n} :m到n次
* ：{0 ,} //出现0到任意次
? :{0 , 1} //出现0到1次
+ :{1 ,} //出现1次或者任意次
/^1\d{10}$/.test(value)- 问:正则表达式中，量词的贪婪模式与惰性模式有什么区别？
贪婪模式：默认模式，在整个表达式匹配成功的前提下，尽可能多的匹配。匹配过程是从整个字符串开始查看，如果不匹配就去掉最后一个，再看看是否匹配，如此循环一直到匹配或字符串空为止。属于贪婪模式的量词包括： “{m,n}”、“{m,}”、“?”、“*”和“+”。
惰性模式：在整个表达式匹配成功的前提下，尽可能少的匹配。匹配过程与贪婪模式相反，是从前面第一个开始，不匹配则加一个，如此循环直到字符串结束。量词后加”?”表示惰性模式，属于惰性模式的量词包括： “{m,n}?”、“{m,}?”、“??”、“*?”和“+?”
ii
- 转义符
- 需要匹配的字符是元字符
- 多选分支
- 或
/thi(c|n)k/ === /thi[cn]k/
/\.(png|jpg|jpeg|gif)$/ //检测文件是否为图片- 需求:获取子内容
- 获取匹配的字符串
str.match (regexp)
<script>
var url = 'http://blog./album?id=1#comment';
var arr = url.match(/(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?/);
// var arr = url.match(/(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)/);
console.log(arr);
</script>
- 需求：价格中用5.00表示5
- 替换一个字符串
str.replace(regexp/substr ,replacement)
var str = 'The price of tomato is 5.'
str.replace(/(\d+)/,'$1.00');- 更强大的检索能力
regexpObj.exec(str)
- 更详尽的结果:index
- 过程的状态:lastIndex //lastIndex表示下一个匹配的位置
<script>
var reg = /(.)(\d+)/g;
var scores = 'Tom $88, Nicholas ￥100, jack £38.';
var result;
while(result = reg.exec(scores)){
console.log(result);
console.log(reg.lastIndex);
// reg.lastIndex += 10;
}
</script>JSON
- JavaScript Object Notaion
前后端数据交互基本都用，轻量级
1、JSON.parse(text[,revier])
- JSON—>JS
<script>
var userJson = '{\
"id": 1,\
"nick": "春鸟秋虫",\
"avatar": "1.jpg",\
"tags": null,\
"authed": false\
}';
var user = JSON.parse(userJson);
debugger;
</script>JSON.sringify(value[,replacer [, space]])
- JS—>JSON
<script>
var user = {
id: 1,
nick: "春鸟秋虫",
avatar: "1.jpg",
tags: null,
authed: false
};
var userJson = JSON.stringify(user);
// var userJson = JSON.stringify(user, ['id', 'nick', 'avatar']);
debugger;
</script>
