前端新手JS语法笔记1——语法基础

主要内容参考 wangdoc.com/javascript/…

一、表达式与语句

语句

JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var a = 1 + 3;

这条语句先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。

1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。

语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

var a = 1 + 3 ; var b = 'abc';

分号前面可以没有任何内容，JavaScript 引擎将其视为空语句。

;;; //表示3个空语句。

表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

1 + 3;
'abc'; //这两行语句只是单纯地产生一个值，并没有任何实际的意义。

表达式

• 1+2 表达式的值是3
• add（1，2）表达式的值为函数的返回值
• console.log 表达式的值为函数本身
• console.log（3 ）表达式的值是undefined，表达式显示的内容是3，

表达式和语句的区别

• 只有函数有返回值，函数也有值，函数的值就是他的返回值，但是一般的表达式不能说返回值，只能说值
• 语句主要是用来改变环境的，所以很多语句的值都是undefined，表达式才主要是用来取值的
• 表达式一般都有值，语句可能有可能没有

JS对大小写敏感

大部分空格是没有实际意义的

• var a = 1 和 var a=1 没有区别
• 加回车大部分时候也不影响，只有一个地方不能加回车，就是return的后面

二、变量

2.1 概念

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

var a = 1;

上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，称为将数值1“赋值”给变量a。以后，引用变量名a就会得到数值1。最前面的var，是变量声明命令。它表示通知解释引擎，要创建一个变量a。

变量的声明和赋值，是分开的两个步骤，上面的代码将它们合在了一起，实际的步骤是下面这样。👇

var a;
a = 1;

如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个特殊的值，表示“无定义”。👇

var a;
a // undefined

如果变量赋值的时候，忘了写var命令，这条语句也是有效的。👇

var a = 1;
// 基本等同
a = 1;

但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。

如果一个变量没有声明就直接使用，JavaScript 会报错，告诉你变量未定义。👇

x
// ReferenceError: x is not defined

可以在同一条var命令中声明多个变量。👇

var a, b;

JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。👇

var a = 1;
a = 'hello';

上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。

如果使用var重新声明一个已经存在的变量，是无效的👇

var x = 1;
var x;
x // 1

但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。

var x = 1;
var x = 2;

// 等同于

var x = 1;
var x;
x = 2;

2.2 变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

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

上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

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

最后的结果是显示undefined，表示变量a已声明，但还未赋值。

三、标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符，就会报错。

规则

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

变量名是标识符

• var _ = 1
• var $ = 2
• var _____ =6 这样用会被打
• var 你好 = 'hi'
• 还有其他格式

合法标识符举例👇

arg0
_tmp
$elem
π

非法标识符举例👇

1a  // 第一个字符不能是数字
23  // 同上
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

中文是合法的标识符，可以用作变量名。

var 临时变量 = 1;

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。

四、注释

// 这是单行注释

/*
 这是
 多行
 注释
*/

五、区块 block

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

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

{
  var a = 1;
}

a // 1

上面代码在区块内部，使用var命令声明并赋值了变量a，然后在区块外部，变量a依然有效，区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。在 JavaScript 语言中，单独使用区块并不常见，区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。

六、条件语句

6.1 if 语句（写起来麻烦，能用短路就用短路）

语法

if（表达式）｛语句1｝else｛语句2｝//这句话含义是如果表达式是真，就执行语句1，否则就执行语句2。表达式只有真、假两种情况。

｛｝在语句只有一句话的时候可以省略，但是不建议这么做

if (布尔值)
  语句;

// 或者
if (布尔值) 语句;

变态情况

• 表达式可以非常变态，比如 a =1，是对a重新赋值，如果想说a是否等于1，应该用 a===1
• 语句1里可以非常变态，如嵌套if else

if(a < 100){
	if(a >10){
		console.log('a大于10')
	}
}

• 语句2里可以非常变态，如嵌套if else

if(a < 100)else if(a <1000)
		console.log('a小于1000且大于100')

• 缩进也可以很变态

a = 1
if(a===2)
	console.log('a')
	console.log('a等于2')

最终返回的是a等于2，因为

a = 1
if(a===2)｛
	console.log('a')
｝

console.log('a等于2')

程序员戒律：使用没有歧义的写法

最推荐的写法

if(表达式）｛
	语句
｝else if(表达式){
	语句
} else {
	语句
｝

次推荐的写法

function fn(){
	if (表达式){
		return 表示式
	}
	if （表达式）{
		return 表达式
	｝
	return 表达式
}

return包含后面都不执行的意思，所以此时可以省略else，因为else的意思就是如果前面都没执行，就执行else之后的。

6.2 switch语句（不常用）

if...else...升级版，少用，很容易用错。不得不用的时候再用。

语法

switch (公主选驸马){
	case "富二代":
		//...
	break;
	case "官二代"：
		//...
	break;
	default:
		//...
}

大部分时候，如果少写了一个break，你就完了

少部分时候，会需要专门少写break

6.3 问号冒号表达式（很常用）

用来简化fi和else里只有一个语句的情况

function max(a,b){
	if(a>b)return a;
	else return b;
}

function max(a,b){
	return a>b ? a:b
}

求绝对值

function abs(n){
	 return n>0?n: -n
}

6.4 &&短路逻辑（很常用）

也是用来替代if else

A && B && C && D 取第一个假值或D，并不会取true或false

if(window.f1){
	console.log('f1存在')
}

等价于

window.f1 && console.log('f1存在')

能写&&，就不会写if else

6.5 ||短路逻辑（很常用）

A || B || C || D 取第一个真值或D，并不会取true或false

a || b

等价于

if(!a){
	b
} else {}

例子：

a = a || 100

等价于

if(a){
	a = a
} else{
	a = 100 //保底值
}

七、循环语句

7.1 while 循环

语法

while（表达式）｛语句｝，判断表达式真假，当表达式为真，执行语句，执行完再次判断表达式真假，当表达式为假，执行花括号后面的语句

while (条件)
  语句;

// 或者
while (条件) 语句;

浮点数不精确

很容易死循环

7.2 for 循环

for是while循环的方便写法

语法

for（语句1；表达式2；语句3）｛循环体｝，先执行语句1，然后判断表达式2，如果为真，执行循环体，然后再执行语句3，如果是假，直接退出循环体，执行后面的语句

for (初始化表达式; 条件; 递增表达式)
  语句

// 或者

for (初始化表达式; 条件; 递增表达式) {
  语句
}

例子

for(var i = 0; i<5; i++){
	setTimeout(()=>{console.log(i)})
}

返回5个5

for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略。

for ( ; ; ){
  console.log('Hello World');
}

上面代码省略了for语句表达式的三个部分，结果就导致了一个无限循环。

for循环在用let时有单独的逻辑

7.3 break 和 continue

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

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

var i = 0;

while(i < 100) {
  console.log('i 当前为：' + i);
  i++;
  if (i === 10) break;
}

上面代码只会执行10次循环，一旦i等于10，就会跳出循环。

for循环也可以使用break语句跳出循环。

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

上面代码执行到i等于3，就会跳出循环。

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

var i = 0;

while (i < 100){
  i++;
  if (i % 2 === 0) continue;
  console.log('i 当前为：' + i);
}

上面代码只有在i为奇数时，才会输出i的值。如果i为偶数，则直接进入下一轮循环。

如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

7.4 label

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

label:
  语句

标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句。

标签通常与break语句和continue语句配合使用，跳出特定的循环。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

上面代码为一个双重循环区块，break命令后面加上了top标签（注意，top不用加引号），满足条件时，直接跳出双层循环。如果break语句后面不使用标签，则只能跳出内层循环，进入下一次的外层循环。

标签也可以用于跳出代码块。

foo: {
  console.log(1);
  break foo;
  console.log('本行不会输出');
}
console.log(2);
// 1
// 2

上面代码执行到break foo，就会跳出区块。

continue语句也可以与标签配合使用。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面代码中，continue命令后面有一个标签名，满足条件时，会跳过当前循环，直接进入下一轮外层循环。如果continue语句后面不使用标签，则只能进入下一轮的内层循环。

foo:{
	console.log(1);
	break foo;
	console.log('本行不会输出');
}
console.log(2);

foo是一个label，意思就是这些语句

面试

{
	foo:1
}

以上的东西是什么，“是一个label，是1”