模板字符串

模板字符串是什么

认识模板字符串

       const username1 = 'alex';
      // "alex"
       const username2 = `alex`;
       console.log(username1, username2, username1 === username2);

模板字符串与一般字符串的区别

const person = {
        username: 'Alex',
        age: 18,
        sex: 'male'
      };
       const info =
         '我的名字是：' +
         person.username +
         ', 性别：' +
         person.sex +
         ', 今年' +
         person.age +
         '岁了';
       console.log(info);
       const inf = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;
       console.log(inf);
       //和其他东西一起使用的时候，使用模板字符串，方便注入
      // 其他情况下使用模板字符串或一般字符串都行

模板字符串的注意事项

输出多行字符串

        // 一般字符串
        // const info = '第1行\n第2行';
        // console.log(info);
      // 模板字符串
       //const info = `第1行\n第2行`;
             const info = `第1行
第2行`;
            console.log(info);
      // 模板字符串中，所有的空格、换行或缩进都会被保留在输出之中

输出`和\等特殊字符

      const info = `'\`\\`;
      const inf=`'\``;
      console.log(info);
      console.log(inf);

模板字符串的注入

      // ${}
      const username = 'alex';
      const person = { age: 18, sex: 'male' };
      const getSex = function (sex) {       
        return sex==='male'?'nan':'nv';
      };
      const info = `${username}, ${person.age + 2}, ${getSex(person.sex)}`;
      console.log(info);
      // 只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中

模板字符串的应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模板字符串的应用</title>
    <style>
      body {
        padding: 50px 0 0 300px;
        font-size: 22px;
      }
      ul {
        padding: 0;
      }
      p {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>学生信息表</p>
    <ul id="list">
      <li style="list-style: none;">信息加载中……</li>
    </ul>
    <script>
      // 数据
      const students = [
        {
          username: 'Alex',
          age: 18,
          sex: 'male'
        },
        {
          username: 'ZhangSan',
          age: 28,
          sex: 'male'
        },
        {
          username: 'LiSi',
          age: 20,
          sex: 'female',
          se:'s'
        }
      ];
      const list = document.getElementById('list');
      let html = '';
      for (let i = 0; i < students.length; i++) {
        html += `<li>我的名字是：${students[i].username},${students[i].sex},${students[i].age}</li>`;
      }
      // console.log(html);
      list.innerHTML = html;
    </script>
  </body>
</html>

箭头函数

箭头函数是什么

认识箭头函数

        const add = (x, y) => {
          return x + y;
        };
        console.log(add(1, 1));

箭头函数的结构

// const/let 函数名 = 参数 => 函数体

如何将一般函数改写成箭头函数

        // 声明形式
        // function add() {}
        // 声明形式->函数表达式形式
        // const add = function () {};
        // 函数表达式形式->箭头函数
        // const add = () => { };

箭头函数的注意事项

单个参数

      // 单个参数可以省略圆括号
      const add = x => {
        return x + 1;
      };
      console.log(add(1));
      // 无参数或多个参数不能省略圆括号
      // const add = () => {
      //   return 1 + 1;
      // };
      // const add = (x, y) => {
      //   return x + y;
      // };
      // console.log(add(1, 1));

单行函数体

      // 单行函数体可以同时省略 {} 和 return
      const add = (x, y) => {
        return x + y;
      };
      //const add = (x, y) => x + y;
      console.log(add(1, 1));
      // 多行函数体不能再化简了
      // const add = (x, y) => {
      //   const sum = x + y;
      //   return sum;
      // };

单行对象

        //   const add = (x, y) => {
        //     return {
        //       value: x + y
        //     };
        //   };
        const add = (x, y) => ({
            value: x + y
        });
        // 如果箭头函数返回单行对象，可以在 {} 外面加上 ()，让浏览器不再认为那是函数体的花括号
        // const add = (x, y) => [x, y];
        console.log(add(1, 1));

this指向

全局作用域中的this指向

 console.log(this); // window

一般函数（非箭头函数）中的this指向


       // 'use strict';
        function add() {
            console.log(this);
        }
        // 严格模式就指向 undefined
        // add(); // undefined->window（非严格模式下）
        // window.add();
        // const calc = {
        //     add: add
        // };
        // // calc.add(); // calc
        // const adder = calc.add;
        // adder(); // undefined->window（非严格模式下）
        // document.onclick = function () {
        //     console.log(this);
        // };
        // document.onclick();
      function Person(username) {
        this.username = username;
        console.log(this);
      }
      const p = new Person('Alex');
      // 只有在函数调用的时候 this 指向才确定，不调用的时候，不知道指向谁
      // this 指向和函数在哪儿调用没关系，只和谁在调用有关
      // 没有具体调用对象的话，this 指向 undefined，在非严格模式下，转向 window

箭头函数中的this指向

        // 1.箭头函数中的 this 指向
        // 箭头函数没有自己的 this
        // const calc = {
        //     add: () => {
        //         console.log(this);
        //     }
        // };
        // calc.add(); // window
        // 2.练习
        'use strict';
        const calc = {
            add: function () {
                // this
                const adder = () => {
                    console.log(this);
                };
                adder();
            }
        };
        // calc.add(); // calc
        const addFn = calc.add;
        addFn(); // undefined->window

不适用箭头函数的场景

作为构造函数

      // 箭头函数没有 this
      // const Person = () => {};
      // new Person();

需要this指向调用对象的时候

 // document.onclick = function () {
      //   console.log(this);
      // };
      // document.addEventListener(
      //   'click',
      //   () => {
      //     console.log(this); //window
      //   },
      //   false
      // );

需要使用arguments的时候

      // 箭头函数中没有 arguments
      // function add() {
      //   console.log(arguments);
      // }
      // add(1, 2,3,4,5);
      // const add = () => console.log(arguments);
      // add();
      // 剩余参数