一、代码优化方法

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的比较


三、循环语句

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 = 1
for (; i <= 100; i++) {
    sum = sum + i;
}
console.log(sum);
// 2)第二个语句可以省略,但是要在代码中加入if语句判断何时break
var 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);//5050
console.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循环语句

四、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语句

五、for-in语句

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语句在遍历时,会有随机性,并不能保证都是从上到下遍历。但实际上较少出现随机的情况