1. 运算符

1.1 算术运算符

Javascript中支持的算术运算符有五种，分别为：

  1. +：加号
  2. -：减号
  3. *：乘号
  4. /：除号
  5. %：取余

1.2 一元运算符

一元运算符：只有一个操作数的运算符。

  • 前置 ++ / - -

    • 前置++：先加1，后参与运算
    • 前置- - ：先减1，后参与运算

  • 后置 ++ / - -

    • 后置++：先参与运算，后加1
    • 后置- - ：先参与运算，后减1
1
2
3
4
5
var iNum1 = 10;
var iNum2 = 20;
var iNum3 = --iNum1 + --iNum2; // 9 + 19 等于 28
var iNum4 = iNum1-- + iNum2--; // 9 + 19 等于 28
var iNum5 = iNum1 + iNum2;     // 8 + 18 等于 26

1.3 逻辑运算符

逻辑运算符又叫布尔运算符，逻辑运算符参与的表达式返回一个布尔类型的值。Javascript中的逻辑运算符和C/C++中的逻辑运算符是一样的。

  • &&：逻辑与，两个操作数同时为true，结果为true，否则为false
  • || ：逻辑或，两个操作数有一个为true，结果为true，否则为false
  • !：逻辑非，true 变 false，false 变 true。

1.4 关系运算符(比较运算符)

关系运算符又叫比较运算符，关系运算符参与的表达式返回一个布尔类型的值。Javascript中的关系运算符有如下8种：

  • <：小于
  • >：大于
  • > = ：大于等于
  • < =：小于等于
  • ==：等于
  • ! = ：不等
  • ===：全等于
  • ! ==：不等

==与===的区别：

  • ==只进行值的比较
  • ===要求类型和值同时相等，则相等
1
2
3
var result = '55' == 55;    // true
var result = '55' === 55;   // false 值相等，类型不相等
var result = 55 === 55;     // true

1.5 赋值运算符

Javascript中的关系运算符有6种，分别为：=、+=、 -=、*=、/=、%=

1
2
3
4
5
6
var num = 0;
num += 5;    // 相当于  num = num + 5;
num -= 5;    // 相当于  num = num - 5;
num *= 5;    // 相当于  num = num * 5;
num /= 5;    // 相当于  num = num / 5;
num %= 5;    // 相当于  num = num % 5;

1.6 位运算

在JavaScript中, 按位与 &、按位或|、按位异或^的运算规则和C++一样，示例如下:

1
2
3
var iNum1 = 10 & 7; // 1010 & 0111 = 0010 = 2
var iNum2 = 10 | 7; // 1010 | 0111 = 1111 = 15
var iNum3 = 10 ^ 7; // 1010 ^ 0111 = 相同为0,相异则或 = 1101 =13

2. 流程控制

不管是什么样语言，我们编写的程序一般有三种基本结构：

  1. 顺序结构：从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的

  2. 分支结构：根据不同的情况（条件），执行对应代码块。

  3. 循环结构：重复做一件事情

2.1 分支结构

if 语句

1
2
3
if (/* 条件表达式 */) {
  // 执行语句
}

if … else 语句

1
2
3
4
5
if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if … else if … else 语句

1
2
3
4
5
6
7
8
9
if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

三元运算符

三元运算符是对 if ... else 语句的一种简化写法，语法如下：

1
expr1 ? expr2 : expr3

当 expr1 的值为 true 时得到的值为 expr2，当 expr1 的值为 false 时得到的值为 expr3。

1
2
// 取出两个数中值比较大的那一个
var max = a > b ? a : b;

switch语句

语法格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}
  • break可以省略，如果省略，代码会继续执行下一个case
  • switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）

2.2 循环结构

在 javascript中，循环语句有三种：while、do..while、for循环。

while语句

基本语法：

1
2
3
4
5
// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

do…while语句

do...while循环和while循环非常像，二者经常可以相互替代，但是do...while的特点是不管条件成不成立，都会执行一次。

基础语法：

1
2
3
do {
  // 循环体;
} while (循环条件);

代码示例：

1
2
3
4
5
6
7
// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

for语句

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便。

for循环语法：

1
2
3
4
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

执行顺序：1243 ---- 243 ---- 243（直到循环条件变成false）

  1. 初始化表达式
  2. 判断表达式
  3. 自增表达式
  4. 循环体

for … in 语句

1
2
3
4
for(var item in 集合){
    ...
    ...
}

每循环一次，从集合中取出一个元素，并将这个元素存储到变量 item 中。

continue和break

  • break：立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

  • continue：立即跳出当前循环，继续下一次循环（跳到 i++ 的地方）

3. 函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，给它起个名字（函数名），这样在后续开发中可以基于这个名字反复调用。

3.1 函数的定义

  • 函数定义
1
2
3
4
5
6
7
8
9
10
// 无参函数
function 函数名(){
  // 函数体
}

// 带参数的函数声明
// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}
  • 函数表达式
1
2
3
var fn = function() {
  // 函数体
}

函数被定义的时候，函数体并不会执行，只要当函数被调用的时候才会执行。函数一般都用来干一件事情，需用使用动词 + 名词，表示做一件事情 tellStory、 sayHello等。

3.2 函数的调用

调用函数的语法：

1
2
3
4
// 无参函数调用
函数名();
// 带参数的函数调用
函数名(实参1, 实参2, 实参3, ..., 实参n);

函数体只有在调用的时候才会执行，如果函数有参数调用时需要给其指定实参，如果没有参数参数列表空着即可，一个函数可以被重复调用多次。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 函数定义
function sayHi() {
  console.log("吃了没？");
}
// 函数调用
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 函数调用
getSum();

3.3 函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西，也就是返回值。在函数体中可以通过return返回一个值。

1
2
3
4
5
6
7
8
// 定义一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}

// 可以通过外部变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

关于函数返回值，我们需要知道一下几个细节：

  1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined

  2. 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值

  3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined

  4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return 后面的所有其他代码都不会再执行。

3.4 匿名函数

匿名函数顾名思义就是没有名字的函数，举例说明：

1
2
3
function () {
    console.log("我是要成为海贼王的男人!!!");
};

匿名函数定义之后是不能被执行的，调用匿名函数有两种方式：

  1. 将匿名函数赋值给一个变量，这样就可以通过变量进行调用

    1
    2
    3
    4
    5
    6
    // 把函数赋值给一个变量
    var a = function () {
        console.log("我是要成为海贼王的男人!!!");
    };
    // 调用
    a();

  2. 匿名函数自调用

    1
    2
    3
    (function () {
        console.log("我是要成为海贼王的男人!!!");
    })();

因为函数也是一种类型，可以把函数A作为另一个函数B的参数，这样在函数中B中就可以调用函数A了。另外，可以把函数可以作为返回值从函数内部返回，这种用法在Javascript中很常见。

1
2
3
4
5
6
7
function fn(b) {
  var name = "我是蒙奇D路飞";
  return function () {
    console.log(name + "我是要成为海贼王的男人!!!");
  }
}
fn(15)();