自定义属性和索引值

1.for-in循环

obj = {
    key:value
}
for-in:专门用来遍历对象
       语法：for(var 变量 in 遍历的对象){ 
            key：value
            每一次循环的时候，都会将对象中对应的key存储在前面的变量中
        }

注意：for循环用于遍历数组，for-in用于遍历对象，因为对象没有长度没有顺序

（1）遍历数组

var arr = [1,2,3,4,5];
    for(var i = 0;i<arr.length;i++){
        console.log(arr[i]);
    }

（2）遍历对象

 var obj1 = {
        //key:value;
        "one":"HTML+CSS",
        "two":"JavaScript",
        "three":"es6+nodeJs"
    };
for(var key in obj1){
         console.log(key);//存储对应的key（one two three）
        //console.log(obj.key); //undefined, .后面如果接字符串，通过[]代替.      
         console.log(obj[key]);//存储对应的value   (1 2 3)
         obj1[key]++;//自加   不用变量存储
         console.log(obj1[key]);//2 3 4
    }

判断一个字符串中出现次数最多的字符，并且统计次数

<script>
    var str = "12ewedeff";
    function compare(str) {
      var obj = {};
      var max = 0;
      var s = "";
      for (var i = 0; i < str.length; i++) {
        if (obj[str[i]]) {
          obj[str[i]]++;
        } else {
          obj[str[i]] = 1;
        }
      }
      for (var key in obj) {
        if (max < obj[key]) {
          max = obj[key];
        }
        s = key;
      }
      console.log(s, max);
    }

    compare("shgdeilhfdepow23idudyuyu");//y   4

  </script>

2.while与do…while循环

      while
        语法：
            初始化循环变量；
            while(循环条件){
                循环体；
                更新循环变量
            }

      do-while
        语法：
             初始化循环变量；
             do{
                循环体；
                更新循环变量
             }while(循环条件)   

这两种循环的区别：

只有在第一次条件不成立的时候有区别，do…while会执行一次，while不执行，简单来说就是while先判断后执行，do-while先执行后判断

 var j = 0;
     while(j<0){
         console.log("while"+j);
         j++;
     }
     
     
 var k = 0;
     do{
         console.log(k);
         k++;
     }while(k<0);  

3.break与continue

 break:结束循环(跳出)
 continue：结束本次循环
 for(var i = 1;i<=10;i++){
            if(i == 5){
               continue;
               break;
            }
            console.log("已经跑了"+i+"圈");
        }
 

4.this

//1.添加点击事件
for(var i = 0;i<oLi.length;i++){
    oLi[i].onclick = function () {
       console.log(i);//不要在循环添加的事件中使用循环变量，这个时候的循环变量已经是条件不成立时的变量
    }
}

解决方法

 this:这个
      是一个特殊的对象，在不同的地方代表不同的含义，取决于当前被调用时的环境
      在事件处理函数中this ---- 触发事件的对象（点谁就谁）  

var oBtn = document.getElementsByTagName("button");

         for(var i = 0;i<oBtn.length;i++){
            oBtn[i].onclick = function(){//在点击处理事件，还没点击for循环已经走完了
                console.log(this);
                console.log(this.innerHTML);
            }
        } 

//点击哪个div盒子哪个盒子的背景就变成红色
<script>
        var oDiv=document.getElementsByTagName("div");      
        for(var i=1;i<oDiv.length;i++){               
            oDiv[i].onclick = function(){
                    for(var j=0;j<oDiv.length;j++){//先把所有盒子的背景去掉
                        oDiv[j].style.backgroundColor="";
                    }
                    this.style.backgroundColor="red";              
            }      
        }       
    </script>

5.自定义属性

**定义：**自定义属性是指给标签添加已有属性的以外的属性，例如div标签id，class这些属性都是已有的，如果再添加一个tag属性，这就是自定义的

<div id="true" tag="true"></div>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    console.log(oDiv.tag); //写到标签上的自定义属性，获取不到
</script>

<div id="true" ></div>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    //在js中自定义属性,不会显示在标签上，但是可以正确获取到

    //在js中自定义属性：标签.属性名 = 属性值
    oDiv.mdd = true;
    console.log(oDiv.mdd); //true
</script>

for(var i = 0;i<oDiv.length;i++){
    oDiv[i].tag = true; //给每一个div标签都自定义一个属性，因为一个标识代替不了所有的标签
    oDiv[i].onclick = function () {
        if(this.tag == true){ //比较的是当前标签的属性值
            this.style.height = "100px";
            this.tag = false;
        }else {
            this.style.height = "40px";
            this.tag = true;
        }
    }
}

//点哪个灯泡哪个灯泡亮，亮的灯泡点一下灭了，灭的灯泡点一下亮了
<div></div>
    <script>
        var oDiv=document.getElementsByTagName("div");
        for(var i=0;i<30;i++){
            oDiv[0].innerHTML+="<img src='img/dark.jpg' alt='#' style='width:100px;'>";//往div里添加img标签，并设置图片大小
            var oImg=document.getElementsByTagName("img");
            for(var j=0;j<oImg.length;j++){
                //给每个灯泡设置一个标志
                oImg[j].flag=true;
                oImg[j].onmouseover=function(){
                    if(this.flag==true){
                        this.src="img/bright.jpg";
                        this.flag=false;
                    }else{
                        this.src="img/dark.jpg";
                        this.flag=true;
                    }

                }
            }
            
        }
    </script>

6.自定义索引值

**定义：**索引一般用于下标一一对应的，一把钥匙开一把锁，也是属于自定义属性。

//实现点击按钮获取对应的颜色

var arr = ["pink","orange","green"];
//        [少女粉，果粒橙，原谅色]
var oBut = document.getElementsByTagName("button");
for(var i = 0;i<oBut.length;i++){
    oBut[i].index = i;
    oBut[i].onclick = function () {
        //如果事件中需要使用下标，但是又获取不到，就自定义下标（给谁加的事件，就给谁添加下标）
        document.body.style.background = arr[this.index];
    }
}

//点击哪个的按钮，哪个按钮变粉色并且显示对应的奖品,
 <button>一等奖</button>
    <button>二等奖</button>
    <button>三等奖</button>
    <button>四等奖</button>
    <button>五等奖</button>
    <p></p>
    <script>
        var oBtn=document.getElementsByTagName("button");
        var oP=document.getElementsByTagName("p")[0];
        var arr=["iphone","奖金","休假","旅游","水杯"];
        for(var i=0;i<oBtn.length;i++){
            oBtn[i].index=i;
            oBtn[i].onclick=function(){
                for(var j=0;j<oBtn.length;j++){
                    oBtn[j].style.backgroundColor="";
                }
                //点击哪个按钮哪个按钮就变粉色
                this.style.backgroundColor="pink";
                //显示对应的奖品
                oP.innerHTML=arr[this.index];
            }
        }
    </script>