JavaScript编程基础(二)流程控制,函数与解构 原创 阁主 2023-08-02 15:06:59 阅读 555 次 评论 0 条 摘要:继续上次的JavaScript编程基础(一)继续学习,简单记录学习PHP中文网23期JavaScript基础知识,内容包括:流程控制,函数与解构 ## 特殊另类"数组" - 多维数组: 嵌套 - 对象数组: JSON... - "类"数组: DOM 元素... "类"数组和普通数组区别,虽然表面很像,但其实内部不像。 ![类和数组区别](https://www.mainblog.cn/zb_users/upload/2023/08/202308021551178617093.png "类和数组区别") 示例代码笔记: ```JavaScript 另类数组 ``` ## 作用域 - 作用域: 用来查询变量 - 作用域链: 查询变量的路径(由内向外不可逆) - 类型: 块, 函数, 全局, 模块 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308021611133749633.png) ```JavaScript 作用域/作用域链 ``` ## 对象简化 - 属性简写: 属性名与变量同名,则只写属性即可 - 方法简写: 删除`: function` ```JavaScript 对象字面量的简化 ``` ## 分支 - 单分支: `if(){}` - 双分支: `if(){}else{}` - 多分支: `if(){}else if(){}else{}` - 双分支语法糖: `con ? true : false` - 多分支语法糖: `switch`(离散,区间) ```JavaScript 分支 ``` ## 循环 - `while()` ```JavaScript let arr = ['red', 'green', 'blue'] // 1. 初始化: 从哪里开始,入口,从索引0开始 let i = 0 // 2. 条件 console.log(arr.length) while (i < arr.length) { console.log(arr[i]) // 3. 更新条件 // i = i + 1 // i += 1 i++ } ``` - `for()` while的简化(语法糖) ```javascript let arr = ['red', 'green', 'blue'] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } ``` - `for-of` 遍历"数组",只关注值 ```JavaScript let arr = ['red', 'green', 'blue'] for (let value of arr) { // value: 循环变量,用来接收每一次遍历的数组成员 console.log(value) } ``` - `for-in` 遍历"对象" ![key就是键值](https://www.mainblog.cn/zb_users/upload/2023/08/20230802223625169098698560530.png) ```JavaScript const user = { id: 5, uname: 'Tony', salary: 6000 } for (let key in user) { // 不能用"点"语法来访问对象成员,必须用[] console.log(user[key]) } ``` - `forEach()` 遍历"数组" ```JavaScript let arr = ['red', 'green', 'blue'] // 语法 : forEach(function(值,该值的索引?,正在遍历的当前数组?){}) arr.forEach(function (item, index, arr) { console.log(item, index, arr) }) // 只有第一个参数是必选的,后面二个是可选的 arr.forEach(function (item) { console.log(item) }) // 参数是回调参数,也是一个匿名函数,通常可以用箭头函数来简化 arr.forEach(item => console.log(item)) ``` - `map()` 遍历数组 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308021742064976570.png) ```JavaScript // map 与 forEach 使用方法一样,只不过有一个返回值 arr = [1, 2, 3] let res = arr.map(item => item * 2) console.log(res) // 任务: 生成一组列表,,渲染(显示)到页面中 arr = ['笔记本电脑', '智能手机', '微单相机'] arr = arr.map(item => `${item}`) console.log(arr) // 数组 => 字符串 console.log([10, 20, 30].join()) console.log([10, 20, 30].join('')) res = arr.join('') console.log(res) res = '' + res + '' console.log(res) // DOM: 渲染到页面上(后面会细说,先忽略) document.body.insertAdjacentHTML('afterbegin', res) ``` 完整的代码示例: ```JavaScript 循环 ``` ## 函数参数与返回值 参数: - 参数不足: 默认参数 - 参数过多: 剩余参数 返回值: - 单值: `return` - 多值: 数组,对象 ```JavaScript 函数参数与返回值 ``` ## 模板字面量 - 多行字符串 - 变量解析 第一篇有提到,可以前往学习:[JavaScript编程基础(一)](https://www.mainblog.cn/326.html "JavaScript编程基础(一)") ## 解构赋值 - 数组解构: `[]=[]` - 对象解构: `{}={}` ```JavaScript 解构赋值 ``` 本文地址:https://www.mainblog.cn/327.html 版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处! 免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。 PREVIOUS:JavaScript编程基础(一) NEXT:JavaScript编程基础(三)访问器属性、常用字符串与数组方法、构造函数、类 文章导航