## 1. 流程控制简介
```JS
数据结构和算法，初学时简化为数据类型和流程控制
什么是流程控制？
当我们有了数据之后就要对数据进行处理，操作和控制数据的过程就是流程控制。
主要分为循环和条件两种
例如：假设一万个不同颜色的杯子中找一个红色的时候，要怎么做？
当把杯子一个一个找，找到第一万个的时候，整个过程就是循环
当找到杯子拿出来看看颜色判断是不是红色的时候，就是条件
```
## 2. if 语句
```JS
if语句：如果杯子是红色的则拿出来，否则不拿
if(条件)执行1 else 执行2
如果杯子是红色或绿色的则拿出来，否则不拿
var color = '红色'
if(color === '红色') {
console.log('拿出杯子');
} else if (color ==='绿色'){
console.log('拿出杯子2')
} else{
console.log('不拿');
}
```
## 3. 三元运算符
```JS
判断条件？(条件为真时执行)：（条件为假时执行）
例如：
var color = '红色';
if(color === '红色') {
console.log('拿出杯子');
} else{
console.log('不拿');
}
三元运算符是这么表示的：color === '红色' ? console.log('拿出杯子'):console.log('不拿');
```
## 4. switch 语句
```JS
如果没有使用 break 判断，会由于switch 传递性，输出条件后面的所有值。
使用 default: 是当所有的值 条件都不满足时，输出其他
var color = 'red';
switch (color){
case 'blue':
console.log('蓝色');
break;
case 'red':
console.log('红色');
break;
case 'yellow':
console.log('黄色');
break;
default:
console.log('其他');
}
```
```JS
var price;
function getCityHousePrice(city) {
switch(city) {
case '北京':
price = 53084;
break;
case '上海':
price = 47549;
break;
case '深圳':
price = 43332;
break;
case '厦门':
price = 37818;
break;
case '南京':
price = 23989;
break;
}
var string = 'In 2016-11, ' + city + '的平均房价为' + price +'/平方。';
console.log(string);
}
var city = '南京';
getCityHousePrice(city);
```
## 5. 循环引言
将杯子一直放进去箱子，这样的重复操作就是：循环
while 语句
do-while语
for语句
for-in语句
## 6. while 和 do-while 语句
```JS
while(条件){
循环执行的代码
}
while 语句；先判断，后执行
例如：
var count = 0;
while (count < 4) {
console.log('放一个杯子进箱子');
count++;
}
```
```JS
do{
循环执行的代码
}while(条件)；
do-whlie 语句；先执行，后判断，总是会执行多一次
例如：
var count = 0;
do {
console.log('放一个杯子进箱子');
count++;
} while (count < 4);
```
```JS
/*
* 题目:
* 计算1 + 2 + 3 + 4 + ... + 100的所有自然数的和
*/
// 需要保存计算的结果在变量total中。
var total = 0;
// 使用while语句计算1 + 2 + 3 + 4 + … +100的和
var i = 1;
while (i < 101) {
total += i;
// 更新i的值
i += 1;
}
// 输出结果到控制台
console.log(total);
```
## 7. for 语句
1.也是先判断后执行的循环语句
2.与while语句相同功效
3.循环逻辑更为集中的语句
```JS
for([循环前初始化操作];[判断表达式];[每次循环后执行的代码]) {
循环执行的代码
}
```
```JS
//通过while语句实现
var count = 0; // 放进箱子的杯子的数目
while (count < 4) {
console.log('放一个杯子进箱子');
count++;
}
```
```JS
根据上面的 while 循环语句，改写成for 循环语句 ：
for (var count = 0;count < 4; count++){
console.log('放一个杯子进箱子');
}
```
```JS
例如：
//如果只给出控制表达式，其余抽出来，就相当于 while 语句写法
var count = 0;
for(;count < 4; ) {
console.log('放一个杯子进箱子');
count++;
}
```
```JS
//省略初始化表达式、控制表达式、循环后表达式
for ( ; ; ) {//无限循环
console.log('放一个杯子进箱子')；
}
避免以上无线循环（死循环）
```
#### 如何使用 for 语句来改造 while 语句;思路：
```JS
将以下 while 循环改写为 for 循环。
var i = 0;
while (i < 10) {
console.log("数到了" + i);
i += 1;
}
先写出 for 语句的基本骨架
for ([循环前初始化操作]; [判断表达式]; [每次循环后执行的代码]) {
循环执行的代码
}
提取出基础代码的 while 语句的循环前初始化操作（var i = 0;）到 for 语句
for (var i = 0; [判断表达式]; [每次循环后执行的代码]) {
循环执行的代码
}
提取出基础代码的 while 语句的判断表达式（i < 10）到 for 语句
for (var i = 0; i < 10; [每次循环后执行的代码]) {
循环执行的代码
}
提取出基础代码的 while 语句的判断表达式（i += 1;）到 for 语句
for (var i = 0; i < 10; i += 1;) {
循环执行的代码
}
提取出基础代码的 while 语句的循环需要执行的代码（console.log("数到了" + i);）到 for 语句
for (var i = 0; i < 10; i += 1;) {
console.log("数到了" + i);
}
完整的代码如下：
// 从1数到9
for (var i = 0; i< 10; i++) {
console.log("数到了" + i);
}
```
```JS
计算5至10的阶乘结果
思路：
根据基础代码提供的函数 factorial，可得知需要对传入参数 number 进行计算
在函数中定义一个变量 result 来保存阶乘结果
通过循环语句 for 实现阶乘，并且把结果赋值到变量 result 中
返回最终结果 result
function factorial(number) {
// 初始化变量result
var result = 1;
// 完善代码
for (var i = 1; i <= number; i = i+1) {
result = result * i;
}
return result;
}
factorial(8);
```
## 8. break 和 continue 语句
```JS
break 跳出循环
continue 用于跳过循环中的一个迭代
```
```JS
在30个快递中找到到放在第14的快递
for (var count = 0; count < 30; count++) {
if (ciunt === 14) {
console.log('拿走');
break;//跳出循环，不再继续执行循环操作
}
}
使用了 break 语句，只遍历14次
```
#### for 循环打包杯子
```JS
var cuArry = ['绿杯','蓝杯','紫杯','红杯'];
//for 循环打包杯子
for (var i = 0; i < 4; i++) {
var cup = cupArray[i]
if (cup !== '蓝杯') {
console.log(cup + '放进箱子');
}
}
```
#### 使用 continue 跳出当前迭代
```JS
var cuArry = ['绿杯','蓝杯','紫杯','红杯'];
//for 循环打包杯子
for (var i = 0; i < 4; i++) {
var cup = cupArray[i]
if (cup !== '蓝杯') {
continue;//使用 continue 跳出当前迭代
}
console.log(cup + '放进箱子');
}
```
```JS
var result = 1;
for (var i = 1; i < 10; i++){
if (var i % 2===0) {
continue;
}
result += i;
}
这道题可以看出是变量 result 循环增加1到10之间的所有奇数。分解过程如下：
初始 result 值为1
当i = 1时，i 是<10，则 result = i + 1即 result 为2
当i = 2时，如果2 % 2 为0，则跳过本次迭代
当i = 3时，result + 3即 result 为5
当i = 4时，跳过本次迭代
当i = 5时，result + 5即 result 为10
当i = 6时，跳过本次迭代
当i = 7时，result + 7即 result 为17
当i = 8时，跳过本次迭代
当i = 9时，result + 9即 result 最终结果为26
```
```JS
var result = 20;
var i = 7;
while (i > 0) {
result -= i;
if (result < 0) {
break;
}
i--;
}
第二道题即对result进行循环相减，当减到result值为负数的时候，结束循环。分解过程如下：
当i = 7时，20 - 7 = 13即 result 为13;
当i = 6时，13 - 6 = 7即 result 为7;
当i = 5时，7 - 5 = 2即 result 为2;
当i = 4时，2 - 4 = -2即 result 为-2,少于 0跳出循环;
```
## 9. for-in 语句
```JS
for (变量 in 对象) {
遍历执行的代码
}
var bottle = {
name: 'bottle',
price: 49, //49元
diameter: 6.7, //6.7cm直径
isKeepWarm: true//保温
};
遍历输出其属性
for (var key in bottle) {
console.log('瓶子的' + key + '是:' + bottle[key])
}
```
```JS
/*
* 题目:
* 使用for-in语句完成函数count
*/
// 图书馆藏书
var library = {
adventure: 1000,
history: 801,
detective: 660,
horror: 810,
science: 799
}
/**
* 函数 count 需遍历 library 对象的属性，如果属性值大于800，则输出该属性的名称到控制台
*/
function count() {
// 在此补充代码
for (var key in library) {
if (library[key] > 800) {
console.log(key);
}
}
}
count();
```
- Part 0：开启你的Web前端之旅
- 学习大纲
- Part 1：HTML 基础
- 认识HTML
- HTML元素
- 专业级开发环境
- 嵌套及HTML树
- Part 2：CSS 基础
- CSS 盒子
- CSS 基础
- 锻造利器——编辑器
- 属性和值
- 选择器
- 样式计算
- Part 3：HTML CSS
- CSS动画
- CSS布局
- CSS预处理
- 响应式
- Part 4：JS 基础
- BOM
- DOM
- JavaScript 语言基础
- jQuery 简单教程
- 流程控制
- 事件
- Part 5：JS 进阶
- Canvas进阶
- canvas入门
- 创建对象
- 继承
- Part 6：性能与工程
- nodejs简介
- 工程化
- 浏览器渲染简述
- 模块化
- 性能
- 网络通路简介
- Part 7：JS 应用开发
- Ajax
- React
- 设计模式
- 正则表达式
- Part 8：项目中的测试
- Jest
- 基本概念
- Part 9：安全攻防战
- Cookie
- CSRF
- XSS
- 更多安全
- Part 10：面经大放送
- 面试经验