每日三问之JavaScript语句、JavaScript函数、vue生命周期

 JavaScript语句

• if语句

其中的 condition（条件）可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值。 ECMAScript 会自动调用 Boolean()转换函数将这个表达式的结果转换为一个布尔值。

if (i > 25) 
 alert("Greater than 25."); // 单行语句
else { 
 alert("Less than or equal to 25."); // 代码块中的语句
}

• do-while语句 

do-while 语句是一种后测试循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。在对条件表达式求值之前，循环体内的代码至少会被执行一次。

var i = 0; 
do { 
 i += 2; 
} while (i < 10); 
alert(i);

• while语句 

while 语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值。因此，循环体内的代码有可能永远不会被执行。

var i = 0; 
while (i < 10) {
    i += 2; 
}

• for语句 

for 语句也是一种前测试循环语句，但它具有在执行循环之前初始化变量和定义循环后要执行的代 码的能力。

var count = 10; 
for (var i = 0; i < count; i++){ 
 alert(i); 
}

由于 ECMAScript 中不存在块级作用域（第 4 章将进一步讨论这一点），因此在循环内部定义的变量也可以在外部访问到。例如：

var count = 10; 
for (var i = 0; i < count; i++){
alert(i); 
} 
alert(i); //10

• for-in语句 

for-in 语句是一种精准的迭代语句，可以用来枚举对象的属性。

for (var propName in window) { 
 document.write(propName); 
}

ECMAScript 对象的属性没有顺序。因此，通过 for-in 循环输出的属性名的顺序是不可预测的。具体来讲，所有属性都会被返回一次，但返回的先后次序可能会因浏览器而异。

建议在使用 for-in 循环之前，先检测确认该对象的值不是 null 或 undefined。

• break和continue语句

break 和 continue 语句用于在循环中精确地控制代码的执行。其中，break 语句会立即退出循环，

强制继续执行循环后面的语句。而 continue 语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行。

var num = 0; 
for (var i=1; i < 10; i++) { 
 if (i % 5 == 0) { 
 break; 
 } 
 num++; 
} 
alert(num); //4

也就是说，在变量 i 等于 5 时，循环总共执行了 4 次；而 break 语句的执行，导致了循环在num 再次递增之前就退出了。

如果在这里把 break 替换为 continue 的话，则可以看到另一种结果：

for (var i=1; i < 10; i++) { 
 if (i % 5 == 0) { 
 continue; 
 }
 num++; 
} 
alert(num); //8

为什么不是9呢？而 num 的最终值之所以是 8，是因为 continue 语句导致它少递增了一次。

• switch语句

switch (expression) { 
 case value: statement 
     break; 
 case value: statement 
     break; 
 case value: statement 
     break; 
 case value: statement 
     break;
 default: statement 
}

switch 语句中的每一种情形（case）的含义是：“如果表达式等于这个值（value），则执行后面的 语句（statement）”。而 break 关键字会导致代码执行流跳出 switch 语句。

switch (i) { 
 case 25: 
 alert("25"); 
 break; 
 case 35: 
 alert("35"); 
 break; 
 case 45: 
 alert("45"); 
 break; 
 default: 
 alert("Other"); 
}

注意：switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换

JavaScript函数

通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

function functionName(arg0, arg1,...,argN) { 
 statements 
}

在这个例子中，由于调用 alert() 函数的语句位于 return 语句之后，因此永远不会显示警告框。当然，一个函数中也可以包含多个 return 语句：

function diff(num1, num2) { 
 if (num1 < num2) { 
 return num2 - num1; 
 } else { 
 return num1 - num2; 
 } 
}

严格模式对函数有一些限制：

1. 不能把函数命名为 eval 或 arguments；
2. 不能把参数命名为 eval 或 arguments；
3. 不能出现两个命名参数同名的情况。

• 理解参数

函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。实际上，在函数体内可以通过 arguments 对象来访问这个参数数组，从而获取传递给函数的每一个参数。

arguments 对象只是与数组类似（它并不是 Array 的实例），因为可以使用方括号语法访问它的每一个元素（即第一个元素是 arguments[0]，第二个元素是 argumetns[1]，以此类推），使用length 属性来确定传递进来多少个参数。

function sayHi() { 
 alert("Hello " + arguments[0] + "," + arguments[1]); 
}

• 没有重载

如果在 ECMAScript 中定义了两个名字相同的函数，则该名字只属于后定义的函数。请看下面的例子：

function addSomeNumber(num){ 
 return num + 100; 
} 
function addSomeNumber(num) { 
 return num + 200; 
} 
var result = addSomeNumber(100); //300

vue生命周期

• 定义

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

• 阶段及作用

beforeCreate（创建前，只执行1次）

在数据观测和初始化事件还未开始。data,method 还没有初始化，不能使用，不能调用

created(创建后，只执行1次）

完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。data,method 初始化，能使用，能调用，请求服务器的数据，并把数据转存到data中，供template模板渲染时使用

beforeMounted(挂载前,只执行1次)

在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置:
编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。

模板初始化，没有渲染

mounted(挂载后,只执行1次)

在el被新创建的vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置:
用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

模板渲染到页面上

beforeUpdate（更新前，可执行0~无限次）

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

更新数据之前做的事情

updated(更新后，可执行0~无限次）

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

更新完数据会调用这个方法，每次都会。

beforeDestroy（销毁前，只执行1次）

在实例销毁之前调用。实例仍然完全可用。将要销毁组件，但尚未销毁，组件仍然是正常工作状态。

destroyed（只执行1次）

在实例销毁之后调用。调用后，所有的时间监听器都会被溢出，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

组件已被销毁，浏览器中对应的dom已完全被销毁

• 总结