推荐书籍

表达式

1
2
3
4

1+2
add(1,2)
console.log    // 值为函数本身
console.log(3) // 返回值为 undefined

语句

1

var a = 1

表达式和语句的区别

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

JS 特征

  • 大小写敏感

  • 大部分空格没有实际意义，var a = 1 和 var a=1 效果一样

  • 一部分回车也没意义，但 return 后不能加回车，var a = 1 甚至可以写成：

    1
2
3
4
5
6
7

    var
  
a
  
=
  
1

标识符

规则

  • 标识符第一个字符可以是 Unicode 字符、$、_，不能用数字

  • 后面可以用数字

变量名就是标识符

1
2
3
4

var _ = 3
var $ = 4
var ________ = 6 // 写那么多下划线，小心被揍进医院
var 你好 = 'hello'

注释

语法

1
2
3
4
5
6
7
8

// 单行注释

/*
多
行
注
释
*/

差的注释 = 我写了啥

  • 把代码翻译成中文
  • 过时的注释
  • 发泄不满的注释

好的注释 = 为何这样写

  • 踩坑注释
  • 为何代码写得奇怪
  • bug 现象

区块（block）

区块={}+被包裹的代码，通常和 if/for/while 一起用。

1
2
3
4

{
    let a = 1
    let b = 2
}

条件语句

if…else

语法：

1
2
3
4
5

if (condition) { // 只有一个语句时，可省略{}，但不建议
   statement1
} else {         // else 可省略
   statement2
}

示例：

1
2
3
4
5
6

const a = 2;
if (a === 1) {
  console.log("a是1");
} else {
  console.log("a不是1");
}

else if 是 else 和 if 的简化：

1
2
3
4
5
6
7
8

if (condition1)
  statement1
else
  if (condition2)
    statement2
  else
    if (condition3)
...

1
2
3
4
5
6
7
8
9

if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
...
else
  statementN

条件后的语句若不加 {}，则执行条件后的第 1 个语句，后面的不算。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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");

switch

语法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

? : 条件（三元）运算符

条件运算符是简化版的 if 语句，语法：

1

condition ? exprIfTrue : exprIfFalse

示例：

1
2
3
4
5
6
7
8

function max(a, b) {
  return a > b ? a : b;
}
// 以上代码等价于
function max(a, b) {
  if (a > b) return a;
  else return b;
}

&& 与

语法：

1

A && B
  • 若 A 为 true，则返回 B。
  • 若 A 为 false，则返回 A。
A↓ B→ true true
true B B
false A A

以下表达式会转换为 false：

  • null;
  • NaN;
  • 0;
  • 空字符串 (""、''、 ``);
  • undefined

示例：

1
2
3
4
5

if (window.f1) {
  console.log("f1存在");
}
// 以上代码可简化为
window.f1 && console.log('f1存在')

1
2

A && B && C && D
// 返回第一个假值或 D

|| 或

语法：

1

A || B
  • 若 A 为 true，则返回 A。
  • 若 A 为 false，则返回 B。

示例：

1
2
3
4
5
6
7

if (a) {
  a = a;
} else {
  a = 100; // 保底值
}
// 以上代码可化简为
a = a || 100

1
2

A || B || C || D
// 返回第一个真值或 D

循环语句

while

语法：

1
2
3

while (condition) {
  statement;
}

若条件为真，则执行语句。

小心死循环，浮点数相加不会等于 1：

1
2
3
4
5

var i = 0.1;
while (i !== 1) {
  console.log(i);
  i = i + 0.1;
}

do…while

语法：

1
2
3

do
   statement
while (condition);

若条件为真，则继续执行。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// expected result: "12345"

for

for 是 while 的语法糖。

语法：

1
2
3

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

执行顺序：

  1. 初始化
  2. 条件
    1. 真：执行[语句]、[最终表达式]，再执行条件
    2. 假：结束循环，不执行[语句]、[最终表达式]

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

// 以上代码的 while 写法
var i = 0;        // 初始化
while (i < 5) {   // 条件
  console.log(i); // 语句
  i++;            // 最终表达式
}

for 语句的要素可以省略。

1
2
3
4
5

// 初始化写于外面
let i = 0;
for (; i < 5; i++) {
  console.log(i);
}

1
2
3
4
5

// 省略条件则条件为真，进入无限循环
let i = 0;
for (; ; i++) {
  console.log(i);
}

面试题：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 打印 5 个 5
// 循环 5 次 setTimeout
// 执行 console.log(i) 时，i = 5
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  });
}
// 5
// 5
// 5
// 5
// 5


// 把 var 改为 let 后，结果从 0 到 4
for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    });
}

break

break 用于停止一个循环语句。

示例：

1
2
3
4
5
6

for (var i = 0; i < 5; i++) {
  if (i % 2 === 1) { // 若 i 为单数
    break;           // 则停止 for 语句
  }
}
console.log(i);

continue

continue 用于跳过此次循环。在 while 循环中，continue 跳到条件。在 for 循环中，continue 跳到更新语句。

示例：

1
2
3
4
5
6
7

for (var i = 0; i < 10; i++) {
  if (i % 2 === 1) {
    continue;       // 不打印单数
  } else {
    console.log(i); // 打印双数
  }
}

label

label 和 break 语句、for 语句搭配使用。

语法：

1
2
3

label: {
  statement;
}

示例：

1
2
3
4
5
6

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let str = '';

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

参考资料

MDN Web Docs