JavaScript编程基础（二）流程控制,函数与解构

原创 阁主  2023-08-02 15:06:59  阅读 699 次 评论 0 条
摘要：

继续上次的JavaScript编程基础（一）继续学习，简单记录学习PHP中文网23期JavaScript基础知识，内容包括：流程控制,函数与解构

特殊另类”数组”

  • 多维数组: 嵌套
  • 对象数组: JSON…
  • “类”数组: DOM 元素…

“类”数组和普通数组区别，虽然表面很像，但其实内部不像。
类和数组区别

示例代码笔记：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>另类数组</title>
  9. </head>
  11. <body>
  12.   <script>
  13.     // 1. 多维数组: 成员仍然是数组
  14.     // 一维数组
  15.     let staff = [1, 'Jack', 5000]
  16.     console.log(staff)
  17.     // 二维数组
  18.     let staffs = [
  19.       [1, 'Jack', 5000],
  20.       [2, 'Tony', 6000],
  21.       [1, 'John', 7000],
  22.     ]
  23.     console.log(staffs)
  24.     console.log(staffs[1][1])
  26.     // ------------------------------
  28.     // 2. 对象数组: 成员是对象, JSON
  29.     staffs = [
  30.       { id: 1, name: 'Jack', salary: 5000 },
  31.       { id: 2, name: 'Tony', salary: 6000 },
  32.       { id: 1, name: 'John', salary: 7000 },
  33.     ]
  34.     console.log(staffs)
  35.     console.log(staffs[2]['name'])
  36.     console.log(staffs[2].name)
  38.     // ------------------------------
  40.     // 3. "类"数组: 不是数组,是对象,但长得像"数组"
  41.     let user = [5, 'admin', 'admin@qq.com']
  42.     console.log(user)
  43.     console.log(Array.isArray(user))
  45.     // 类数组: 对象
  46.     user = { 0: 5, 1: 'admin', 2: 'admin@qq.com', length: 3 }
  47.     console.log(user)
  48.     console.log(Array.isArray(user))
  49.     console.log(typeof user)
  51.     // DOM: html元素的集合,就是一个"类"数组,对象集合的方法是受限的,没有数组多
  52.     // 为了使用数组中的定义的超多的超好用的方法, 所以有必要将类数组转为真正的数组
  54.     // "类"数组 => "真"数组
  55.     const arr = Array.from(user)
  56.     //   验证
  57.     console.log(Array.isArray(arr))
  59.     /**
  60.      * 1. 多维数组(二维)
  61.      * 2. 对象数组
  62.      * 3. "类"数组
  63.      */
  64.   </script>
  65. </body>
  67. </html>

作用域

  • 作用域: 用来查询变量
  • 作用域链: 查询变量的路径(由内向外不可逆)
  • 类型: 块, 函数, 全局, 模块

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>作用域/作用域链</title>
  9. </head>
  11. <body>
  12.   <script>
  13.     // 1. 块作用域
  14.     {
  15.       let age = 20
  16.       console.log(age)
  17.     }
  18.     // 块外部不可见
  19.     // console.log(age)
  21.     // -------------------------
  23.     // 2. 函数作用域
  24.     function show() {
  25.       // 私有成员
  26.       let uname = 'Robin'
  27.       console.log(uname)
  28.     }
  30.     show()
  31.     // 函数外部不可见
  32.     //   console.log(uname)
  34.     // -------------------------
  36.     // 3. 全局作用域
  37.     // 声明在"块,函数"之外的成员, 都是在全局作用域中,且全局可见
  39.     // 全局变量
  40.     const uname = '余老师'
  42.     //   块
  43.     {
  44.       console.log(uname)
  45.     }
  46.     // 函数
  47.     ; (function () {
  48.       console.log(uname)
  49.     })()
  51.     // -------------------------
  53.     // 4. 作用域链
  54.     let a = 400
  55.     {
  56.       // let a = 300
  57.       {
  58.         //   let a = 200
  59.         {
  60.           // let a = 100
  61.           console.log(a)
  62.         }
  63.       }
  64.     }
  65.   </script>
  66. </body>
  68. </html>

对象简化

  • 属性简写: 属性名与变量同名,则只写属性即可
  • 方法简写: 删除: function
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>对象字面量的简化</title>
  9. </head>
  11. <body>
  12.   <script>
  13.     // ES6中的class只支持简化的对象字面量语法
  14.     let user = {
  15.       // 属性
  16.       uname: '余老师',
  18.       // 方法
  19.       greet: function () {
  20.         return `Hello, ${this.uname}`
  21.       },
  22.     }
  23.     console.log(user.greet());
  25.     // --------------------
  27.     // 1. 属性简化
  28.     let uname = '余老师'
  29.     user = {
  30.       // 属性值如果来自同一个作用域中的变量,这时可以只写属性名
  31.       // uname: uname,
  32.       // 属性与变量同名,只写属性,不写变量
  33.       uname,
  34.     }
  35.     console.log(user.uname)
  37.     // --------------------
  39.     user = {
  40.       uname,
  42.       // greet: function () {
  43.       //   return `Hello, ${this.uname}`
  44.       // },
  46.       // 方法简化: 删除 ": function"
  47.       greet() {
  48.         return `Hello, ${this.uname}`
  49.       },
  50.     }
  52.     console.log(user.greet())
  54.     // 最终的简化结果
  55.     user = {
  56.       uname,
  57.       greet() {
  58.         return `Hello, ${this.uname}`
  59.       },
  60.     }
  61.     console.log(user.greet())
  63.     // 思考?能不能用箭头函数来简化方法的编写
  64.     user = {
  65.       uname,
  66.       // 箭头函数没有自己this
  67.       // this !== user
  69.       greet: () => {
  70.         // this === window !== user
  71.         console.log(this)
  72.         return `Hello, ${this.uname}`
  73.       },
  74.     }
  75.     console.log(user.greet())
  77.       // 注: 对象字面量中不能用箭头函数,除非你的方法中不使用 this
  78.   </script>
  79. </body>
  81. </html>

分支

  • 单分支: if(){}
  • 双分支: if(){}else{}
  • 多分支: if(){}else if(){}else{}
  • 双分支语法糖: con ? true : false
  • 多分支语法糖: switch(离散,区间)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>分支</title>
  9. </head>
  11. <body>
  12.   <script>
  13.     // 1. 单分支
  14.     let status = true
  15.     if (status) {
  16.       console.log('Success')
  17.     }
  19.     // ---------------------------
  21.     // 2. 双分支
  22.     // 添加了"默认分支": else
  23.     status = false
  24.     if (status) {
  25.       console.log('Success')
  26.     } else {
  27.       console.log('Fail')
  28.     }
  29.     // 双分支有一个语法糖来简化: 三元运算
  30.     status = true
  31.     console.log(status ? 'Success' : 'Fail')
  33.     // ---------------------------
  35.     // 3. 多分支
  36.     let age = 20
  37.     age = 80
  38.     age = 13
  39.     if (age >= 18 && age < 60) {
  40.       console.log('请放心观看')
  41.     } else if (age >= 60) {
  42.       console.log('请在子女陪同下观看')
  43.     } else {
  44.       // < 18
  45.       console.log('未成年,好好学习')
  46.     }
  48.     //   多分支语法糖: switch
  49.     age = 73
  50.     switch (true) {
  51.       case age >= 18 && age < 60:
  52.         console.log('请放心观看')
  53.         break
  54.       case age >= 60:
  55.         console.log('请在子女陪同下观看')
  56.         break
  57.       default:
  58.         console.log('未成年,好好学习')
  59.     }
  60.   </script>
  61. </body>
  63. </html>

循环

  • while()
  1. let arr = ['red', 'green', 'blue']
  2. //   1. 初始化: 从哪里开始,入口,从索引0开始
  3. let i = 0
  4. //   2. 条件
  5. console.log(arr.length)
  6. while (i < arr.length) {
  7.   console.log(arr[i])
  8.   // 3. 更新条件
  9.   // i = i + 1
  10.   // i += 1
  11.   i++
  12. }
  • for() while的简化(语法糖)
  1. let arr = ['red', 'green', 'blue']
  2. for (let i = 0; i < arr.length; i++) {
  3.   console.log(arr[i])
  4. }
  • for-of 遍历”数组”,只关注值
  1. let arr = ['red', 'green', 'blue']
  2. for (let value of arr) {
  3.   // value: 循环变量,用来接收每一次遍历的数组成员
  4.   console.log(value)
  5. }
  • for-in 遍历”对象”

key就是键值

  1. const user = { id: 5, uname: 'Tony', salary: 6000 }
  2. for (let key in user) {
  3.   // 不能用"点"语法来访问对象成员,必须用[]
  4.   console.log(user[key])
  5. }
  • forEach() 遍历”数组”
  1. let arr = ['red', 'green', 'blue']
  2. // 语法 : forEach(function(值,该值的索引?,正在遍历的当前数组?){})
  3. arr.forEach(function (item, index, arr) {
  4.   console.log(item, index, arr)
  5. })
  6. // 只有第一个参数是必选的,后面二个是可选的
  7. arr.forEach(function (item) {
  8.   console.log(item)
  9. })
  10. // 参数是回调参数,也是一个匿名函数,通常可以用箭头函数来简化
  11. arr.forEach(item => console.log(item))
  • map() 遍历数组

  1. // map 与 forEach 使用方法一样,只不过有一个返回值
  2. arr = [1, 2, 3]
  3. let res = arr.map(item => item * 2)
  4. console.log(res)
  6. // 任务: 生成一组列表,<ul>,渲染(显示)到页面中
  7. arr = ['笔记本电脑', '智能手机', '微单相机']
  8. arr = arr.map(item => `<li><a href="">${item}</a></li>`)
  9. console.log(arr)
  10. // 数组 => 字符串
  11. console.log([10, 20, 30].join())
  12. console.log([10, 20, 30].join(''))
  13. res = arr.join('')
  14. console.log(res)
  15. res = '<ul>' + res + '</ul>'
  16. console.log(res)
  17. // DOM: 渲染到页面上(后面会细说,先忽略)
  18. document.body.insertAdjacentHTML('afterbegin', res)

完整的代码示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>循环</title>
  9. </head>
  11. <body>
  12.   <script>
  13.     // 循环: 集合类型( 数组, 对象 )
  15.     /**
  16.      * 循环三要素
  17.      * 1. 初始化: 从哪里开始,入口
  18.      * 2. 条件: 到哪里结束,true继续,false停止
  19.      * 3. 更新条件: 避免死循环
  20.      */
  22.     let arr = ['red', 'green', 'blue']
  23.     console.log(arr)
  24.     // 1. while
  25.     //   1. 初始化: 从哪里开始,入口,从索引0开始
  26.     let i = 0
  27.     //   2. 条件
  28.     console.log(arr.length)
  29.     while (i < arr.length) {
  30.       console.log(arr[i])
  31.       // 3. 更新条件
  32.       // i = i + 1
  33.       // i += 1
  34.       i++
  35.     }
  37.     // -------------------------------
  39.     // 2. for : while的简化(语法糖)
  40.     for (let i = 0; i < arr.length; i++) {
  41.       console.log(arr[i])
  42.     }
  44.     // -------------------------------
  46.     //   3. for-of: 遍历"数组",只关注值
  47.     for (let value of arr) {
  48.       // value: 循环变量,用来接收每一次遍历的数组成员
  49.       console.log(value)
  50.     }
  52.     // -------------------------------
  54.     // 4. for-in: 遍历"对象"
  55.     const user = { id: 5, uname: 'Tony', salary: 6000 }
  56.     for (let key in user) {
  57.       // 不能用"点"语法来访问对象成员,必须用[]
  58.       console.log(user[key])
  59.     }
  61.     // -------------------------------
  63.     // 5. forEach: 遍历"数组"
  64.     // 语法 : forEach(function(值,该值的索引?,正在遍历的当前数组?){})
  65.     arr.forEach(function (item, index, arr) {
  66.       console.log(item, index, arr)
  67.     })
  68.     // 只有第一个参数是必选的,后面二个是可选的
  69.     arr.forEach(function (item) {
  70.       console.log(item)
  71.     })
  72.     // 参数是回调参数,也是一个匿名函数,通常可以用箭头函数来简化
  73.     arr.forEach(item => console.log(item))
  75.     // -------------------------------
  77.     // 6. map: 遍历数组
  78.     // map 与 forEach 使用方法一样,只不过有一个返回值
  79.     arr = [1, 2, 3]
  80.     let res = arr.map(item => item * 2)
  81.     console.log(res)
  83.     // 任务: 生成一组列表,<ul>,渲染(显示)到页面中
  84.     arr = ['笔记本电脑', '智能手机', '微单相机']
  85.     arr = arr.map(item => `<li><a href="">${item}</a></li>`)
  86.     console.log(arr)
  87.     // 数组 => 字符串
  88.     console.log([10, 20, 30].join())
  89.     console.log([10, 20, 30].join(''))
  90.     res = arr.join('')
  91.     console.log(res)
  92.     res = '<ul>' + res + '</ul>'
  93.     console.log(res)
  94.     // DOM: 渲染到页面上(后面会细说,先忽略)
  95.     document.body.insertAdjacentHTML('afterbegin', res)
  96.   </script>
  97. </body>
  99. </html>

函数参数与返回值

参数：

  • 参数不足: 默认参数
  • 参数过多: 剩余参数

返回值：

  • 单值: return
  • 多值: 数组,对象
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>函数参数与返回值</title>
  8.   </head>
  10.   <body>
  11.     <script>
  12.       // 函数参数与返回值
  14.       let sum = (a, b) => `${a} + ${b} = ${a + b}`;
  15.       console.log(sum(1, 2));
  17.       // 1. 参数
  18.       // 参数不足: 默认参数
  19.       console.log(sum(3));
  20.       sum = (a, b = 0) => `${a} + ${b} = ${a + b}`;
  21.       console.log(sum(3));
  22.       // 参数过多: 剩余参数(...数组)
  23.       console.log(sum(4, 5, 6));
  24.       // 第3个参数6: 丢失了
  25.       // 剩余参数: ...arr, 将参数全部压入到一个数组中
  26.       sum = (...arr) => arr;
  27.       console.log(sum(4, 5, 6, 7, 8));
  28.       sum = (a, b, ...arr) => console.log(a, b, arr);
  29.       sum(4, 5, 6, 7, 8);
  30.       // 将压入数组的参数全部展开: ... 不是用在参数列表中,就是展开/释放
  31.       sum = (a, b, ...arr) => console.log(a, b, ...arr);
  32.       sum(4, 5, 6, 7, 8);
  34.       //求和
  35.       sum = (...arr) => {
  36.         // 累加器
  37.         let acc = 0;
  38.         // 累加操作
  39.         for (let i = 0; i < arr.length; i++) {
  40.           acc += arr[i];
  41.         }
  42.         // 结果返回
  43.         return acc;
  44.       };
  45.       console.log(sum(4, 5, 6, 7, 8));
  46.       // 数组求和有现成的函数 reduce
  47.       sum = (...arr) => arr.reduce((acc, pre) => acc + pre);
  48.       console.log(sum(4, 5, 6, 7, 8));
  50.       // -----------------------
  52.       //   2. 返回值
  53.       // 函数都是"单值返回"
  54.       // 多值怎么办? 返回一个集合(数组,对象)
  56.       // 返回数组
  57.       let fn = () => [100, 200, 300];
  58.       console.log(fn());
  60.       // 返回对象
  61.       // 对象与代码块都是用 " { ... }",加上 " ()" 转为表达式
  62.       fn = () => ({ id: 1, uname: "admin" });
  63.       console.log(fn());
  64.     </script>
  65.   </body>
  66. </html>

模板字面量

  • 多行字符串
  • 变量解析

第一篇有提到，可以前往学习：JavaScript编程基础（一）

解构赋值

  • 数组解构: []=[]
  • 对象解构: {}={}
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>解构赋值</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       /**
  12.        * 解构赋值: 数组,对象等集合类型
  13.        * 解构: 将集合中每个成员, 赋值给独立的变量
  14.        * 语法: 模板 = 数据
  15.        * 1. 数组: [...] = [...]
  16.        * 2. 对象: {...} = {...}
  17.        */
  19.       // 1. 数组解构
  20.       const user = ["admin", "admin@qq.com"];
  21.       // 传统
  22.       //   let uname = user[0]
  23.       //   let email = user[1]
  24.       //   console.log(uname, email)
  26.       let [uname, email] = ["admin", "admin@qq.com"];
  27.       console.log(uname, email);
  29.       // 更新, [],(),{}前的分号不能省
  30.       [uname, email] = ["Tony", "tony@qq.com"];
  31.       console.log(uname, email);
  32.       // 变量不足:默认值
  33.       [uname, email, age = 30] = ["Tony", "tony@qq.com"];
  34.       console.log(uname, email, age);
  35.       // 数据过多: 剩余参数 '...'
  36.       [uname, email, ...arr] = ["Tony", "tony@qq.com", 40, 6000];
  37.       console.log(uname, email, arr);
  38.       console.log(uname, email, ...arr);
  40.       // -------------------------------
  42.       // 2. 对象解构
  43.       // 默认: 对象的属性,就是变量名
  44.       // 变量名 === 属性名
  45.       let { id, username } = { id: 1, username: "余老师" };
  46.       console.log(id, username);
  47.       // 起别名, 隐藏原始变量名;
  48.       let { id: uid, username: myName } = { id: 3, username: "余同志" };
  49.       console.log(uid, myName);
  51.       // ------------------------------
  53.       // 3. 应用场景
  55.       /**
  56.        * 1. 克隆
  57.        * 2. 传参
  58.        */
  60.       // 1. 克隆对象
  61.       let item = { name: "手机", price: 6000 };
  62.       let { ...obj } = item;
  63.       // obj 就是由 item 克隆而来的复制品, 并不是同一个
  64.       console.log(obj);
  65.       console.log(item);
  66.       console.log(item === obj);
  68.       // 2. 解构传参
  69.       let show = function (item) {
  70.         // item是object
  71.         return `${item.name}: ${item.price} 元`;
  72.       };
  73.       console.log(show({ name: "电脑", price: 8000 }));
  75.       // 对象解构传参
  76.       //   show = function ({ name, price }) {
  77.       //     return `${name}: ${price} 元`
  78.       //   }
  79.       // 可以继续简化,使用箭头函数
  80.       show = ({ name, price }) => `${name}: ${price} 元`;
  82.       console.log(show({ name: "相机", price: 28000 }));
  83.     </script>
  84.   </body>
  85. </html>
本文地址：https://www.mainblog.cn/327.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。

评论已关闭！