javascript中的数据类型

妖狐艹你老母 2022-06-16 12:58 395阅读 0赞

原始数据类型：

undefined:

声明变量后为赋值则为undefined类型

一般为计算机默认

null：

声明变量后赋值为空

一般人为设置

number：

包括整型，浮点型都可以，占8byte，会有舍入误差，一般需要四舍五入

例如：

  1. var s=1.7;
  2. var t=2;
  3. var c=t-s;
  4. document.write(c);

结果为： 0.30000000000000004

解决方法:调用函数.toFixed（），来实现保留两位小数

  1. document.write(c.toFixed(2));

结果为：0.30

string：

一个英文字母占1byte

一个汉字占2byte

Boolean：

false

true

引用数据类型：

引用数据类型如：

number型：如电话号码 身份号

不用于计算比较，由数字构成的字符串

#

数组：引用类型的对象

数组：一组连续的变量组成的集合——统一起一个名字（批量管理多个数据）

程序=数据结构+算法

  1.      好的数据结构，可极大提高程序的执行效率
  3.     相关的多个数据应集中存储，集中管理
  5.    分类  和   排序

创建数组

**1.var 变量名=[ ]；—>创建一个空数组对象

**2.var 变量名=[值1,值2,```````]—>创建数组同时为数组指定初始元素(数组中的值)

对象只有唯一的地址,变量有名字

3.var arr=new Array( );//new创建一个新对象，Array是js中的数组类型

new Array（）—>创建一个数组类型的新对象,并返回新对象的地址

4.var arr=new Array( n );—>创建n个元素的数组

var arr=new Array(值1，值2······);

使用数组：使用变量等效于直接使用变量引用的数组对象

数组对象中，每个元素都有一个下标，从零到元素个数-1结束

数组变量[i]—>获得i位置元素中的值

数组赋值

数组变量[i]=新值；

数组取值

数组变量[i]

null和undefined：

undefined:是所有没有赋值的变量的默认值；

null：主动释放一个变量引用的对象；

何时使用null：当使用完一个较大的对象时，主动释放对象总是好的习惯；

垃圾回收器：专门释放对象内存的一个程序 // 在底层,后台,伴随当前程序同时运行

  1.                   引擎会定时自动调用垃圾回收器(总有一个变量不会被调用时)

js数组与其他语言数组的区别：

1.JavaScript中的数组越界不会报错；

2.为不存在的位置赋值：不会出错！会自动创建指定下标的新元素。

从不存在的位置取值：不会出错，也不会增加新元素，而是返回Undefined

数组的属性：

.length属性：获得任意数组中的元素个数（包括数组中空元素）！=实际的元素个数

何时使用：

1.arr[arr.length-1]:获得任意长度数组中的最后一个元素；

2.arr[arr.length]=新值：数组末尾追加一个新元素；

3.改小length的值，可删除末尾元素

例子：输入员工名字

  1. var nam=[];
  2. var input="";
  3. while((input=prompt("please input name:"))!="exit"){
  4.     nam[nam.length]=input;//总是在末尾追加新元素
  5. }
  6. console.log(nam+nam.length);

数组遍历（索引数组）：

三要素：

1.循环条件：下标<arr.length

2.循环变量：小标，从零开始，每次增1，直到arr.length-1结束

3.循环体：xxx

例子1：求数组最大值

  1. function getMax(a){       
  2.     for(var i=1,max=a[0];i<a.length;i++){
  3.       max<a[i]&&(max=a[i]);
  4.     } 
  5.     return max;
  6. }
  7. console.log(getMax([3,7,5,2]));

例子2：查找指定值在数组中的位置下标 

  1. var nam=['Jack','Tom','Ruth','Rose','Scott'];
  2. //indexof：在a中查找ename的位置;没找到返回-1；
  3. //indexOf(keyword,starti) 返回要查找关键字第一个字符所在数组的下标
  4.  function indexof(a,ename){
  5.     for(var i=0;i<a.length;i++){
  6.         if(a[i]==ename){
  7.              return i;
  8.          }
  9.     }
  10.     return -1;
  11. }
  12. console.log(indexof(nam,"Ruth"));
  13. console.log(indexof(nam,"Rose"));
  14. console.log(indexof(nam,"John"));

关联数组：

关联数组：可以自己定义下标名称的数组
例如：[“rythy”, 91, 65, 95]

  1.         sname shx yuw eng

如何定义关联数组：var fbb=[];

  1.                      fbb\["sname"\]="ruthy";
  3.                                 key         value  
  6.                      fbb\["shx"\]       =    91;
  8.                                 key         value

如何访问关联数组中的元素：fbb [“sname”];

关联数组中的.length属性失效！

关联数组（hash）数组：下标不能重复

  1.     优势：利用hash算法，精确定位某个下标，不用遍历

索引数组：缺点：下标自动分配，无意义，要想按内容查找元素，只能从头开始遍历。

遍历关联数组：

for(var key in arr){

key,仅得到当前元素的下标

arr[key]，得到当前元素的值！

}

例子：

  1. var fbb=[];
  2. fbb["sname"]="ruthy";
  3. fbb["shx"]=91;
  4. fbb["yuw"]=51;
  5. fbb["eng"]=91;
  6. for(var key in fbb){
  7.     console.log(key+":"+fbb[key]);
  8. }

Center

数组API：

API：应用程序编程接口

  1.   已经实现的，现成的对象和方法-----提高开发效率

拼接　　

  1.        arr to String:  
  2.         var str=arr.toString()-->自动,逗号分隔  
  3.         var str=arr.join("连接符")-->自定义连接符

固定套路：１.将字符拼接为单词：arr.join(“”)

　　　　　２.将单词拼接为句子：arr.join(“　“)

*优化*：问题：频繁字符串拼接，造成内存浪费

var str=“a”;

str+=”b”;//3

str+=”c”;//5

str+=”d”;//7

解决：先将要拼接的字符串放入数组

  1.     最后，arr.join("")

var arr=[“a”];

arr[arr.length]=”b”;

arr[arr.length]=”c”;

arr[arr.length]=”d”;

[“a”,”b”,”c”,”d”]

例子：arr.join()使用方法

  1. <html>
  2. <head>
  3. <title>JavaScript Array join Method</title>
  4. </head>
  5. <body>
  6.     <script type="text/javascript">
  7.          var arr = new Array("First","Second","Third");
  8.          var str = arr.join();
  9.          document.write("str : " + str );
  10.          var str = arr.join(", ");
  11.          document.write("<br />str : " + str );
  12.          var str = arr.join(" + ");
  13.          document.write("<br />str : " + str );
  14.      </script>
  15. </body>
  16. </html>

程序结果： 

  1. str : First,Second,Third
  2. str : First, Second, Third
  3. str : First + Second + Third

例子：用数组拼接9*9乘法表 

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>hanxi</title>
  5.         <script type="text/javascript">
  6.             for(var r=1;r<=9;r++){
  7.                 for(var i=1,arr=[];i<=r;i++){
  8.                      arr[arr.length]=[i,"x",r,"=",i*r,(i*r<10?" ":" ")].join("");
  9.                 }
  10.                 console.log(arr.join(""));
  11.             }    
  12.         </script>
  13.     </head>
  14.     <body>
  15.     </body>
  16. </html>

Center 1

拼接和截取

1.拼接和截取：原对象保持不变，返回新对象

var newArr=arr.concat(新值1，另一数组，新值2····)//拼接

  1. var hege = ["Cecilie", "Lone"];
  2. var stale = ["Emil", "Tobias", "Linus"];
  3. var kai = ["Robin"];
  4. var children = hege.concat(stale,kai); 
  5. 结果：
  6. Cecilie,Lone,Emil,Tobias,Linus,Robin

2.**var subArr=arr.slice(starti，[endi+1]);//截取

第二个参数可省略，如果省略表示从start一直取到结尾，两个参数都可以取负值

  1. var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  2. var citrus = fruits.slice(1,3); 
  3. 结果：
  4. Orange,Lemon

例子：取身份证中的出生日期 

  1. var pid="110102198312262111";
  2. var birth=pid.slice(6,-5+1);
  3. console.log(birth);

3.**arr.splice:删除 插入 替换

  1. arrayObject.splice(index,howmany,element1,.....,elementX)

Center 2

例子：http://www.jb51.net/w3school/js/jsref\_splice.htm

4.arr.reverse();

reverse() 方法用于颠倒数组中元素的顺序。

例子： 

  1. var fruits = ["Banana", "Orange", "Apple", "Mango"];
  2. fruits.reverse(); 
  3. 结果：
  4. Mango,Apple,Orange,Banana

数组排序

数组排序：arr.sort();

问题：默认将所有元素转为字符串升序排列

****比较器函数：专门比较任意两数字大小的函数

特点：

  1. 2个参数，分别表示要比较的任意两个数字

  2. 无论比较逻辑是什么，都要返回一个数字

***函数对象作为参数：

js中函数本质是一个对象，函数名本质是指向函数对象的变量

*改变比较器的正负，可以颠倒排序的顺序

//函数名后加（），表示立即执行，返回函数执行结果

//将函数作为对象传递时，仅适用函数名，不加（）

例子：用比较器比较各个类型的数组

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>排序</title>
  6.         <script type="text/javascript">
  7.             var nums=[1,3,5,12,34,23,145,57,78];
  8.             var emps=["smith","john","eric","tom","ruthy","jerry"];
  9.             function bubble(arr,compare){
  10.                 for(var n=1;n<arr.length;n++){
  11.                     for(var i=0;i<arr.length-n;i++){
  12.                         if( compare(arr[i],arr[i+1])>0){
  13.                             var temp=arr[i];
  14.                             arr[i]=arr[i+1];
  15.                             arr[i+1]=temp;
  16.                         }
  17.                     }
  18.                 }
  19.             }
  20.             /*专门比较任意两数字的大小*/
  21.             function compareNum(a,b){
  22.                 return a-b;
  23.             }//数字升序排列
  24.             function compareNumDESC(a,b){
  25.                 return -(a-b);
  26.             }//数字降序排列
  27.             /*专门比较任意两字符串的大小*/
  28.             function compareStr(a,b){
  29.                 return a>b?1:a<b?-1:0;
  30. //                if(a>b){
  31. //                    return 1;
  32. //                }
  33. //                if(a=b){
  34. //                    return 0;
  35. //                }
  36. //                if(a<b){
  37. //                    return -1;
  38. //                }
  39.             }//字符串升序排列
  40.             function compareStrDESC(a,b){
  41.                 return a>b?-1:a<b?1:0;}//字符串降序排列
  42.             bubble(nums,compareNum);
  43.             console.log(nums);
  44.             bubble(nums,compareNumDESC);
  45.             console.log(nums);
  46.             bubble(emps,compareStr);
  47.             console.log(emps);
  48.             bubble(emps,compareStrDESC);
  49.             console.log(emps);
  50.         </script>
  51.     </head>
  52.     <body>
  53.     </body>
  54. </html>

二维数组：

二维数组：数组中的元素，又引用了另一个子数组对象

何时使用二维数组：2种

1.只要保存横行竖列的二维数据

比如：2048游戏

2.保存上下级关系的数据时

二维数组的创建：

1.先创建空数组，在赋值：

var arr=[ ];

arr[0]=[“石家庄”,”保定”,”唐山”]；

arr[1]=[“德州”,”济南”,”烟台”]；

2.创建数组时，同时初始化子数组：

var data=[

  1.            \[0,2,3,4\],\[0,32,45,2\],\[2,4,6,23\]

];

如何访问二维数组中的数据：arr[行下标][列下标]

比如：data中第2行，第3个元素

  1.       data\[1\]\[2\];

问题: console.log(data[1][5]);//undefined

  1.        console.log(data\[5\]\[1\]);//undefined\[1\]

强调：二维数组中行下标不能越界，列下标越界会出现undefined，不会报错

例子：二维数组查找城市：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>二维数组</title>
  6.         <script type="text/javascript">
  7.             var provs=["beijing","hebei","henan"];
  8.             var cities=[
  9.                ["chaoyang","haidian","fengtai"],
  10.                ["shijiazhuang","tanshan","tianjin"],
  11.                ["luoyang","kaifeng","zhengzhou"]
  12.             ];
  13.             function getCities(prov){
  14.                 var i=provs.indexOf(prov);
  15.                 //indexOf在provs数组中查找prov的值，找到返回下标
  16.                 if(i!=-1){
  17.                     alert(cities[i]);
  18.                 }else{
  19.                     alert("not find!");
  20.                 }
  21.             }
  22.         </script>
  23.     </head>
  24.     <body>
  25.         <button οnclick="getCities(prompt('input provience:'))">查询城市</button>
  26.     </body>
  27. </html>

二维数组的遍历：

固定套路:外层循环控制行，内层循环控制列

var arr=[[```````],[````````],[``````````]`````]

固定模板：

for(var r=0;r<arr.length;r++){

  1.    for(var c=0;c<arr\[r\].length;c++)\{
  6.    \}

}

栈和队列：

js中没有真正的栈和队列 ，一切都是用数组对象模拟的

栈：

栈：只能从一端进出的数组，另一端封闭

何时使用：今后只要希望数组只能从一端进出时

如何使用：2种情况

1.末尾出入栈:已入栈的元素下标不再改变

入栈：arr.push(新值1，新值2，······) //尾插法

出栈：var last=arr.pop();

例子：入栈出栈

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>出入栈</title>
  6.         <script type="text/javascript">
  7.             var bus=[];
  8.             for(var i=0;i<5;i++){
  9.                 bus.push("乘客"+i);
  10.             }
  11.             console.log(bus);
  12.             while(bus.length!=0){
  13.             var first=bus.pop();
  14.             console.log(first+"下车");
  15.             console.log(bus);
  16.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.     </body>
  21. </html>

2.开头出入栈:每次入栈新元素，已入栈的位置都会向后顺移

入栈：arr.unshift(新值1，新值2，······) //头插法

出栈：var last=arr.shift();

例子：乘客上下车

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             var bus=[];
  8.             for(var i=0;i<5;i++){
  9.                 bus.unshift("乘客"+i);
  10.             }
  11.             console.log(bus);
  12.             while(bus.length!=0){
  13.             var first=bus.shift();
  14.             console.log(first+"下车");
  15.             console.log(bus);
  16.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.     </body>
  21. </html>

队列：

只允许从末尾进入数组，必须从开头出数组

入栈：arr.push(新值1，新值2，······) //头插法

出栈：var last=arr.shift();

例子：乘客抢手机

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>队列</title>
  6.         <script type="text/javascript">
  7.             var shen=5;
  8.             var queue=[];
  9.             for(var i=0;i<6;i++){
  10.                 queue.push("顾客"+i);
  11.             }
  12.             console.log(queue);
  13.             while(shen>0){
  14.                 var first=queue.shift();
  15.                 console.log(first+"抢到1部；还剩"+(--shen));
  16.                 console.log(queue);
  17.             }
  18.             console.log(queue+"没抢上")
  19.         </script>
  20.     </head>
  21.     <body>
  22.     </body>
  23. </html>

String API：

**String 定义：

字符串：多个字符组成的一个集合（数组），凡是数组对象中，不修改原对象的API，字符串都能用！

比如：slice，indexOf

凡是数组对象中，直接修改原对象的API，字符串都不能使用！

比如：push,sort,pop,shift,unshift,splice

例子：获取身份证号的出生日期

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>string</title>
  6.         <script type="text/javascript">
  7.             var pid="110102198312262111";
  8.             var birth=pid.slice(6,-5+1);
  9.             console.log(birth);
  10.             var gender=pid[pid.length-2]%2==0?"女":"男";
  11.             console.log(gender);
  12.         </script>
  13.     </head>
  14.     <body>
  15.     </body>
  16. </html>

内置对象

内置对象：ES标准中已经定义好的，由浏览器厂商已经实现的对象

11个：String Number Boolean Array Date Math RegExp

Error

Function（所有函数的祖宗） Object（所有对象的祖宗）

Global（全局）

包装类型

包装类型：专门封装原始类型数据，提供对原始类型数据的操作方法

3种：String Number Boolean(不能new)

何时使用包装类型：自动使用

为何使用包装类型：原始类型的数据本来没有任何方法，当程序中使用原始类型调用方法时，

程序会自动创建包装类型对象封装该数据 函数调用完，包装类型自动释放

例如：

  1. var n=100;
  2. console.log(new Number(n).toString(2));

转义字符

转义字符：当字符串的内容和程序的特殊符号冲突时 或字符串包含功能字符时

  1. var str="js is \"the best language in internet\"";
  2. console.log(str);
  3. str="\\\"可避免引号\n冲突";
  4. console.log(str);

#

String API:

string API:所有API不可能直接修改原字符串

1. 大小写转换：

  1. 都转大写：str.toUpperCase();
  3. 都转小写：str.toLowerCase();

例子：模拟验证码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>验证码</title>
  6.         <script type="text/javascript">
  7.             var code="4eAt";
  8.             var input="";
  9.             while((input=prompt("请输入验证码：").toUpperCase())!=code.toUpperCase()){
  10.                 alert("输入错误");
  11.             }
  12.             document.write('<h1 style="color: gold">验证通过</h1>');
  13.         </script>
  14.     </head>
  15.     <body>
  16.     </body>
  17. </html>

2. 获取指定位置字符：

3种：

1.str[i] 倒数第二个：str[str.length-2]

2.str.charAt(i);

3.str.charCodeAt(i);—>返回字符的unicode号

例子：输出一句话的Unicode编码，且位数相同

  1. <!DOCTYPE html>
  2. <html>
  3.      <head>
  4.     <meta charset="UTF-8">
  5.     <title>验证码</title>
  6.     <script type="text/javascript">
  7.             function encode(input){
  8.                 for(var i=0,arr=[];i<input.length;i++){
  9.                     var unicode=input.charCodeAt(i);
  11.                     //如果Unicode<100-->"000"+unicode
  12.                     arr.push((unicode+100000+"").slice(1));
  13.                 }
  14.                 return arr.join(" ");
  15.             }     
  16.     </script>
  17.     </head>
  18.     <body>
  19.         <button οnclick="document.write(encode(prompt('输入一句话：')))">编码</button>
  20.     </body>
  21. </html>

3. 查找关键字的位置：

2种：

1.var i=str.indexOf(“kword”[,starti])//从前往后找

如果找不到，返回-1

例子：查找关键字

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>查找关键字</title>
  6.         <script type="text/javascript">
  7.             var kword="my";
  8.             function findKword(input){
  9.                 var index=-1;
  10.                 while((index=input.indexOf(kword,index+1))!=-1){
  11.                     alert("在位置"+index+"发现关键字");
  12.                 }
  13.             }
  15.         </script>
  16.     </head>
  17.     <body>
  18.         <button οnclick="findKword(prompt('please input a centense:'))">查找关键字</button>
  19.     </body>
  20. </html>

2.var i=str.lastIndexOf(“kword”[,starti]);//从后往前找

查找starti 位置左侧第一次出现关键字的位置 starti 默认都是0 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>查找关键字</title>
  6.         <script type="text/javascript">
  7.             var kword="my";
  8.             function findKword(input){
  9.                 var index=input.length;
  10.                 while((index=input.lastIndexOf(kword,index-1))!=-1){
  11.                     alert("在位置"+index+"发现关键字");
  12.                                         if(index==0){break;}//防止第一个字符出现关键字出现死循环
  13.                                 }
  14.                        }
  16.         </script>
  17.     </head>
  18.     <body>
  19.         <button οnclick="findKword(prompt('please input a centense:'))">查找关键字</button>
  20.     </body>
  21. </html>

获取子字符串：

3种：

1.var subStr=str.slice(starti[, endi+1]);

pid.slice(6,-5+1)

2.var subStr=str.substring( );

pid.substring(6,pid.length-5+1);//不支持负数参数

3.var subsubStr=str.substr(starti,取几个)

pid.substr(6,8);

例子：查找身份证号的出生日期 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>取字符串</title>
  6.         <script type="text/javascript">
  7.             var pid="412702199306023268";
  8.             var year=pid.slice(6,9+1);
  9.             if(parseInt(pid.slice(10,11))==0){
  10.                 var month=pid.slice(11,11+1);
  11.             }
  12.             if(parseInt(pid.slice(10,11))!=0){
  13.                 var month=pid.slice(10,11+1);
  14.             }
  15.             if(parseInt(pid.slice(12,13))==0){
  16.                 var day=pid.slice(13,13+1);
  17.             }
  18.             if(parseInt(pid.slice(12,13))!=0){
  19.                 var day=pid.slice(12,13+1);
  20.             }
  21.             console.log(year+"年"+month+"月"+day+"日");
  22.         </script>
  23.     </head>
  24.     <body>
  25.     </body>
  26. </html>

例子：编码解码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>解码</title>
  6.         <script type="text/javascript">
  7.             function decode(code){
  8.                 for(var i=0,arr=[];i<code.length;i+=5){
  9.                     var unicode=code.substr(i,5);
  10.                                     var chare=String.fromCharCode(unicode);
  11.                                     arr.push(chare);
  12.                                    //将chare追加到数组arr结尾
  13.                                 }
  14.                         return arr.join("");
  15.             }
  16.         </script>
  17.     </head>
  18.     <body>
  19.         <button οnclick="document.write(decode(prompt('输入一段编码：')))">解码</button>
  20.     </body>
  21. </html>

例子：邮箱查询用户名

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>邮箱查找用户名</title>
  6.         <script type="text/javascript">
  7.             function mail(email){
  8.                 var a=email.indexOf("@");
  9.                 var username=email.slice(0,a);
  10.                 var domail=email.slice(a+1);
  11.                 alert("用户名:"+username);
  12.                 alert("域名:"+domail);
  13.             }
  15.         </script>
  16.     </head>
  17.     <body>
  18.         <button οnclick="mail(prompt('请输入您的邮箱：'))">输入您的邮箱</button>
  19.     </body>
  20. </html>

模式匹配:

模式匹配:按照规则查找或者替换字符串中的子内容

查找：2种

1.只能从开始位置，找到第一个匹配的关键字

var i=str.search(/kword/i); //忽略大小写

何时使用：仅判断有没有关键词时

str.search()与str.indexOf()区别：

str.search()：支持模式匹配

str.indexOf()：不支持模式匹配 区分大小写

2.获得所有关键字的内容，或个数

var arr=str.match(/kword/ig);

arr.length表示匹配关键字的个数

如果没找到，返回null

* 都要先判断是否为null，在处理，match无法获得关键字的下标位置*

替换：1种

1.var newStr=str.replace(kword，“替换内容”)；

固定模式：利用replace格式化数据

  1. “替换值”中，也可以使用$n,和RegExp.$n的用法完全相同

例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>模式匹配</title>
  6.         <script type="text/javascript">
  7.             var kword=/no/ig;
  8.             var reply="No zuo No die,No can nO bibi";
  9.             var arr=reply.match(kword);
  10.             var reply=reply.replace(kword,"**");
  11. //            if(arr){
  12. //                console.log(reply+" 共替换："+arr.length+"处");    
  13. //            }else{
  14. //                console.log(reply+" 共替换：0 处");    
  15. //            }
  16.             console.log(reply+" 共替换："+(arr?arr.length:0)+"处");    
  17.         </script>
  18.     </head>
  19.     <body>
  20.     </body>
  21. </html>
  22. <!DOCTYPE html>
  23. <html>
  24.     <head>
  25.         <meta charset="utf-8">
  26.         <title></title>
  27.         <script type="text/javascript">
  28.             var str="纪委负值对全国党员干部的纪检监察工作";
  29.             var reg=/纪[检委](监察)?/;
  30.             var arr=null;
  31.             var count=0;
  32.             while((arr=reg.exec(str))!=null){
  33.                     str=str.replace(reg,arr[0].length==2?"**":"****");
  34.                     count++;
  35.             }
  36.             console.log(str);
  37.             console.log("共替换："+count+"处");
  38.         </script>
  39.     </head>
  40.     <body>
  41.     </body>
  42. </html>
  43. //取生日：
  44. var birth="19931002";
  45. var reg=/(\d{4})(\d{2})(\d{2})/;
  46. birth=birth.replace(reg,"$1年$2月$3日");
  47. console.log(birth);

切割：1种

1.var arr=str.split(separator,howmany); arr中以数组形式保存每段子字符串

split() 方法用于把一个字符串分割成字符串数组。

Center 3

何时使用？今后只要分段处理字符串时都要先分隔在遍历

固定套路：将字符串切割为字符数组

例子：

  1. <script type="text/javascript">
  3. var str="How are you doing today?"
  5. document.write(str.split(" ") + "<br />")
  6. document.write(str.split("") + "<br />")
  7. document.write(str.split(" ",3))
  9. </script>

结果： 

  1. How,are,you,doing,today?
  2. H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
  3. How,are,you

例子：句子首字母转大写

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>出入栈</title>
  6.         <script type="text/javascript">
  7.           function parseFirst(stmt){
  8.               var arr=stmt.split(" ");
  9.               for(var i=0;i<arr.length;i++){
  10.                   arr[i]=arr[i][0].toUpperCase()+arr[i].slice(1);    
  11.               }
  12.               return arr.join(" ");
  13.           }
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <button οnclick="alert(parseFirst(prompt('please input a sentence:')))">首字母转大写</button>
  18.     </body>
  19. </html>

正则表达式：

正则表达式：专门规定字符串中字符格式规则的表达式

何时使用：只要定义字符串格式规则，都用正则表达式

最简单的正则：一个关键词的原文，就是最简单的正则

正则表达式的规则：

1.备选字符集：规定某一位字符可选的备选文字列表

语法：[备选字符列表]

强调：无论备选字符集中有多少字符

都必须且只能选1个，一个[ ]只代表1个

[^47]^表示除了，只要不是4,7其他任何字符都行

2.-:表示到 [0-9]

3.预定义字符集：专门表示常用的连续的字符集

\d==>[0-9] :1位数字

\w==>[a-zA-Z] :1位字母或下划线

\s==>[\t\n 空字符]：代表一位空字符：空格，tab符

.:除了 换行外，其他所有的字符

\D,\W,\S—>除了\d\w或\s

4.量词：规定一个字符集出现的次数：2种

明确数量：3种：{min,max}

  1.                        \{min,\}最少min位  
  4.                         \{n\}:必须n位

不确定数量：3种

？ ==>{0,1}:可有可无，最多1次

* ==>{0,}:可有可无，数量不限

+ ==>{1,}至少一次，数量不限

身份证号：15位数字

  1.                 2位数字
  3.                最后一位数字或x X
  5.               后三位可有可无，但最多出现1次

正则表达式：\d{15}(\d{2}[0-9xX])?

手机号：+86 或0086 可有可无，最多一次

  1.             空字符 可有可无，数量不限  
  4.              1
  6.               从3,4,5,7,8选一个
  8.               最后九位数字

正则表达式：(\+86|0086)?\s*[1][3,4,5,7,8]\d{9}

**RegEXp对象：

正则表达式对象：封装了正则表达式，提供了利用 正则表达式执行验证和查找的API

何时使用：只要利用正则表达式执行验证和查找功能时

对象创建：2种

**1.var reg=/正则表达式/ig;

何时使用：正则表达式在运行时不会改变

2.var reg=new RegExp(“正则表达式”，”ig”);

何时使用：在运行时正则表达式可能被改变

注意：所有\都要改为\\

var str1=”\\d{6}“;

var str2=”\\d{15}(\\d\\d[0-9xX])?”;

var reg=new RegExp(str2,””);

如何使用：2种操作

1.格式验证：var bool=reg.test(str);

验证：要求从头到尾必须完整匹配

问题：test方法默认只要部分匹配即可

解决：都要在正则表达式前加^,后加$

  1.         ^表示开头位置的XXXX
  3.          $表示结尾位置的XXXX
  5.         ^，$连用，必须是

密码强度要求：6-8位密码，只能是字母，数字的组合

  1.                      至少包含一位大写字母
  3.                      至少包含一位数字

预判：1.不全由小写字母或数字组成

  1.            可能包含大写或符号
  3.          （?!\[a-z0-9\]\*$）  
  6.         2.不全由大写字母或小写字母组成
  8.              可能包含数字或符号
  10.              (?!\[A-Za-z\]\*$)

正则表达式：只能是字母数字的组合—》屏蔽了符号 [a-zA-Z0-9]{6}

(?![a-z0-9]*$)(?![A-Za-z]*$)[a-zA-Z0-9]{6}

例子：6位密码验证

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>正则密码验证</title>
  6.         <script type="text/javascript">
  7.             var reg=/^(?![a-z0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6}$/;
  8.             while(!reg.test(prompt("输入新密码："))){
  9.                 alert("密码格式不符:6-8位密码，只能是字母，数字的组合，至少包含一位大写字母，至少包含一位数字");
  10.             }
  11.             alert("密码输入完毕");
  12.         </script>
  13.     </head>
  14.     <body>
  15.     </body>
  16. </html>

2.查找API

var arr=reg.exec(str):在str中查找所有符合reg规定的关键字 要加g

其中：arr[0]:保存了当前关键字的内容

  1.        arr.index:保存了当前关键字的位置  
  4.       reg.lastIndex:保存下次开始查找的位置

何时使用：只要即查找内容，又查找位置，只能用reg.exec();

例子：

  1. var str="明明喜欢我，却不告诉我；别理我，我想静静；静静是谁？你先告诉我明明是谁";
  2. var reg=/明明|静静/g;
  3. var arr=null;
  4. while ((arr=reg.exec(str))!=null){
  5.     console.log("在位置"+arr.index+"发现关键字"+arr[0]);
  6.     console.log("下次从"+reg.lastIndex+"开始找");
  7. }

Center 4

正则表达式的贪婪模式和懒惰模式：

默认贪婪模式：默认总是匹配最长的符合条件的字符串

原因： .*或 .+引起 .忽略多长 省略

懒惰模式：仅匹配最短的符合条件的字符串

把贪婪—>懒惰：(.*?)

从正则表达式匹配结果中获取子内容：2步

1.正则表达式中，用()包括要获取子内容的步分

2.在程序中，本次查找后：RegExp.$n 

  1.         取本次匹配结果中第n个()匹配的内容
  3.        正则中n从1开始

例子：网络爬虫:找a 标签内href的内容

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>正则表达式找HTML的链接</title>
  6.         <script type="text/javascript">
  7.             var html='<h1 class="h1"><a class="curr" href="n++.html">fhftyhyffjj</a><a name="top"></a><div id="main"></div><A href="function.html">rtytyjyu</A><link href="stylesheet"/></h1>';
  8.             var reg=/<[aA]\s(.*?)href\s*=\s*(['"])([^'"]*)(\2)/g;
  9.             //                1               2      3     必须和(2)内容相同
  10.             var arr=[];
  11.             while((arr=reg.exec(html))!=null){
  12.                 console.log(RegExp.$3);
  13.             }
  14.         </script>
  15.     </head>
  16.     <body>
  17.     </body>
  18. </html>

例子：去头尾空格

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             //去掉str前的空字符
  8.             function ltrim(str){
  9.                 var reg=/^\s+/;
  10.                 return str.replace(reg,"");
  11.             }
  12.             //去掉str后的空字符
  13.             function rtrim(str){
  14.                 var reg=/\s+$/;
  15.                 return str.replace(reg,"");
  16.             }
  17.             //去掉str前后的空字符
  18.             function lrtrim(str){
  19.                 var reg=/^\s+|\s+$/g;
  20.                 return str.replace(reg,"");
  21.             }
  22.             var str="  \tHellow world  ";
  23.         </script>
  24.     </head>
  25.     <body>
  26.         <button οnclick="alert(ltrim(str))">去前空字符</button>
  27.         <button οnclick="alert(rtrim(str))">去后空字符</button>
  28.         <button οnclick="alert(lrtrim(str))">去前后空字符</button>
  29.     </body>
  30. </html>

*Math:专门执行数学计算的对象

math：封装了数学计算中常用的常量

1.取整：3种

1.上取整 Math.ceil(n);

2.下取整 Math.floor(n)

3.四舍五入取整 Math.round(n)

函数Math.round()与n.toFixed(i小数位数)区别：

round是Math对象 只能取整 返回数字

toFixed Number对象 可以按任意小数位数四舍五入 返回字符

2.乘方/开方：

乘方：Math.pow(n,m):计算n的m次方

开方：Math.sqrt(n):计算n的平方根

3.获得最大值/最小值：

Math.max(a,b,c,d···········);

Math.min(a,b,c,d···········);

固定套路：

Math.max.apply(Math,arr);———->Math.max(arr[0],arr[1]···········)变现实现获取数组中的最大值

Math.min.apply(Math,arr);———->Math.min(arr[0],arr[1]···········)变现实现获取数组中的最小值

4.随机数：Math.random();

0<=n<1

任意min到max之间取一个随机整数

parseInt(Math.random()*(max-min+1)+min);

例子：随机生成验证码，并验证

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>随机城市验证码</title>
  6.         <script type="text/javascript">
  7.             var chars=[];
  8.             //将0-9存入数组
  9.             for(var c=48;c<=57;chars.push(String.fromCharCode(c++)));
  10.             for(var c=65;c<=90;chars.push(String.fromCharCode(c++)));
  11.             for(var c=97;c<=122;chars.push(String.fromCharCode(c++)));
  12. //            console.log(chars.length);//62
  13.             //专门生产一个4位的随机验证码
  14.             function getCode(){
  15.                 for(var i=0,arr=[];i<4;i++){
  16.                     var n=chars[parseInt(Math.random()*62)];
  17.                     arr.push(n);
  18.                 }
  19.                 return arr.join("");
  20.             }
  21.             function valiCode(){
  22.                 var code=getCode();
  23.                 var input="";
  24.                 while((input=prompt('请输入验证码:'+code).toUpperCase())!=code.toUpperCase()){
  25.                     alert("验证码输入错误"); 
  26.                     code=getCode();
  27.                 }
  28.                 document.write('<h1 style="color: green;">验证通过！</h1>');
  29.             }
  30.         </script>
  31.     </head>
  32.     <body>
  33.         <button οnclick="valiCode()">验证码</button>
  34.     </body>
  35. </html>

*Date:

Date：封装了一个时间点，提供了对时间和日期计算的API

Date：封装什么？从1997年1月1日0点0分0秒至今的毫秒数

创建Date对象：4种

1.var now=new Date(); //创建一个新日期对象，同时保持了当前时间点的毫秒数—————获得当前时间

2.var time=new Date(“xxxx/xx/xx [xx:xx:xx]“);

3.var time=new Date(年，月，日[时，分，秒]);

date.getTime():获得日期对象中的毫秒数

Date API：

1.每个分量都有一对get/set方法

getDay()获得星期，没有setDay()

2.命名：年月日星期，不加s

  1.          时分秒毫秒，加s
  3.          get/setFullYear()

3.返回值：月中的日取值范围从1开始到31结束

  1.           其余都是从0开始到减1结束

4.赋值日期时间

var date1=new Date();

var dates=new Date(date1.getTime());

  1.             //new Date(毫秒数)

date2.setXXX(date2.getXXX()+-n);

Date 计算：（2种）

1.两日期对象可直接相减，结果毫秒差

2.对任意分量做加减：先get出来，计算，在set回去

直接修改原日期对象

date.setXXX(date.getXXX()+-n)；

例子：计算合同到期时间，合同续签时间

  1. var hiredtime=new Date("2015/6/30");
  2.             var endtime=new Date(hiredtime.getTime());
  3.             endtime.setFullYear(endtime.getFullYear()+3);
  4.             console.log(endtime.toLocaleDateString());//输出合同到期日期
  5.             var renewal=new Date(endtime.getTime());
  6.             renewal.setMonth(renewal.getMonth()-1);
  7.             if(renewal.getDate()==6){
  8.                 renewal.setDate(renewal.getDate()-1);
  9.             }else if(renewal.getDate()==0){
  10.                 renewal.setDate(renewal.getDate()-2);
  11.             }
  12.             console.log(renewal.toLocaleDateString());//输出合同续签日期--合同到期前一个月
  13.             var remind=new Date(renewal.getTime());
  14.             remind.setDate(remind.getDay()-7);
  15.             console.log(remind.getDay());//续签之前提前一周发通知*/
  16.            //x个工作日之后

发表评论

表情：
评论列表 （有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读