最详细的JavaScript流程控制、数组介绍，必备

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

一、JavaScript流程控制

流程控制： 控制代码的执行顺序。
程序执行过程中有执行顺序，可以通过控制代码的执行顺序实现要完成的功能

顺序结构

最简单、最基本的流程控制，没有特定的语法结构，程序会按照代码的先后顺序依次执行

分支结构

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

if语句：

if 语句的语法结构

     if (条件表达式) {
            执行语句 ；
        }

执行思路：如果if里面的条件表达式结果为真，则执行花括号里的执行语句；为假则不执行花括号里的执行语句，则执行if语句后面的代码

        //案例：进入网吧
        /* var age = prompt('请输入你的年龄：');
        if (age>=18) {
            alert('欢迎光临')
        }
        if(age<18) {
            alert('未成年上什么网，滚回去做作业')
        } */

if else 语句：

if else 语句的语法结构

 if (条件表达式) {
            执行语句1 ；
        } else {
            执行语句2 ；
        }

执行思路：如果表达式结果为真，就执行语句1，否则，执行语句2，多选一执行

var age = prompt('请输入你的年龄：');
        if (age >= 18) {
            alert('欢迎光临');
        } else {
            alert('未成年上什么网，滚回去做作业');
        }

if else if 语句：

if else if 语句语法：

        if (条件表达式1) {
            执行语句1;
        } else if (条件表达式2) {
            执行语句2;
        } else if (条件表达式3) {
            执行语句3;
        } else {
            最后语句;
        }

执行思路：如果表达式 1 满足，就执行 1，执行完毕后退出整个if 分支语句
若表达式 1 不满足，则判断语句2是否满足，以此类推，多选一执行，else if 里的条件可以任意多

var num = prompt('请输入时间(1~24)：');
        if (num>=22) {
            alert('夜深了，注意休息');
        } else if (num>18) {
            alert('晚上好');
        } else if (num>14) {
            alert('下午好');
        } else if (num>=10) {
            alert('中午好');
        } else if (num>6){
            alert('早上好');
        } else {
            alert('凌晨了');
        }

三元表达式： 有三元运算符（？ ：）组成的式子称为三元表达式。能做一些简单的条件选择

语法结构：条件表达式 ？ 表达式1 ： 表达式2

执行思路：如果条件表达式结果为真，则返回表达式1的值，为假返回2的值

        var num = 10;
        var result = num > 5 ? '对了' : '不是的'; //表达式是有返回值的
        console.log(result); //对了

switch 语句： 用于基于不同的条件来执行不同的代码。多选一，主要针对变量设置一系列的特定值的选项时
switch：转换、开关， case：选项
语法结构：

      switch(表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            default:
                执行最后的语句;
        }

执行思路： 表达式的值逐一和value值匹配，匹配成功就执行该case的语句，否则执行default里的语句
表达式常写成变量；
变量和case里的值匹配时必须是 全等；
如果当前case里没有break，则不会退出switch，继续执行下一个

        var num = 2;
        switch (num) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配的结果');
        }

switch 和 if else if 语句的区别：
一般情况下可以相互替换

switch：	if else if ：
通常处理case为比较确定值的情况	更加灵活，常用于判断范围
进行条件判断后直接执行到程序的条件语句，效率更高	有多种条件就要判断多次、分支较少时效率更高

循环结构

循环：重复执行某些语句

循环体：一组被重复执行的语句，是否继续执行，取决于循环的终止条件

循环语句：由循环体和循环的终止条件组成的语句

for 循环： 重复执行某些代码，通常跟计数有关

• for 可以重复执行不同的代码，因为有计数器变量 i 的存在，每次循环 i 都会变化
• for 里可以嵌套语句：
• for循环重复某些相同的操作

语法结构：

      for (初始化变量;条件表达式;操作表达式) {
            循环体
        }
//初始化变量：用 var 声明的一个普通变量，通常用于作计数器使用
//条件表达式：用来决定每一次循环是否继续执行，就是终止条件
//操作表达式：是每次循环最后执行的代码，常用于计数器变量更新（递增或递减）

//代码验证
 for (var age = 1; age <= 100; age++) {
            if (age == 1) {
                console.log('我一岁了！');
            } else if (age == 100) {
                console.log('我是位世纪老人！');
            } else {
                console.log('我今年' + age + '岁了');
            }
        }

双重for循环：

语法结构

       for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {
            for(里层的初始化变量;里层的条件表达式;里层的操作表达式) {
                // 执行语句;
            }
        }

执行思路：

可以把里面的循环看作是外层循环的语句
外层循环循环一次，里面的循环执行全部，再执行下一轮

//代码验证
        for (var i=1;i<=3;i++) {
            console.log('这是外层循环第' + i + '次');
            for (var j=1;j<=3;j++) {
                console.log('这是里层循环第' + j + '次');
            }
        }

while 循环：

while 语法结构：

        while (条件表达式) {
            循环体;
        }

执行思路： 当条件表达式结果为 true 则执行循环体 否则退出循环

//代码验证：
        // 里面也有计数器，初始化变量
        var num = 1;
        while (num<=100) {
            console.log('N奈斯先生');
            num++;// 里面也应该有操作表达式，完成计数器更新，防止死循环 
        }

do…while 循环：

do…while 语法结构：

// do while 循环
        do {
            循环体;
        } while (条件表达式)

执行思路： 先执行一次循环体，再判断条件，如果条件表达式为真，则继续执行循环体，否则退出循环

//代码验证：
        var i = 1;
        do {
            console.log('你好吗');
            i++;
        }
        while (i <= 100)

循环结构小结：

continue和break

continue 关键字用于立即跳出本次循环，继续下一次循环

//本次循环体中continue 之后的代码就会少执行一次
// 求1~100之间除了能被7整除之外的整数之和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

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

//break 
        for (var i=1;i<=5;i++) {
            if(i == 3) {
                break;
            }
            console.log('这是第' + i);
        }

---

二、数组

概念：指一组数据的集合，其中每个数据被称作元素，数组中可以存放任意类型的元素

可以把一组相关的数据一起存放，并提供方便的访问方式；

数组是一种将一组数据存储在单个变量名下的优雅方式

创建数组

1.利用 new 创建数组
var 数组名 = new Array();//创建了新的空数组

2.利用数组字面量创建数组（常用）
var 数组名 = [];

3.数组里可以放任何数据类型，但是用逗号隔开

声明数组并赋值称为数组的初始化

不要直接给数组名赋值，否则里面的数组元素都没有了

var 数组名 = new Array();//创建了新的空数组
var arr = [1,2,'N哥哥',true];

基本操作

获取数组中的元素

数组的索引（下标）：用来访问数组元素的序号（从 0 开始）

//数组可以通过 索引 来访问、修改对应的数组元素，通过 数组名【索引】 来获取数组元素

var arr = [1, 2, 'N哥哥', true];
console.log(arr[2]);//获取到'N哥哥'

遍历数组

遍历：把数组中每个元素从头到尾都访问一次

var arr =['N','哥哥','就是你'];
        for (var i=0;i<3;i++) {
            console.log(arr[i]);
        }

数组长度

数组长度：数组名.length 访问数组元素的数量（长度），并动态监测数组元素的个数

var arr =['N','哥哥','就是你'];
console.log(arr.length);// 3

案例

求数组和及平均值：

var arr = [2,6,1,7,4];
         var sum = 0;
         var average = 0;
         for (var i = 0; i<arr.length;i++) {
             sum += arr[i];
         }
         average = sum/arr.length;
         console.log(sum,average);

最大值：

//最大值
        var arr1 = [2, 6, 1, 7, 4, 10, 25, 20];
        var max = arr1[0];
        for (var a = 1; a < arr1.length; a++) {
            if (arr1[a] > max) {
                max = arr1[a];
            }
        }
        console.log('最大值为：' + max);

数组转换为字符串：

var sep = '!'; // 字符串之间用符号隔开
        var arr2 = ['red', 'blue', 'pink', 'skyblue'];
        var str = ''; //创建新的数组以存放字符串
        for (var b = 0; b < arr2.length; b++) {
            str += arr2[b] + sep;
        }
        console.log(str);

新增数组中元素：修改 length 长度：

//新增数组中元素:1.修改length长度
        var arr3 = ['N', '就这样', 'hehe', '1'];
        console.log(arr3.length);
        arr3.length = 5; // 修改length长度为5，没有给值，默认 undefined
        //新增数组中元素:2.修改索引号，追加
        arr3[4] = '先生'; // 追加
        console.log(arr3);
        arr3[3] = '奈斯'; // 修改，将 '1' 改为 '奈斯'
        console.log(arr3);

// 翻转数组

// 翻转数组
        var arr3 = ['的','我','是','你'];
        var newArr3 = [];
        for (var c = arr3.length-1;c>=0;c--) {
            newArr3[newArr3.length] = arr3[c]; 
        }
        console.log(newArr3);

冒泡排序

// 两两比较
        var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i <= arr.length - 1; i++) { //外层循环次数
            for (var j=0;j<=arr.length-i-1;j++) { // 里层循环次数
                //内部交换两个变量,前一个和后一个元素比较
                if (arr[j] >arr[j+1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);

---

三、面试题

一、JS是如何实现异步的？

JS引擎是单线程的，但又能实现异步的原因在于事件循环和任务队列体系。
事件循环：
JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列：
异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同，如 onclick, setTimeout, ajax 处理的方式都不同，这些异步操作是由浏览器内核的webcore 来执行的，浏览器内核包含3种 webAPI，分别是 DOM Binding、network、timer模块。

onclick 由 DOM Binding 模块来处理，当事件触发的时候，回调函数会立即添加到任务队列中。
setTimeout 由 timer 模块来进行延时处理，当时间到达的时候，才会将回调函数添加到任务
队列中。

ajax 由network 模块来处理，在网络请求完成返回之后，才将回调添加到任务队列中。

主线程：
JS 只有一个线程，称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执行的。所以，主线程中要执行的代码时间过长，会阻塞事件循环的执行，也就会阻塞异步操作的执行。

只有当主线程中执行栈为空的时候（即同步代码执行完后），才会进行事件循环来观察要执行的事件回调，当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。

二、什么是AJAX？如何实现？

ajax是一种能够实现局部网页刷新的技术，可以使网页异步刷新。

ajax的实现主要包括四个步骤：

（1）创建核心对象XMLhttpRequest；
（2）利用open方法打开与服务器的连接；
（3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）
（4）监听服务器响应，接收返回值。

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可