PHP 学习之路：第九天—— 模板字面量与访问器属性

2320

一、值传递与引用传递

深拷贝: 值传递
浅拷贝: 引用传递

1.值传递

// 1. 赋值
let a = 1;
let b = a;
// 值传递,只在基本类型之间存在,数值,字符串。。。
console.log("a = %d, b = %d", a, b);
// 更新 a
a = 2;
console.log("a = %d, b = %d", a, b);
复制代码

2.引用传递

// 2. 引用传递, 适用于引用类型,对象,数组
let obj1 = {
    a: 1,
    b: 2,
};
console.log("obj1 = %o", obj1);
let obj2 = obj1;
console.log("obj2 = %o", obj2);
console.log(obj1 === obj2);
// 更新obj1
// 对象使用点语法来访问内部的成员
obj1.a = 10;
console.log("obj1 = %o", obj1);
console.log("obj2 = %o", obj2);
复制代码

3.传参

// 3. 传参: 永远是值传递
const f1 = (x) => (x = 10);
let m = 5;
// m: 入参
// 当前传入的是一个基本类型,原始类型,整数
f1(m);
console.log("m = %d", m);

// const f2 = (x) => (x.a = 10);
const f2 = (x) => (x = {});
let o = { a: 1, b: 2 };
f2(o);
console.log("o.a = ", o.a);
复制代码

二、模板字面量和标签函数

1.模板字面量

// let name = "朱老师";
// let str = "Hello " + name;
// let str = `Hello ${name}`;
// 字面量: Hello
// 插值: ${name}
// console.log(str);

// 1. 模板字面量: 将表达式/插值嵌入到字符串
//  0     1      2
let menus = ["首页", "视频", "文章"];
let htmlStr = `
<nav>
  <a href="">${menus[0]}</a>
  <a href="">${menus[1]}</a>
  <a href="">${menus[2]}</a>
</nav>
`;

// 模板字面量内部有二部分组成: 字符串字面量, 变量插值
// <nav>
//     <a href=""> </a>
// </nav>
// ${....}
console.log(htmlStr);
document.body.insertAdjacentHTML("beforeEnd", htmlStr);
复制代码

2.标签函数

// 2. 标签函数,自定义模板字面量的一些行为
let hello = name => alert(name);
//   hello("天蓬老师");
// hello`天蓬老师`;
// 参数约定
// 1. 第一个参数: 所有字符串字面量组成的数组
// 2. 第二个参数: 插值组成的数组

let sum = (strs, a, b) => {
  console.log(strs);
  console.log(a, b);
};

let a = 45;
b = 28;
sum`${a} + ${b} = `;

// rest: 归并参数
sum = (strs, ...args) => {
  console.log(strs);
  console.log(args);
};
let c = 38;
sum`${a} + ${b} + ${c} = `;
复制代码

三、解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

1. 数组解构

// 变量声明并赋值时的解构
let foo = ['one', 'two', 'three'];
let [one, two, three] = foo;
console.log(one, two, three);

// 变量先声明后赋值时的解构,通过解构分离变量的声明，可以为一个变量赋值。
let a, b;
[a, b] = [1, 2, 3];
console.log(a, b);

// 为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。
[a, b, c = 'js'] = [1, 2];
console.log(a, b, c);

// 当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。
[a, b, ...c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, ...c);

// 使用"," ,忽略某些返回值
[, , , a, ,] = [1, 2, 3, 4, 5, 6];
console.log(a);
复制代码

2. 对象解构

// 基本赋值
let item = { id: 10, name: '手机' };
let { id, name } = item;

// 无声明赋值
// 注意：赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的。
var a, b;
({ a, b } = { a: 1, b: 2 });
复制代码

3. 参数解构

// 数组传参
let sum = ([a, b]) => a + b;
console.log(sum([30, 50]));
// 对象传参
let getUser = ({ name, email }) => [name, email];
console.log(getUser({ name: '朱老师', email: 'admin@php.cn' }));
复制代码

四、对象字面量的简化

let user = {
  userName: "天蓬老师",
  userEmail: "tp@qq.com",
  getInfo: function () {
    return `${this.userName} : ${this.userEmail} `;
  },
};
console.log(user);
// 对象解构
let { userName, userEmail } = user;
console.log(userName, userEmail);

//   进行简化
user = {
  userName: userName,
  userEmail: userEmail,
  getInfo: function () {
    return `${this.userName} : ${this.userEmail} `;
  },
};
console.log(userName, userEmail);

// 再次简化
// 对象字面量中的属性值引用的变量，如果与对象在同一个作用域中，则可以省去属性值
// 并且这个变量与对象的属性同名，则可以省去不写了

//   简化的前提:
//   1. 同一个作用域
//   2. 变量与属性同名
user = {
  userName,
  userEmail,
  getInfo: function () {
    return `${this.userName} : ${this.userEmail} `;
  },
};
console.log(userName, userEmail);
复制代码

五、bind(),call(),apply()

function hello(name, name2) {
  // this: 执行上下文,程序的运行环境
  // this当前是window，全局
  this.name = name;
  // window.name = name;
  console.log(this);
}

// hello("朱老师");
// bind()可以改变函数中的this指向
const obj = {
  name: "天蓬老师",
};

// bind()只绑定不执行
// let f = hello.bind(obj, "admin");
// console.log(f());

// 如果函数中的this被重新绑定之后,要求立即执行
// 用call,applay
// hello.call(obj, "灭绝老师");
// hello.apply(obj, ["西门老师", "欧阳老师"]);

// bind()案例
document.querySelector("button").addEventListener(
  "click",
  function () {
    // this原来是绑定到按钮上的,bind()改变this的指向
    console.log(this.name);
    console.log(this);
  }.bind({
    name: "朱老师",
  })
);

//   bind,call,apply: 相同点, 都可以改变this的指向
//   不同的点:
//   1. bind()只绑定，不执行
//   2. call,apply,绑定后立即执行，但参数并不一样
//   3. call,参数是离散的一个一个传入
//   4. apply, 参数以数组的形式统一传入
复制代码

六、访问器属性

- 访问属性：将一个方法伪装/包装成一个属性
- get: 是读取,也叫读操作
- set: 访问器属性的写操作

```javascript
// 对象成员: 属性, 方法
// 属性: 类似于变量
// 方法: 类似于函数
const product = {
  //   属性
  data: [
    { id: 1, name: '电脑', price: 5000, num: 5 },
    { id: 2, name: '手机', price: 4000, num: 15 },
    { id: 3, name: '相机', price: 1400, num: 10 },
  ],

  // 计算总金额
  // 方法: es6的方法的简化,将冒号和function可以删除
  getAmounts() {
    return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  },

  // 访问器属性: 将一个方法伪装/包装成一个属性
  // get: 是读取,也叫读操作
  get total() {
    return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  },

  // set: 访问器属性的写操作
  set setPrice(price) {
    this.data[1].price = price;
  },
};

console.log('总金额 = %d 元 ', product.getAmounts());

// 不想用方法,想以属性的方式来获取总金额
console.log('总金额 = %d 元 ', product.total);
console.log(product.data[1].price);
product.setPrice = 8000;
console.log(product.data[1].price);
复制代码
# 七、访问器属性的优先级

```js
let user = {
  data: { name },
  get name() {
    return this.data.name;
  },
  set name(v) {
    this.data.name = v;
  },
};

user.name = "天蓬老师";
console.log(user.name);
// 访问器属性的优先级高于同名的普通属性
复制代码

八、流程控制-分支

1. if 语句

let score = 54;
// 单分支
if (score >= 60) console.log("及格");

// 双分支
// else: 默认分支
if (score >= 60) console.log("及格");
else console.log("补考");

// 多分支
score = 8;
if (score >= 60 && score < 80) {
console.log("合格");
} else if (score >= 80 && score <= 100) {
console.log("学霸");
} else if (score > 100 || score < 0) {
console.log("非法数据");
} else {
console.log("补考");
}
复制代码

2. switch 语句

// 多分支的简化 switch
score = 38;
switch (true) {
case score >= 60 && score < 80:
  console.log("合格");
  break;
case score >= 80 && score <= 100:
  console.log("学霸");
  break;

case score > 100 || score < 0:
  console.log("非法数据");
  break;
default:
  console.log("补考");
}

let status = "SucCess";
switch (status.toLowerCase()) {
case "success":
  console.log("成功");
  break;
case "error":
  console.log("失败");
}

score = 89;
if (score >= 60) console.log("及格");
else console.log("补考");

//   console.log(score >= 60 ? true : false );
//   三元运算符: 专用于简单化双分支结构
console.log(score >= 60 ? "及格" : "补考");
复制代码
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云