forEach

遍历数组，没有任何返回值
不能终止遍历（return、continue、break都失效）
forEach会锁定对象，遍历时不能修改对象

在下面这段代码中，使用forEach方法。
每点击一次数组中的元素，就会执行对应的onclick方法

// 给所有的li绑定点击事件
    liObjs.forEach(function(v,k){
      v.onclick=function(){
        // console.log(k);
        // 选中当前点击的，取消现在选中的
        var ac = document.querySelector('.active');
        ac.className ='';
        v.className = 'active';
        // 取出解释语，进行设置
        var msg = arr[k];
        h2Obj.innerHTML = k+1+'月活动';
        pObj.innerHTML=msg;
      }
    })

for

问题下面的代码使用for，点击事件执行时，i 已经变为12了

// 使用for的写法
for( var i=0;i<liObjs.length;i++){
//能够遍历获取到每一个li节点的值
  console.log(liObjs[i]);
  liObjs[i].onclick=function(){
//点击任意一个li标签，都会输出一次12
    console.log(i);
  }
}

解决办法1：给具体的某个li标签设置自定义属性,将下标保存到标签中
此方法为物理保存，可以很清楚的看到标签上的index属性

*注意：使用this.getAttribute('index')获取到的下标是String类型的，要使用this.getAttribute('index') - 0将其转化为Number型数据*

// 使用for的写法
for( var i=0;i<liObjs.length;i++){
  console.log(liObjs[i]);
  //解决办法1：物理保存，可以很清楚的看到标签上的index属性
  //给具体的某个li标签设置自定义属性,将下标保存到标签中
  liObjs[i].setAttribute('index',i)
  liObjs[i].onclick=function(){
    //此时i已经变为12
    // console.log(i);
    var index = this.getAttribute('index');
    console.log(index);
  }
}

解决办法2：给节点对象动态添加属性index，并将i的值赋给index
此方法将下标保存在js对象上

注意：此时要使用下标得使用this.index

// 使用for的写法
for( var i=0;i<liObjs.length;i++){
  console.log(liObjs[i]);
  //解决办法2：给节点对象动态添加属性index，并将i的值赋给index
  liObjs[i].index=i;
  liObjs[i].onclick=function(){
    //此时i已经变为12
    // console.log(i);
    console.log(this.index);
    var msg = arr[this.index];
    h2Obj.innerHTML = this.index +1 +'月活动';
    pObj.innerHTML = msg;
  }
}