一、值传递与引用传递

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} = `;

三、解构赋值

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 ? "及格" : "补考");