HTML5学习笔记 —— JavaScript语句

一、代码优化方法

1.函数封装
2.函数位置的调整

主功能函数 → 辅助函数 → 事件 → 依赖函数（核心库）（外部引入需要优先于主功能函数，放在head部分）

3.变量 —— 统一提前放在上面
4.空行 —— 变量与函数之间、各函数之间、各事件之间、函数内部的变量部分与循环判断语句等部分之间添加空行，增加可读性
5.注释 —— 变量注释、函数功能注释、代码块注释

二、判断语句

1.if语句

需要进行逻辑判断，并根据逻辑判断的真假结果，选择不同代码运行时，选择if语句if语句相关问题    a.else不是必须要出现    b.else与if匹配：else会自动寻找在它之前的无匹配的if来匹配    c.else和if之间不能有任何内容    d.if语句运行规则        1)判断语句中的条件遵循数据类型的布尔值关系来进行判断

2.switch语句

switch(表达式A) {    case 表达式1 : 代码段1;    break;    case 表达式2 : 代码段2;    break;    case 表达式3 : 代码段3;    break;    default : 代码段4;}

a.表达式A是要进行判断/比对的表达式，让每个case后面的表达式与表达式A相比较，如果两者全等，则执行相应case后面的语句。b.表达式A必须是一个已定义的值，若未定义，则会报错。c.表达式A的值，为true、false、null时，不会被当做数字1、0、0进行判断。d.break关键字可以结束switch语句。break语句并非必须存在的，如果没有break，则从符合条件的case开始一直往下执行到switch结束或者遇到break。e.default，一般用在最后，表示非以上的任何情况下而发生的情况。    switch最后执行default语句，如果default后面带有break，那么程序就会正常跳出switch，否则，程序会继续向后执行switch语句。    也就是说，在存在break语句时，不管default放在什么位置，它总是在最后一个处理，然后继续向下处理。f.若不存在break语句时，default则不会在最后一个被处理，而是按照现在的语句顺序进行输出。g.如果没有定义default，如果表达式A与其余表达式都不相同，则不会返回任何值h.此外，可以有多个case的语句。(加入两种case要执行同样的内容，可以书写为 case 表达式1: case 表达式2: 代码段)

var count = 3;switch(count) {    case 0: console.log(0);    case 1: console.log(1);    case 2: console.log(2);    case 3: console.log(3);    default: console.log(5);    case 4: console.log(4);}// 输出3、5、4

var count = 3;switch(count) {    case 1: console.log(1);break;    case 2: console.log(2);break;    case 3: console.log(3);break;    case 4: console.log(4);break;    default: console.log(5);break;}// 输出3

3.if与switch的选择

a.从视觉层面上来说，对于一部分功能，选用switch语句可以精简代码，提升视觉效果。b.从性能角度来说，由于switch的条件简单，编译器会为它做二分法优化(或跳转表)，平均性能相对会高一些。    而if else所比较的条件会远远比switch的复杂，编译器通常不会做过多的优化。    简言之就是对于常量方面的条件判断，switch性能略胜于if语句。4.扩展知识switch语句以及与if的比较

http://www.h5course.com/plus/view.php?aid=375

三、循环语句

1．for循环

需要循环执行某段代码，或者一次输出一组函数的时候，可以选择使用for循环代码。

for(初始化表达式; 控制表达式; 循环后表达式) {    //书写代码}

a.何时使用for循环    1)for语句用于实现相同动作或者有规律可循的动作（for语句可以实现，但是也有其他语句可以实现）b.三个表达式可否删除    可以删除，但是“;”不可删除

//原代码var sum = 0;for (var i = 1; i <= 100; i++) {    sum = sum + i;}console.log(sum);   

// 1)第一个表达式可省略，变量定义到外部var sum = 0;    var i = 1for (; i <= 100; i++) {    sum = sum + i;}console.log(sum);

// 2)第二个语句可以省略，但是要在代码中加入if语句判断何时breakvar sum = 0;for (var i = 1;; i++) {    sum = sum + i;    if (i >100) {        break;    }}console.log(sum);

// 3)第三个语句可以省略，但是表达式要放在内部var sum = 0;for (var i = 1; i <= 100;) {    sum = sum + i;    i++;}console.log(sum);

// 4)三个语句都可以省略，但需要语句来控制循环与退出循环。否则可能造成语句被无限循环var sum = 0;var i = 0;for ( ; ; ) {    if (i >= 10) {        break;    }    sum = sum + i;    i++;}console.log(sum);

2．while循环

语法：while(判断条件){}while循环满足条件后执行大括号内的内容,下面我们来直接看下demo只有当达到条件时累加才会被执行demo:

var sum = 0;        //声明变量sum用于累加求和var i = 1;          //声明变量i用于条件判断while(i<=100) {    sum = sum +i;    i++;}console.log(sum);//5050console.log(i);//101

可以看到当大于100的时候while不满足条件因此没有执行累加，最后结果就为1加到100的结果

3．do…while循环

语法：do {执行} while(条件)do while循环在字面上就能与while循环区分开来，do while不管结果如何，先do了再进行判断。典型的先斩后奏型，因此第一次执行时无论是否满足条件do里面的代码都将被执行例如以下demo

var i = 1;do {    console.log(i); // 1    i++;} while (i < 0);console.log(i); // 2

可以看得出来，i不小于0，但是do内的代码还是执行了一次，最终i变为2，因此do while在执行过程中do内代码必定被执行至少一次。

4．扩展知识

while和do while、for循环语句

http://www.h5course.com/a/20160103369.html

四、break以及continue语句

1.break语句

a.用来中断当前循环。b.若达到break语句的条件时，break语句之前的语句将会执行，之后的语句以及整个循环都停止执行。c.通常在switch语句和while、for、for...in、或do...while循环中使用break语句。

var sum = 0;for (var i = 0; i < 5; i++) {    console.log(i);    if (i == 2) {        break;    }    sum += i;}console.log(sum);// 输出 0, 1, 2, 1(sum的值)

2.continue语句

a.用来结束本次循环b.若达到continue语句的条件时，continue语句之前的语句将会执行，之后的语句将不执行，但整个循环不会停止，即停止当前循环。

var sum = 0;for (var i = 0; i < 5; i++) {    console.log(i);    if (i == 2) {        continue;    }    sum += i;}console.log(sum);// 输出0, 1, 2, 3, 4, 8(sum的值)

3.break与continue的区别

a.break语句可以用于循环语句，也可以用于分支语句（switch），而continue语句只能用于循环语句（需要注意。    不要说是for语句，是针对所有的循环语句，break和continue都是可以使用的）。b.break语句用于跳出全部循环，而continue用于结束本次循环。

4.扩展知识

break以及continue语句

http://www.h5course.com/a/20150709247.html

五、for-in语句

http://www.h5course.com/a/20150527189.html

1.JavaScript获取对象.属性、对象.方法的方式

当我们知道对象中有确定属性或者方法的时候，我们可以通过对象.属性和对象.方法这样的方式来获取该对象的属性和方法。我们在获取对象的属性值时，通常使用的是对象.属性这种方式来获取对象的属性值。如下例子：

var obj = {};obj.name = "HTML5学堂";obj.fn = function(){    console.log("http://www.h5course.com");}console.log(obj.name);    // "HTML5学堂"obj.fn();    // "http://www.h5course.com"

但如果我们的属性是一个变量，这个时候我们就不能使用对象.属性这种方式来获取我们的属性值，这个时候，可以使用对象["属性"]的方式来获取。如下例子：

var obj = {    "name": "HTML5学堂",    "url": "http://www.h5course.com"}console.log(obj["name"]);    // "HTML5学堂"var prop = "url";console.log(obj[prop]);    // "http://www.h5course.com"

2.类似JSON数据格式

在使用for-in语句时，需要遍历的对象的属性及其属性值，需要以类似JSON的数据格式进行编写，如下例子：

var properVal = {    "width" : "200px",    "height" : "300px",    "opacity" : "1"}console.log(properVal.width);console.log(properVal.height);console.log(properVal.opacity);console.log(properVal["width"]);console.log(properVal["height"]);console.log(properVal["opacity"]);for (var proval in properVal) {    console.log(proval);    console.log(proval, properVal[proval]);}

3.for-in语句的基本语法

在项目开发的过程中，当需要获取对象中的属性时，由于对象中属性不确定，这时需要使用for-in语句来获取对象里面的属性。for-in语句的基本语法如下：for(变量 in 对象){    语句}下面是一个示例：

var obj = {    "name": "HTML5学堂",    "url": "http://www.h5course.com"}var prop;for(prop in obj){    console.log(prop);    // "name"    "url"}

每次循环，我们的变量prop都会获取到obj的一个新属性，直到遍历到obj中的所有的属性，结束for循环语句。我们既然可以获得obj的所有的属性，那个就可以得到obj所有的属性值。

var obj =  {    "name": "Baidu",    "url": "http://www.baidu.com"}var prop;for(prop in obj){    console.log(obj[prop]);    // "Baidu"    "http://www.baidu.com"}

我们通过for-in语句，遍历获取到了obj中所有的属性值。但需要注意一点的是，for-in语句无法保证遍历顺序，应尽量避免依赖对象属性顺序的代码。

4.for-in与for语句的比较

a.for-in主要用于遍历对象的属性b.for按照设置的条件循环for语句里面包含的语句块（代码块）—— 有下标值等c.for-in语句无法保证遍历的顺序for-in语句在遍历时，会有随机性，并不能保证都是从上到下遍历。但实际上较少出现随机的情况