学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)

1、编程语言、ECMA、JavaScript、浏览器的发展史

1.1 编程语言

编程

编程：
- 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：
- 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。
实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FUILawB-1619832519409)(G:/BaiduNetdiskDownload/【00】源码+课件+常用软件/07-10 JavaScript网页编程/01-JavaScript基础语法资料/JavaScript基础第01天/4-笔记/images/图片1.png)]

编程语言

编程语言：可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言和高级语言。

语言类型	说明
汇编语言	汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言	高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jX4d8dFV-1619832519419)(G:/BaiduNetdiskDownload/【00】源码+课件+常用软件/07-10 JavaScript网页编程/01-JavaScript基础语法资料/JavaScript基础第01天/4-笔记/images/图片2.png)]

翻译器

 高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。

编程语言和标记语言区别

语言	说明
编程语言	编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言	标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。

总结

计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

1.2 ECMA

ECMAScript是由网景的布兰登·艾奇开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。ECMA Script是ECMA-262标准化的脚本语言的名称。尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMA Script的功能。

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”。

1.3 JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]

JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

运行模式

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 [6]

是一种解释性脚本语言（代码不进行预编译）。 [7]
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 [7]
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 [7]
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

1.4 浏览器

浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。 [1]

浏览器窗口各部分功能如下。

1、地址栏：用于输入网站的地址，IE浏览器通过识别地址栏中的信息，正确连接用户要访问的内容。如要登录“网址之家”网，只需在地址栏中输入网址之家的网址：http://www.hao123.com，然后按[Enter]键或单击地址栏右侧的按钮即可。在地址栏中还附带了IE中常用命令的快捷按钮，如刷新©、停止(x)等，前进、后退按钮设置在地址栏前方 [2] 。

2、菜单栏：由“文件” “编辑” “查看” “收藏夹” “工具”和“帮助”菜单组成。每个菜单中包含了控制IE工作的相关命令选项，这些选项包含了浏览器的所有操作与设置功能 [2] 。

3、选项卡：从Internet Explorer8版本开始，IE浏览器可以使用多选项卡浏览方式，以选项卡的方式打开网站的页面 [2] 。

4、页面窗口：是IE浏览器的主窗口，访问的网页内容显示在此。页面中有些文字或对象具有超链接属性，当鼠标指针放上去之后会变成手状，单击鼠标左键，浏览器就会自动跳转到该链接指向的网址；单击鼠标右键，则会弹出快捷菜单，可以从中选择要执行的操作命令 [2] 。

5、状态栏：实时显示当前的操作和下载Web页面的进度情况。正在打开网页时，还会显示网站打开的进度。另外，通过状态栏还可以缩放网页 [2] 。

浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成 [3] 。

1、Trident内核

代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。

2、Gecko内核

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 [3] 。

3、WebKit内核

代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 [3] 。

4、Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版 [3] 。

2、基本语法：值、变量、运算、语句等等

2.1 变量

声明变量

/***  1、声明变量*  var 是一个JS关键字，用来声明变量(variable),使用该关键字声明变量后，计算机会自动为变量分配内存空间*  age 是程序员定义的变量名，通过变量名就可以访问分配的空间*  var 变量名;*/
var age;

赋值

/***  2、赋值*  变量赋值 变量名=值;*/
age=18;

变量初始化

/***  3、变量初始化*  声明变量并赋值，就是变量的初始化*/var name='zs';

**变量的语法扩展**

/***  4、变量的语法扩展*  1.更新变量*  2.同时声明多个变量*  3.声明变量的特殊情况*/
var num=18;
num=81; // 变量重新被赋值，原值被覆盖var age=10,name='zs',sex='Man'; // 同时声明多个变量，使用英文逗号隔开var a; console.log(a);  // 只声明，不赋值  结果：undefined
console.log(b);         // 不声明，不复制，直接使用 结果：报错
c=10; console.log(c);   // 不声明，只赋值   结果：10

变量的命名规则

/***  ## 变量的命名规则*  由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成。*  严格区分大小写。*  不能以数字开头。*  不能是关键字、保留字。*  变量名必须有意义。 *  遵守驼峰式命名法。首字母小写，后面单词的首字母需要大写*/
// Good:
var userAge,num01,_name;  // true
var app ; var App;        //属于两个变量
var userName;             //true （驼峰式命名法）
// Bad:
var 18age;           // false
var var,for,while;   //false
var MMD,BBD,nl;      // false  nl=>age

2.2 值

变量(值)是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

基本数据类型

JavaScript 中的简单数据类型及其说明如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DiXQfTYH-1619832519424)(G:/BaiduNetdiskDownload/【00】源码+课件+常用软件/07-10 JavaScript网页编程/01-JavaScript基础语法资料/JavaScript基础第01天/4-笔记/images/图片16.png)]

数字型 Number

var age=21;       // 整数
var Age=21.3747;  // 小数

数字型进制

/***  1、数字型进制*  最常见的进制有二进制、八进制、十进制、十六进制。*/
var num1=07;  // 对用十进制7
var num3=080; // 十进制=>80
var num=0xA;  // 十六进制数字序列范围：0~9以及A~F

数字型范围

/***  2、数字型范围*  最大值：Number.MAX_VALUE*  最小值：Number.MIN_VALUE*/
console.log(Number.MAX_VALUE); // 结果：1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 结果：5e-32

数字型的三个特殊值

/***  3、数字型的三个特殊值*  Infinity  => 无穷大*  -Infinity => 无穷小*  NaN       => Not a Number*/
console.log(Infinity > num);  // 大于任何数值
console.log(-Infinity < num); // 小于任何数值
console.log(NaN('a'));        // 不是一个数值

isNaN

/***  4、isNaN*  用来判断一个变量是否为非数字的类型，返回true或者false*/
var userAge=21;
console.log(isNaN(userAge));  // false,21 不是一个非数字
var userName='andy';
console.log(userName);        // true,"andy" 是一个非数字

字符串型 String

字符串引号嵌套

/***  1、字符串引号嵌套*  JS 可以使用单引号嵌套双引号，或者双引号嵌套单引号 （外双内单，外单内双）*/
// Good:
var strMsg='我们是"苦逼的"程序员';
var strMsg2="我们是'高尚的'工程师";
// Bad:
var badQuotes='What on earth?"; // 报错，不能单双引号搭配

字符串转义符

/***  2.字符串转义符*  类似HTML里面的特殊字符，字符串中也有特殊字符，称为转义符。*  转义符都是 \ 开头的，常用的转义符及其说明如下：*  \n    => 换行符*  \\    => 斜杠*  '     => 单引号*  "     => 双引号*  \t    => tab缩进*  \b    => 空格*/
console.log('\tThis\bis\bthe\bjavascript,\nHelllo\bworld!');

字符串长度

/***  3、字符串长度*  字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。*  通过自负床的length属性可以获取整个字符串的长度。*/
var strMsg="我们是帅气多金的程序员！";
console.log(strMsg.length); // 12

字符串拼接

/***  4.字符串拼接*  多个字符串之间可以使用+进行拼接，*  拼接方式：字符串+任何类型=拼接之后的字符串*  拼接前会把字符串相加大的任何类型转成字符串，再拼接成一个新的字符串*  口诀：数值相加，字符相连*/
// 字符串 "相加"
console.log('hello'+' '+'world'); // hello world
// 数值字符串 "相加"
console.log('100'+'100'); // 100100
// 数值字符串 + 数值
console.log('110'+120); // 110120

字符串拼接加强

/***  5、字符串拼接加强*  经常会将字符串和变量来拼接，变量可以很方便的修改里面的值*  变量是不能添加引号的，因为加引号的变量会变成字符串*  如果变量两侧都有字符串拼接，口诀：引引相加，删掉数字，变量写在中间*/
// Good:
console.log('小花' + 18);        // 只要有字符就会相连
var age = 18;
console.log('小花' + age);         // pink老师18
console.log('小花' + age + '岁啦'); // pink老师18岁啦
// Bad:
console.log('小花age岁啦');      // 这样不行哦

布尔型Boolean

/***  6、布尔型Boolean*  布尔型有两个值：true||false,其中true表示真（对），false表示假（错）*  布尔型和数字型相加的时候，true为值1，false为值0。*/
console.log(true+1); // 2
console.log(false+1); // 1

Undefined和 Null

/***  7、undefined和Null*/
//  一个声明后没有被赋值的变量会有一个默认值undfined(如果进行相连或相加时，结果如下：)
var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);      // NaN
console.log(true + variable);    //  NaN//  一个声明变量给null值，里面存的值为空
var vari = null;
console.log('你好' + vari);   // 你好null
console.log(11 + vari);       // 11
console.log(true + vari);     // 1

类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString());
String() 强制转换	转成字符串	var num=1;alert(String(num));
+ 拼接字符串	和字符串拼接的结构都是字符串	var num=1;alert(num+‘字符串’)；

toString() 和 String() 使用方式不一样。

三种转换方式，更多第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转换为数字型（重点）

方式	说明	案例
parseInt(string)	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)	将string类型转成浮点数值型	parseFloat(‘78.21’)
Number(string) 强制转换	将string类型转成数值型	Number(‘12’)
（- * /） js 隐式转换	利用算术运算符转换为数值型	‘12’-0

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点

隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’)

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

其余值都会被转换为 true

2.3 运算

算数运算符

算术运算符概述

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	实例
+	加+	10 + 20 = 30
-	=减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余（取模）	9 % 2 = 1

浮点数的精度问题

/***  浮点数精度问题*  浮点数值的最高精度是17为小数，但在进行算术计算时其精确度远远不如整数*  注意：不要判断两个浮点数的算术结果是否相等*/
var result=0.1 + 0.2;     // 结果：0.30000000000000004  不是0.3
console.log(0.07 * 100);  // 结果：7.000000000000001    不是7

表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值

递增和递减运算符

递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。

/***  在JavaScript中，递增（++）和递减（--）既可放在变量前面，还可放在变量后面。*  放在变量前面时，我们可以称为前置递增（递减）运算符，*  放在变量后面时，我们可以称为后置递增（递减）运算符。*  注：递增和递减运算符必须和变量配合使用。*/

递增运算符

前置递增 / 递减运算符

/***  1、前置递增/递减运算符*  ++num 前置递增，就是自加1，类似于 num =  num + 1; ==> ++num*  口诀：先自加，后返回值。*  --num 前置递减，就是自减1，类似于 num =  num - 1; ==> --num*  口诀：先自减，后返回值。*/
var num = 10;
console.log(++num + 10); // 21
console.log(--num - 10); // -1

后置递增 / 递减运算符

/***  2、后置递增/递减运算符*  num++ 后置递增，就是自加1，类似于 num =  num + 1; ==> num++*  口诀：先放回值，后自加*  num-- 后置递减，就是自减1，类似于 num =  num - 1; ==> num--*  口诀：先放回值，后自减*/
var num = 10;
console.log(10 + num++); // 20
console.log(10 - num--); // 0

比较运算符

比较运算符概述

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于	1 < 2	true
>	大于	1 > 2	false
<=	小于等于	2 <= 2	true
>=	大于等于	3 >= 2	true
==	判等	17 == 17	true
!=	不等	17 != 17	false
=== !==	全等/不全等	37 === ‘37’	false

等号比较

符号	作用	用法
=	赋值	把右边的值给左边
==	判断	判断两边的值是否相等（注意有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符	说明	案例
&&	逻辑与，简称 ’与‘ and	true && false
\|\|	逻辑或，简称 ’或‘ or	true \|\| false
！	逻辑非，简称 ’非‘ not	!true

逻辑与&&

两边都是 true才返回 true，否则返回 false
逻辑或 ||

两边都是 true才返回 true，否则返回 false
逻辑非！

逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false
```
var isOk = !true;
console.log(isOk);  // false
```

短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与

/***  逻辑与*  语法：表达式1 && 表达式2*  - 如果表达式1的值为真，则返回表达式2*  - 如果表达式1的值为假，则返回表达式1*/
console.log(123 && 456);        // 456
console.log(0 && 456);          // 0
console.log(123 && 456 && 789); // 789

逻辑或

/**
*  逻辑或
*  语法：表达式1 || 表达式2
*  - 如果表达式1的值为真，则返回表达式1
*  - 如果表达式1的值为假，则返回表达式2
*/
console.log(123 || 456);        // 123
console.log(0 || 456);          // 456
console.log(123 || 456 || 789); // 123

赋值运算符

概念：用来把数据赋值给变量的运算符。

赋值运算符	说明	案例
=	直接赋值	var userName=‘值’；
+=、-=	加、减一个数后，再赋值	var age=10; age+=5; // 15
*=、/=、%=	乘、除、取模后，再赋值	var age=2;age*=5；// 10

运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++，–，！
3	算术运算符	先*， /， % ；后 +， -
4	关系运算符	> ， = ，<， <=
5	相等运算符	== ， !=， === ， !==
6	逻辑运算符	先 &&，后 \|\|
7	赋值运算符	=
8	逗号运算符	，

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

2.4 语句

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

分支流程控制

分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句：if 语句、switch 语句

if 语句

语法结构

/***  if分支*  语句可以理解为一个行为，循环语句和分支语句就是典型的语句。*  一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。*/
// 条件成立执行代码，否则什么也不做
if (条件表达式) {// 条件成立执行的代码语句
}

执行流程

if else语句（双分支语句）

语法结构

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {// [如果] 条件成立执行的代码
} else {// [否则] 执行的代码
}

执行流程

if else if 语句(多分支语句)

语法结构

// 适合于检查多重条件。
if (条件表达式1) {语句1；
} else if (条件表达式2)  {语句2；
} else if (条件表达式3)  {语句3；....
} else {// 上述条件都不成立执行此处代码
}

执行逻辑

三元表达式

语法结构
```
表达式1 ? 表达式2 : 表达式3;
```
执行思路
- 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
- 简单理解：就类似于 if else （双分支）的简写

switch分支流程控制

语法结构

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
```
/***   switch分支*   switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。*   当要针对变量设置一系列的特定值的选项时，就可以使用 switch。*    注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。*/
switch( 表达式 ){ case value1:// 表达式 等于 value1 时要执行的代码break;case value2:// 表达式 等于 value2 时要执行的代码break;default:// 表达式 不等于任何一个 value 时要执行的代码
}
```
- switch ：开关转换， case ：小例子选项
- 关键字 switch 后面括号内可以是表达式或值，通常是一个变量
- 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
- switch 表达式的值会与结构中的 case 的值做比较
- 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
- 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
switch 语句和 if else if 语句的区别
- 一般情况下，它们两个语句可以相互替换
- switch…case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
- 当分支比较少时，if… else语句的执行效率比 switch语句高。
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

循环

1. for循环

语法结构

 /***  for循环*  执行过程：*  1.初始化变量，初始化操作在整个 for 循环只会执行一次。*  2.执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。*/
for(初始化变量; 条件表达式; 操作表达式 ){//循环体
}

名称	作用
初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

执行操作表达式，此时第一轮结束。

第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。

继续执行操作表达式，第二轮结束。

后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

断点调试：

 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

2. 双重for循环

双重 for 循环概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

双重 for 循环语法

/***   双重for循环*   1 内层循环可以看做外层循环的循环体语句*   2 内层循环执行的顺序也要遵循 for 循环的执行顺序 *   3 外层循环执行一次，内层循环要执行全部次数*/
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  需执行的代码;}
}

for 循环小结
- for 循环可以重复执行某些相同代码
- for 循环可以重复执行些许不同的代码，因为我们有计数器
- for 循环可以重复执行某些操作，比如算术运算符加法操作
- 随着需求增加，双重for循环可以做更多、更好看的效果
- 双重 for 循环，外层循环一次，内层 for 循环全部执行
- for 循环是循环条件和数字直接相关的循环

3. while循环

while语句的语法结构如下：

 /***   while 循环*   执行思路：*   1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码*   2 执行循环体代码*   3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束*   注：使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环*/
while (条件表达式) {// 循环体代码
}

4. do-while循环

do… while 语句的语法结构如下：

/***  do-while循环*  执行思路：*  1 先执行一次循环体代码 *  2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码*  注：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码*/
do {// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

5. continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

3、各种类型的函数、参数与原理

函数的声明方式

自定义函数方式（命名函数）
```
// 函数关键字function自定义函数方式
function fn(){...}
fn();// 函数调用（函数体上下都可以用）
```
- 因为有名字，所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
函数表达式方式（匿名函数）
```
//利用函数表达式定义函数，后面跟分号结尾
var fn=function(){...};
fn(); // 函数调用（函数体下才能用）
```
- 因为函数没有名字，所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面

函数的参数

函数参数语法

/***   函数参数语法*   形参：函数定义时设置接受调用时传入*   实参：函数调用时传入小括号内的真实数据*   参数的作用：在函数内部某些值不固定,可以通过参数调用函数时传递不同的值进去*   1. 调用的时候实参值是传递给形参的*   2. 形参简单理解为：不用声明的变量*   3. 实参和形参的多个参数之间用逗号（,）分隔*/
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

函数形参和实参数量不匹配时

参数个数	说明
实参个数 = 形参个数	输出正确结果
实参个数 > 形参个数	只取到形参的个数
实参个数 < 形参个数	多的形参定义为undfined，结果为NaN

注意：在JavaScript中，形参的默认值是undefined。

小结：

函数可以带参数也可以不带参数

声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined

调用函数的时候，函数名括号里面的是实参

多个参数中间用逗号分隔

形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

函数返回值

return 语句

 /***   函数返回值*   函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回。*   - 在使用 return 语句时，函数会停止执行，并返回指定的值*   - 如果函数没有 return ，返回的值是 undefined*/
// 声明函数
function 函数名（）{...return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）

continue ：跳出本次循环，继续执行下次循环（如 for、while）

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

arguments 是一个类似数组的对象, 对应于传递给函数的参数。

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
```
function fn(arguments){console.log(arguments);
}
```
- arguments.callee
  
  指向当前执行的函数。
- arguments.caller **
  
  指向调用当前函数的函数。
- arguments.length
  
  指向传递给当前函数的参数数量。
arguments 对象可以与剩余参数、默认参数和结构赋值参数结合使用。

在严格模式下,剩余参数剩余参数、默认参数和结构赋值参数的存在不会改变 arguments 对象的行为,但是在非严格模式下就有所不同了。

函数的原理

/***   函数的原理*   1、函数名：函数名时函数开始地址的一个标签*   2、参数：函数的参数是给函数处理的资料，是函数的变量。函数的参数可以有不止一个，也可以没有*   3、本地变量：本地变量是只在本函数中有效，函数结束后酒不可用的变量，本地变量对其他函数不可见。*   4、静态变量：静态变量是直到结果都一直有效的变量。函数内的静态变量对其他模块/函数不可见。*   5、全局变量：全局变量是函数外申请的变量。如果多个函数用到这个全局变量，最好直接采用传参的方式。配置文件保存到全局变量中是个不错的点子。*   6、返回地址：返回地址是一个不直接使用的隐含的参数。简而言之，就是函数执行完之后去执行指令的地址。*   7、返回值：返回值是主要的方法传递执行结果给上层函数，大多数语言都只允许有一个返回值。* */

4、预编译、暗示全局变量

预编译

预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译；只有在解释执行阶段才会进行变量初始化；

预编译(函数执行前)

创建AO对象（Active Object）
查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
实参形参相统一，实参值赋给形参
查找函数声明，函数名作为AO对象的属性，值为函数引用

预编译(脚本代码块script执行前)

查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined
查找函数声明，函数名作为全局对象的属性，值为函数引用
预编译小结
- 预编译两个小规则
  1. 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
  2. 变量声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
- 预编译前奏
  1. imply global 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
  2. 一切声明的全局变量，全是window的属性； var a = 12;等同于Window.a = 12;
- 函数预编译发生在函数执行前一刻。