JavaScript 学习之基本语法

一、基本语法

1.1 语句

JavaScript 程序的执行单位为行，一般情况下，每一行就是一个语句。

语句以分号结尾，一个分号就表示一个语句结束；如果省略分号，则由解析器确定语句的结尾。

建议每条语句结束都加上分号，可以避免很多错误和增进代码性能！

var a = 1 // 可以，但不推荐
var b = 2; // 推荐
var c = 3, d = 4; // 推荐

1.2 变量

变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。

通过var关键字声明的变量为局部变量，直接声明的为全局变量。

变量的类型没有限制，变量可以随时更改类型。

建议每次都通过 var 声明变量！

var a = 1; // 局部变量
b = 2; // 全局变量，不推荐

变量提升：JavaScript 引擎先解析代码，获取所有被声明的变量，然后再一行一行地运行。

因此以下代码不会抛出异常：

console.log(a); // undefined
var a = 1;

等价于下面代码：

var a;
console.log(a);
a = 1;

1.3 标识符

标识符是用来识别各种值的合法名称，最常见的标识符就是变量名和函数名。

标识符命名规则：

• 首字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）；
• 第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字 0-9。

标识符对大小写敏感。

// 合法标识符
var arg0;
var _tmp;
var $elem;
var π;
var 标识符; // 不推荐使用

JavaScript 有一些关键保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

1.4 注释

源码中被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。

两种注释的写法：单行注释，用//起头；多行注释，放在/*和*/之间。

// 单行注释

/*
	多行
	注释
*/

1.5 区块

使用大括号，将多个相关的语句组合在一起，称为“区块”。

对于var命令来说，JavaScript 的区块不构成单独的作用域！

{
	var a = 1;
}

console.log(a); // 1

1.6 条件语句

1.6.1 if 结构

if结构先判断一个表达式的布尔值，然后根据布尔值的真（true）假（false），执行不同的语句。

建议在可能执行多个语句的if语句中使用大括号，因为这样方便插入语句！

if(condition) { // 推荐
  statement1;
  statement2;
}

if(condition) statement;

例：

var a = 1;
if(a < 2) {
  console.log("a < 2"); 
}

if(true) retrun; // 函数中常用

1.6.2 if...else 结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

if(condition) { 
  statement1;
}else {
  statement2;
}

if(condition1) { 
  statement1;
}else if(condition2) {
  statement2;
}else {
  statement3;
}

例：

var a = 1;
if(a === 2) {
	console.log("a === 2");
}else {
  console.log("a !== 2");
}

var b = 1;
if(b < 0) {
  console.log("b < 0");
}else if(b === 0) {
  console.log("b === 0");
}else {
  console.log("b > 0");
}

1.6.3 switch 结构

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

switch(expression) {
  case value1:
  	statement1;
  	break;
  case value2:
  	statement2;
  	break;
  ...
  default:
  	statement;
}

例：

var date = 1;
switch(date) {
  case 1:
    console.log("壹");
    break;
  case 2:
    console.log("贰");
    break;    
  case 3:
    console.log("叁");
    break;
  default:
    console.log("无法转换的数字：" + date)
}

1.6.4 三元运算符 ?:

(condition) ? statement1 : statement2;
// 等价于下面if语句
if(condition) { 
    statement1;
}else{
    statement2;
}

1.7 循环语句

循环语句用于重复执行某个操作，它有多种形式。

1.7.1 while 循环

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while(condition) {
  statement1;
  statement2;
}

while(condition) statement;

例：

var i = 0;
while(i < 5) {
  console.log(i); // 0,1,2,3,4
  i++;
}

while(true) console.log(1); // 无限循环

1.7.2 for 循环

for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。

for(initialize; expression; loop-expression) {
	statement1;
	statement2;
}

例：

for(var i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}

for(;;) console.log(1); // 无限循环

1.7.3 do...while 循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do{
  statement1;
  statement2;
}while(condition);

例：

var i = 0;
do{ // do...while 语句至少会执行一次
	console.log(i);
	i++
}while(i < 0);

1.7.4 break 和 contunue 语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

break语句用于跳出代码块或循环。

var i = 0;
while(i < 100){
  if(i === 5) break; // 循环执行五次后停止
  console.log(i); // 0,1,2,3,4
  i++;
}

注意：while 循环中，continue 放在自增语句前会造成无限循环

var i = 0;
while(i < 100){
  if(i === 5) continue; // i为5时，后面代码跳过，直接进行下一次循环；由于自增语句不执行，无限循环
  console.log(i); // 0,1,2,3,4
  i++;
}

var i = 0;
while(i < 100){
	i++;
  if(i === 5) continue; // i为5时，后面代码跳过，直接进行下一次循环
  console.log(i); // 0,1,2,3,4,6,...
}

1.7.5 label

语句的前面有标签，相当于定位符，用于跳转到程序的任意位置；标签可以是任意的标识符。

跳出外部循环：

top:
	for(var i = 0; i < 3; i++) {
		for(var j = 0; j < 3; j++) {
      if(i === 1 && j === 1) break top; // 跳出外部循环
      // if(i === 1 && j === 1) break; // 跳出内部循环
      console.log(i, j); // (0,0),(0,1),(0,2),(1,0)
    }
	}

跳过当前外部循环：

top:
	for(var i = 0; i < 3; i++) {
		for(var j = 0; j < 3; j++) {
      if(i === 1 && j === 1) continue top; // 跳过当前外部循环
      // if(i === 1 && j === 1) continue; // 跳过当前内部循环
      console.log(i, j); // (0,0),(0,1),(0,2),(1,0),(2,0),(2,1),(2,2),
    }
	}

跳出代码块：

foo: 
	{
  	console.log(1);
    break foo;
    console.log(2); // 不会执行
	}
console.log(3)