模板字面量、标签函数、解构赋值与对象字面量的简化

模板字面量与标签函数

    // 1 模板字面量
        let Hello = "hello";
        // 注意标识符是 ` `
        let html = `${Hello} html`;
        console.log(html);
        let username = "admin";
      // 模板字面量,es6中引入的
      let str = `Hello
      ${username}`;
      console.log(str);
           let nav = ["小明" , "小美" , "小新"] ; 
      html =`
         <nav>
            <a href = "">${nav[0]}</a>
            <a href = "">${nav[1]}</a>
            <a href = "">${nav[2]}</a>
            </nav>
      `;
      console.log(html);
    //   document.body.insertAdjacentHTML("beforeend", html);
//  标签函数   自定义模板字面量的行为
    // 多值插入需要一个起始和终止的参数
      show = function (strs,...arr) {
        console.log(arr);
        //查看数组模板 
        console.log(strs);
        //这里执行   加法运算
        console.log(arr[0] + arr[1] + arr[2] + arr[1]);
    }
    let a = 20;
    let b = 10 ;
    let c = 20 ;
    let  arrr = 80 ;
    //  在函数中插入值 不需要等于号 
    // 这里决定  数组 有多少 数值   这里的先后顺序决定 插入的值在数组中的位置
    show  `${arrr} ${a}  ${b}  ${c} `;

解构赋值与对象字面量的简化

// 解构赋值
      //将数组的每个元素，分别创建变量进行储存
      let arr = [1,2,3];
      let a = arr[0];
      let b = arr[1];
      let c = arr[2];
       console.log(a,b,c);
 //  用解构进行简化
  // let [A,B,C] = [4,5,6];
  // console.log(a,b,c);
    //  ...d 值为 剩下没赋值的数组元素
      [a, b, c,e ,...d] = [1, 2, 3, 4, 5, 6];
                console.log(a, b, c,e);
        console.log(d);
    // 对象解构
    let {id,name} = {id:10 , name:"小名"};
    console.log(id,name);
    // 参数解构
    let sum = ([a, b]) => a + b;
      console.log(sum([10, 20]));
      //   使用归并参数
      sum = (...[a, b,c]) => a + b +c  ;
      //   如果只想传独立变量, 可以将函数参数进行解包spread;
      console.log(sum(10, 20,10));
      console.log(...[30, 20, 30,40]);
    // 对象字面量简化
      let person = {
        name1: "z老师",
        email: "498668472@qq.com",
        class1: "706",
        getInfo: function () {
          // 在对象中使用 this 来访问自边的成员
          return `${this.name1} : ( ${this.email} )`;
        },
      };
      console.table(person.getInfo());
      // 用对象解构   简化
      // 打印出来 persom变量中的 字符串
      let { name1, email,class1 } = person;
      console.log( name1, email,class1)
      // let user = {
      //   name1,
      //   email,
      //   getInfo: function () {
      //     // 在对象中使用 this 来访问自边的成员
      //     return `${this.name1} : ( ${this.email} )`;
      //   },
      // };
      // console.log(user);
      //  箭头函数简化
      user = {
        name,
        email,
        // 将方法后面的冒号和'function'删除
        getInfo: () => `${this.name} : ( ${this.email} )`,
      };
      console.log(user);

更多相关文章

随机推荐