JavaScript:for-in与for-of(末尾拓展一点点vue)

一:for in遍历使用时会提供索引
使用案例: 输出window对象

for (let key in window) {
      console.log(window[key]);
    }

结果:JavaScript:for-in与for-of(末尾拓展一点点vue)_第1张图片
二: for of 遍历会直接取值不会再有索引
使用案列:
1.遍历打印数组、对象

let arrayIn = ["李熙", "20"];
    for (const i of arrayIn) {
      console.log(i);
    }

结果:
在这里插入图片描述
2.遍历打印字符串

for (let i of "lixi") {
      console.log(i);
    }

结果:
在这里插入图片描述
三:for in遍历打印对象数据

 let lbl = [
      { name: "李熙", QQ: "782845473" },
      { name: "张三", QQ: "782845473" },
      { name: "李四", QQ: "782845473" }
    ];
    for (let i in lbl) {
      console.log(lbl[i].name);
      console.log(lbl[i].QQ);
    }

结果:
在这里插入图片描述
四:for of实现点击表格变色

	//操作dom获取页面所有的td元素
    let ltd = document.querySelectorAll("td");
    //使用for-of循环并对td设置单击事件,改变td元素背景颜色
    for (let itd of ltd) {
      itd.addEventListener("click", function() {
        itd.style.background = "red";
      });
    }

结果:
在这里插入图片描述
拓展:vue+layui 以for in实现单击删除一行数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue过滤器的使用</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
  </head>
  <body>
    <div id="app">
      <table class="layui-table">
        <colgroup>
          <col width="150" />
          <col width="200" />
          <col />
        </colgroup>
        <thead>
          <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(obj,index) in userData">
            <td>{{obj.id}}</td>
            <td>{{obj.name}}</td>
            <td>{{obj.sex | handeler}}</td>
            <td>{{obj.information}}</td>
            <td>
              <button
                class="layui-btn layui-btn-danger"
                @click="deleteData(obj.id)"
              >
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        userData: [
          { id: "002", name: "张飞", sex: "男", information: "张关李强如龙" },
          { id: "003", name: "晁盖", sex: "男", information: "张关李强如龙" },
          { id: "004", name: "宋江", sex: "2", information: "张关李强如龙" }
        ]
      },
      methods: {
        deleteData(did) {
        //for in实现遍历删除表格一列数据
          for (us in this.userData) {
            if (this.userData[us].id == did) {
              this.userData.splice(us, 1);
            }
          }
        }
      },
      filters: {
        handeler(sex) {
          if (sex === "男") {
            return "汉子";
          } else if (sex == "女") {
            return "妹子";
          } else {
            return "不清楚";
          }
        }
      }
    });
  </script>
</html>

结果:
JavaScript:for-in与for-of(末尾拓展一点点vue)_第2张图片
——发布日期:2020年3月31日

你可能感兴趣的:(js,javascript,vue)