ES6模板字面量、标签函数以及解构赋值的案例

一、模板字面量与标签函数案例

代码：

      let letter1 = "亲爱的老师:\n您辛苦了。"; //es6之前换行通过添加换行符/n实现换行
      console.log(letter1);
      let letter2 = `亲爱的老师:
您辛苦了。`; //使用反引号``创建一个模板字面量，进行换行。
      console.log(letter2);
      let number1 = 5;
      let number2 = 0.3;
      let num1 = "整数" + number1 + "与小数" + number2 + "的和为:" + (number1 + number2);
      console.log(num1); //之前拼接用'+'进行字符串和变量的拼接。
      let num2 = `整数${number1}与小数${number2}的和为:${number1 + number2}`;
      console.log(num2); //在模板字面量插入${}占位符可以更直观的以及简略的实现拼接操作。
      function fn(arr, ...val) { //使用rest参数写了一个标签函数的案例
        console.log(val.length);//这里的val.length的值为3 求老师解惑。
        let res = "";
        for (let i = 0; i < val.length; i++) {
          res = res + arr[i];
          res = res + val[i];
        }
        // res = res + arr[val.length - 1]; //
        return res;
      }
      let str = fn`整数${number1}与小数${number2}的和为:${number1 + number2}`;
      //这里按理是传入number1和number2 2个参数值
      console.log(str);
      document.body.innerHTML = str; //dom操作 将结果打印到页面上

效果：

---

二、解构赋值案例

代码：

      const address = {
        home: "山西",
        number: 10,
      };
      ({ home, number } = address); //完全解构
      //let { home, number} = address; //另一种形式
      console.log(home, number);
      ({ home, number, name } = address); //不完全解构
      console.log(home, number, name); //name的默认值为underfined 因此可以给多余的属性添加默认值
      ({ home, number: phone, name: xing = "薛" } = address);
      console.log(home, phone, xing); // 默认值与别名的组合
      //2.数组解构
      const arr = ["华为", "苹果", "小米", "一加", "OPPO"];
      let [a, b, c, d, e] = arr; //数组的完全解构   左边是模板，需要跟右边完全匹配
      console.log(a, b, c, d, e);
      [a, ...b] = arr; //不完全解构 当变量少于值时 使用rest参数。
      console.log(a, b); //
      [a, b, c, d, e, f = "VIVO"] = arr;
      console.log(a, b, c, d, e, f); //当变量多余值时，给多余的变量增加默认值

案例：

三、感想与总结

首先先对老师说声抱歉，因为个人一些原因直到今天才交了第一份作业,还是前天的作业，不过之后我一定尽量完成之后每天的作业，以前的作业有时间我也会慢慢补做一下的。
学习了今天的知识后，一直对字面量这个名词很不明白，查了一些资料后，我自己的理解是”=”右边的值即是字面量，可能理解有点错误。还有学习的标签函数等，不理解只能通过查阅网上的资料慢慢搞懂。可能我比较笨，也可能是基础差，需要花费很多很多时间去理解去看例子，看解析。我会尽量提高课下学习效率的。
努力！坚持！

老师我的标签函数的案例里使用模板字面量传入的值的长度不是应该为2吗，结果是3，希望老师可以解惑。