第四天

JS中的循环

循环一轮一轮的重复做某一件事(真实项目中一般应用于：循环一个集合或者控制循环处理的次数，每一轮循环都控制相关的事情执行一遍)

• for循环
  • 设置初始值
  • 设置循环执行条件，控制循环次数
  • 每一轮循环结束后处理的事情[步长累加]
• for in循环
• for of循环 （ES6新增）
• while循环
• do while循环

循环体中可能出现的两个关键字

• break 强制结束整个循环（循环体中一旦遇到break，整个循环都结束了，break下面代码不再执行，步长累计也不再执行）
• continue 结束本轮循环 （循环体中一旦遇到continue，本轮循环结束，continue下面代码不在执行，但是步长累计会执行）

遍历（循环 / 迭代）数组中的每一项

因为数组有索引和length属性，所以我们能够知道循环次数，也能基于索引获取对应项，使用FOR循环就可以解决

```
var arr = [10, 20, 30, 40, 50];
    for (var i = 0; i < arr.length; i++) {
        // // arr.length = 5
        // // 第一轮循环 i=0
        // arr[0]
        // // 第二轮循环 i=1
        // arr[1]
        // // ....
        // // 第五轮循环 i=4
        // arr[4]
        // 每一轮循环i变量存储的值就是我们当前这一轮想获取数组中当前项的索引

        console.log(arr[i]);
    }
```

遍历对象中的每一个属性：我们无法直接获取到对象中有多少个属性（ES6中的Object.keys除外），也就无法知道循环多少次，所以无法使用FOR循环；真实项目中遍历对象我们基于FOR IN循环；

        ```
        var obj = {
        name: '珠峰',
        age: 10,
        teacher: '周老师',
        address: '北京市回龙观东大街'
        };
        for (var key in obj) {
        //=>创建变量（存储的是属性） in  对象
        //=>当前对象中有多少个可枚举的属性，就循环多少次
        //=>key变量存储的是每一次循环的属性名
        //=>obj[key]获取key变量对象属性名的属性值
        // 第一轮循环  key='name'  obj[key] => obj['name']
        // obj.key或者obj['key'] 获取属性名叫做key的属性值
        console.log(`本轮循环，属性名：${key}，属性值：${obj[key]}`);
        } 
        ```

FOR IN遍历的时候，是优先按照从小到大的机制遍历数字属性的

     ```
     var obj = {
        name: '珠峰',
        age: 10,
        10: 100,
        0: 10
    };
    for (var key in obj) {
        // 0 10 name age
        console.log(`本轮循环，属性名：${key}，属性值：${obj[key]}`);
    } 
    ```

JS的三部分

• ECMEScript 3 / 6
• DOM
  • document object model 文档对象模型（提供一系列的属性和方法，让我们能操作页面中的DOM元素->简单理解为操作页面中的HTML标签）
• BOM

获取DOM元素

• document.getElementById([ID]) 基于元素的ID获取到这个元素（一个元素对象）
• document.body 获取页面中的BODY元素
• document.getElementsByTagName([标签名]) 根据标签名获取到页面中（指定容器中）所有的元素标签集合 （一组元素集合）

基于JS获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对

```
修改盒子中文字颜色样式的三种写法，哪一种可以？
let box = document.getElementById('box');
box.style.color = 'red';

let boxSty = box.style; //=>获取的是STYLE对应的对象  BBBFFF000
boxSty.color = 'red';

et text = box.style.color; //=>获取的是color初始值''，基本类型值，直接存在栈内存中
    text = 'red';
```