JavaScript 分支与循环结构、对象简化及解构赋值

分支（条件选择语句）

• 单分支: if(){}

  if (score < 60){
      alert("不及格")  // 条件成立执行语句，条件不成立则不执行。
  }

• 双分支: if(){}else{}

  if (score < 60){
      alert("不及格")  // 条件成立时执行语句
  } else {
       alert("及格")  // 条件不时成立执行语句
  }

• 多分支: if(){}else if(){}else{}

  // 判断多个条件，根据其是否为 true，选择执行不同的语句
  if(score < 60){
      alert("不及格");
  } else if(score < 70){
      alert("及格");
  } else if(score < 90){
      alert("良好");
  } else {
      alert("优秀")
  }

• 双分支语法糖: con ? true : false

  // 三元运算，格式：条件 ？ 结果表达式1 ：结果表达式2
  // 当条件成立，取值结果表达式1
  // 当条件不成立，取值结果表达式2
  result = status ? 'Success' : "Fail";
  // 当 status = true, result = 'Success'
  // 当 status = false, result = 'Fail'

• 多分支语法糖: switch(离散,区间)

  // 适用于需要判断的条件时有限可数的情况
  // 注意：每个 case 语句后必须加 break;
  // default 语句必须要有。
  switch (true){
      case score < 60: alert("不及格"); break;
      case score < 70: alert("及格"); break;
      case score < 90: alert("良好"); break;
      default: alert("优秀");
  }

循环语句

循环，针对的是集合类型（数组、对象）的数据操作。

循环三要素：

1. 初始化：从哪里开始，入口
2. 条件：到哪里结束，true 继续，false 停止
3. 更新条件：避免死循环

• while()

  let arr = ['red', 'green', 'blue'];
  let i = 0;  // 初始化入口
  while (i < arr.length){  // 条件
      console.log(arr[i]);  // 每个循环的执行语句
      i++;  // 更新条件
  }
  /* 输出：
   * red
   * green
   * blue
   */

• for()

  // while()的简化，将三要素写在一起
  let arr = ['red', 'green', 'blue'];
  for(let j = 0; j < arr.length; j++){
      console.log(arr[i]);
  }
  /* 输出：
   * red
   * green
   * blue
   */

• for-of

  // 遍历数组，每次迭代都将当前对应的数组元素值赋值给指定的变量
  // 获取数组元素的值
  // 只能遍历数组，不能遍历对象
  let arr = ['red', 'green', 'blue'];
  for (let value of arr){
      console.log(value);
  }
  /* 输出：
   * red
   * green
   * blue
   */

• for-in

  // 遍历对象，每次迭代都将当前对应的数组元素键名赋值给指定的变量
  // 获取对象元素的键名
  // for-in循环中，不能用“点”语法来访问对象成员，必须用[]
  let user = { id: 5, uname: 'Tom', salary: 8000, }
  for (let key in user){
      console.log(user[key]);
  }
  /* 输出：
   * 5
   * Tom
   * 8000
   */

• forEach()

  // 遍历数组
  // 语法：forEach(function(值, 该值的索引, 正在遍历的当前数组){})
  let arr = ['red', 'green', 'blue'];
  arr.forEach(function (value, index, arr){
      console.log(value, index, arr);
  })
  /* 输出：
   * red 0 (3) ['red', 'green', 'blue']
   * green 1 (3) ['red', 'green', 'blue']
   * blue 2 (3) ['red', 'green', 'blue']
   */
  // 只有第一个参数（值）是必选的，后面两个是可选
  // 实际使用时只关注值，就只写第一个参数
  arr.forEach(function (value){
      console.log(value);
  })
  /* 输出：
   * red
   * green
   * blue
   */
  // 参数时回调函数，也是匿名函数，可以用箭头函数来简化
  arr.forEach(value => console.log(value));

• map()

  // 遍历数组
  // 与 forEach 使用方法一样，只不过有一个返回值
  let arr = [1, 2, 3];
  let arrDouble = arr.map(value => value * 2);
  console.log(arrDouble);
  /* 输出：
   *[2, 4, 6]
   */
  // 应用示例，在页面生成一组列表
  let arr = ['电脑', '手机', '相机'];  // 列表项目名称数组
  // 用map()方法给列表项目名称套上 `<li>` `<a>` 标签
  let arrList = arr.map(value => `<li><a href="">${value}</a></li>`);
  // 将数组转换成字符串：join()方法，默认用逗号连接，这里用""（空字符串）连接
  let elemList = arrList.join("");
  // 再给字符串套上 `<ul>` 标签
  elemList = '<ul>' + elemList + '</ul>';
  // DOM 操作渲染到页面
  document.body.insertAdjacentHTML('afterbegin',elemList);

对象简化

ES6 中的 class 只支持简化的对象字面量语法！

// 完整的对象声明
let teacher = {
    // 属性
    name: '朱老师',
    // 方法
    greet: function (){
        return `Hello, ${this.name}`;
    }
}
console.log(teacher.greet());    // 输出：Hello, 朱老师
// 属性简化
// 属性值如果来自同一个作用域的变量，属性名与变量同名，则只写属性即可
let name = '朱老师';
let teacher = {
    // 属性
    name, // 等同于 name: name
}
console.log(teacher.name);    // 输出：朱老师
// 方法简写: 删除 “: function”
let name = '朱老师';
let teacher = {
    name, 
    // 方法
    greet(){
        return `Hello, ${this.name}`;
    }
}
console.log(teacher.greet());    // 输出：Hello, 朱老师
// 注意，对象字面量中不能使用箭头函数（没有自己的 this），除非声明的方法中不使用 this。
let name = '朱老师';
let teacher = {
    name,
    // 方法，
    greet: () => {
        // 用对象名称访问，可以
        return `Hello, ${teacher.name}`;
        // 用 this 访问: undefined
        return `Hello, ${this.name}`;
    },
}

解构赋值

将数组、对象等集合中的每个成员赋值给独立的变量。

语法：模板 = 数据

1. 数组：[ … ] = [ … ]
2. 对象：{ … } = { … }

• 数组解构: []=[]

  const user = ['admin', 'admin@qq.com'];
  // 传统方法，逐个赋值
  let uname = user[0];
  let email = user[1];
  // 解构赋值
  const user = ['admin', 'admin@qq.com'];
  let [uname, email] = user;
  // 也可以直接写成
  let [uname, email] = ['admin', 'admin@qq.com'];
  // 更新值
  [uname, email] = ['tony', 'tony@qq.com'];
  // 变量不足：给默认值
  [uname, email, age = 30] = ['tony', 'tony@qq.com'];
  console.log([uname, email, age])    // 输出：['tony', 'tony@qq.com', 30]
  // 数据过多：剩余参数 '...arr'
  [uname, email, ...arr] = ['tony', 'tony@qq.com', 40, 8000];
  console.log(uname, email, arr);    // 输出：tony tony@qq.com [40, 8000]
  // 展开剩余参数
  console.log(uname, email, ...arr);    // 输出：tony tony@qq.com 40 8000

• 对象解构: {}={}

  // 默认：对象的属性名（键）就是变量名
  let {uname, email} = {uname:'admin', email:'admin@qq.com'};
  console.log(uname, email);    // 输出：admin admin@qq.com
  // 使用别名来访问：属性名:别名变量名
  let {uname:myName, email:myEmail} = {uname:'admin', email:'admin@qq.com'};
  console.log(myName, myEmail);

• 应用

  1. 克隆

     // 克隆对象
     let item = {name: 'mobile', price: 5880};
     let {...obj} = item; // 将 item 中所有内容复制到 obj
     console.log(obj);    // 输出：{name: 'mobile', price: 5880}
     // obj 和 item 不是同一个对象，obj 是 item 的复制品

  2. 传参

     // 传递参数
     let show = function (item){
         // item 是对象
         return `${item.name}: ${item.price} 元`;
     }
     console.log(show({name: 'computer', price: 6880}));
     // 对象解构传参
     show = function ({name, price}){
         return `${name}: ${price} 元`;
     }
     console.log(show({name: 'camera', price: 16880}));
     // 用箭头函数简化
     show =  ({name, price}) => `${name}: ${price} 元`;
     console.log(show({name: 'camera', price: 16880}));