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>
-
JavaScript是严格区分大小写的（HTML与CSS 不区分大小写）
在上面的代码里面，我们把标签div进行了大写，这没有问题，同时在CSS里面， 我们将height高度属性也进行了大写，这也没有错，我们将
100PX的单位也进行了大写，这也没有报错但是我们对JavaScript里面的代码进行
ALERT大写的时候就报错了?注意：因为JavaScript是区分大小写的，所以里面的符号全都是英文状态下面的符号
-
JavaScript必须写在
<script>标签里面，并且指定正确的类型(type)<script type="text/javascript"></script>你可以不指定type值，但是如果你指定了就必须是
text/javascript【在HTML5的页面里面，type的默认属性值就是text/javascript,后期还会用到type="module"这种类型】 -
JavaScript如果语法出现了错误，那么会在页面上的控制台(console)报错
当一段 JS代码如果没有效果，可以试着打开浏览器的开发者工具，看一下console控制台有没有报错
-
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 变量名;
变量名我们还是有一些小小的要求的，不能够随便命名
-
以字母开头，当然也可以使用
_或$开头，不能以数字开头var $a; //正常的 var a1; //正常的 var _a; //正常的 var 1a; //这是错误的，不能以数字开头这其实根我们之前学习CSS里面class名称与id的名称是一样，都不能以数字开头
-
变量名不能是系统中内置的关键字或保留字
关于关键字与保留字可以看下一个章节
-
变量在命名的过程当中应该做一定的规范
- 见名知意，我一看到变量名，就应该知识这个变量大致的意思
- 遵守约束规范：ECMAScript 标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写
var userNickName; //定义一个昵称 var listBox; //首字母小写，后面每个单词首字母大写 var sex; //一个单词，直接小写
在变量定义的时候，我们可以一个一个的定义，也可以批量来定义变量，例如上面的三个变量，我们可以一次性的定义好
var userNickName,listBox,sex; //这样我们就一次性的定义了三个变量
一个变量经过定义了以后就可以进行赋值了
变量的赋值
变量的赋值也叫变量初始化
变量是一个可以变化的值，所有的变量都可以进行赋值
var userName; //定义变量
userName = "标哥哥"; //变量赋值
var sex,age; //一次性定义了两个变量
sex = "男"; //变量赋值，给了一个字符串男
age = 18; //变量赋值，给了一个数字18
上面的代码就是对变量先定义，然后赋值的代码。通过上面的代码，我们要知道两个点
- 变量的赋值使用是的是一个等号
=来进行操作 - 变量赋值的时候是将等号右边的东西赋值给等号左边
☎ 变量是一个变化的量，所以变量即使在赋值以后也是可以更改的
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的这门语言里面，有一些特定的单词是系统内置的，我们不能做为我们的变量名
这些关键字都是为了完成某一些特殊功能而存在，如if，for等这些
ECMA-262 描述了一组具有特定用途的关键字，这些关键字可用于表示控制语句的开始或结束，或 者用于执行特定操作等
当然还有一些是保留字。什么是保留字？保留字就是现在不用，但是不代表以后我不用
关键字
ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定 的用途，但它们有可能在将来被用作关键字。以下是 ECMA-262 第 3 版定义的全部保留字：
保留字
上面的保留字与关键字都不能做为我们的变量名
数据类型
ECMAScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number 和 String
数字类型
数字类型，我们叫
Number类型
数字类型是JavaScript当中最常用的一个数据类型，所有的数字都是数字类型，如123，-123，1.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
布尔类型是大部分编程里面需都具备的类型，它有两个固定的值，就是true和false，在编程的时候用于判断真或假的条件
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 就 是负责提供这方面信息的操作符
在上面的一句话里面描述里面，我们看到一个词叫“松散类型”，这个词的意思和“弱类型”是一样的。
- 指的就是JavaScript的变量的数据类型是不固定的，可以进行变化
- 它不像其它的编程语言使用
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
基本数据类型检测出来结果与我们之前所学习的数据类型都相同，主要有以下几种
number数字类型string字符串类型boolean布尔类型undefined未定义类型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个变量都是字符串变量，现在我们将字们转换成数字
字符串转数字主要包含以下三个方法
-
使用
Number(字符串)来进行转换Number(a); //得到结果 123,它是一个number类型 Number(b); //得到NaN，它也是一个number类型 Number(c); //得到结果 123.69,number类型 Number(d); //得到NaN Number(e); //得到NaN Number(f); //得到NaN经过上面的转换对比，我们得到一个结论，
Number()只能转换纯数字，并且是合法的数字 -
使用
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就是这么转换的）
-
使用
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
如果希望字符串即使在第一个也要转换成功，我们后期可以使用自己编写的方式来完成
在上面我们使用了parseInt与parseFloat这两个方法，这两个方法我们后期会重点去讲它【在十进制与二进制的转换里面】
布尔类型转数字
在计算机里面布尔值只有两个，一个是true,一个是false,我们只需要将这两个值转换成数字就可以了了
var a = true;
var b = false;
我们现在需要的就是将a与b转换成数字
通过Number()方法来进行转换
Number(a); //得到结果1
Number(b); //得到结果0
布尔类型转数字只能通过Number方法去转，不能通过parseInt或parseFloat，否则得到NaN
? 下面的转换是错误的
parseInt(a); //转换失败，得到NaN
parseFloat(b); //转换失败，得到NaN
null与undefined转换成数字
Number(null); //得到数字0
Number(undefined); //得到NaN
上面的两个值是不能通过parseInt与parseFloat去转换的，否则就得到NaN
其它类型转字符串
在JS里面，所以的数据类型都可以转换成字符串类型，并且转换过程是非常简单的
var a = 123;
var b = true;
var c = 456.78;
var d = null;
var e = undefined;
上面所定义的5个变量 其实前三个变量a,b,c是我们的基本数据类型里面常用的东西
-
使用
String()方法来进行转换String(a); //得到字符串"123" String(b); //得到字符串"true" String(c); //得到字符串"456.78" String(d); //得到字符串"null" String(e); //得到字符串的"undefined"; -
将这个变量加上一个空字符串
a + ""; //得到字符串"123" b + ""; //得到字符串"true" c + ""; //得到字符串"456.78" d + ""; //得到字符串"null" e + ""; //得到字符串的"undefined"; -
使用
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",请将这两个值转换布布尔类型的true和false
千万千万记得，这是不能转的。因为它们都是非空的字符串【说得更确切一点，它们不属于明确的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
评论区