第二章词法、数据类型和变量

2.1 js中的词法结构

2.1.1 大小写敏感

2.1.2 语句分隔符

与java类似，分号(";")分隔语句

分号的省略

如果两个语句之间存在换行符(上下行关系)，那么前一个语句末尾可以省略分号，js认为是程序员粗心忘记了加上分号(";"),会在上一个语句末尾加上分号处理。

这是一个喜讯，但也要注意，有时这种操作会带来的不便，例如

    return
    true;

会被处理为

    return；
    true;

改变程序员的初衷

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>js脚本</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>

<body>
	<script language="javascript">
		alert("Hello world!")
		alert("省略分号，照常执行")
	</script>
</body>

</html>

运行结果：

2.1.3 关键字(保留字)


abstract              delete               goto                   null	              throws
as                    do                   if		          package	      transient
boolean               double               implements             private             true
break                 else                 import                 protected           try
byte                  enum                 in                     public              typeof
case                  export               instanceof             return              use
catch                 extends              int                    short               var
char                  false                interface              static              void
class                 final                is                     super               volatile
continue              finally              long                   switch              while
const                 float                namespace              synchronized        with
debugger              for                  native                 this                          
default               function             new                    throw

2.2 js中的原始数据类型

js中的数据类型可分为原始数据类型和复杂数据类型，其中

原始数据类型包括：数字型、字符型、布尔型

复杂数据类型包括：对象、数组、函数（数组和函数可以理解为特殊的对象类型）

2.2.1 数值型

js数值型不区分整型与浮点型

整数的取值范围： $-2^{53}(-9007199254740992)\rightarrow 2^{53}(9007199254740992)$

小数数值取值范围：-1.7976931348623127× $×10^{308}$ ～-5× $10^{-324}$ 和1.7976931348623127× $×10^{308}$ ～5× $10^{-324}$

（1）科学计数法

1.68E-10==1.68× $10^{-10}$

（2）八进制数值

016、025

(3)十六进制数值

0x或0X开头

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Example:Number</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>

<body>
	<h3>Example:Number</h3>
	<script language="javascript">
		var NumberOfInt=204;
		var NumberOfFloat=1.08;
		var NumberOfScience=8.08e5;
		var NumberOfOctal=011;
		var NumberOfHex=0x204A;
		document.write("十进制整型数值204输出结果是："+NumberOfInt+"<br/>");
		document.write("十进制浮点型数值1.08输出结果是："+NumberOfFloat+"<br/>");
		document.write("十进制科学计数8.08e5输出结果是："+NumberOfScience+"<br/>");
		document.write("八进制数值011输出结果是："+NumberOfOctal+"<br/>");
		document.write("十六进制数值ox204A输出结果是："+NumberOfHex);		
	</script>
</body>

</html>

eg:

2.2.2 字符型

字符型数据又称字符串，和c、java一样，不同的是使用单引号和双引号包住字符串均可，这点和python一样

1.转义字符

和c/c++/java一样

2.HTML标记字符串

经常要用js语句输出含HTML标记的字符串、实现方式也很简单，将HTML标记作为字符串的一部分放在合适位置即可

document.writeln("<h1>Example:HTML String</h1>");

eg：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Example:String</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>

<body>
	<h3>Example:Number</h3>
	<script language="javascript">
		document.write('使用单引号标记的字符串<br/>');
		document.write("使用双引号标记的字符串<br/>");
		document.write('"使用单引号标记包含双引号的字符串<br/>"');
		document.write("'使用双引号标记，包含单引号的字符串<br/>'");
		document.write("使用转义字符表示的计算机目录：C:\\Program Files\\Microsoft Office<br/>");
		document.write("<h1>使用html标记h1标记的字符串</h1>");
		
	</script>
</body>

</html>

运行结果：

2.2.3 布尔型

和c、java一样

注：js可以轻易地将布尔型数据转换为其他数据类型，如：在数学运算中，js会将一个值为true的布尔值数据转换为正数1，而将只为false的布尔值转变为数0

2.3 函数

js中的函数也是一种数据类型，正是因为这个不同寻常的特性，使得js中的函数可以被存储在变量、数组以及对象的属性中，甚至可以作为参数在其他函数之间传递(函数指针都省了)

2.3.1 创建函数

案例驱动

function showInfomation(){
    document.write("您所请求的页面不存在，请重新连接！");
}

function showInfomation(message){
    document.write(message);
}

//计算矩形面积
function showInfomation(length,width){
    return length*width;
}

语法：

function 函数名(var1,var2...){
    ...
    return xxx;//有就写
}

注：除以上方法外，js还有其他创建函数的方法，关键字也不独有function

匿名函数：

var welcome=function(name){doucument.writeln("欢迎你："+name+"同学");}

2.3.2 调用函数

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>函数调用</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		function calcSquare(Slength,Swidth){
			return Slength*Swidth;
		}
		document.writeln("矩形面积:"+calcSquare(3,4));		
	</script>
</body>
</html>

运行结果：

2.3.3 作为数据类型的函数

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>函数调用</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		function welcome(message){
			document.writeln("欢迎你："+message+"同学!<br/>");
		}
		Example1=welcome("张山");
		Example2=welcome;
		Example3=Example2("李四");
		//Example和函数名welcome引用同一个函数
	</script>
</body>
</html>

运行结果：

数组访问函数

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>函数调用</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		function welcome(message){
			document.writeln("欢迎你："+message+"同学!<br/>");
		}
		var example = new Array(3);
		example[0]=welcome("张山");
		example[1]=welcome;
		example[2]=example[1]("李四");
		//example[1]和函数名welcome引用同一个函数
	</script>
</body>
</html>

运行结果同上

2.3.4 js中的内置函数

js有很多内置函数，如document.writeln()...这些预定义的函数大多存在于预定义对象中，eg:String,Date,Math,window和document对象。后续将会一一讲解

2.4 对象

对象，属性和方法的集合

2.4.1 创建对象

使用new运算符以及特定的构造函数可以创建对象，常见的创建对象的方法如下：

var obExample=new Object(); //创建空对象
var obTime=new Date();  //创建时间对象

直接量语法创建对象：
var student={
    name: "张三"
    age: "25"
    gender: "male"
}

2.4.2 操作对象

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>操作对象</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		var student={
			name: "张三",
			age: "25",
			gender: "male"
		}
		var student=new Object();
		student.name="李四";
		student.age="18";
		document.writeln("学生姓名："+student.name+"<br/>");
		document.writeln("学生年龄："+student.age+"<br/>");
	</script>
</body>
</html>

运行结果：

2.4.3 操作对象的方法

先创建一个js函数，然后创建一个对象，最后将函数赋给对象属性，从而实现对象方法的定义。

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>操作对象方法</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		//定义一个函数 此函数将用作对象的方法
		function putInformation(name,age){
			document.writeln("学生姓名："+name+"<br/>");
			document.writeln("学生年龄："+age+"<br/>");
		}
		//创建一个空对象
		var student=new Object();
		//把创建的函数赋值给新创建的对象的属性   同时也是对象方法的定义
		student.information=putInformation;   //此句为对象创建了一个方法
		//调用此方法
		student.information("张三","18");
	</script>
</body>
</html>

2.5 数组

下标是一个非负整数，从0开始，js数组可以是任何类型的数据，甚至是另一个数组，同一数组中的不同元素可以是不同的数据类型。

2.5.1 创建数组

使用new运算符和Array()构造函数创建数组

方法1：最简单，最常见，创建一个空数组

var studentArray=new Array(); //后续添加需要的元素

方法2：Array()构造函数带有参数列表，按顺序指定数据元素所存储的值，值可以是任何类型

var studentArray=new Array("张三","李四","王五");

方法3：指定数组长度，但每个值都尚未指定数值，都为未定义类型

var arrayExample=new Array(10);

方法4：数组直接量法：

var arrayExample=["学生",1,"张三"];

2.5.2 访问数组元素

js数组十分灵活，可以有任意多数组元素，并可以在任何时候访问任一元素而无需关心是否越界。方法3虽定义了一个长度为10的数组，并不表示数组边界就是10，可以直接对第11,12，13个元素赋值并访问

1.添加数组元素

studentArray[100]="小白"

2.读取数组元素

studentArray[100]="小白"

document.writeln(studentArray[100]);

若访问的元素尚未被赋值，那么将显示undefined

3.修改数组元素

//数组syudentArray中下标为100的元素已经存在

studentArray[100]="小白"

2.5.3 数组的属性

数组最重要属性是length,数组元素个数，也即是最大下标加一，可以设置数组length，小了抛弃元素，多了加未定义新元素

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>操作对象方法</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		var arrayExample=new Array();//length=0
		document.writeln("1:length="+arrayExample.length+"<br/>");
		arrayExample[5]="小白";//length=6
		document.writeln("2:length="+arrayExample.length+"<br/>");
		arrayExample[10]="小白";//length=11
		document.writeln("3:length="+arrayExample.length+"<br/>");
		arrayExample.length=6;
		document.writeln("设置数组长度后遍历数组：<br/>");
		for(i=0;i<arrayExample.length;i++){
			document.writeln(arrayExample[i]+"<br/>");
		}
		document.writeln("*********遍历结束********<br/>");
		var studentArray=new Array(10);//length=10
		document.writeln("4:length="+studentArray.length+"<br/>");
		studentArray[20]="张三";//length=21
		document.writeln("5:length="+studentArray.length);
	</script>
</body>
</html>

运行结果：

2.5.4 数组的方法

数组有许多内置方法，不同浏览器对其的支持也不同。此处简答介绍几个通用方法，其他方法，日后补充完善

1.join()方法

将数组中的所以元素转换为字符串，然后将他们拼接起来，并用指定的符号隔开，默认间隔符是逗号

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>操作对象方法</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		var studentArray=new Array("张三","李四","王五");
		document.writeln(studentArray.join()+"<br/>");
		document.writeln(studentArray.join(";")+"<br/>");
	</script>
</body>
</html>

运行结果：

2.sort()方法

排序，默认按照字母顺序对元素排序，自定义排序逻辑，只需将排序规则的函数作为参数传递给sort即可

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>数组sort方法</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		var studentArray=new Array("张三","李四","王五");
		document.writeln(studentArray.sort()+"<br/>");
		var numberArray=new Array(255,36,79,110,0);
		document.writeln("数组："+numberArray+"<br/>");
		document.writeln("字母序："+numberArray.sort()+"<br/>");
		document.writeln("降序："+numberArray.sort(function(x,y){return y-x;}));
	</script>
</body>
</html>

运行结果：

3. toString()方法

将数组中每个元素转换为字符串，然后输出这些字符串的列表，字符串之间用逗号隔开。与无参的join()方法效果相同

eg:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>数组sort方法</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.33" />
</head>
<body>
	<script language="javascript">
		var studentArray=new Array("张三","李四","王五");
		document.writeln(studentArray.toString()+"<br/>");		
	</script>
</body>
</html>

运行结果：

2.5.5 多维数组

js在语法上不真正支持多维数组，但数组元素可以是数组，也便有了模拟多维数组的手段

arrayExample[m][n]表示数组arrayExample下标为m的元素存放了一个数组，取出该数组下标为n的元素

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script language="JavaScript">
    arrayExample=new Array();
    arrayExample2=new Array();
    arrayExample2[2]="云天河";
    arrayExample[3]=arrayExample2;
    document.writeln(arrayExample[3][2]);
</script>
</body>
</html>

运行结果:

2.6 特殊数据类型

2.6.1 Null

Null类型唯一合法值为null

2.6.2 Undefined

null值表示已经对变量赋值，只不过赋的值是”无值“；而Undefined表示变量还不存在或者存在但没有赋值

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script language="JavaScript">
    var noValue;
    document.writeln("输出定义但没有赋值的变量："+noValue+"<br>");
    var nullValue=null;
    document.writeln("输出定义但赋值为null的变量："+nullValue+"<br>");
    var stringValue="Example";
    document.writeln("输出定义为字符串的变量："+stringValue+"<br>");
    document.writeln("输出经过typeof运算的没有定义的变量："+(typeof undefinedvalue)+"<br>");
    document.writeln("输出经过typeof运算的没有赋值的变量："+typeof noValue+"<br>");
    document.writeln("输出经过typeof运算的null值变量："+typeof nullValue+"<br>");
    document.writeln("输出经过typeof运算的字符串变量："+typeof stringValue);
</script>
</body>
</html>

运行结果：

2.7 数据类型转换

2.7.1数据类型的明确转换

1.数字型转字符串

(1)最简单方法：+“”

var number_string=123+""; //123->"123"

(2)toString()方法

var number=123;

var number_string=number.toString();

2.字符串转数字

(1) 纯数字：-0

var string_number="123"-0

方法(1)要求字符串里是纯数字，不能含任何其他字符

(2)parseInt()和parseFloat()

方法(2)可将字符串开头位置的数字提取出来。parseInt()只能处理整数，parseFloat()既能处理整数又能处理浮点数

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数据类型明确转换</title>
</head>
<body>
<script language="JavaScript">
    var number_string=123+"";
    document.writeln("加空字符串完成数字转字符串："+number_string+"; | 类型："+typeof number_string+"<br>");
    var number=123;
    var numbertostring=number.toString();
    document.writeln("通过toString()方法完成数字向字符串的转换："+numbertostring+"; | 类型："+typeof numbertostring+"<br>");
    var string_number="123"-0;
    document.writeln("-0实现字符串转数字："+string_number+" | 类型："+typeof string_number+"<br>");
    document.writeln("parseInt()方法完成字符串转数字："+parseInt("12.5RMB")+" | 类型："+typeof(parseInt("12.5RMB")));
    document.writeln("parseFloat()方法完成字符串转数字："+parseFloat("12.5RMB")+" | 类型："+typeof(parseFloat("12.5RMB")));
</script>
</body>
</html>

运行结果：

2.8 变量

2.8.1 变量的声明

一个var可以声明多个变量

var stringExample="张三",numberExample=18;

2.8.2 变量使用

1.变量的通用性

变量没有类型，可以在不同位置被赋予不同类型的数值

var example=25;

example="test";

2.变量的重复声明

js中重复声明变量不会产生任何语法错误。若重复声明语句中不带有初始化的数据，那么重复声明不会对以前的代码产生任何影响；若重复声明语句带有初始化数据，等同与对这个变量重新赋值语句。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js变量重复声明</title>
</head>
<body>
<script language="JavaScript">
    var stringExample;
    document.writeln("输出初次声明但未赋值的变量："+stringExample+"<br>");
    stringExample="云天河";
    document.writeln("为初次声明的变量直接赋值："+stringExample+"<br>");
    var stringExample;
    document.writeln("不赋值语句重新声明已存在的变量："+stringExample+"<br>");//果然无任何影响
    var stringExample="神龙之息";
    document.writeln("用带有初始值的语句重复声明已存在的变量："+stringExample);
</script>
</body>
</html>

运行结果：

3.没有声明的变量

js中可以不声明变量直接使用,就像python、ruby那样，但这并不是好的编程方式。js提供了这个容错性，但设计不如python，尽量避免这样做，有时会带来问题。如：函数中的局部变量若未声明，js将自动将这个本应该是局部变量的变量声明为全局变量。

专用于函数体内部的变量一定要用var关键字声明。

前端基础 JavaScript 第二章词法、数据类型和变量 ----暑假学习第十一天

第二章词法、数据类型和变量

2.1 js中的词法结构

2.1.1 大小写敏感

2.1.2 语句分隔符

2.1.3 关键字(保留字)

2.2 js中的原始数据类型

2.2.1 数值型

2.2.2 字符型

2.2.3 布尔型

2.3 函数

2.3.1 创建函数

2.3.2 调用函数

2.3.4 js中的内置函数

2.4 对象

2.4.1 创建对象

2.4.2 操作对象

2.4.3 操作对象的方法

2.5 数组

2.5.1 创建数组

2.5.2 访问数组元素

2.5.3 数组的属性

2.5.4 数组的方法

3. toString()方法

2.5.5 多维数组

2.6 特殊数据类型

2.6.1 Null

2.6.2 Undefined

2.7 数据类型转换

2.7.1数据类型的明确转换

2.8 变量

2.8.1 变量的声明

2.8.2 变量使用

猜你喜欢

前端基础 JavaScript 第二章 词法、数据类型和变量 ----暑假学习第十一天

第二章 词法、数据类型和变量

2.1 js中的词法结构

2.1.1 大小写敏感

2.1.2 语句分隔符

2.1.3 关键字(保留字)

2.2 js中的原始数据类型

2.2.1 数值型

2.2.2 字符型

2.2.3 布尔型

2.3 函数

2.3.1 创建函数

2.3.2 调用函数

2.3.4 js中的内置函数

2.4 对象

2.4.1 创建对象

2.4.2 操作对象

2.4.3 操作对象的方法

2.5 数组

2.5.1 创建数组

2.5.2 访问数组元素

2.5.3 数组的属性

2.5.4 数组的方法

3. toString()方法

2.5.5 多维数组

2.6 特殊数据类型

2.6.1 Null

2.6.2 Undefined

2.7 数据类型转换

2.7.1数据类型的明确转换

2.8 变量

2.8.1 变量的声明

2.8.2 变量使用

猜你喜欢

前端基础 JavaScript 第二章词法、数据类型和变量 ----暑假学习第十一天

第二章词法、数据类型和变量