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

模版字面量和標簽函數(shù)

1. 模版字面量

   ES6 所提出的模板字面量不是單純指用來給變量賦值的值，也不單單只是指字符串體系，而是可以達到 HTML 轉義、格式化輸出、多行字符串等功能的字符串的新模式。
   語法：使用反引號 ` 包裹

• 格式化輸出

  嚴格注意空格的使用，和縮進的控制，因為這些都會保留在原格式中，ES6 會按照用戶給定的格式來輸出。

// 實現(xiàn)格式化輸出
      let username = `第一行
第二行
第三行`;
      console.log(username);

• 字符串的拼接+嵌入變量。

  模板字面量之中，變量或表達式叫做“插值”，變量和表達式都必須返回一個值

變量使用\$開頭，{}包裹，視為字符串，字符串則正常書寫即可。
變量/表達式：${變量名} /${變量*變量}= 視為一個字符串

      //   在字符串中嵌入變量不可能,只能拼裝
      let num = 10,
        price = 30;
      str = "商品數(shù)量: " + num + " 單價: " + price + " 總計: " + num * price;
      console.log(str);

// 模板字面量之中，變量或表達式叫做“插值”，變量和表達式都必須返回一個值
      let price = 30,
          num = 50;
      str = `單價：${price} ，總共有多少${num}件，總計：${price * num};`;
      console.log(str);

標簽函數(shù)

用來自定義模板字面量中的插值的行為
插值：模板字面量之中的變量或者表達式。
語法：function 函數(shù)名(模板字面量中的原始字符串數(shù)值 插值 1 插值 2…）
PS：1.第一個參數(shù)必須是模板字面中的原始字符串的內容組成的數(shù)組
PS: 2.從第二個開始,與模板字面量中的插值一一對應

標簽函數(shù)圖示解釋：

    <script>
      let num = 10,
        price = 30,
        total = 25;
      //   str = `商品單價是：${price} 商品數(shù)量是：${num} 商品總數(shù)是：${total}`;
      //   console.log(str);
      function show(literals, var1, var2, var3) {
        console.log(literals);
        console.log(var1, var2, var3);
        let str = `<li>${literals[0]}${var1}個</li>
        <li>${literals[1]}${var2}元</li><h2>${literals}${var3 * var2}個</h2>`;
        return show;
      }
      //   標簽函數(shù)之中var1等的值在此定義，引用的模板字面量是下面  ``  包裹的東西
      let result = show`商品數(shù)量: ${num} 單價: ${price} 總計: ${num * price}`;
      console.log(result);
    </script>

解構賦值

解構賦值語法是一種 Javascript 表達式。通過解構賦值, 可以將屬性/值從對象/數(shù)組中取出,賦值給其他變量。

1. 對象解構

   對象解構就是講一個對象里面的屬性/值/方法等從對象/數(shù)組之中取出，然后賦值給其他變量。

      const user = {
        name: "admin",
        age: 30,
      };
      // 將從對象user中取出的name和age屬性和值賦值給新變量name和age
      ({ name, age } = user);
      console.log(name, age);//打印新變量
      console.log(user)//新對象

不完全解構，左側的變量比對象 user 中的值多，左側就會多出來一個沒有值得新變量。實際上這個新的變量是沒有值賦值給它的，于是這個新的變量的值 = underfined。 這時我們也可以給這個多出來的變量一個默認值。

      const user = {
        name: "admin",
        age: 30,
      };
      // 多出來的新變量   實際上新變量是沒有值可以賦值給它的。
      ({ name, age, sex } = user);
      console.log(name, age, sex);

給定默認值

給定默認值之后，沒有得到賦值的新變量就會有一個值，而不是是等于underfined

      const user = {
        name: "admin",
        age: 30,
      };
      // 多出來的新變量   實際上新變量是沒有值可以賦值給它的。
      ({ name, age, sex = "male" } = user);
      console.log(name, age, sex);

新變量的別名：

語法：變量名：新變量名 = "值"
但是后續(xù)的時候引用的時候就要使用新的變量名，不能引用原變量名，否則會出錯。

      const user = {
        name: "admin",
        age: 30,
      };
      // sex的別名gender
      ({ name, age, sex:gender = "male" } = user);
      // 這里就不能使用sex來輸出了
      //console.log(name, age, sex);
      console.log(name,age,gender)

可以達到一樣的效果

1. 數(shù)組解構

      const score = [66, 77, 88, 99];
      let [html, css, js, php] = score;
      console.log(html, css, js, php);
      let [a, [b], c] = [1, [2], 3];
      console.log(a, b, c);

• 不完全解構

      // 變量比值少   使用`...`表示接納剩下的所有值
      let [a, ...b] = [11, 22, 33];
      console.log(a, b);
      // 變量比值多，最后的值會獲得一個`underfined`的值
      let [a1, b1, c1, d1 = "44"] = [11, 22, 33];
      console.log(a1, b1, c1, d1);
      // 給定默認值
      let [a2, b2, c2, d2 = 44] = [11, 22, 33];
      console.log(a2, b2, c2, d2 );

不完全解構

給定默認值之后

批改老師：天蓬老師

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

老師批語：解構很好用, 但不少開發(fā)者仍不習慣, 希望以后在合適場景 下, 盡可能用它