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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
分支（条件选择语句）

  • 单分支: if(){}

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

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

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

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

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

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

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

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

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

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

循环三要素：

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

  • while()

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

  • for()

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

  • for-of

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

  • for-in

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

  • forEach()

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

  • map()

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

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

  1. // 完整的对象声明
  2. let teacher = {
  3.     // 属性
  4.     name: '朱老师',
  5.     // 方法
  6.     greet: function (){
  7.         return `Hello, ${this.name}`;
  8.     }
  9. }
  10. console.log(teacher.greet());    // 输出：Hello, 朱老师
  12. // 属性简化
  13. // 属性值如果来自同一个作用域的变量，属性名与变量同名，则只写属性即可
  14. let name = '朱老师';
  15. let teacher = {
  16.     // 属性
  17.     name, // 等同于 name: name
  18. }
  19. console.log(teacher.name);    // 输出：朱老师
  21. // 方法简写: 删除 “: function”
  22. let name = '朱老师';
  23. let teacher = {
  24.     name, 
  25.     // 方法
  26.     greet(){
  27.         return `Hello, ${this.name}`;
  28.     }
  29. }
  30. console.log(teacher.greet());    // 输出：Hello, 朱老师
  31. // 注意，对象字面量中不能使用箭头函数（没有自己的 this），除非声明的方法中不使用 this。
  32. let name = '朱老师';
  33. let teacher = {
  34.     name,
  35.     // 方法，
  36.     greet: () => {
  37.         // 用对象名称访问，可以
  38.         return `Hello, ${teacher.name}`;
  39.         // 用 this 访问: undefined
  40.         return `Hello, ${this.name}`;
  41.     },
  42. }
解构赋值

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

语法：模板 = 数据

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

  • 数组解构: []=[]

    1. const user = ['admin', 'admin@qq.com'];
    3. // 传统方法，逐个赋值
    4. let uname = user[0];
    5. let email = user[1];
    7. // 解构赋值
    8. const user = ['admin', 'admin@qq.com'];
    9. let [uname, email] = user;
    10. // 也可以直接写成
    11. let [uname, email] = ['admin', 'admin@qq.com'];
    12. // 更新值
    13. [uname, email] = ['tony', 'tony@qq.com'];
    15. // 变量不足：给默认值
    16. [uname, email, age = 30] = ['tony', 'tony@qq.com'];
    17. console.log([uname, email, age])    // 输出：['tony', 'tony@qq.com', 30]
    19. // 数据过多：剩余参数 '...arr'
    20. [uname, email, ...arr] = ['tony', 'tony@qq.com', 40, 8000];
    21. console.log(uname, email, arr);    // 输出：tony tony@qq.com [40, 8000]
    22. // 展开剩余参数
    23. console.log(uname, email, ...arr);    // 输出：tony tony@qq.com 40 8000

  • 对象解构: {}={}

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

  • 应用

    1. 克隆

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

    2. 传参

      1. // 传递参数
      2. let show = function (item){
      3.     // item 是对象
      4.     return `${item.name}: ${item.price} 元`;
      5. }
      6. console.log(show({name: 'computer', price: 6880}));
      8. // 对象解构传参
      9. show = function ({name, price}){
      10.     return `${name}: ${price} 元`;
      11. }
      12. console.log(show({name: 'camera', price: 16880}));
      13. // 用箭头函数简化
      14. show =  ({name, price}) => `${name}: ${price} 元`;
      15. console.log(show({name: 'camera', price: 16880}));
【文章原创作者：防ddos攻击 http://www.558idc.com/shsgf.html 复制请保留原URL】
更多阅读