JS学习笔记.基础篇

最新推荐文章于 2024-03-29 19:44:50 发布

xiu52t

最新推荐文章于 2024-03-29 19:44:50 发布

阅读量535

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/xiu52t/article/details/59055787

版权

WEB前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS基础篇学习

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);//undefined

       2.获取对象不存在的属性

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

-赋值操作符 ![这里写图片描述](https://img-blog.csdn.net/20170305134437990?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGl1NTJ0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) -条件操作符

？：
- 布尔表达式？表达式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++;
  }//12345678910

do{语句} while (表达式);//无论while表达式值是否为真都先执行一次do中的语句

var i = 11;
  do{
    document.write(i);
    i++;
  }while(i <= 10)//11

for(初始化 ; 循环条件 ; 更新表达式){语句}

  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时循环跳出，不会执行后面的循环，输出是1234

continue:跳出当前循环

for(var i = 1;i <= 10;i++){
   if(i == 5){continue;}
   document.write(i);
  }
  //i=5时，跳出当前循环，后面的循环继续，输出是1234678910

for(属性名in对象){语句}
可以遍历对象中的属性名

var cat = {
  name:'kitty',
  age:2,
  mew:function(){
      console.log('喵喵喵');
  }
}
for(var p in cat){
  document.write(p + ' ')
}
//name age mew

3、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;   // Object

var 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;  // 70

arr.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@163.com","gp@163.com","xl@163.com"];
emails.join(";");  // "wq@163.com;gp@163.com;xl@163.com"

改变原来数组，并保留原来数组

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.函数表达式

这里写图片描述

函数调用

函数参数

实参量少于形参
实参量多于形参
多余的实参放在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.163.com/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>