第4节 流程控制语句

前言

调试代码,找出代码中的问题经常使用 debugger 来打断点, 而要能在准确位置打上断点, 就必须熟悉程序的执行流程
流程控制语句有三种: 顺序结构, 分支结构和循环结构

(一) 顺序结构(默认)

程序默认从上到下一句一句代码执行, 这就是顺序结构
打断点操作

(二) 分支结构

if else
三目运算符
switch break

(三) 循环结构

for 循环

1. 标准 for 循环四要素 ``` for(var i=0;i<5;i++){ console.log(‘i=’,i); }

(1)循环变量初始值 var i=0; (2)循环条件 var i<5; (3)循环变量改变 i++; (4)循环体 console.log(‘i=’,i);

2. for 循环的运行规律

(1)第一次循环 1->2->4->3 (2)第二次循环 2->4->3 (3)第三次循环 2->4->3 …….. 当循环条件不满足,就会结束循环

3. continue 和 break
3. for循环的四个部分不是必须的
3. 死循环
<a name="Ag9L6"></a>
#### 数组遍历和对象遍历

// 数组遍历 var filmList = [ {name: ‘电影1’,time: 1233}, {name: ‘电影2’,time: 1233}, {name: ‘电影3’,time: 1233} ];

// 一个简单的遍历 for (var i=0;i<filmList.length;i++){ var film = filmList[i]; console.log(‘第’+(i+1)+’电影’, film); }

// 对象遍历 var person = {name: ‘laohu’, age: 100}; for (var p in person) { console.log(p,person[p]) }

<a name="YsfPT"></a>
#### while 循环 和 do while 循环
<a name="rgifp"></a>
## (四) 渲染商品列表
模板字符串, 字符串中的变量使用${变量名}代替

var username = ‘laohu’; var str = <div>${username}</div>; document.write(str);

获取网页内的元素节点

var app = document.getElementById(‘app’); // 获取id为app的元素节点, 并将节点存放在变量app内

给元素节点填充内容

// 填充文本 app.innerText = ‘hello world’; // 填充标签 app.innerHtml = ‘