JavaScript百炼成仙，JavaScript教程，JavaScript学习，JavaScript怎么开启（作用域/函数/解构赋值） |
您所在的位置：网站首页 › 函数怎么声明 › JavaScript百炼成仙，JavaScript教程，JavaScript学习，JavaScript怎么开启（作用域/函数/解构赋值） |
|
文末有合集，一定记得要收藏哦，后期慢慢学习。 学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。 理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包创建隔离作用域了解什么变量提升及函数提升掌握箭头函数、解析剩余参数等简洁语法一、作用域了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。 1.1 局部作用域局部作用域分为函数作用域和块作用域。 函数作用域 在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。 // 声明 counter 函数 function counter(x, y) { // 函数内部声明的变量 const s = x + y console.log(s) // 18 } // 设用 counter 函数 counter(10, 8) // 访问变量 s console.log(s)// 报错总结： 函数内部声明的变量，在函数外部无法被访问函数的参数也是函数内部的局部变量不同函数内部声明的变量无法互相访问函数执行完毕后，函数内部的变量实际被清空了块作用域 在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。 { // age 只能在该代码块中被访问 let age = 18; console.log(age); // 正常 } // 超出了 age 的作用域 console.log(age) // 报错 let flag = true; if(flag) { // str 只能在该代码块中被访问 let str = 'hello world!' console.log(str); // 正常 } // 超出了 age 的作用域 console.log(str); // 报错 for(let t = 1; t ev.preventDefault())总结： 箭头函数属于表达式函数，因此不存在函数提升箭头函数只有一个参数时可以省略圆括号 ()箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回箭头函数中没有 arguments，只能使用 ... 动态获取实参三、解构赋值知道解构的语法及分类，使用解构简洁语法快速为变量赋值。解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。 3.1 数组解构数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示： // 普通的数组 let arr = [1, 2, 3]; // 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b c let [a, b, c] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3总结： 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量变量的顺序对应数组单元值的位置依次进行赋值操作变量的数量大于单元值数量时，多余的变量将被赋值为 undefined变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析 3.2 对象解构对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示： // 普通对象 const user = { name: '小明', age: 18 }; // 批量声明变量 name age // 同时将数组单元值 小明 18 依次赋值给变量 name age const {name, age} = user console.log(name) // 小明 console.log(age) // 18总结： 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量对象属性的值将被赋值给与属性名相同的变量对象中找不到与变量名一致的属性时变量值为 undefined允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析 四、其他优质文章 ：前端行业发展： Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？找前端工作会不会很难？现在web前端的工资怎样？前端开发就业情况如何？前端工作内容：前端工程师主要工作内容是什么？前端开发是做什么的？工作职责有哪些？前端学习路线：怎么学习前端开发？求推荐学习路线？前端必读书籍：前端开发工程师必读书籍有哪些值得推荐？面试相关：关于前端Vue框架的面试题，面试官可能会问到哪些？【一定要收藏】32000字的前端面试题总结！！！web前端简历个人技能该怎么写?前端简历中项目描述怎么写能够更加的优雅？面试前端工程师简历应该怎么写才容易通过？自学 web 前端人怎么找工作？自学前端简历怎么写啊？HTML教程：HTML5入门教程（含新特性），从入门到精通HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）HTML图文教程（通按钮/文件域/label/下拉表单）HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）JavaScript教程：JavaScript 是什么？JavaScript基础入门教程（引入方式/注释/变量/常量/数据类型/类型转换）JavaScript基础入门教程（引入方式、注释、变量、数据类型、类型转换）JavaScript基础入门教程（for循环/数组）JavaScript基础入门教程（函数/返回值/作用域）JavaScript基础入门教程（对象/内置对象）JavaScript进阶教程（作用域/函数/解构赋值）JavaScript进阶教程（构造函数/内置函数/继承/封装）JavaScript进阶教程（深浅拷贝/异常/this/防抖节流）Koa2教程：Koa2框架是什么？Koa框架教程快速入门Koa中间件Koa2框架路由应用，Koa2前景、Koa2中间件Koa2异常处理VUE教程：最全的vue学习教程来了，vue模块化组件超级好用，vue项目推荐，vue项目结构搭建，案例分析其他：13 个有趣且实用的 CSS 框架 / 组件有哪些好的前端社区？看完两件事看完这个篇内容之后，如果对你有帮助，我想请您帮我个小忙 1、点赞，让更多人看到这篇文章（双击屏幕有惊喜哦~） 2、关注我，让我们成为长久的朋友关系，以后精彩回答你都可以第一时间收到 感谢您的支持！！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |