您的位置：首页 > Web前端 > JavaScript

JavaScript基础知识总结

2015-05-12 16:23 357 查看

正则表达式：

是一种专门用于操作字符串规则。

正则表达式：

通过一些符号来表达，简化对字符串的复杂操作。

弊端：阅读性较差

常见操作：

1.匹配 String matches(regex)

2.获取（查找）:

Pattern , Matcher
Pattern p = pattern.compile(regex);
Matcher m = p.matcger(String);

while(m.find)
{
System.out.println(m.group());
}

3.切割: String split (regex);

4.替换: String replaceAll(regex,str);

实例：

String regex = "\\d{5,}";
Pattern p = Pattern.compile(regex);
Matcher m = p.matcher(String);

while(m.find())
{
String s = m.group();
s.replaceAll(regex,"#"); //替换为#
}

5.网页爬虫：

通过忘了以及IO读取网页的源文件，并通过规则获取网页中的符合规则的数据。

比如Mail爬虫。

Strint mailreg = "[a-zA-Z0-9_]{6,12}@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+";

正则表达式中组的含义：将部分进行封装以便重用。\\num反向引用制定组

-------------------------------------------------------------------------------

1.1javascript入门---函数

escape函数：

语法：escape(charstring) //charstring参数是要编码的string对象。

个人理解为对非ASCII字符都进行十六进制编码，例如“%20”。

字符值大于255的用%uxxx格式存储。

unescape函数：

语法：unescape(charstring)//charstring参数是要解码的string对象。

所有以%xx十六进制形式的编码都用字符ASCII字符集中等价的字符代替。

eval函数：

语法：eval(codestring)

codestring是有效的JS代码，这个字符串将有JS分析器进行分析和执行。

PS：eval允许JS源代码上动态执行。

例如，下面的代码创建了包含Date对象的新变量mydate:

eval("var mydate=new Date();");

传递给eval方法的代码执行时的上下文和调用eval的方法一样。

1.2javascript入门---自定义函数

可以创建自己的函数，用来需要的地方调用，一个函数定义由一个function和javascript代码组成

具体语法如下：

function 函数名()//无参函数

{

函数代码;

}

实例：

function add()

{

sum=1+2;

alert(sum);

}

定义好了，该如何调用呢？其实可以通过很多方法来进行调用。

这里用比较简单的方法---按钮的单击事件：

<html>
<head>
<title>JS的函数调用</title>
<script typt="text/javascript">
function add()
{
sum=1+2;
alert(sum);
}
</script>
</head>
<body>
<p>
<button value="sum" onclick="add()">点击按钮</button>
</p>
</body>
</html>

带参函数格式:

function 函数名(参数1，参数2，参数3...)

{

函数代码;

}

实例：

function add(x,y)
{
sum=x+y;
alert(sum);
}

x,y是add函数的两个参数，调用函数的时候，可以通过这两个参数把两个加数传递给函数。

例如：add(3,4) 会求3+4的和

具体实例如下:

<html>
<head>
<title>带参函数的调用方法</title>
<script type="text/javascript">
function add(x,y)
{
sum=x+y;
alert(sum);
}
</script>
</head>
<body>
<p>
<botton value="add" onclick="add(3,4)"></botton><!--输出的结果就会为：7-->
</p>
</body>>
</html>

2.1 常用对象

一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。

比如要设置网页的背景颜色，锁针对的对象就是document,所用的属性就是bgcolor,

即：document.bgcolor="blue",表示背景的颜色为蓝色。

2.1.1 字符串对象

1.转义字符串：

在JS中，有一些特殊的字符串对象，主要包括引号、回车符号、换行等等。下面列出这些字符串的常用方法：

双引号，\"

单引号,\'

反斜杠,\\

退格，\b

Tab,\t

换行，\n

回车，\r

走纸换页,\f

在编写JS中，通过反斜杠加上特殊字符就实现了特殊字符在页面中表现的方法

实例：

<html>
<head>
<title>转义字符的引用</title>
</head>
<body>
<p align="left">转义字符的引用</p>
<script type="text/javascript">
a="大哥\"我错了\"";
alert(a);
</script>
</body>
</html>

2.字符串对象的定义

var s="这是我的训练基地"；

定义了s之后，就有了一个字符串对象，可以访问他的长度属性(length),这个属性是不需要定义的

他是一个内置属性，访问的方式如下：

alert(s.length)

<html>
<head>
<title>length属性的使用</title>
</head>

<body>
<script type="text/javascript">
var s="这是我的训练基地";
alert(s.length);
</script>
</body>
</html>

3.字符串对象的方法

toUpperCase()方法

用法：将字符串转换为大写

code区域:

<script type="text/javascript">
var txt="hello,word!";
document.write(txt.toUpperCase());
</script>

oLowerCase()方法

用法：将字符串转换为小写

code区域：

<script type="text/javascript">
var txt="HELLO,WORD!";
document.write(txt.toLowerCase());
</script>

组合，同时输出大写和小写：

code区域：

<body>
<p align="left">转义的引用</p>
<script type="text/javascript">
yuju="THIS IS A DOG";
document.writeln("大写:")
document.writeln(yuju);
re=yuju.toLowerCase()
document.writeln("<br>小写："+re);
</script>
</body>

“+”加法

code：

<body>
<p align="left">转义的引用</p>
<script type="text/javascript">
a="我是XXX,";
b="我现在一年级了";
document.write(a+b);
</script>
</body>

2015年1月23日

CharAt

该方法从字符串中返回一个字符，这个方法应用的时候，通常会设置一个起始位置的参数，然后传回

位于该字符串对象位置的字符值。

在使用的时候字符串起始位置为0.

语句：

String.charat(index) //其中index表示返回的字符位置

code:

<script>
yuju="妈妈说好了";
cd=yuju.charAt(2);
alert(cd);
</script>

indexOf

该方法从一个特定的位置开始查找设置字符、返回一个字符或是字符串上的位置值，如果是在特定的位置

找不到用户设置的字符串对象，则返回-1，这在利用JS设置查找数据的格式化过程中非常有用，在后面的

综合部分，系统常利用该方法来检索和数据检验的工作。

其中的用法：

string1.indexof(string2.index)

其中string2表示需检索的字符串值，是必须的！index表示可选的整数参数，规定在字符串中开始检索的位置

它的合法取值是0~string1object.length-1

查找也是从0开始记位

code:

<script>
yuju="字符串对象";
cd="对象";
re=yuju.indexOf(cd);
document.write(re);
ls=yuju.indexOf(cd,5);//表示0-5的位置
document.write("<br>"+ls);
</script>

lastindexof

该方法和上面的方法使用一样，只是该方法从字符串对象尾部开始搜索。将上面的例子稍加改动即可体验：

PS：如果文中存在两个字符相同的，便会记录最后一个字符串的位置。

索引序列都是都是从左到右（起始值0）

indexof是从左向右查，而lastindexof是从右向左差

code:

<script>
yuju="字符串对象";
cd="字";
re=yuju.lastIndexOf(cd);
document.write("<br>"+re);
</script>

substring

该方法为字符串截取方法，在设置的时候一般会设置两个参数指定截取的位置，然后将两个参数间的字符串返回给

设置的变量。当两个变量相等的时候，就会返回一个空字符串。在涉及的运行中，一般可以不管参数的大小和前后

的位置，它截取的顺序都是从最小的参数开始，截取到最大的位置。如果没有指定最后的参数，系统默认截取末尾。

语法：

string.substring(start,stop)

其中，start必须有，是一个非负的整数，规定要提取的字符串的第一个字符在string的中位置，stop可选，是一个

非负数的整数，比要提取的字符串的最后一个字符在string中的位置多1，如果省略了返回的字符串会一直到末尾。

<script>
yuju="字符串对象";
cd="字";
re=yuju.substring(0,2);
document.write(re);
</script>

anchor

利用该方法在页面中创建和显示一个HTML超文本目标。在利用该方法的时候，必须在文档中建立一个锚点，然后调用write方法

在文档中写出该连接锚点，达到在页面中快速定位目的。

语法：

string.anchor(anchorname)

code:

<body>
<p align="left">字符的<a href="#aaa">引用</a></p>
<script>
zifu="this is achor"
aaa=zifu.anchor("aaa")
document.write(aaa);
zifu.anchor(a);
</script>
</body>

big

该方法将字符转换为大字体格式，在功能的实现上，与HTML的<big>一样，在页面中显示时，会将设置的字符串对象大号显示。

语法：

string.big(stringname)

code:

<body>
<p align="left">字符的引用</p>
<script>
zifu="您好";
document.write(zifu);
aaa=zifu.big("aaa");//个人理解为string为大多少stringname就为多少
document.write(aaa);
</script>
</body>

bold

该方法将设置文本粗体显示。在功能的实现中与HTML标签中的<b>相似。这些方法实质是JS格式的控制语言。

语法：

string.bold() //无参函数

code:

<body>
<p align="left">字符的引用</p>
<script>
zifu="您好";
document.write(zifu);
aaa=zifu.big("aaa");
document.write(aaa);
</script>
</body>

扩展：

<script>
aaa="字符的引用";
anc=aaa.bold();
document.write(anc);
anc1=aaa.italics();
document.write("<br>"+anc1);
anc2=aaa.sub();
document.write("<br>"+anc2);
anc3=aaa.sup();
document.write("<br>"+anc3);
anc4=aaa.fontsize(5);
document.write("<br>"+anc4);
anc5=aaa.fontcolor("blue");
document.write("<br>"+anc5);
</script>

2.2.1 Date对象

date对象保存从1970年1月1日0时0分0秒0毫秒记录时间的毫秒值。在JS中创建的语法有三种

1.无参函数

var dt=new date();

当使用这种方式创建的时候，日期对象保存是系统的当前时间。

2.通过值创建

var dt=new date(dateVal);

这种方式表示创建一个指定时间，dateVal可以是一个数字，也可以是一个字符串。如果是

数字，表示日期从1970年1月1日0时0分0秒0毫秒加上dataval；如果是字符串，如“2008-8-8”

也可以是d1=new data("8-8,2008 11:13:00"),表示指定的时间，当然使用这种方式必须符合

日期的格式。

3.通过多个参数创建

var dt=new date(year,month,date[,hours[,minutees[,seconds[,ms]]]]);

其中：

year：必须项，完整的年份，比如“1976”而不是“76”

month:必须项，表示月份，0~11之间的整数（0是一月，11是十二月）

date:必须项，表示日期，1~31之间的整数。

hours:可选，如果提供了minutes参数则必须给出。表示小时。0~23的整数（午夜到11PM）

minutes:可选，如果提供了millisecondds参数则必须给出。表示秒，0~59的整数。

ms：可选，表示毫秒，0~999的整数。

date对象常用方法可以分为三组，分别用于得到日期相应部分的值。

具体表见P57页。

code:

<body>
<script>
function disDate()
{
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
var ms=now.getMilliseconds();
var day=now.getDay();
var strDay="";
switch(day)
{
case 1:
strDay="星期一";break;
case 2:
strDay="星期二";break;
case 3:
strDay="星期三";break;
case 4:
strDay="星期四";break;
case 5:
strDay="星期五";break;
case 6:
strDay="星期六";break;
case 0:
strDay="星期日";break;
}
var nowStr=year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒"+strDay;
now.setFullYear(year+1);
var nextStr=now.toLocaleString();
alert("当前时间是:"+nowStr+"\n\n一年后的今天是:"+nextStr);
}
</script>
<input type="button" value="一年后的时间是？"  onclick="disDate()"/>
</body>

2.2.2 Math对象

Math对象用于复杂的计算，JS中Math对象常用属性如P60表格所示。与C语言相类似。

code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>math运用</title>
<script>
function math()
{
var r=prompt("请输入圆的半径：");
var zc=2*Math.PI*r;
var mj=Math.PI*Math.pow(r,2);
alert("圆的半径是"+r+"\n\n圆的周长是："+zc+"\n\n圆的面积是"+mj);
}

</script>
</head>

<body>
<input type="button" value="圆的周长和面积"  onclick="math()"/>
</body>

2.3 数组

数组就是某类数据的集合，数据类型额可以是整型、字符串，甚至是对象。

JS不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象）

所以数组可以通过互相嵌套的方式实现类似多维数组的功能。

1.定义数组

声明一个有10个元素的数组：

var a=new array(10);

此时系统为a已经开辟了内存空间，包含10个元素，用数组名称加 [下标]

来调用，如a[2]。此时元素并未初始化，调用将返回undefined。以下代码

定义了一个可变数组，并进行了赋值：

var a=new array();
a[0]=100;
a[1]="baaa";
a[2]=19.6;

上面提到过了，数组里面放对象，例如：

a[0]=true;
a[1]=document.getElementById("book");
a[2]={x:11,y:22};

数组可以在实例化的时候直接赋值，例如：

var a=new Array(0,9,8,7,6);
var b=[0,9,8,7,6];

a和b都是数组，只不过b用了隐形声明，创建了另一个实例，此时，如果用

alert(a==b),将弹出flase.

2.多维数组

其实JS是不支持多维数组的，即如果使用var a=new array(10,3),将报错。但

数组里面可以包含对象，所以可以把数组里面的某个元素再声明为数组，例如：

var a=new Array();
a[0]= new Array();
a[0][0]=10;
alert(a[0][0]);//弹出10；

声明的时候赋值：

var a=new array([1,2,3,],[4,5,6,],[7,8,9]);

var b=[[1,2,3,],[4,5,6],[7,8,9]];

效果一样，a采用常规实例化，b是隐形声明，结果都是生成一个多维数组。

3.Array Literals

说道数组，不得不说Array Literals，数组其实是特殊对象，对象有特有属性

和方法，通过对象名.属性、对象.方法()来取值调用，而数组是通过下标来取值的

Array Literals跟数组有很多很多相似的地方，即都是某数据类型的集合，但是Array Literals

从根本上来说，是个对象，声明和调用，跟数组是有区别的。

var aa==new Object();
aa.x="dog";
aa.y="win";
alert(aa.x); //弹出dog

创建一个简单的对象，一般调用是通过aa.x，而如果当成Array Literals的话，用alert(aa["x"])

一样会弹出cat.

var a={x:"cat",y:"win"};
alert(a["y"]);//一样弹出win

这是另一种创建对象的方法，结果是一样的。

4.数组元素的操作

上面已经说过，可以通过"数组[下标]"来读写元素，当下标是负数，浮点甚至布尔值的时候，数组

会自动转换为对象类型，例如：

var b=new Array();
b[2.2]="XXXXXX";
alert(b[2.2]);

此时相当于b["2.2"]="XXXXXXXXXX"

5.数组的循环

var a=[1,2,3,4,5,6];
for(var i=0;i<=a.legth;i++)
{
alert(a[i]);
}

这是最常用的，遍历数组，代码将依次弹出，1~6，还有另外一种常用的：

var a=[1,2,3,4,5,6];
for(var e in a)
{
alert(a[e]);
}

还是依次弹出1~6，for-in是遍历对象（数组是特殊的对象）在数组上，因为

数组没有属性名，所以直接输出值，这种结构语句用在对象上，例如：

var a={x:1,y:2,z:3};
for(var e in a)
{
alert(e+":"+a[e]);
}

输出的结果为: x:1 y:2 z:3。此时e取到的属性名，即x/y/z，而要取得值，

则采用数组名[属性],所以a[e]等同于a["x"]/a["y"]/a["z"].

6.数组常用函数

concat

在现有数组后面追加数组，并返回新数组，不会影响现有数组。

var a=[1,2,3];
var b="sunnycat";
var c=["www",21,"ido"];
var d={x:3.14,y:"SK"};
var e=[1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));//输出123，sunnycat
alert(a);   //输出123
alert(b.concat(c,d));//输出sunnycatwww,21,ido[object Object]
alert(c.cont(b));//输出www,21,ido,sunnycat

需要注意的是该函数只能用于数组或字符串，如果被连接(前面的a)是数值、

布尔值、对象，就会报错，字符串连接数组时，字符串会跟着数组元素拼接成

新元素，而数组连接字符串则会追加新元素（这点我也不清楚原委，知情者请透露）

对于数组里面包含数组、对象的，连接后保持原样。

jion

用指定间隔符连起来，把数组转为字符串，比如在上例中加入：

注意：只转换一维数组，如果数组里面还有数组，里面的数组将采用join连接。

而是采用默认的toString(),数组里面的数组，并没有*号连接。

alert(e.concat(11,22,33).jion("*"));

pop

删除数组最后一个元素，并返回该元素。

var a=["dd","b","cc"];
document.write(a.pop()); //输出cc
cocument.write(a);//输出dd,bb

如果数组为空，则返回undefined.

push

往数组后面添加元素，并返回新的长度。影响原来的数组

<script>
var a=["aa","bb","cc"];
alert(a.push("ee"));//返回4
document.write(a);//aa.bb.cc.ee
document.write("<br>"+a.push([1,2,3]));//返回5
document.write(a);//输出aa,bb,cc,ee,1,2,3;
</script>

跟concat的区别在于，concat不影响原来的数组，直接返回新数组，而push

则直接修改了原数组，返回的数组新长度。

sort

数组排序

先看个例子：

code:

var a=[11,22,36,544,2655,5454,2,54];
alert(a.sort());

结果很意外，并不是按照从小到到大来排序的

其实是按照ASCLL码来对比的，取第一个数的ASCLL码值，然后再进行排序。

如果需要排序，this is:

var a=[12545,212,65454,6577,12,263,54];
a.sort(function (a,b)
{
return a-b;
});
alert(a);

ort()方法有个可选参数，就是代码里的function，这是一个简单的例子，

不可对非数字进行排序，非数字需要做很多判断，这里就先不讲了。

reverse

对数组进行反向排序，跟sort()一样，对字符的ASCLL值比较。

var a=[11,3,5,66,4];

alert(a.reverse());

如果数组里面还包含数组，则当做对象处理，并不会把元素一个个列出来做比较。

<script>
var a=['a','b','c','d','e','f','g',[4,11,45]];
alert(a.reverse());
alert(a.join("*"));//所以说单独把4,11,45当作了一个对象。
</script>

shift

删除第一个元素，并返回该元素，与POP相近

POP是删除最后一个元素，并返回。

shift是删除第一个元素，并返回。

var a=["aa","bb","cc"];
alert(a.shift());//返回aa
document.write(a);//返回bb,bb

当数组为空时，返回undefined.

unshift

跟shift相反，在数组最前面添加元素，并返回新长度。

<script>
var a=["a","b","c","d"];
document.write(a.unshift("aa"));//IR下返回undefined。
document.write("<br>"+a);
</script>

注意该方法，在IE下将返回undefined，这是微软的BUG，在FF下正确显示。

slice

返回数组片段

<script>
var a=['a','b','c','d','e','f','g'];
alert(a.slice(1,2));
alert(a.slice(2));
alert(a.slice(-4));
alert(a.slice(-2,-6));//因为是往后截取，所以截取不到-6的值。-6，-2可截取。
</script>

a.slice(1,2)表示从下标1开始，到下标2之间的数，注意，并不包括下标为2的数。

如果参数中只有一个数值，则从数值开始到最后，并返回数值。

如果参数的数值截取范围不存在，则返回“空”.

splice

从数组中删除某片段的元素，并返回删除的元素。

splice函数内有2个参数，第一个参数是：要删除的第一项位置。

第二个参数是：要删除的项数。(不填默认为0)

当然splice函数内也可以有3个参数：

第一个参数是：起始位置

第二个参数是：删除的项数

第三个参数是：要加入的项

a.splice(3,2);//就是要删除第三项开始的2个数

a.splice(1,1,["aa","bb","cc"]);//参数第一项的一个数，并且加入aa,bb,cc

code:

<script>
var a=[1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2)+"<br>");
document.write(a+"<br>");
document.write(a.splice(4)+"<br>");
document.write(a+"<br>");
document.write(a.splice(0,1)+"<br>");
document.write(a+"<br>");
document.write(a.splice(1,1,["aa","bb","cc"])+"<br>");
document.write(a+"<br>");
document.write(a.splice(1,2,"ee").join("#")+"<br>");
document.write(a+"<br>");
document.write(a.splice(1,2,"cc","aa","tt").join("#")+"<br>");
document.write(a+"<br>");
</script>

注意该方法，第二个参数是必须的，不填则默认为0，

例如：a.splice(4),在IE下则返回空，效果同等于a.splice(4,0)

toString

把数组转为字符串，不只数组，所有对象均可以使用该方法。

<script>
var a=[5,6,7,8,9,["A","B"],100];
document.write(a.toString());//输出5,6,7,8,9,A,B,100
var b=new Date;
document.write("<br>"+b.toString());//输出当前时间
var c=function (c){
alert(s)
}
document.write("<br>"+c.toString());//输出function (s){alert(s);}
</script>

布尔值则返回true或flase,对象则返回[objece objectname]。与join()方法

相比，join()只对一维数组进行替换，而toString()则把整个数组(不管一维数组还是多维数组)

完全平面化。同时该方法可用于十进制、二进制、十六进制转换，例如：

<script>
var a=[5,6,7,8,9,"A","B",100];
for(var i=0;i<a.length;i++)
{
document.write(a[i].toString()+"的二进制是:"+a[i].toString(2)+",八进制是："+
a[i].toString(8)+",十六进制是："+a[i].toString(16)+"<br>");
}
</script>

转换只能对元素进行，如果对整个数组进行转换，则原封不动返回该数组。

toLocaleString

返回本地格式字符串，主要用于Date对象上。

<script>
var a=new Date;
document.write(a.toString()+"<br>");
document.write(a.toLocaleString()+"<br>");
document.write(a.toLocaleDateString());
</script>

区别在于，toString()返回标准格式，toLocaleString()返回本地格式完整日期

（在【控制面板】-【区域和语言选项】下，通过修改【时间】和【长日期】格式）

toLocaleDateString()与toLocaleString()一样，只是少了时间。

valueOf

根据不同对象返回不用原始值，用于输出的话跟toString()差不多，但是toString()

是返回时间,String类型，而valueOf()是返回原对象类型。

<script>
var a=[1,2,3,[4,5,6,[7,8,9]]];
var b=new Date;
var c=true;
var d=function(){
alert("sunnycat");
}
document.write(a.valueOf()+"<br>");//输出1，2，3，4，5，6，7，9
document.write(typeof(a.valueOf())+"<br>");//输出object
document.write(b.valueOf()+"<br>");//1422598044102（随着时间变化）
document.write(typeof(b.valueOf())+"<br>");//number
document.write(c.valueOf()+"<br>");//true
document.write(typeof(c.valueOf())+"<br>");//boolean
document.write(d.valueOf()+"<br>");//function(){alert("sunnycat");}
document.write(typeof(d.valueOf())+"<br>");//function
</script>

数组也是对象，所以"typeOf(a.valueOf())",返回object,返回的依然是个多维数组。

<script>
var a=[1,2,3,[4,5,6,[7,8,9]]];
var aa=a.valueOf();
document.write(aa[3][3][1]);//返回8
</script>

Date对象返回的是距离1970年1月1日的毫秒参数，Math和Error对象没有valueOf()方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航