目 录CONTENT

文章目录

ECMAScript基础一

Administrator
2020-07-24 / 0 评论 / 1 点赞 / 8581 阅读 / 33717 字

ECMAScript基础一

在之前已经学习过了JavaScript包含三大部分,分别是ECMAScript,DOM与BOM。我们现在就从基础的ECMAScript来学习

这部分的学习过程主要是语法、关键字、变量、数据类型、语句,流程控制,面向对象 ,数组,执行上下文等一系列基础

ECMAScript基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: red;
				HEIGHT:100PX;
			}
		</style>
	</head>
	<body>
		<DIV>
			1231232
		</DIV>
	</body>
	<script type="text/javascript">
		//  alert("你好"); 这是正确的
		ALERT("你好");   //这是错误的
	</script>
</html>
  1. JavaScript是严格区分大小写的(HTML与CSS 不区分大小写)

    在上面的代码里面,我们把标签div进行了大写,这没有问题,同时在CSS里面, 我们将height高度属性也进行了大写,这也没有错,我们将100PX的单位也进行了大写,这也没有报错

    但是我们对JavaScript里面的代码进行ALERT大写的时候就报错了

    ?注意:因为JavaScript是区分大小写的,所以里面的符号全都是英文状态下面的符号

  2. JavaScript必须写在<script>标签里面,并且指定正确的类型(type)

    <script type="text/javascript"></script>

    你可以不指定type值,但是如果你指定了就必须是text/javascript【在HTML5的页面里面,type的默认属性值就是text/javascript,后期还会用到type="module"这种类型】

  3. JavaScript如果语法出现了错误,那么会在页面上的控制台(console)报错

    当一段 JS代码如果没有效果,可以试着打开浏览器的开发者工具,看一下console控制台有没有报错

  4. JavaScript里面,一句代码写完了以后,请加上分号结束;分号就代表一句话的结束。不加分号理论上是可以的,但是不推荐

在开始学习JS之前上面的四个硬性条件一定不能忘记

目前我们所学习的ECMAScript的版本是5.1这个版本,俗称ES5,后期我们还要学习ES6

变量标识符

要弄清楚这个问题,我们首先要来解决一下这两个词

变量:变量指的是一个可以变化的量,例如人的年龄,它会随着时间而变化,那么这个值就是一个变化的值 ,这种变化的值,我们就叫变量

标识符:标识符是提供给编译器来解读的,编译器一旦看到标识符以后就大概知道这句代码是什么意思了

变量标识符就是提供给编译器解读,告诉编译器后面跟的是一个变量

变量的定义

在ECMAScript5.1里面,我们的变量标识符使用是var这一个关键字,我如果要定义一个变量,我就要使用这一个关键字

因为JavaScript是一个弱类型的语言,它本身并没有变量类型的限制,所以所有数据类型的变量都是使用了var关键字来完成的

//age它是变量标识符,告诉我们的编译器(浏览器)后面跟着的是一个变量 var是关键字
var age;
//这个时候var告诉了浏览器,后面跟着的age是一个可以变化的量,这个age就是一个可以变化的东西

所以上面的代码的意思定义了一个变量,这个变量名叫age

根据这样的规律,我们可以定义我们在开发过程当中所需要所有变量

var age;		//定义了一个变量age
var sex;		//定义了一个变量sex
var userName;	//定义了一个变量userName

上面的age,sex,userName就都是变量名

语法规则我们现在列举出来了

var 变量名;

变量名我们还是有一些小小的要求的,不能够随便命名

  1. 以字母开头,当然也可以使用_$开头,不能以数字开头

    var $a;   //正常的
    var a1;   //正常的
    var _a;   //正常的
    var 1a;   //这是错误的,不能以数字开头
    

    这其实根我们之前学习CSS里面class名称与id的名称是一样,都不能以数字开头

  2. 变量名不能是系统中内置的关键字或保留字

    关于关键字与保留字可以看下一个章节

  3. 变量在命名的过程当中应该做一定的规范

    • 见名知意,我一看到变量名,就应该知识这个变量大致的意思
    • 遵守约束规范:ECMAScript 标识符采用驼峰大小写格式,也就是第一个字母小写,剩下的每个单词的首字母大写
    var userNickName;   //定义一个昵称
    var listBox;		//首字母小写,后面每个单词首字母大写
    var sex;			//一个单词,直接小写
    

在变量定义的时候,我们可以一个一个的定义,也可以批量来定义变量,例如上面的三个变量,我们可以一次性的定义好

var userNickName,listBox,sex;    //这样我们就一次性的定义了三个变量

一个变量经过定义了以后就可以进行赋值了


变量的赋值

变量的赋值也叫变量初始化

变量是一个可以变化的值,所有的变量都可以进行赋值

var userName;						//定义变量
userName = "标哥哥";				  //变量赋值

var sex,age;						//一次性定义了两个变量
sex = "男";						   //变量赋值,给了一个字符串男
age = 18;							//变量赋值,给了一个数字18

上面的代码就是对变量先定义,然后赋值的代码。通过上面的代码,我们要知道两个点

  1. 变量的赋值使用是的是一个等号=来进行操作
  2. 变量赋值的时候是将等号右边的东西赋值给等号左边

☎ 变量是一个变化的量,所以变量即使在赋值以后也是可以更改的

var goodBoy;
goodBoy = "朱礼辉";    //变量的第一次赋值,这个时候的goodBoy就是朱礼辉

goodBoy = "小朱";    //变量的第二次赋值 ,这个时候goodBoy由"朱礼辉"变成了"小朱"

上面的变量都是在先定义好了一个变量以后再对这个变量进行赋值,其实我们可以将这个操作直接由一步就完成了

var oldBoy;					//定义变量
oldBoy = "老男孩";			  //变量赋值

var oldGirl = "老女孩";      //定义与赋值同时完成了

//一次性定义了四个变量,同时赋值
var userName = "标哥哥",
    sex = "男",
    age = 18,
    height = 170.5;

♻ 重点: 变量经过定义以后再赋值的这个过程,我们叫变量初始化。其实就是定义一个变量以后再给这一个初始值,我个过程我们叫初始化

思考一个问题,我们之前在定义的变量的时候,有些变量值加了引号,有些值没有加引号,这是为什么?

var age = 18;
var height = 170.5;
var userName = "标哥哥";
var address = "湖北省武汉市";

要弄清楚这个问题, 我们就不得不去了解一下JavaScript里面的数据类型

关键字与保留字

在JavaScript的这门语言里面,有一些特定的单词是系统内置的,我们不能做为我们的变量名

这些关键字都是为了完成某一些特殊功能而存在,如iffor等这些

ECMA-262 描述了一组具有特定用途的关键字,这些关键字可用于表示控制语句的开始或结束,或 者用于执行特定操作等

当然还有一些是保留字。什么是保留字?保留字就是现在不用,但是不代表以后我不用

关键字

image-20200409101436226

ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定 的用途,但它们有可能在将来被用作关键字。以下是 ECMA-262 第 3 版定义的全部保留字:

保留字

image-20200409101647021

上面的保留字与关键字都不能做为我们的变量名

数据类型

ECMAScript 中有 5 种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number 和 String

JavaScript数据类型简单数据类型复杂数据类型Number类型String类型Boolean类型Undefined类型Null类型

数字类型

数字类型,我们叫Number类型

数字类型是JavaScript当中最常用的一个数据类型,所有的数字都是数字类型,如123-1231.12等,只要是数字就是数字类型

【目前情况下,我们先只考虑十进制】

通俗一点来讲总结就是通过0123456789来组合而成的数字就是数字类型,数字类型不需要加引号

var age = 18;  		 //这就定义了一个变量age,初始化值为18,这个age就是一个数字类型的

var height = 170.5;  //定义了一个变量height,初始化为值为170.5,这个height也是一个数字类型,它是小数

var money = -100;    //定主一个变量money,初始化值为-100,也是数字类型,它是负数

在JavaScript所有的数字都是数字类型,无论是小数,整数,正数还是负数都统称数字类型

既然是数字类型,就肯定可以进行计算(我们在这里因为还没有学运算符,所以我们用加减乘除来演示)

var a = 100;
var b = 200;
var c = 18;
var d = a + b - c;			//来思考一下这段代码是否会报错

上面的代码就定义了三个数字类型的变量,然后将这三个变量进行了计算,赋值给了变量d

在JavaScript里面,所有的数字类型我们都叫Number类型

❎坑:在数字类型有一个小小的bug同学们需要注意一下。这是个坑

JavaScript是一个非常松散的数据类型,所以在进行小数的计算的时候,需要注意一下,有个值的计算会出错

var a = 0.1;
var b = 0.2;
var c = 0.8;
//上面我们定义了三个小数的数字类型的变量
var d = a + b;		//0.30000000000000004  计算不正常
var e = a + c;		//0.9  计算正常

针对这种现象,我们后期会有一个解决方案去完成,在讲到这个加法操作符的时候,我们会把这个问题来解决掉

关于数字类型NaN

NaN是一个非常特殊的数字类型,它的全称是Not a Number,这个值代表本来经过代码处理以后应该得到一个数字的结果 又没有得到数字,就会显示一个像这样的值

字符串类型

字符串数据类型在JavaScript里面,我们使用String来表示

字符串类型的数据也是我们最常见的一种数据类型格式,它也是我们最简单的一种数据类型格式,所有字符串都有一个共同的特点,它们都有一个引号(这个引号可以是单引号,也可以是双引号),引号里面的东西可以是任何东西

var a = "hello";    //英文的字符串
var b = "标哥";	   //中文的字符串

同时单引号也是可以的

var c = 'world';
var d = '帅气的标哥';

注意:单引号与双引号必须是成双成对的出现,不能说开始的符号与结束的符号不一样

思考一下:下面哪些是字符串类型

var a = "你好";				//有引号,字符串
var b = 123;				 //没有引号,不是字符串
var c = '456';				 //有引号,字符串
var d = '1ab45';			 //有引号,字符串
var e = "123.45";		     //有引号,也是字符串

现在在上面定义了五个变量,其中只要有引号的,我们就是字符串

再请看下面的一个问题

var age = 18;		
var a = age;
var b = "age";

现在请说明一下a与b分别是什么类型了是什么值?

分析

第一行代码是定义了一个变量age,然后age初始化赋值为18

第二行代码定义了一个变量a,然后将变量age赋值给了a。age这个时候的值是18,所以a的值也应该是18

第三行代码定义了一个变量b,然后将字符串“age”赋值给了变量b,所以这个时候b的值应该是“age”

布尔类型

在JavaScript里面,布尔类型我们叫Boolean

布尔类型是大部分编程里面需都具备的类型,它有两个固定的值,就是truefalse,在编程的时候用于判断真或假的条件

var isTeacher = true;
var isGirl = false;
var a = true;
var b = false;
var c = 1>2;		//false

上面的五个变量类型就都是布尔类型

var a = "true";				//字符串
var b = false;				//布尔类型
var c = 'false';			//字符串

在上面的a,b,c三个变量里面,这个三个变量分别是什么类型呢

第一行代码定义了变量a,赋值为"true",因为有引号,所以是字符串

第二行代码定义了变量b,赋值为false,它就是布尔类型

第二行代码定义了变量c,赋值为"false",因为有引号,所以是字符串


未定义类型

未定义类型在JavaScript里面我们叫Undefined

未定义的类型是指的是JavaScript里面定义了变量又不对变量进行赋值,这个时候这个变量就是未定义的类型,如下所示

var a ;			//这个时候定义了一个变量a,但是没有赋值,这个时候a就是未定义类型undefined

后面我们经常判断某一个变量是否等于undefined来判断这个变量是否有值

当然我们也可以直接手动的赋值为undefined

var b = undefined;

空类型

空类型代表空值,在JavaScript里面,我们使用Null来表示

null与之前学过的undefined非常想像,它们都代表没有。其实本质上面还是有区别的

var a ;   //这是undefined类型
var b = null;  //这是一个空类型

b是null,相当于有一房子,但是这个房子是空的,a是undefined,它相当于我们房子都没有,

场景一对话:Undefined的情况对话

标哥:“朱礼辉,我晚上给个东西你~~~”,
朱礼辉:“好的,标哥!”
何陈龙上线
何陈龙:“嘿,老伙计,标哥给了个什么东西给你啊”。何陈龙对朱礼辉说;
朱礼辉答道:“还不知道哦,标哥还没有给我,说晚上的时候给我”;

场景二对话:Null的情况对话

标哥:“朱礼辉,来,我给个东西给你,这个东西在这个箱子里面”
朱礼辉:“好滴,标哥,感谢!!!”
何陈龙又上线
何陈龙向朱礼辉打听道:“喂,朱礼辉,标哥又给什么东西你了???”
朱礼辉:“我也不晓得,东西在箱子里面,我们打开一起看一下吧,看是什么?”
朱礼辉与何陈龙打开了箱子,结果 ,大失所望,箱子是空的
朱礼辉就开始骂骂咧咧了······

JavaScript里面,数据既然有数据类型,那么如果我们想知道某一个变量是什么数据类型应该怎么办呢?

数据类型检测

JavaScript提供了一个方法来进行基本数据类型的数据检测,它可以将变量的数据类型进行检测。它是一个关键字

鉴于 ECMAScript 是松散类型的,因此需要有一种手段来检测给定变量的数据类型——typeof 就 是负责提供这方面信息的操作符

在上面的一句话里面描述里面,我们看到一个词叫“松散类型”,这个词的意思和“弱类型”是一样的。

  1. 指的就是JavaScript的变量的数据类型是不固定的,可以进行变化
  2. 它不像其它的编程语言使用int,float,String,double这些关键字来定义变量,所有类型的变量都是通过var的来定义的
var a = 123;		//定义数字类型的变量的时候,我们使用var
var b = "hello";    //定义字符串类型的时候,我们也使用了var

同时,因为是变量,所以这个值是可以变化的

a = "world";			//a由123变成了"world"				由原来的数字类型变成了字符串类型
b = false;				//b由"hello"变成了false				由原来的字符串类型变成了布尔类型

所以变量不仅可以发生值的变化,还可以发生类型的变化,那么我们想得到当前变量的数据类型就需要做数据类型检测

typeof a;		//检测a的类型
typeof b;		//检测b的类型

var a = 123;
var b = 'hello';
var c = true;
var d;
var e = null;

在上面的5个变量里面,分别代表了我们的5种数据类型,我们现在通过typeof关键字去检测一下数据类型

typeof a;			//结果:number
typeof b;			//结果:string
typeof c;			//结果:boolean
typeof d;			//结果:undefined
typeof e;			//结果:object

基本数据类型检测出来结果与我们之前所学习的数据类型都相同,主要有以下几种

  1. number数字类型
  2. string字符串类型
  3. boolean布尔类型
  4. undefined未定义类型
  5. object对象类型,这个结果比较特殊,我们的Null检测以后的结果也是这个

前面的四个都可以实现一一的对象关系,唯独null它检测出来是object

经过上面的学习我们已经知道可以通过typeof来进行变量的数据类型检测了,它的使用方式如下

typeof 变量名;

其实它还可以像下面这种方式使用

typeof(变量名);

这两种方式检测得出的结果一样的没有区别


数据类型转换

JavaScript里面有5种基本的数据类型,这5种基本的数据类型是可以发生转换的,通常情况下我们会将字符串,数字以及布尔值相互之间进行转换

字符串转数字

这个转换过过程是有限制条件的,它必须是字符串数字

字符串数字指的就是带引号的数字,如"123","456a","123.45"

var a  = "123";
var b = "45a6";
var c = "123.69";
var d = "a123";
var e = "hello";
var f = "123.45.67";

上面的定义了6个变量,这6个变量都是字符串变量,现在我们将字们转换成数字

字符串转数字主要包含以下三个方法

  1. 使用Number(字符串)来进行转换

    Number(a);				//得到结果 123,它是一个number类型
    Number(b);				//得到NaN,它也是一个number类型
    Number(c);				//得到结果 123.69,number类型
    Number(d);				//得到NaN 
    Number(e);				//得到NaN
    Number(f);				//得到NaN
    

    经过上面的转换对比,我们得到一个结论,Number()只能转换纯数字,并且是合法的数字

  2. 使用parseInt(字符串)来进行转换

    parseInt(a);			//得到结果 123,它是一个number类型
    parseInt(b);			//得到结果 45,它是一个number类型
    parseInt(c);			//得到结果 123,它是一个number类型
    parseInt(d);			//得到NaN
    parseInt(e);			//得到NaN
    parseInt(f);			//得到结果 123
    

    经过上面的转换对比,我们得到一个结论,parseInt()可以将字符串解析为整数,

    • 如果是字符串与数字混合,在解析的过程当中,一旦碰到字符串就停止解析(b的转换就是这样的)
    • 如果第一个就是非数字的字符串,直接返回NaN(d的转换就是这样的)
    • 如果是小数的字符串,则直接去掉小数点以后的东西(c和f就是这么转换的)
  3. 使用parseFloat(字符串)来进行转换

    这一种转换方式与上面的parseInt非常相似,只是可以得到小数点以后的东西

    parseFloat(a);					//得到结果 123 ,number类型
    parseFloat(b);					//得到结果 45,number类型
    parseFloat(c);					//得到结果 123.69,number类型
    parseFloat(d);					//得到NaN
    parseFloat(e);					//得到NaN
    parseFloat(f);					//得到结果  123.45,number类型
    

    经过上面的对比我们得到结论,parseFloat可以将字符串转换为小数的数值

    • 如果是字符串与数字混合,在解析的过程当中,一旦碰到字符串就停止解析(b的转换就是这样的)
    • 如果第一个就是非数字的字符串,直接返回NaN(d的转换就是这样的)
    • 如果是小数的字符中,它会保留第一个小数点以后的小数,如果后面还有小数点,则直接舍弃掉(c和f就是这么转换的)

现在我们将刚刚的三个方法来列出表来进行对比

字符串 Number()方法 parseInt()方法 parseFloat()方法
“123” 123 123 123
“45a6” NaN 45 56
“123.69” 123.69 123 123.69
“a123” NaN NaN NaN
“hello” NaN NaN NaN
“123.45.67” NaN 123 123.45

就转换能力而言,我们的parseFloat>parseInt>Number

如果希望字符串即使在第一个也要转换成功,我们后期可以使用自己编写的方式来完成

在上面我们使用了parseIntparseFloat这两个方法,这两个方法我们后期会重点去讲它【在十进制与二进制的转换里面】

布尔类型转数字

在计算机里面布尔值只有两个,一个是true,一个是false,我们只需要将这两个值转换成数字就可以了了

var a = true;
var b = false;

我们现在需要的就是将a与b转换成数字

通过Number()方法来进行转换

Number(a);				//得到结果1
Number(b);				//得到结果0

布尔类型转数字只能通过Number方法去转,不能通过parseIntparseFloat,否则得到NaN

? 下面的转换是错误的

parseInt(a);			//转换失败,得到NaN
parseFloat(b);			//转换失败,得到NaN

null与undefined转换成数字

Number(null);				//得到数字0
Number(undefined);			//得到NaN

上面的两个值是不能通过parseIntparseFloat去转换的,否则就得到NaN


其它类型转字符串

在JS里面,所以的数据类型都可以转换成字符串类型,并且转换过程是非常简单的

var a = 123;
var b = true;
var c = 456.78;

var d = null;
var e = undefined;

上面所定义的5个变量 其实前三个变量a,b,c是我们的基本数据类型里面常用的东西

  1. 使用String()方法来进行转换

    String(a);					//得到字符串"123"
    String(b);					//得到字符串"true"
    String(c);					//得到字符串"456.78"
    String(d);					//得到字符串"null"
    String(e);					//得到字符串的"undefined";
    
  2. 将这个变量加上一个空字符串

    a + "";						//得到字符串"123"
    b + "";						//得到字符串"true"
    c + "";						//得到字符串"456.78"
    d + "";						//得到字符串"null"
    e + "";						//得到字符串的"undefined";
    
  3. 使用toString()的方式来进行

    a.toString();				//得到字符串"123"
    b.toString();				//得到字符串"true"
    c.toString();				//得到字符串"456.78"
    
    d.toString();				//报错,因为null没有toString()这个方法
    e.toString();				//报错,因为undefined没有toString()这个方法
    

经过上面三个方法的对比,我们其实可以发现,前两个的使用是没有限制条件的,后面的toString()是不能对null与undefined来使用

其它类型转布尔值

这个转换过程是我们JavaScript里面最麻烦的一个东西

在JavaScript里面,我们的其它类型值如果要转换成布尔类型只有一个方法,这个方法就是Boolean()

var a = 1;
var b = 0;
var c = "";
var d = "567";
var e = null;
var f = undefined;
var g = NaN;

上面有这几人特殊的变量,我们现在通过Boolean()来进行转换,看得到的结果是什么样子

Boolean(a);						//得到结果 true 		
Boolean(b);						//得到结果 false
Boolean(c);						//得到结果 false
Boolean(d);						//得到结果 true 
Boolean(e);						//得到结果 false
Boolean(f);						//得到结果 false
Boolean(g);						//得到结果 false

经过上面的转换得到的结果让人很迷糊,但是我们只要刻是以下的总结就行了

在JavaScript里面,有6个明确的false值,分别是0,false,null,undefined,NaN,""(空字符串)

这6个值在进行布尔类型转换的时候得到的是false值,其实值转换的时候得到的都是true

? 坑:请同学们看下面的代码

var a = "true";
var b = "false";

上面的两个变量分别字符串的”true“和字符串的"false",请将这两个值转换布布尔类型的truefalse

千万千万记得,这是不能转的。因为它们都是非空的字符串【说得更确切一点,它们不属于明确的false】。最终两个的转换结果一定会是true

Boolean(a);				//得到布尔true
Boolean(b);				//得到的仍然是true

? 又一个坑:请同学们看下面的代码

var a = "1";
var b = "0";

上面两个变量分别是字符串的”1“和”0“,请将a转换为true,b转换为false

千万千万记得,这是不能直接转的,要经过变化以后才能转。因为它两个都是非空字符串,如果直接转肯定都得到结果 true

错误的做法

Boolean(a);				//得到布尔true
Boolean(b);				//得到布尔true

正确的做法

应该要先转换成数字,再转换成我们的布尔类型

Boolean(Number(a));			//得到布尔true
Boolean(Number(b));			//得到布尔false
1

评论区