学会JavaScript这一篇就够了~

文章目录


开头引言:我所使用的编译环境是WebStorm 2019.3.1 x64

【One】 JavaScript语言基础

一、数据类型

JavaScript的数据类型分为基本数据类型和复合数据类型。

1、数值型

数值型(number)是最基本的数据类型,和其他程序设计语言的不同之处在于,它不区分整形数值和浮点型数值,在JavaScript中,所有的数值都是由浮点型表示的。

数值型包括以下几种类型:

  • 十进制:以10为基数,由0~9组成的数字序列
  • 八进制:以8为基数、由0~7组成的序列
  • 十六进制:以16为基数、由0~9、a(A) ~ f(F)组成的序列
  • 浮点型数据:可以具有小数点,它可以由传统计数法(例如:1.234)和科学计数法(例如:6e+3)表示
  • 特殊值InfInity:特殊的值Infinity(无穷大),如果一个数值超出了JavaScript表示的最大或最小值表示的范为,就会输出Infinty-Infinty
  • 特殊值NaN:Not a Number,即非数字,在进行数值运算时,产生了未知的结果或错误,就会返回NaN

以下的代码总结了以上几种类型的使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数值型数据</title>
</head>
<body>
    <script type="text/javascript">
        document.write("RGB颜色的#6699FF的三种颜色的色值分别为:");
        document.write("<p>R:"+0x66);
        document.write("<br>G:"+0x99);
        document.write("<br>B:"+0xFF);
        document.write("<hr>");
        document.write("输出房屋的单价、面积和总价:");
        var dj=8500;var mj=80;
        document.write("房屋单价:"+dj);
        document.write("<br>房屋面积:"+mj);
        document.write("<br>房屋总价:"+(dj*mj)+"元");
        document.write("<hr>");
        document.write("科学计数法表示的浮点数的输出结果:");
        document.write("<p>");
        document.write(3e+6 + "<br>");
        document.write(3.5e3 + "<br>");
        document.write(1.236E-2);
        document.write("<hr>");
        document.write("特殊值Infinity<br>");
        document.write(1/0);
        document.write("<br>"+-1/0);
        document.write("<hr>");
        document.write("特殊值NaN<br>");
        document.write(0/0);
    </script>
</body>
</html>

大功告成!看一下效果:
在这里插入图片描述

2、字符串型

字符串(string)是由0个或多个字符组成的序列,它可以包含大小写字母、数字、标点符号或其他字符,同时也可以包含汉字。字符型的数据包含在单引号或双引号中,由单引号定界的字符串中可以含有双引号,同样由双引号定界的字符串可以包含单引号。

有的时候,字符串中使用的引号会产生匹配混乱的问题,例如:

"字符串是包含在单引号'或双引号"中的"

对于这种情况,必须使用转义字符,和C语言一样,JavaScript中的转义字符是\通过转义字符可以在字符串中添加不可显示的特殊字符,或者防止引号匹配混乱的问题。如上面的例子,可以这样写:

"字符串是包含在单引号\'或双引号\"中的"

下表列出了JavaScript中常用的转义字符:

转义字符 描述 转义字符 描述
\b 退格 \v 垂直制表符
\n 换行 \r 回车符
\t 水平制表符,Tab空格 \\ 反斜杠
\f 换页 \OOO 八进制整数,范围000~777
\' 单引号 \xHH 十六进制整数
\" 双引号 \uhhhh 十六进制编码的Unicode字符

alert语句中使用转义字符\n的代码如下:

alert("Web:\nHTML\nCSS\nJavaScript");

效果图:
在这里插入图片描述
但是在document.write()中使用转义字符时,只有将其放在格式化文本块中才会起作用,所以脚本必须放在<pre></pre>的标记内。例如:

document.write("<pre>Hello\nJavaScript</pre>");

效果如下:
在这里插入图片描述

3、布尔型

布尔型的值只有,即truefalse,它通常在JavaScript程序中用来作为比较后的所得的结果,通常用于控制结构,例如:

if(n==1)		//如果这个值为真,m加一
	m = m+1;
else			//否则,n加一
	n = n+1;

二、常量和变量

每一种计算机语言都有自己的数据结构。在JavaScript种,常量和变量时数据结构的重要组成部分。

1、常量

常量是指在程序运行过程种保持不变的数据。例如,123是数值型常量,”JavaScript脚本“是字符串型常量。

2、变量——例子:输出球员的信息

变量是指一个已经命名的存储单元,它的作用就是为数据操作提供存放信息的容器。变量的值可能会随着程序的执行而改变。

变量有两个基本特征:变量名和变量值。变量名的命名规则是必须以字母或下划线开头,其他字符可以数字、字母或下划线,不能与关键字重名,不能包含空格、加号或减号等其他字符。变量的名字严格区分大小写。

JavaScript的变量可以任意命名,但在进行编程的时候,最好还是遵守匈利亚命名规范,起一个便于记忆,且有意义的变量名称,增加程序的可读性。

变量的声明:

由关键字var声明,语法格式如下:

var name;
var a,b,c;			//同时声明a,b,c三个变量

变量的赋值:

var Blog = "学会JavaScript这一篇就够了~";		//声明变量并进行初始化赋值

注意:

  • 如果只是声明了变量,并未对其赋值,则其默认值为undefined
  • 可以使用var语句重复声明同一个变量,也可以在重复声明变量时为该变量赋一个新值,新值会覆盖前一个赋的值

变量的类型:

变量的类型是指变量的值所属的数据类型,它可以时数值型、字符串型或布尔型等,因为JavaScript是一种弱类型的程序语言,所以可以把任意类型的数据赋值给变量。比如:

var num = 100 ;		//定义数值型变量
num = "JavaScript这一篇就够了~";		//定义字符串型变量

例子:输出球员的信息

直接上代码,将科比的信息都存储在了变量里面:

<h1 style="font-size: 24px;">科比·布莱恩特</h1>
<script type="text/javascript">
    var alias="小飞侠";        //定义别名变量
    var height = 198;         //定义身高变量
    var score = 33643;        //定义总得分变量
    var achievment="五届NBA总冠军";      //定义主要成就变量
    var position="得分后卫/小前锋";      //定义场上位置变量
    document.write("别名:"+alias+"<br>");     //输出
    document.write("身高:"+height+"厘米<br>");
    document.write("总得分:"+score+"分<br>");
    document.write("主要成就:"+achievment+"<br>");
    document.write("场上位置:"+position+"<br>");
</script>

大功告成,看一下效果:
在这里插入图片描述

三、运算符

运算符也称为操作符,它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而生成一个新的值,对齐进行计算的值称为操作数,操作数可以是常量或变量。

1、算术运算符——例子:将华氏度转换为摄氏度

算术运算符用于在程序种进行加、减、乘、除等运算,下标列出了JavaScript常用的算术运算符:

运算符 描述 示例
+ 加法运算符 4+6 //返回值为10
- 减法运算符 7-2 //返回值为5
* 乘法运算符 7*3 //返回值为21
/ 除法运算符 12/3 //返回值为4
% 求模运算符 7%4 //返回值为3
++ 自增运算符 x=1;y=x++;z=++x; // y的值为1,z的值为3,x的值为4
-- 自减运算符 x=6;y=x–;y=–x; // y的值为6,z的值为4,x的值为4

例子:将华氏度转换为摄氏度

直接上代码:

<h2>西红市当前气温</h2>
<script type="text/javascript">
    var degreeF = 68;       //定义表示华氏温度
    var degreeC = 0;        //定义表示摄氏度
    degreeC=5/9*(degreeF-32);   //运算
    document.write("华氏度:"+degreeF+"&deg;F <br>");
    document.write("摄氏度:"+degreeC+"&deg;C");
</script>

大功告成,看一下效果:
在这里插入图片描述

2、字符串运算符——例子:显示票房信息

字符串运算符是用于两个字符串数据之前的运算符,它的作用是将两个字符串拼接起来。如下表所示:

运算符 描述 示例
+ 连接两个字符串 "学会JavaScript"+"这一篇就够了~"
+= 连接两个字符串并将结果赋给第一个字符串 var name="学会JavaScript"; name+="这一篇就够了";

例子:显示票房信息

<script type="text/javascript">
     var movieName,director,type,actor,boxOffice;     //声明变量
     movieName="美人鱼";director="周星驰";
     type="喜剧、爱情、科幻";actor="邓超、林允";
     boxOffice=33.9;
     alert("影片名称:"+movieName+"\n导演:"+director+"\n类型:"+
     type+"\n主演:"+actor+"\n票房:"+boxOffice+"亿");
 </script>

大功告成,效果如下:
在这里插入图片描述

3、比较运算符——例子:比较两个数值的大小

下表是JavaScript种常用的比较运算符:

运算符 描述 示例
< 小于 1<6 返回值为false
> 大于 7>10 返回值为false
<= 小于等于 10<=10 返回值为true
>= 大于等于 3>=6 返回值为false
== 等于。只根据表面值进行判断,不涉及数据类型 “17”==17 返回值为true
=== 绝对等于。根据表面值和数据类型同时进行判断 “17”===17 返回值为false
!= 不等于。只根据表面值进行判断,不涉及数据类型 “17”!=17 返回值为false
!== 绝对不等于。根据表面值和数据类型同时进行判断 “17”!==17返回值为true

例子:比较两个数值的大小

直接写代码:

<script type="text/javascript">
    var age=25;
    document.write("age变量的值为:"+age+"<p>");
    document.write("age>20:");
    document.write(age>20);
    document.write("<br> age<20:");
    document.write(age<20);
    document.write("<br>age==20:");
    document.write(age==20);
</script>

大功告成!看一下效果:
在这里插入图片描述

4、赋值运算符

下表给出了赋值运算符:

运算符 描述 示例
= 将右边表达式的值赋值给左边的变量 Name = “wzq”
+= 将运算符左边的变量加上右边表达式的变量赋值给左边的变量 a += b
-= 将运算符左边的变量减去右边表达式的变量赋值给左边的变量 a -= b
*= 将运算符左边的变量乘上右边表达式的变量赋值给左边的变量 a *= b
/= 将运算符左边的变量除以右边表达式的变量赋值给左边的变量 a /= b
%= 将运算符左边的变量用右边的表达式求模,并将结果赋给左边的变量 a %= b

5、逻辑运算符

逻辑运算符用于对一个或多个布尔值进行逻辑运算,和C语言一样,由与或非组成。

运算符 1 逻辑 1 1 逻辑 0 0 逻辑 1 0 逻辑 0
&& true false false false
|| true true true false

关于非!运算,非真即为假,非假即为真

6、条件运算符

即为三目运算符,语法格式如下:

表达式?结果1:结果2;

例如:

var a=10,b=10;
alert(a==b?"相等":"不相等");

结果弹出对话框,输出相等

7、其他运算符

逗号运算符: 逗号运算符用于将多个表达式排在一起,而整个表达式的值为最后一个表达式的值。例如:

var a,b,c,d;
a=(b=3,c=5,d=6);
alert("a的值为"+a);

输出a的值为6

typeof运算符: 用于判断一个操作数的数据类型,它可以返回一个字符串,该字符串的说明了操作数是什么数据类型。这对于判断一个变量是否已被定义特别关键。语法格式如下:

typeof 操作数

下表为不同数据类型使用typeof运算符的返回值

数据类型 返回值 数据类型 返回值
数值 number null object
字符串 string 对象 object
布尔值 boolean 函数 object
undefined undefined

new运算符: 在JavaScript种有很多内置对象,通过new运算符可以用来创建一个新的内置对象实例,语法如下:

对象实例名称 = new 对象类型(参数)
对象实例名称 = new 对象类型

8、运算符优先级

JavaScript运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算,下图展示了运算符的优先级:
在这里插入图片描述


【Two】JavaScript基本语句

一、条件判断语句

ifif…elseif…else ifswitch等语句,用于判断

1、if 语句——例子:输出考试等级

简单if语句, 格式如下:

if(表达式){
	语句
}

执行流程图:
在这里插入图片描述
if…else语句 ,语法格式如下:

if(表达式){
	语句1
}else{
	语句2
}

执行过程流程图如下:
在这里插入图片描述
if…else if语句,语法格式如下:

if(表达式1){
	语句1
}
else if(表达式2){
	语句2
}
else{
	语句3
}

执行过程流程图如下:
在这里插入图片描述
例子:输出考试成绩对应的等级

比较简单,直接上代码:

<script type="text/javascript">
    var grade="";
    var score=85;
    if(score>=90) grade="优秀";
    else if(score>=75) grade="良好";
    else if(score>=60) grade="及格";
    else grade="不及格";
    alert("周星星的考试成绩"+grade);
</script>

效果如下:
在这里插入图片描述

2、switch语句——例子:输出奖项及奖品

多路分支语句,其语法格式如下:

switch(表达式){
	case 常量表达式1:
		语句1;
		break;
	case 常量表达式2:
		语句2;
		break;
	……
	case 常量表达式n:
		语句n;
		break;
	default:
		语句n+1;
		break;
}

执行过程流程图如下:
在这里插入图片描述
例子:输出奖项级别及奖品

过程简单,直接上代码:

<script type="text/javascript">
    var grade="",prize="";
    var code=3;
    switch (code) {
        case 1:
            grade="一等奖";
            prize="博主一人";
            break;
        case 2:
            grade="二等奖";
            prize="博主室友二人";
            break;
        case 3:
            grade="三等奖";
            prize="天然足球场西北风五斤";
            break;
        default:
            grade="安慰奖";
            prize="天然足球场西北风一斤";
            break;
    }
    alert("该员工获得了"+grade+"\n奖品是"+prize);
</script>

在这里插入图片描述

二、循环语句

whiledo…whilefor语句

1、循环基本语句while、do…while、for、循环的嵌套

while语句 ,语法格式如下:

while(表达式){
	语句
}

执行过程流程图:
在这里插入图片描述
do…while语句 ,语法格式如下:

do{
	语句
}while(表达式);

执行过程流程图如下图所示:
在这里插入图片描述
for语句,语法格式如下:

for(初始化表达式;条件表达式;迭代表达式){
	语句
}

执行过程流程图:
在这里插入图片描述
例子:计算100以内的所有奇数之和

过程简单,直接上代码:

<script type="text/javascript">
    var i=0,sum=0;
    for(i=1;i<100;i++)
        if(i%2!=0)
            sum+=i;
    alert("100以内的所有奇数之和为:"+sum);
</script>

效果如下:
在这里插入图片描述
当然,循环语句也可以进行嵌套,在一个循环里面嵌套一个循环就实现了嵌套,下面通过输出九九乘法口诀表展示嵌套的使用

过程简单,代码如下:

<h1>输出乘法口诀表</h1>
<script type="text/javascript">
    var i,j;
    for(i=1;i<10;i++){
        for(j=1;j<=i;j++)
            document.write(j+"x"+i+"="+j*i+"&nbsp;&nbsp;");
        document.write("<br>");
    }
</script>

效果如下:
在这里插入图片描述

2、循环控制语句break和continue

continue语句用于跳过本次循环,并开始下一次循环,其语法格式如下:

continue;

例如,在for语句中通过continue语句输出10以内不包括5的自然数的代码如下:

var i;
for(i = 1 ; i <= 10 ; i ++ ){
	if(i==5) continue;
	document.write(i+"\n");
}

break语句用与,跳出循环,并开始执行下一调语句,其语法格式如下:

break;

例如,在for语句中通过break语句找到第一个能被5和3整除的数字

var i;
for(i = 1 ; i <= 10 ; i ++ ){
	if(i%3==0&&i%5==0)
		break;
document.write("i="+i);
}

三、异常处理语句

JavaScript的异常处理语句是从Java移植过来的,用于处理程序中出现的莫名其妙的错误,增加了代码的健壮性。

1、try…catch…finally语句

具体语法格式如下:

try{
	somestatements;
}catch(exception){
	somestatements;
}finally{
	somestatements;
}

参数说明:

  • try:尝试执行代码的关键字
  • catch:捕捉异常的关键字
  • finally:最终一定会被处理的代码的关键字,该关键字和后面的大括号中的语句可以省略

例如, 当在程序中输入了不正确的方法名charat时,将弹出catch区域中的异常提示信息,并且最终弹出finally区域中的信息提示。程序如下:

<script type="text/javascript">
    var str="I like JavaScript";
    try {
        document.write(str.charat(5));
    }catch (exception) {
        alert("运行时有异常发生");
    }finally {
        alert("结束try…catch…finally语句");
    }
</script>

在这里插入图片描述

2、Error对象

try…catch…finally语句中的catch通常捕捉的对象为Error对象,当运行JavaScript代码时,如果产生了错误或异常,JS就会生成一个Error对象的实例来描述错误,该实例中包含了一些特定的错误信息。

Error对象有以下两个属性:

  • name:表示异常类型的字符串
  • message:实际的异常信息

例如:

<script type="text/javascript">
    var str="I like JavaScript";
    try {
        document.write(str.charat(5));
    }catch (exception) {
        alert("实际的错误消息为:"+exception.message+"\n错误的类型字符串为:"+exception.name);
    }finally {
        alert("结束try…catch…finally语句");
    }
</script>

如下图所示:
在这里插入图片描述

3、使用throw语句抛出异常

有些JavaScript代码并没有语法上的错误,但存在逻辑错误。对于这种错误,JS不会抛出异常,这样就需要创建一个Error对象的实例,并使用throw来抛出异常。在程序中使用throw语句可以有目的地抛出异常。

语法格式如下:

throw new Error("somestatements");

例如,除数为0时的情况:

程序如下:

<script type="text/javascript">
    try{
        var num=1/0;
        if(num=="Infinity")
            throw new Error("除数不可以为0");
    }catch (e) {
        alert(e.message);
    }
</script>

效果如下:
在这里插入图片描述


【Three】函数

函数就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁、提高重用性。

一、函数的定义和调用

1、函数的定义

JavaScript中,可以使用function语句来定义一个函数。这种形式是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码构成的。语法格式如下:

function 函数名([参数1,参数2,……]){
	语句
	[return 返回值]
}

参数说明:

  • 函数名:必选,函数名必须是唯一的,并且命名必须区分大小写
  • 参数:可选,用于指定参数列表,多个参数时候,中间必须用,间隔,最多不可以超过255个参数
  • 语句:必选,函数体的内容,用于实现函数的功能的语句。
  • 返回值:可选,用于返回函数值。返回值可以是表达式、变量或常量

例如定义一个计算价格的函数:

function account(price,number){
	var sum = price*number;
	return sum;
}

2、函数的调用

函数需要调用才会执行,要执行一个函数需要在特定的位置调用函数。

(1)函数的简单调用

语法如下:

函数名(传递给函数的参数1,传递给函数的参数2,……);

函数的定义语句通常被放在HTML文件的<head>段中,函数的调用可以放在HTML文件中的任何一个位置。

例如定义一个函数OutputImage(),这个函数的功能是在页面中输出一张图片,然后通过函数的调用这个函数实现图片的输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用函数输出一张图片</title>
    <script type="text/javascript">
        function OutputImage() {
            document.write("<img src='1.jpg'>");	//图片需要拖到项目文件夹内
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        OutputImage();
    </script>
</body>
</html>

效果如下:
在这里插入图片描述

(4)在事件响应中调用函数

当用户单击某个按钮或某个复选框时都将触发事件。

例如,当用户单击某个按钮时执行相应的函数,可以使用如下单吗实现该功能:

函数:

        function test() {
            alert("我喜欢JavaScript");
        }

调用:

<form action="" method="post" name="form1">
    <input type="button" value="提交" onclick="test()">
<!--    在事件触发时调用自定义函数-->
</form>

效果如下:
在这里插入图片描述

(3)通过连接调用函数

函数除了可以在响应事件中被调用之外,还可以在连接中被调用。在<a>标记中的href属性中使用javascript: 函数名()格式来调用函数,当用户点击这个连接时,相关函数会被执行。

格式:

<a href="javascript:test();">单击连接</a>

二、函数的参数——例子:输出图书的名称和作者

在定义函数时,将指定的参数称为形式参数,简称为形参;而将调用函数时实际传递的值称为实际参数,简称实参。在JS中定义函数参数的格式如下:

function 函数名(形参1,形参2,……){
	函数体
}

调用的格式:

函数名(实参1,实参2,……);

例子:输出图书的名称和作者

<head>里面代码如下:

    <script type="text/javascript">
        function show(BookName,author) {
            alert("图书名称:"+BookName+"\n图书作者:"+author);
        }
    </script>

<body>里面:

<script type="text/javascript">
    show("射雕英雄传","金庸");
</script>

效果如下:
在这里插入图片描述

三、函数的返回值——例子:计算购物车中商品总价

对于函数调用,既可以通过参数向函数传递数据,函数也可以返回数据,即返回值,语法格式如下:

return 表达式;

这条语句作用是结束函数,并把后面的表达式的值作为函数的返回值。

例如:计算购物车中商品总价

<head>标签内:

    <script type="text/javascript">
        function price(unitPrice,number) {
            var total = unitPrice*number;
            return total;
        }
    </script>

<body>标签内:

<script type="text/javascript">
    alert("总价:"+price(5000,2));
</script>

效果如下:
在这里插入图片描述

四、嵌套函数

嵌套函数就是指在一个函数的函数体中使用了其他的函数。嵌套函数的使用包括函数的嵌套定义和函数的嵌套调用。

1、函数的嵌套定义

函数的嵌套定义是指:在某个函数内,再定义别的函数,语法格式如下:

function outFun(){
		function inFun(x,y){
			alert(x+y);
		}
		inFun(1,5);
}
outFun();

如上面的例子,执行outFun()函数,然后调用了嵌套的函数inFun(1,5)传递了两个参数,计算两个数的和,最后把和弹到页面上。

2、函数的嵌套调用——例子:获取选手的平均分

JS中,允许在一个函数的函数体中对一个函数进行调用,这就是函数得递归调用,例如:

function a(){
	alert("调用函数a");
}
function b(){
	a();
}
b();

在函数b中对函数a调用最后输出。

看一个例子——获取选手的平均分。

过程简单,直接上代码:

<script type="text/javascript">
    function getAver(score1,score2,score3) {
        return (score1+score2+score3)/3;
    }
    function getRes(score1,score2,score3) {
        document.write("3个评委给出的分数分别为:"+score1+"分、"
        +score2+"分、"+score3+"分<br>");
        var res = getAver(score1,score2,score3);
        document.write("周星星的最后得分为:"+res+"分");
    }
    getRes(91,89,93);
</script>

效果如下:
在这里插入图片描述

五、递归函数

所谓递归就是函数自己调用自己,一般的语法格式如下:

function 函数名(参数1){
	if(终止条件) return 常量;
	函数名(参数2);
}

递归的调用,最为经典的例子,就是斐波那契数列的运用,也就是大家耳熟能详的兔子繁殖问题。斐波那契数列的前两项等于1,从第三项开始的值等于前两项值的和。直接来看一下代码:

<script type="text/javascript">
    function f(n) {
        if(n==1||n==2) return 1;
        return f(n-1)+f(n-2);
    }
    var i;
    for(i = 1 ; i <= 10 ; i ++ )
        document.write("第"+i+"项斐波那契数列的值为:"+f(i)+"<br>");
</script>

效果如下:
在这里插入图片描述
使用递归可以帮助我们做很多很多事情、比如用dfs(深度优先搜索)走一个迷宫、TarJan算法等等。但是递归必须包含一个结束递归的条件,否则他会一直走一下,直到程序崩溃;还需要包含一个递归调用语句,没有递归的调用哪里来的递归是不是。

六、变量的作用域

变量的作用域指的是变量在程序中的有效范围,即在有效范围内可以使用该变量。

1、全局变量和局部变量

所谓全局变量指的是:定义在所有函数之外的变量,调用函数无需传参即可使用。

局部变量指的是:定义在函数体内的变量,只在函数外部起到了作用,函数之外不可调用。

比如下面的代码:

var a="这是全局变量";
function send(){
	var b="这是局部变量";
	document.write(a+"<br>"+b);
}
send();

上述代码中,局部变量b只在函数send内起作用,全局变量a在全局都起作用,都可以调用。

2、变量的优先级

如果上面的代码,变量a在函数内又被定义了一次,那么优先执行函数体内的变量。比如:

var a = "这是全局变量";
function send(){
	var a = "这是局部变量";
	document.write(a);
}
send();

最后输出这是局部变量

七、内置函数

JS中,除了可以自定义函数之外,还可以使用JS的内置函数,这些内置函数是由JS自身提供的函数,下面来一些主要的内置函数吧~

1、数值的处理函数

下表列出了主要的常用的一些数值处理函数

函数 说明
parseInt() 将字符型转换为整型
parseFloat() 将字符型转换为浮点型
isNaN() 判断一个数值是否为NaN
isFinite() 判断一个数值是否有限

接下来逐个看一下这些内置函数:

(1)parseInt()函数

该函数用于将首位为数字的字符串转换成数字,如果该字符串不是以数字开头,那么将返回NaN,语法格式如下:

parseInt(string,[n]);

参数说明:

  • string:需要转换为整形的字符串
  • n:用于指出字符串中的数据是几进制数据。这个参数可以不加。

例如:

var str1 = "123abc"; document.write(parseInt(str1)+"<br>");
var str2 = "abc123"; document.write(parseInt(str1,8)+"<br>");
document.write(parseInt(str2));

最后输出的结果为:

123
83
NaN

(2)parseFloat()函数

该函数主要将首位为数字的字符串转换为浮点型数字,如果字符串不是以数字开头,那么将返回NaN。 语法如下:

parseFloat(string);

参数说明:

  • string:需要转换为浮点型的字符串。

例如:

var str1 = "123.456abc"; document.write(parseFloat(str1)+"<br>");
var str2 = "abc123.456"; document.write(parseFloat(str2));

以上代码运行结果为:

123.456
NaN

(3)isNaN()函数

该函数主要用于校验某个值是否NaN,语法格式如下:

isNaN(num);

参数说明:

  • num:需要验证的数字。

比如:

var num1=123;document.write(isNaN(num1));
var num2="123abc";document.write(isNaN(num2));

运行结果为:

false
true

(4)isFinite()函数

主要用于判断其参数是否有限,语法如下:

isFinite(num);

比如:

document.write(isFinite(123)+"<br>");
document.write(isFinite(123abc)+"<br>");
document.write(isFinite(1/0));

运行结果如下:

true
false
false

2、字符串处理函数

来看一下,一些主要的字符串处理函数:

函数 说明
eval() 求字符串中表达式的值
encodeURI() 将URI字符串进行编码
decodeURI() 对已编码的URI字符串进行解码

解释一下什么是URI:URI和URL都可以表示网络资源的地址,URI比URL表示范围更加广泛,但在一般情况下,URI与URL是可以等同的。

(1)eval()函数

该函数的功能是计算字符串表达式的值,并执行其中的JS代码。语法格式如下:

eval(string);

参数说明:

  • string:需要计算的字符串,其中含有要计算的表达式或要执行的语句。

比如:

document.write(eval("3+6")+"<br>");
eval("x=5;y=6;document.write(x*y)");

运行结果为:

9
30

(2)encodeURI()函数

将URI字符串进行编码,语法格式如下:

encodeURI(url);

比如:

var uri = "http://127.0.0.1/save.html?name=测试";
document.write(encodeURI(uri));

解码之后输出:

http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95

(4)decodeURI()函数

该函数主要用于对已编码的URI字符串进行解码。语法如下:

decodeURI(url);

比如上面的例子:

var uri = "http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95";
document.write(decodeURI(uri));

解码之后输出:

http://127.0.0.1/save.html?name=测试

八、定义匿名函数

除了使用基本的function语句外,还可以使用另外两种方式来定义函数。

1、在表达式中定义函数

在表达式中直接定义函数,它的语法和function语句非常相似。语法格式如下:

var 变量名 = function(参数1,参数2,……){
	函数体
}

通过一个例子来说明表达式中定义函数是如何使用的,编写一个带有一个参数的匿名函数,用于输出金字塔状的图案

过程简单,就是循环一下就好了,外层大循环控制层数、里面的第一个循环控制输出空格,第二个循环控制输出*

<script type="text/javascript">
var star=function (n) {
    for(var i=1;i<=n;i++){
        for(var j=1;j<=n-i;j++)
            document.write("&nbsp;");
        for(var j=1;j<=i;j++)
            document.write("*&nbsp;");
        document.write("<br>");
    }
}
star(6);
</script>

效果如下:
在这里插入图片描述

2、使用Function()构造函数

什么是构造函数?学过其他高级程序设计语言的想必都知道,构造函数的作用就是用来创建函数时初始化变量的方法。在JS中,这种方式可以动态的创建函数。Function()构造函数的语法格式如下:

var 变量名 = new Function("参数1","参数2",……,"函数体");

例如使用Function构造函数定义一个计算两个数字之和的函数,代码如下:

var sum = new Function("x","y","alert(x+y)");
sum(10,20);

执行上面的代码到最后会弹出结果30


【Four】对象

在说对象以前,看看什么是对象!对象就是你的男朋友或女朋友呀!!emmmmmmm,此对象非彼对象。编程上的对象可以说是一种数据类型、一种复合的数据类型,他将多种数据类型集中在一个数据单元中,并允许通过对象来存取这些数据的值。

一、对象的属性和方法

对象主要包含两个要素——那就是属性方法。通过访问或设置对象的属性,并且调用对象的方法,就可以对对象进行各种操作,从而实现需要的功能。

1、对象的属性

包含在对象内部的变量称为对象的属性,他是用来描述对象特性的一组数据。语法格式如下:

对象名.属性名

对象用户为例,该对象有用户名和密码两个属性,以下代码可以分别获取这两个值:

var name = 用户.用户名
var pwd = 用户.密码

也可以通过以下代码来设置对象“用户”的这两个属性值:

用户.用户名 = "wzq";
用户.用户名 = "wzq";

2、对象的方法

包含在对象内部的函数称为对象的方法,它可以用来实现某个功能。 语法格式如下:

对象名.方法名(参数)

与函数一样,它可以有多个或单个参数甚至没有参数。以对象用户为例,以下带啊吗可以分别调用该对象的两个方法:

用户.注册();
用户.登录();

对象就是属性和方法的集合。这些属性和方法也叫做对象的成员。方法是作为对象成员的函数,表面对象所具有的行为;而属性是作为对象成员的变量,表面对象的状态。
JS中可以使用3种对象,即自定义对象内置对象、和浏览器对象。后面的两个对象又称为预定义对象

二、自定义对象的创建

创建自定义对象有三种方式,分别是:直接创建通过自定义构造函数创建对象通过object创建对象,下面进行介绍…………

1、直接创建自定义对象

直接创建自定义对象的格式如下:

var 对象名 = {属性名:属性值1,属性名2:属性值2,……}

直接创建自定义对象是,所有的属性都放在大括号种,属性之间用,隔开。例如,创建一个学生对象Student,并设置三个属性name、sex、age,可以这样写:

var Student = {
	name:"wzq",
	sex:"男",
	age:25
}

可以使用直接调用值输出:

document.write(Student.name + "<br>" + Student.sex + "<br>" + Student.age);

也可以使用数组的方式对属性进行输出:

document.write(Student['name']+"<br>" + Student['sex'] + "<br>" + Student['age']);

2、通过自定义构造函数创建对象

虽然直接创建自定义对象很直观,但是如果要创建多个相同的对象,使用这种方法就会很繁琐。在JS中,可以自定义构造函数,然后调用对象必须使用new关键字实例一个对象。

比如,要创建一个学生student,看一下构造函数

function Student(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
}

怎么用呢?这样实例化:

var stu1 = new Student("wzq","男",20);

对象不仅可以拥有属性,还可以拥有方法。在定义构造函数的时候,也可以对象的方法,比如在student对象中加一个方法,显示该学生的name、sex、age,可以这样写:

function Student(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
	this.show = show;		//这个就是函数
	//可以写在里面,比如:
	this.show=function(){
		document.write(name + "<br>" + sex + "<br>" + age);
	}
}

//也可以放在外面:
function show(){
	document.write(name + "<br>" + sex + "<br>" + age);
}
//里面写和外面写,只能写一个

看一个例子好了,输出学生的平均分:

套用格式,很简单,代码如下:

script type="text/javascript">
    function Student(mmath,english,history) {
        this.mmath=mmath;
        this.english=english;
        this.history=history;
        this.Aver=function () {
            document.write("数学:"+mmath+"<br>英语:"+english+"<br>历史:"+history);
            document.write("<br>平均分:"+(mmath+english+history)/3);
        }
    }
    var stu1 = new Student(100,85,75);
    stu1.Aver();
</script>

效果如下:
在这里插入图片描述
如果在构造函数中定义了多个属性和方法,那么在每次创建对象实例时都会为该对象分配相同的属性和方法,这样会增加对内存的需求,这时可以通过prototype属性来解决这个问题。 语法如下:

object.prototype.name = value;

参数说明:

  • object:构造函数名称
  • name:要添加的属性名或方法名
  • value:添加属性的值或执行方法的函数

例如在上面的那个student对象中,添加一个方法:

function Student(name,sex,age){
	this.name=name;
	this.sex=sex;
	this.age=age;
}
Student.prototype.show=function(){
	alert(this.name+"\n"+this.sex+"\n"+this.age);
}
var stu1 = new Student("wzq","男",20);
stu1.show();

结束~~~~就是这么简单。

3、通过Object对象创建创建自定义对象

Object对象JS中的内部对象,它提供了对象最基本的功能,这些功能也构成了所有其他对象的基础。它提供了常见自定义最简单的方式,在使用这种方式时不需要在定义构造函数。既可以在程序运行时为JS对象随意添加属性。 语法如下:

obj = new Object([value])

参数说明:

  • obj:必选项,要赋值为Object对象的变量名
  • value:可选项,任意一种基本数据类型(Number、Boolean或String

还拿Student对象来当例子:

var Student = new Object();
Student.name = "wzq";
Student.sex = "男";
Student.age = 20;
Student.show = function(){
	alert(Student.name+"\n"+Student.sex+"\n"+Student.age);
}
Student.show();

最后输出:
在这里插入图片描述

三、对象访问语句

1、for…in语句

它与C++、C_sharp、Java、python中的foreach几乎一模一样,用来遍历对象的每一个属性,且每次都将属性名作为字符串保存在变量里面。 格式如下:

for(变量 in 对象){
	语句
}

例如,直接创建一个对象,然后遍历他:

代码如下:

    var object={name:"wzq",sex:"男",age:20};
    for(var e in object){
        document.write("属性:"+e+"="+object[e]+"<br>");
    }

效果如下:
在这里插入图片描述

2、with语句

with语句用于在访问员一个对象的属性或方法时,避免重复引用指定对象名。例如with语句可以简化对象属性调用的层次。 语法如下:

with(对象名称){
	语句
}

在一个连续的JS代码中如果要多次使用某个对象的属性或方法,那么只需要在with关键字的后面的{}中写出对象名称,然后在之后的语句内,就可以不加对象名称.了。比如还是学生类:

    function Student(name,sex,age) {
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
    var stu = new Student("wzq","男",20);
    with(stu){
        //下面不需要加 那个点点了
        document.write(name+sex+age);
        document.write(name+sex+age);
        document.write(name+sex+age);
    }

四、常用内部对象

1、Math对象

Math对象提供了大量的数字常量和数学函数。在使用该对象时候,不需要使用new关键字实例化一个对象。拿来即用。

(1)Math对象的属性

Math对象的属性就是数学中常用的常量,下表列出了Math对象常用属性

属性 描述 属性 描述
E 欧拉常量(2.7128……) LOG2E 2为底数的e的对数
LN2 2的自然对数 LOG10E 10为底的e的对数
LN10 10的字然对数 PI 圆周率
SQRT2 2的平方根 SQRT1_2 0.5的平方根

(2)Math对象的方法

Math对象的方法有好多好多……在这里,,我就不列出来了,需要的童鞋,请点我传送到参考手册!

在这里就写一下怎么用就好了,比如,计算两个数值中的较大值,可以通过Math对象max()函数。代码如下:

var lager = Math.max(value1,value2);

比如计算一个数字的10次方:

var res = Math.pow(value1,10);

比如四舍五入函数计算最相近的整数值:

var res = Math.round(value1);

(3)例子——生成指定位数的随机数

应用Math对象生成指定位数的随机数功能。

首先编写显示表单,在表单中添加一个用于输入的文本框用于“生成”的一个按钮:

  请输入要生成随机数的位数:<p>
    <form name="form">
        <input type="text" name="digit">
        <input type="button" value="生成">
    </form>

然后在<head>标签内编写脚本:

   <script type="text/javascript">
        function ran(digit) {
            var res="";
            for(i=0;i<digit;i++)
                res+=(Math.floor(Math.random()*10));
            alert(res);
        }
    </script>

最后,响应一下这个方法:

<input type="button" value="生成" onclick="ran(form.digit.value)">

效果如下:
在这里插入图片描述

2、Date对象

使用Date对象来实现对日期和时间的控制。

(1)创建Date对象

Date对象是指一个对象数据类型进行求值,该对象主要负责处理与日期和时间有关的数据信息。在使用之前,首先要创建该对象;

dateObj = new Date();
dateObj = new Date(dateVal);
dateObj = new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);

参数说明:

参数 说明
dateObj 必选项。要赋值为Date对象的变量名
dateVal 必选项。如果是数字值,dateVal表示指定日期与1970年1月1日午夜间全球标准时间的毫秒数。如果是字符串,常用的格式为“月 日 ,年 小时:分钟:秒”,其中月份用英文表示,其余用数字表示,时间部分可以省略;另外,还可以使用“年/月/日 小时:分钟:秒”的格式。
year 必选项。完整的年份,比如,1976
month 必选项。表示的月份,从011之间的整数
date 必选项。表示日期,从131之间的整数
hours 可选项。如果提供了minutes则必须给出。表示小时,从023之间的整数
minutes 可选项。如果提供了seconds则必须给出。表示分钟,从059的整数
seconds 可选项。如果提供了ms则必须给出。表示秒钟,从059的整数
ms 可选项。表示毫秒,是从0999的整数

下面的代码涵盖了一些创建日期对象的方法:

<script type="text/javascript">
    var Date1 = new Date();       //创建当前日期对象
    document.write(Date1);        //输出当前日期和时间
    document.write("<br>");
    var Date2 = new Date(2020,5,20);    //创建指定时间的日期对象
    document.write(Date2);              //输出指定时间的日期
    document.write("<br>");
    var Date3 = new Date(2020,5,20,13,14,1);
    document.write(Date3);
    document.write("<br>");
    //字符串形式创建日期对象
    var Date4 = new Date("Jun 20,2020 13:14:01");
    document.write(Date4);
    document.write("<br>");
    //以另一种字符串的形式创建日期对象
    var Date5 = new Date("2020/5/20 13:14:01");
    document.write(Date5);
</script>

效果如下:
在这里插入图片描述

(2)Date对象的属性

Date对象的属性有constructorprototype两个。

A、construcor属性

这个属性可以判断一个对象的类型,该属性引用的是对象的构造函数。语法如下:

object.constructor

其中object是对象名,例如判断当前对象是否为日期对象:

var newDate = new Date();
if(newDate.constructor == Date)
	document.write("日期型对象");
B、prototype属性

该属性可以为Date对象添加自定义的属性和方法

Date.prototype.name = value;

参数说明:

  • name:要添加的属性名或方法名
  • value:添加属性的值或执行方法的函数

例如:用自定义属性来记录当前年份:

var newDate = new Date();
Date.prototye.mark = newDate.getFullYear();		//向日期对象中添加属性
documet.write(newDate.mark);

(3)Date对象的方法

它的方法实在太多太多太多了!!!!!!!

点我传送到JavaScript Date对象参考手册!

(4)例子——输出当前的日期和时间

调用方法就好了……

<script type="text/javascript">
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth()+1;
    var date = now.getDate();
    var day = now.getDay();
    var week="";
    switch(day){
        case 1:
            week="星期一";
            break;
        case 2:
            week="星期二";
            break;
        case 3:
            week="星期三";
            break;
        case 4:
            week="星期四";
            break;
        case 5:
            week="星期五";
            break;
        case 6:
            week="星期六";
            break;
        default:
            week="星期日";
    }
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //为字体设置样式
    document.write("<span style='font-size: 24px;font-family: 楷体;color: #FF9900'>");
    document.write("今天是"+year+"年"+month+"月"+date+"日 "+week+"<br>");
    document.write("现在是:"+hour+":"+minute+":"+second+"</span>");
</script>

效果如下:
在这里插入图片描述


【Five】数组

啥是数组?数组数组一组数鸭!!数组是JS中的一种复合数据类型,是一组数据的集合。因为JS是一种弱类型的语言,所以在数组中每个元素的类型可以是不同的。数组里的值可以是任何数据类型的。和其他高级程序设计语言一样,数组的第一个索引从0开始

一、定义数组

1、定义空数组

使用不带参数的构造函数可以定义一个空数组,格式如下:

arrayObject = new Array();

其中arrObject是创建的数组的对象名。

2、指定数组长度

只需要在Array()括号()里面加上数组的个数就可以了,格式如下:

arrayObject = new Array(size);

其中size设置数组的长度。

3、指定数组元素

在定义数组的时候,可以直接给出数组元素的值。此时数组的长度就是在括号中给出的数组元素的个数,格式如下:

arrayObject = new Array(element1,element2,element3,……)

其中elememt是存入数组中的元素,使用该语法必须有一个以上的元素。

4、直接定义数组

还有一种方式,比较直接,不需要使用构造函数,语法如下:

arrayObject = [element1,element2,element3,……]

例如,直接定义一个含有3个元素的数组:

var arr = [123,"JavaScript",true];

二、操作数组元素

1、数组元素的输入和输出

输入即为数组中的元素进行赋值;数组元素的输出即获取数组中元素的值并输出。

(1)数组元素的输入

在定义数组时直接输入数组元素

var arr = new Array(1,2,3,4);

利用数组对象元素的下标向其输入数组元素

var arr = new Array();
arr[3] = 'a';
arr[4] = 'b';

利用for语句向数组对象中输入数组元素

var n = 7;
var arr = new Array();
for(var i = 0 ; i < n ; i ++ )
	arr[i] = i;

(2)数组元素的输出

通过下标获取指定元素值

var arr = new Array(1,2,3,4,5,6,7);
var third = arr[2];
document.write(third);

for语句获取数组中的元素值

var str = 0;
var arr = new Array('a','b','c','d');
for(var i = 0 ; i < 4 ; i ++ )
	str += arr[i];
document.write(str);

用数组对象名输出所有元素值

var arr = new Array('a','b','c','d');
documet.write(arr);

2、数组元素的添加

诶,歇会儿…我腿好疼背好疼……

添加数组元素的方法非常简单,只要对新的数组元素进行赋值就可以了,比如:

var arr = new Array("JavaScript","C/C++");
arr[2] = "CSharp";
arr[3] = "Python";
document.write(arr);

当然也可以对已经存在的数组元素进行重新赋值,比如arr[0]="oh!my god!"

3、数组元素的删除

使用delete运算符可以删除数组元素的值,但是只能将该元素恢复为未赋值状态,即undefined。例如:

var arr = new Array(1,2,3,4,5,6,7);
delete arr[1]
document.write(arr);

运行结果为:

1,3,4,5,6,7

应用delete运算符删除数组元素之前和删除数组元素之后,元素的个数并没有改变,改变的只是被删除的数组的元素的值,该值变为undefined

三、数组的属性

1、length属性——返回数组对象长度

语法如下:

arrayObject.length

例如:

var arr = new Array(1,2,3,4);
document.write(arr.length);

运行结果为4

  • 当用new Array()创建数组时,并不对其进行赋值,length属性的返回值为0
  • 数组的长度由数组的最大下标决定

例子:输出省份、省会以及旅游景点,利用JS将信息放在表单里面

代码如下:

<table cellspacing="1" bgcolor="#CC00FF">
    <tr height="30" bgcolor="#FFFFFF">
        <td align="center" width="50">序号</td>
        <td align="center" width="100">省份</td>
        <td align="center" width="100">省会</td>
        <td align="center" width="260">旅游景点</td>
    </tr>
    <script type="text/javascript">
        var province = new Array("河南省","吉林省","辽宁省");
        var city = new Array("郑州市","长春市","沈阳市");
        var tourist = new Array("二七纪念塔 玉米塔 黄河湿地公园",
        "净月潭 长影世纪城 动植物公园","沈阳故宫 沈阳北陵 张氏帅府");
        for(var i = 0 ; i < province.length ; i ++ ){
            document.write("<tr height='26' bgcolor='#FFFFFF'>");
            document.write("<td align='center'>"+(i+1)+"</td>>");
            document.write("<td align='center'>"+province[i]+"</td>>");
            document.write("<td align='center'>"+city[i]+"</td>");
            document.write("<td align='center'>"+tourist[i]+"</td>");
            document.write("</tr>");
        }
    </script>
</table>

效果如下:
在这里插入图片描述

2、prototype属性——为数组添加自定义的属性或方法

语法如下:

Array.prototype.name = value;

其中name时要添加的属性名或者方法名;value添加的属性的值或执行方法的函数。

例如:利用prototype添加一个方法,用于显示数组中最后一个元素,代码如下:

Array.prototype.outLast=function(){
	document.write(this[this.length-1]);
}
var arr = new Array(1,2,3,4,5,6);
arr.outLast();

输出6

四、数组的方法

使用数组的方法可以更加方便的操作数组中的数据。

因为方法的调用很简单,只在第一个方法后添加了一个例子,后面的都一样,就不再写了

1、添加和删除

(1)push()方法——向数组末尾添加一个或多个元素,并返回添加后的数组长度

语法如下:

arrayObject.concat(arratX,arrayX,……,arrayX)

其中arratX可以是具体的值,也可以是数组对象

例如,向数组的末尾添加两个数组元素,并输出原数组,添加元素后的长度和新数组。

代码如下:

<script type="text/javascript">
    var arr = new Array(1,2,3);
    document.write("原数组:"+arr);
    document.write("<br>添加元素后的数组长度:"+arr.push(4,5)+"<br>");
    document.write("添加后:"+arr);
</script>**

效果如下:
在这里插入图片描述

(2)unshift()方法——向数组开头添加一个或多个元素

语法如下:

arrayObject.unshift(newElement1,……,newElementX)

(3)pop()方法——用于把数组中最后一个元素从数组中删除,并返回删除元素的值

语法如下:

arrayObject.pop()

(4)shift()方法——用于把数组中的第一个元素从数组中删除,并返回删除元素的值

语法如下:

arrayObject.shift()

(5)splice()方法——可以删除数组中指定位置的元素,还可以向数组中的指定位置添加新元素

语法如下:

arrayObject.splice(start,length,element1,element2,……)

(6)concat()方法——连接数组到当前数组的末尾

语法如下:

arrayObject.concat(arratX,arrayX,……,arrayX)

例如,在数组尾部添加其他数组。代码如下:

var arr1 = new Array('a','b','c');
var arr2 = new Array(1,2,3);
document.write(arr1.concat(arr2));

运行结果为:a,b,c,1,2,3

2、设置数组的排列顺序

(1)reverse()方法——反转数组

语法如下:

arrayObject.reverse()

(2)sort()方法——排序

语法如下:

arrayObject.sort()

如果想要将数组元素按照其他方法进行排序,就需要指定sort()方法的参数。该参数通常是一个比较函数,该函数应该有两个参数,(a和b)。在对元素进行排序时,每次比较两个元素时都会执行比较函数,并将这两个元素作为参数传递给比较函数。其返回值由以下两种情况:

  • 如果返回值大于0,则交换位置
  • 如果返回值小于等于0,则不进行操作。

例如,定义一个包含4个元素的数组,将数组中的元素按从小到大的顺序进行输出:

var arr = new Array(9,6,10,5);
document.write("原数组:"+arr);
function ascOrder(x,y){
	if(x>y) return 1;
	else return -1;
}
arr.sort(ascOrder);
document.write("排序后的数组:"+arr);

3、获取某段数组元素——slice()方法

语法如下:

arrayObject.slice(start,end)

4、数组转换成字符串

(1)toString()方法——转换为字符串,并返回结果

语法如下:

arrayObject.toString()

(2)toLocaleString()方法——将数组转换成本地字符串

语法如下:

arrayObject.toLacaleString()

(3)join()方法——将数组中的所有元素放入一个字符串中

语法如下:

arrayObject.join(separator)

其中separatoe指定要使用的分隔符。如果省略则使用逗号作为分隔符


【Six】String对象

它是动态对象,可以这样创建,语法如下:

var newstr = new String(StringText)

一、String对象的属性

1、length属性——返回长度

语法如下:

stringObject.length

2、constructor属性——相当于构造函数的引用

语法如下:

stringObject.constructor

例如:

var newStr = new String("JavaScript");
if(newStr.constructor==String)
	document.write("这是一个字符串");

3、prototype属性——添加自定义的属性或方法

同上,跟上面的一模一样,语法如下:

String.prototype.name = value

二、String对象的方法

1、查找字符串

(1)charAt()方法——返回字符串中指定位置的字符

语法如下:

stringObject.charAt(index)

其中index表示字符串某个位置的数组,即在字符串中的下标

(2)indexOf()方法——返回某个子字符串在字符串中首次出现的位置

语法如下:

stringObject.indexOf(substring,startindex)

其中substring表示要查找的子字符串,startindex表示开始查找的位置

(3)lastIndexOf()方法——最后出现的位置

语法如下:

stringObject.lastIndexOf(substring,startindex)

2、截取字符串

(1)slice()方法——提取字符串的片段,并在新的字符串中返回被提取的部分

语法如下:

stringObject.slice(startindex,endindex)

(2)substr()方法——从指定位置开始提取指定长度的子字符串

语法如下:

stringObject.substr(startindex,length)

3、大小写转换

(1)toLowerCase()方法——转换为小写

语法:

stringObject.toLowerCase()

(2)toUpperCase()方法——转换为大写

语法:

stringObject.toUpperCase()

4、连接和拆分

(1)concat()方法——用于连接两个或多个字符串

语法:

stringObject.concat(stringX,stringX,……)

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

语法:

stringObject.split(separator,limit)

5、格式化字符串

给一个表格吧~

在这里插入图片描述


基础部分终于完了!markdown编辑共计35224个字,HTML页面共28681个字。希望能看到这里的各位大佬或者觉得写的不错……麻烦动一动小手指给小的点个赞……我真的写了两个下午,加两个晚上!我太难了!谢谢各位大佬!如果有错误!还烦请在评论区点出!再次感谢各位大佬!

发布了177 篇原创文章 · 获赞 282 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/lesileqin/article/details/103753330