1. 实例演示解构赋值,特别是函数参数中使用解构的方式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解构赋值</title>
  </head>
  <body>
    <script>
      const user = ["猪老师", "498668472@qq.com"];
      // 将用户名,邮箱,保存到独立 变量中
      let userName = user[0];
      let userEmail = user[1];
      console.log(userName, userEmail);
      // es6, 解构完成以上功能
      // 将多值/引用,解析到单值变量中
      // 针对 数组, 对象
      // 1. 数组解构
      // 模板 = 具体的值
      let [name, email] = ["猪老师", "498668472@qq.com"];
      console.log(name, email);
      //更新
      [name, email] = ["灭绝", "a@qq.com"];
      console.log(name, email);
      // 参数不足: 默认参数
      [name, email, age = 18] = ["灭绝", "a@qq.com"];
      console.log(name, email, age);
      // 参数过多: 归并参数
      let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];
      console.log(a, b, c, d, e);
      // 交换二个数
      let x = 10;
      let y = 20;
      console.log("x = %d, y = %d", x, y);
      // let t = 0;
      // t = x;
      // x = y;
      // y = t;
      // 使用解构一行搞定
      [y, x] = [x, y];
      console.log("x = %d, y = %d", x, y);
      // 2. 对象解构
      let { id, course, score } = { id: 1, course: "JS", score: 88 };
      // 属性与变量同名
      console.log(id, course, score);
      // 等号左边的数据,左值,禁止出现大括号 , 使用括号包住将它转为表达式进行求值
      ({ id, course, score } = { id: 2, course: "PHP", score: 99 });
      console.log(id, course, score);
      // 使用别名,防止命名冲突
      let { name: myName, email: myEmail } = { name: "灭绝", email: "a@qq.com" };
      console.log(myName, myEmail);
      let { ...r } = { a: 1, b: 2, c: 3 };
      console.log(r);
      // 3. 解构用在函数参数
      // function getUser(user) {
      //   console.log(user.id, user.name, user.email);
      // }
      // 作用解构来简化传参与使用
      function getUser({ id, name, email }) {
        console.log(id, name, email);
      }
      getUser({ id: 156, name: "李四", email: "ls@a.com" });
    </script>
  </body>
</html>

2. dom元素的增删改查基本操作,必须达到熟练层次

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom元素的增删</title>
  </head>
  <body>
    <script>
      // 创建元素
      // 内存中,页面中不可见
      let div = document.createElement("div");
      let p = document.createElement("p");
      p.textContent = "hello world";
      // 添加到页面中
      p.append("大家好");
      div.append(p);
      document.body.append(div);
      const li = document.createElement("li");
      li.textContent = "第一个";
      div.append(li);
      // insertAdjacentElement('插入位置', 元素)
      // 插入位置有四个
      // afterBegin: 开始标签之后,第一个子元素
      // beforeBegin: 开始标签之前,是它的前一个兄弟元素
      // afterEnd: 结束标签之后,它的下一个兄弟元素
      // beforeEnd: 结束标签之前,它的最后一个子元素
      const item = document.createElement("li");
      item.textContent = "大家再坚持一会";
      div.insertAdjacentElement("beforeBegin", item);
      const h3 = document.createElement("h3");
      h3.textContent = "我有点饿了";
      div.insertAdjacentElement("beforeEnd", h3);
    </script>
  </body>
</html>

3. dataset,classList对象的使用方式与场景

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义属性: dataset对象</title>
  </head>
  <body>
    <!-- id,class: 内置/预定义
      email, index: 自定义/ 数据属性 -->
    <div id="user" class="active" data-email="admin@php.cn" data-index="5">
      <h2>Hello world</h2>
    </div>
    <script>
      const div = document.querySelector("#user");
      //   console.log(div["data-email"]);
      console.log(div.dataset.email);
      console.log(div.dataset.index);
      //   dataset对象: 用于获取用户的自定义属性
      //   自定义必须使用data-为前缀, 访问时前缀不要写
    </script>
  </body>
</html>

1. 实例演示解构赋值,特别是函数参数中使用解构的方式2. dom元素的增删改查基本操作,必须达到熟练层次3. dataset,classList对象的使用方式与场景

1. 实例演示解构赋值,特别是函数参数中使用解构的方式

2. dom元素的增删改查基本操作,必须达到熟练层次

3. dataset,classList对象的使用方式与场景

更多相关文章

随机推荐