模板字面量与标签函数，解构赋值

作业标题：0708作业
作业内容：

实例演示模板字面量与标签函数。
实例演示解构赋值与对象字面量的简化方式。

实例演示模板字面量与标签函数

代码

<!DOCTYPE html>
<html lang="en">
<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>模板字面量/标签函数</title>
</head>
<body>
<script> show = (strs, ...args) => {
    //console.log(strs);
    console.log(strs);
    console.log(args);
    console.log(args[0] + args[1], +args[2]);
  };
  //   show("10+80", 10, 80);
  //计算10+80=？
  let a = 10;
  let b = 80;
  let c = 20;
  show`${a}+${b}+${c}=`;
</script>
</body>
</html>

实例演示解构赋值与对象字面量的简化方式

实例演示解构赋值

<!DOCTYPE html>
<html lang="en">
<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>解构赋值</title>
</head>
<body>
<script>
 //(10,20)=>(20,10)对于二数交换操作
  let a = 10;
  b = 20;
  console.log("a=%d, b=%d", a, b);
  [b, a] = [a, b];
  console.log("a=%d,b=%d", a, b);
</script>
</body>
</html>

对象字面量的简化方式

<!DOCTYPE html>
<html lang="en">
<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>对象自面量的简化</title>
</head>
<body>
<script>
  let person = {
    name: "朱老师",
    email: "498668472@qq.com",
    getInfo: function () {
      //在对象中使用this来访问对象的成员
      return `${this.name}:(${this.email})`;
    },
  };
  console.log(person.getInfo());
  //   对象解构;
  let { name, email } = person;
  console.log(name, email);
  user = {
    name,
    email,
    //将方法后面的冒号和'function'删除
    getInfo() {
      //在对象中使用this来访问对象的成员
      return `${this.name}:(${this.email})`;
    },
  };
  console.log(user);
</script>
</body>
</html>

模板字面量与标签函数，解构赋值

模板字面量与标签函数，解构赋值

相关文章