JS 语法

JS 之父对 JS 的评价

它的优秀之处并非原创，它的原创之处并不优秀

表达式与语句

表达式

• 1+2 表达式的值为 3
• console.log ('hi') 表达式的值为函数的返回值
• console.log 表达式的值为函数本身

1+2
3

console.log
ƒ log() { [native code] }

console.log ('hi')
undefined

语句

• var a=1 是一个语句

表达式和语句的区别

• 表达式一般都有值，语句可能有，可能没有
• 语句一般会改变环境（声明、赋值）
• 上面两句并不绝对

大小写敏感

var a != var A

 空格和回车

• 大部分空格没有实际意义，回车大部分时候也不影响，除了 return 后面
• return 后面回车会自动补一个 underfined

标识符

规则

• 第一个字符，可以是 Unicode 字母或 $ 或 _ 或中文
• 后面的字符，除了上述的，还可以有数字
• 下划线最多用两个，多了不易识别
• 第一个字符是数字会报错

变量名是标识符

• var Σ= 1
• var $= 2
• var __ = 20
• var 你好= 'h1'

JS 有一些保留字，不能用作标识符

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

注释

• 单行注释  //
• 多行注释  /* */ 
• 由于历史上 JS 可以兼容 HTML 代码的注释，所以 <!--和--> 也被视为合法的单行注释
• --> 只有在行首，才会被当成单行注释，否则会当作正常的运算。
• 写踩坑注释，对遇到 bug 而写得奇怪的代码注释

区块 block 

把代码包起来，常与 if / for / while 合用

{
let a = 1
let b = 2
}

if else 语句

语法

if ( 表达式 ) { 语句1 } else { 语句2 }

如果表达式的求值结果为真，就执行紧跟在后面的语句；如果结果为假，则跳过紧跟在后面的语句。

{}在语句只有一句时，可以省略，但不建议这样做

变态情况

• a=1  （表达式中一个 '=' 是赋值，想要等于需要用 '===' ，C语言开发者技巧：将常量写在前面，有问题会报错，'1=a'）
• 语句中嵌套 if else
• 如果省略了 if 后面的 {} ，那么 if 内容只包含第一个语句，不要被缩进误导

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

• , 逗号表示一句话没有结束
• ; 分号表示一句话结束了
• ; 分号前面可以没有任何内容，JS引擎将其视为空语句

使用最没有歧义的写法

最推荐写法

if (表达式) {
    语句1
} else if (表达式){
    语句2
} else {
    语句3
}

 次推荐写法

function fn () {
    if (表达式) {
    return 表达式
    }
    if (表达式) {
    return 表达式
    }
    return 表达式
    }

switch 语句

语法 （大部分时候不能省略 break）

根据变量的值，选择执行相应的case 。如果所有 case 都不符合，则执行最后的 default 部分。需要注意的是，每个 case 代码块内部的 break 语句不能少，否则会接下去执行下一个 case 代码块，而不是跳出 switch 结构。

switch (fruit) {
case "banana":
// ...
break;
case "apple":
// ...
break;
default:
// ...
}

问号冒号表达式

表达式1 ？ 表达式2 : 表达式3

如果表达式1为真，则返回表达式2的值，否则返回表达式3的值

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

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

&& 短路逻辑

• A && B && C   
• 取第一个假值或者 C
• 不会取 ture 和 flase

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

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

console && console.log && console.log (9)

|| 短路逻辑

• A || B || C   
• 取第一个真值或者 C
• 不会取 ture 和 flase

if (!a){
    b
} else {}

a || b

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

a = a || 100

while 循环

语法

• while (表达式) {语句}
• 判断表达式的真假
• 当表达式为真，执行语句，执行完再判断表达式的真假
• 当表达式为假，执行后面的语句

var i=0
while (i<10){
    console.log (i)
    i=i+1
}
0
1
2
3
4
5
6
7
8
9

变态情况

• while true 即意思是要一直进行循环，则陷入死循环

while (ture) {} 

• 浮点数不精确，a 永远无法等于 1，陷入死循环 

var a=0,1            //初始化
while (a !==1 ){     //判断
    console.log (a)  //循环体
    a=a+0.1          //增长
}

do while 循环

• do...while 循环与 while 循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件
• 不管条件是否为真，do...while 循环至少运行一次，这是这种结构最大的特点。另外，while 语句后面的分号注意不要省略

do {
  语句1
} while (条件1);

var x = 3;
var i = 0;

do {
  console.log(i);
  i++;
} while(i < x);

for 循环

语法

for ( 语句1; 表达式2 ; 语句3 ){ 循环体 }

• 先执行语句1
• 然后判断表达式2
• 如果为真，执行循环体，然后执行表达式3
• 如果为假，直接退出循环，执行后面的语句

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}
0
1
2

i
3

for 语句没有执行完，不会执行 setTimeout 

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

for 循环在执行 let 时会有专门的逻辑

for (let i=0 ; i<5 ; i++){
    setTimeout (()=>{
    console.log(i)})
}
0
1
2
3
4

如果省略了 for 语句表达式的三个部分，就会陷入死循环

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

break 语句和 continue 语句

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

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

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

var i = 0;

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

• break 退出所有循环 ，continue 退出当前一次循环
• 如果存在多重循环，不带参数的 break 语句和 continue 语句都只针对最内层循环

label 语句

• JS 语言允许语句前面可以有 label 标签 ，相当于定位符，用于跳转到程序的任意位置
• 标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句
• 标签通常与 break 语句和 continue 语句配合使用，跳出特定的循环
• 下面的代码执行到 break foo ，就会跳出区块

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

a 是一个 label ，语句就是 1

{
    a:1
}

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源