js初级_02

知识导航：

• 运算符
• 流程控制
• 数组

博文脑图大纲：

1. 运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号
在js中常用的运算符有：

• 算数运算符
• 递增和递减运算符
• 比较运算符
• 逻辑运算符
• 赋值运算符

1.1 算数运算符

用于执行两个变量或值的算术运算；

常用的算术运算符：

值得注意的是这里存在一个浮点数精度的问题。因为浮点数值的最高精度为17位小数。故在用浮点数进行运算时会出现误差。
举个栗子：

扫盲：

• 表达式：是由数字、运算符、变量等能求得数值的有意义排列方法所得的组合
• 表达式最终都会有一个结果，返回给我们，称为返回值。即任何表达试均有返回值

1.2 递增运算符

如：

a++; 后置递增
++a; 前置递增

它们的作用都是使变量a自增1，这俩个在一行使用时效果是一模一样的。均等于a=a+1；
但它们与其他变量混合组成一个表达式时在执行顺序上就有所不同。

接下来便主要看它们的区别
看栗子：

    <script>
        var a = 1,
            b = 1;
        console.log(a++ + 1);
        console.log(++b + 1);
    </script>

结果：

可见结果是不同的，来说一下它们分别的执行顺序就可以很容易的理解。
++a，先自增后运算
a++，先运算后自增
什么意思呢，还是借助上面的栗子来解释一下：

a++ +1是先使变量a与1进行相加，然后变量a在进行自增。这时候你也可以打印一下变量a的值看它是不是变成了2 。

++b + 1它是先使变量b进行自增，然后在与1做加法运算。即b先变成了2，再+1便成了3

再来一个复杂点的栗子验证一下吧

 		var a = 10;
        var b = a++ + ++a;
        console.log(b);

先不看结果思考一下b是多少呢。

分析：js的执行顺序从上到下，从左至右（声明提前啥的对我们这没有影响）
a=10；到了下一句a++时a先进行与++a的运算，++a是a先自增即a变成了11。
都是一个变量一个存储空间所以前面的a里面的值也成了11.最后值为22 。

如果你对内存变量有些模糊的话我想加上接下来的栗子便可以使你信服了。

我使用两个内存空间。这就不会相互影响了吧哈哈（为什么一开始选择上面的那个一个变量的呢，不是我故意的。属实是那个考察的更加普遍，也因为更为复杂了一点）

递减与递增同理这里不做介绍

1.3 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果

常见的比较运算符：

为什么会有双等和三等呢
因为：js是一种弱类型与不同于c、java。它的双等会转型，什么意思呢

如下：

一个数值型的居然会等于一个字符串型的，这在我们的c、java里面永远都见不到吧。js就是这么自由。

js中的三等即等价于其他语言的双等，要求数据类型和值都要相同。

1.4 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

与或非本就是取材于电路，我认为回归于电路更好理解。
拿与门和或门还做图（简易理解图，组原和数字电路那一套这里我觉得没必要。中学物理知识足以）选择什么方法判断均可，只是我比较喜欢这样一目了然

1. 与门：

即只有一个元件返回false此电路电流就不通，不通即为假

2. 或门

即有一个元件为true，此电路电流便可以走通。走通即为true

非就更为简单了，取反既可以。即本来为真的表达式前面加上这个符号变成了假。
举个栗子验证：

    <script>
        var a = 12,
            b = 13;

        console.log(a === b && a === 12); //串联有一假即全不通 f
        console.log(a === 12 && b === 13); //串联全真电路才通 t
        console.log(a === b || b === 13); //并联有一真电路便通 t
        console.log(a === b || a === 15); //并联全为假，电路全不通 f
        console.log(!a === 12); //f
    </script>

看结果：

1.5 赋值运算符

用来把数据赋值给变量的运算符。

常见赋值运算符：

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

1.6 运算符优先级

2. 流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

接下来一一展开

2.1 顺序结构

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

2.2 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果

JS 语言提供了两种分支结构语句：if 语句、switch 语句

2.2.1 if语句

基本语法：
if 单语句

// 条件成立（表达式为真）执行代码，否则执行if语句下面的语句
if (条件表达式) {
    // 条件成立执行的代码语句
}

if else 双语句

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

if else if 语句(多分支语句,俗称跳楼语句)

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

举个跳楼的栗子分析下吧，其他都比较简单。

        var sco = prompt("请输入分数");
        if (sco >= 90) {
            console.log("优秀");
        } else if (sco >= 70) {
            console.log("良");
        } else if (sco >= 60) {
            console.log("刚刚及格哦");
        } else {
            console.log("不及格哦");
        }

开始时老有人想不通，为啥下面的if条件中不是写的两端。即如第二个为啥不写70<sco<=90呢。看下面的简易图方便理解下吧

不写的原因是已经把大于90的那一段去掉了，剩下的只是0-90（当然这里是左闭右开）

2.2.2 三元表达式

基本语法：

表达式1 ? 表达式2 : 表达式3;

执行思路:
如果表达式1为 true ，则执行表达式2，如果表达式1为 false，则执行表达式3 。

如：

 console.log(1 == 1 ? 1 + 1 : 1 + 2);
 结果为2

2.2.3 switch语句

基本语法：

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

栗子：

值得注意：
switch表达式的值和case中的值必须是全等

额外：不加break会如何。

可见它又继续执行下面的语句了。
break本意是跳出循环，在这里是跳出switch语句。

switch 语句和 if else if 语句的区别

• 一般情况下，它们两个语句可以相互替换
• switch…case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
• switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
• 当分支比较少时，if… else语句的执行效率比 switch语句高。
• 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2.3 循环结构

2.3.1 for循环

基本语法：

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

首先我们还是要搞明白它的执行流程。
看栗子：

断点验证：（注意浅蓝标）

如何确定具体循环了几次呢。
i为0一次，为2一次…一直到i为9时：执行完循环体的语句之后做加一操作，i变成了10，再判断便不再符合了
即0-9分为一次。共10次。
经典应用：
（1）计算1-100的和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);

(2)加强分别计算1-100的奇数和偶数和

        var even = 0,
            odd = 0;

        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }
        console.log("奇数" + odd + "偶数" + even);

双重for循环

很多时候一个for是很难解决问题的。
基本语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

拿我们的传统排序算法冒泡排序做栗子分析（用到些数组的知识，如果数组知识忘却了可以先看下面）：

        var a = [10, 22, 30, 13, 20];
        var temp;
        for (var i = 0; i < a.length - 2; i++) {
            for (var j = 0; j < a.length - 1 - i; j++) {
                if (a[j] < a[j + 1]) {
                    temp = a[j];
                    a[j] = a[j + 1];
                    a[j + 1] = temp;
                }
            }
        }
        console.log(a);

结果：

分析：简单理解外层控制行数，内层控制列数。

这个有些复杂是因为老要考虑次数，应为for循环的时间复杂度属实不容乐观。如果你不在乎时间复杂度。那便容易多了
如下：

        var a = [10, 22, 30, 13, 20];
        var temp;
        for (var i = 0; i < a.length - 1; i++) {
            for (var j = 0; j < a.length - 1; j++) {
                if (a[j] < a[j + 1]) {
                    temp = a[j];
                    a[j] = a[j + 1];
                    a[j + 1] = temp;
                }
            }
        }
        console.log(a);

趁热打铁再来一个简单的栗子：
需求：打印五行五列星星
分析：即内部要5次循环，外部也要五次。因为☆要在一行上，所以这里我们采用字符串拼接的办法。换到下一行便用到换行转义符。
代码实现：

        var str = ""
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {
                str = str + "☆";
            }
            str = str + "\n";
        }
        console.log(str);

结果：

2.3.2 while循环

基本语法：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

• 1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
• 2 执行循环体代码
• 3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

栗子：

        var i = 0;
        while (i < 5) {
            console.log("aaa");
            i++;
        }

2.3.3 do-while循环

基本语法：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

• 1 先执行一次循环体代码

• 2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

  注意：先执行循环体，再判断，do…while循环语句至少会执行一次循环体代码
  栗子：

        var i = 0;
        do {
            console.log("aaa");
            i++;
        } while (i < 5)

2.3.4 continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有个虫子，其余的都不吃了

3. 数组

3.1 何为数组

数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。不似与其他语法，js中的数组元素的数据类型可以不同
栗子：

3.2 js中数组的创建

JS 中创建数组有两种方式：

• 利用 new 创建数组

// var 数组名 = new Array() ；
 var arr = new Array();   // 创建一个新的空数组

• 利用数组字面量创建数组

  //1. 使用数组字面量方式创建空的数组
  var  数组名 = []；
  //2. 使用数组字面量方式创建带初始值的数组
  var  数组名 = ['小白','小黑','大黄','瑞奇'];

• 数组的字面量是方括号 [ ]
• 声明数组并赋值称为数组的初始化
• 这种字面量方式也是我们以后最多使用的方式
• 什么是字面量呢，上篇说的可能有点笼统。你可以这样认为我var a=[]就是声明了一个数组型；var a=""；就是声明了一个字符串型的；var a={}，就是创建了个对象型的（当然接下来便会介绍到）

3.3 获取数组元素与数组遍历

利用索引 (下标) 来访问数组元素的序号（数组下标从 0 开始）。
数值的元素都是有各自的下标的。
如：
栗子：

数组的遍历

这里便用到我们的for循环了。它们俩个可是好朋友。
栗子：

        var demo = ['小白', '小黑', '大黄', '瑞奇'];
        for (var i = 0; i < demo.length; i++) {
            console.log(demo[i]);
        }

上面我用到了数组.length。每组数组和字符串一样，demo.length同样可以返回数组的长度。但是此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆
同时，数组的length属性可以被修改：
（1）设置length的长度长于原数组

可见：数组末尾出现空白元素
（2）设置length的长度短于原数组

可见：最后一个元素，瑞奇被删掉了

3.4 数组中新增元素

数组中可以通过以下方式在数组的末尾插入新元素：

 数组[ 数组.length ] = 新数据;

栗子：

        var demo = ['小白', '小黑', '大黄', '瑞奇'];
        demo[demo.length] = "都是狗"
        console.log(demo);

结果：

这里的下标使用demo.length是利用了数组元素个数和索引号不同的关系，索引号是从0开始，数组的length是从1开始数的。这里数组的length为4，元素瑞奇的索引是3 。故在瑞奇后面插入即索引号为4 。刚好到最后不用我们一个个数了