1. 實(shí)例演示解構(gòu)賦值,特別是函數(shù)參數(shù)中使用解構(gòu)的方式

<!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>解構(gòu)賦值</title>
  </head>
  <body>
    <script>
      const user = ["豬老師", "498668472@qq.com"];
      // 將用戶名,郵箱,保存到獨(dú)立 變量中
      let userName = user[0];
      let userEmail = user[1];
      console.log(userName, userEmail);
      // es6, 解構(gòu)完成以上功能
      // 將多值/引用,解析到單值變量中
      // 針對 數(shù)組, 對象
      // 1. 數(shù)組解構(gòu)
      // 模板 = 具體的值
      let [name, email] = ["豬老師", "498668472@qq.com"];
      console.log(name, email);
      //更新
      [name, email] = ["滅絕", "a@qq.com"];
      console.log(name, email);
      // 參數(shù)不足: 默認(rèn)參數(shù)
      [name, email, age = 18] = ["滅絕", "a@qq.com"];
      console.log(name, email, age);
      // 參數(shù)過多: 歸并參數(shù)
      let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];
      console.log(a, b, c, d, e);
      // 交換二個(gè)數(shù)
      let x = 10;
      let y = 20;
      console.log("x = %d, y = %d", x, y);
      // let t = 0;
      // t = x;
      // x = y;
      // y = t;
      // 使用解構(gòu)一行搞定
      [y, x] = [x, y];
      console.log("x = %d, y = %d", x, y);
      // 2. 對象解構(gòu)
      let { id, course, score } = { id: 1, course: "JS", score: 88 };
      // 屬性與變量同名
      console.log(id, course, score);
      // 等號左邊的數(shù)據(jù),左值,禁止出現(xiàn)大括號 , 使用括號包住將它轉(zhuǎn)為表達(dá)式進(jìn)行求值
      ({ 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. 解構(gòu)用在函數(shù)參數(shù)
      // function getUser(user) {
      //   console.log(user.id, user.name, user.email);
      // }
      // 作用解構(gòu)來簡化傳參與使用
      function getUser({ id, name, email }) {
        console.log(id, name, email);
      }
      getUser({ id: 156, name: "李四", email: "ls@a.com" });
    </script>
  </body>
</html>

2. dom元素的增刪改查基本操作,必須達(dá)到熟練層次

<!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>
      // 創(chuàng)建元素
      // 內(nèi)存中,頁面中不可見
      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 = "第一個(gè)";
      div.append(li);
      // insertAdjacentElement('插入位置', 元素)
      // 插入位置有四個(gè)
      // afterBegin: 開始標(biāo)簽之后,第一個(gè)子元素
      // beforeBegin: 開始標(biāo)簽之前,是它的前一個(gè)兄弟元素
      // afterEnd: 結(jié)束標(biāo)簽之后,它的下一個(gè)兄弟元素
      // beforeEnd: 結(jié)束標(biāo)簽之前,它的最后一個(gè)子元素
      const item = document.createElement("li");
      item.textContent = "大家再堅(jiān)持一會";
      div.insertAdjacentElement("beforeBegin", item);
      const h3 = document.createElement("h3");
      h3.textContent = "我有點(diǎn)餓了";
      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: 內(nèi)置/預(yù)定義
      email, index: 自定義/ 數(shù)據(jù)屬性 -->
    <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-為前綴, 訪問時(shí)前綴不要寫
    </script>
  </body>
</html>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

vscode插件安裝與配置并實(shí)例演示emmet語法

2021-09-28 14:19:19

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

1. 實(shí)例演示解構(gòu)賦值,特別是函數(shù)參數(shù)中使用解構(gòu)的方式

2. dom元素的增刪改查基本操作,必須達(dá)到熟練層次

3. dataset,classList對象的使用方式與場景