JavaScript进阶 第一天笔记

在这里插入图片描述

JavaScript 进阶 - 第1天

学习作用域、变量提升、闭包等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法,降低代码的冗余度。

  • 理解作用域对程序执行的影响
  • 能够分析程序执行的作用域范围
  • 理解闭包本质,利用闭包创建隔离作用域
  • 了解什么变量提升及函数提升
  • 掌握箭头函数、解析剩余参数等简洁语法

作用域

了解作用域对程序执行的影响及作用域链的查找机制,使用闭包函数创建隔离作用域避免全局变量污染。

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,作用域分为全局作用域和局部作用域。

局部作用域

局部作用域分为函数作用域和块作用域。

函数作用域

在函数内部声明的变量只能在函数内部被访问,外部无法直接访问。

<script>// 声明 counter 函数function counter(x, y) {// 函数内部声明的变量const s = x + yconsole.log(s) // 18}// 设用 counter 函数counter(10, 8)// 访问变量 sconsole.log(s)// 报错
</script>

总结:

  1. 函数内部声明的变量,在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了
块作用域

在 JavaScript 中使用 {} 包裹的代码称为代码块,代码块内部声明的变量外部将【有可能】无法被访问。

<script>{// 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 <= 6; t++) {// t 只能在该代码块中被访问console.log(t); // 正常}// 超出了 t 的作用域console.log(t); // 报错
</script>

JavaScript 中除了变量外还有常量,常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】,常量值为对象时其属性和方法允许重新赋值。

<script>// 必须要有值const version = '1.0.0';// 不能重新赋值// version = '1.0.1';// 常量值为对象类型const user = {name: '小明',age: 18}// 不能重新赋值user = {};// 属性和方法允许被修改user.name = '小小明';user.gender = '男';
</script>

总结:

  1. let 声明的变量会产生块作用域,var 不会产生块作用域
  2. const 声明的常量也会产生块作用域
  3. 不同代码块之间的变量无法互相访问
  4. 推荐使用 letconst

注:开发中 letconst 经常不加区分的使用,如果担心某个值会不小被修改时,则只能使用 const 声明成常量。

全局作用域

<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。

<script>// 此处是全局function sayHi() {// 此处为局部}// 此处为全局
</script>

全局作用域中声明的变量,任何其它作用域都可以被访问,如下代码所示:

<script>// 全局变量 nameconst name = '小明'// 函数作用域中访问全局function sayHi() {// 此处为局部console.log('你好' + name)}// 全局变量 flag 和 xconst flag = truelet x = 10// 块作用域中访问全局if(flag) {let y = 5console.log(x + y) // x 是全局的}
</script>

总结:

  1. window 对象动态添加的属性默认也是全局的,不推荐!
  2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!!!
  3. 尽可能少的声明全局变量,防止全局变量被污染

JavaScript 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。

作用域链

在解释什么是作用域链前先来看一段代码:

<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// 局部作用域function g() {let d = 'yo'}}
</script>

函数内部允许创建新的函数,f 函数内部创建的新函数 g,会产生新的函数作用域,由此可知作用域产生了嵌套的关系。

如下图所示,父子关系的作用域关联在一起形成了链状的结构,作用域链的名字也由此而来。

作用域链本质上是底层的变量查找机制,在函数被执行时,会优先查找当前函数作用域中查找变量,如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域,如下代码所示:

<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// let a = 10;console.log(a) // 1 或 10console.log(d) // 报错// 局部作用域function g() {let d = 'yo'// let b = 20;console.log(b) // 2 或 20}// 调用 g 函数g()}console.log(c) // 报错console.log(d) // 报错f();
</script>

总结:

  1. 嵌套关系的作用域串联起来形成了作用域链
  2. 相同作用域链中按着从小到大的规则查找变量
  3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域

闭包

闭包是一种比较特殊和函数,使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数,如下代码所示:

<body><script>// 1. 闭包 : 内层函数 + 外层函数变量// function outer() {//   const a = 1//   function f() {//     console.log(a)//   }//   f()// }// outer()// 2. 闭包的应用: 实现数据的私有。统计函数的调用次数// let count = 1// function fn() {//   count++//   console.log(`函数被调用${count}次`)// }// 3. 闭包的写法  统计函数的调用次数function outer() {let count = 1function fn() {count++console.log(`函数被调用${count}`)}return fn}const re = outer()// const re = function fn() {//   count++//   console.log(`函数被调用${count}次`)// }re()re()// const fn = function() { }  函数表达式// 4. 闭包存在的问题: 可能会造成内存泄漏</script>
</body>

总结:

1.怎么理解闭包?

  • 闭包 = 内层函数 + 外层函数的变量

2.闭包的作用?

  • 封闭数据,实现数据私有,外部也可以访问函数内部的变量
  • 闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来

3.闭包可能引起的问题?

  • 内存泄漏

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问,

<script>// 访问变量 strconsole.log(str + 'world!');// 声明变量 strvar str = 'hello ';
</script>

总结:

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在声明之前即被访问,变量的值为 undefined
  3. let 声明的变量不存在变量提升,推荐使用 let
  4. 变量提升出现在相同作用域当中
  5. 实际开发中推荐先声明再访问变量

注:关于变量提升的原理分析会涉及较为复杂的词法分析等知识,而开发中使用 let 可以轻松规避变量的提升,因此在此不做过多的探讨,有兴趣可查阅资料。

函数

知道函数参数默认值、动态参数、剩余参数的使用细节,提升函数应用的灵活度,知道箭头函数的语法及与普通函数的差异。

函数提升

函数提升与变量提升比较类似,是指函数在声明之前即可被调用。

<script>// 调用函数foo()// 声明函数function foo() {console.log('声明之前即被调用...')}// 不存在提升现象bar()  // 错误var bar = function () {console.log('函数表达式不存在提升现象...')}
</script>

总结:

  1. 函数提升能够使函数的声明调用更灵活
  2. 函数表达式不存在提升的现象
  3. 函数提升出现在相同作用域当中

函数参数

函数参数的使用细节,能够提升函数应用的灵活度。

默认值
<script>// 设置参数默认值function sayHi(name="小明", age=18) {document.write(`<p>大家好,我叫${name},我今年${age}岁了。</p>`);}// 调用函数sayHi();sayHi('小红');sayHi('小刚', 21);
</script>

总结:

  1. 声明函数时为形参赋值即为参数的默认值
  2. 如果参数未自定义默认值时,参数的默认值为 undefined
  3. 调用函数时没有传入对应实参时,参数的默认值被当做实参传入
动态参数

arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参。

<script>// 求生函数,计算所有参数的和function sum() {// console.log(arguments)let s = 0for(let i = 0; i < arguments.length; i++) {s += arguments[i]}console.log(s)}// 调用求和函数sum(5, 10)// 两个参数sum(1, 2, 4) // 两个参数
</script>

总结:

  1. arguments 是一个伪数组
  2. arguments 的作用是动态获取函数的实参
剩余参数
<script>function config(baseURL, ...other) {console.log(baseURL) // 得到 'http://baidu.com'console.log(other)  // other  得到 ['get', 'json']}// 调用函数config('http://baidu.com', 'get', 'json');
</script>

总结:

  1. ... 是语法符号,置于最末函数形参之前,用于获取多余的实参
  2. 借助 ... 获取的剩余实参,是个真数组

箭头函数

箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。

<body><script>// const fn = function () {//   console.log(123)// }// 1. 箭头函数 基本语法// const fn = () => {//   console.log(123)// }// fn()// const fn = (x) => {//   console.log(x)// }// fn(1)// 2. 只有一个形参的时候,可以省略小括号// const fn = x => {//   console.log(x)// }// fn(1)// // 3. 只有一行代码的时候,我们可以省略大括号// const fn = x => console.log(x)// fn(1)// 4. 只有一行代码的时候,可以省略return// const fn = x => x + x// console.log(fn(1))// 5. 箭头函数可以直接返回一个对象// const fn = (uname) => ({ uname: uname })// console.log(fn('刘德华'))</script>
</body>

总结:

  1. 箭头函数属于表达式函数,因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号 ()
  3. 箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回
箭头函数参数

箭头函数中没有 arguments,只能使用 ... 动态获取实参

<body><script>// 1. 利用箭头函数来求和const getSum = (...arr) => {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}return sum}const result = getSum(2, 3, 4)console.log(result) // 9</script>
箭头函数 this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

 <script>// 以前this的指向:  谁调用的这个函数,this 就指向谁// console.log(this)  // window// // 普通函数// function fn() {//   console.log(this)  // window// }// window.fn()// // 对象方法里面的this// const obj = {//   name: 'andy',//   sayHi: function () {//     console.log(this)  // obj//   }// }// obj.sayHi()// 2. 箭头函数的this  是上一层作用域的this 指向// const fn = () => {//   console.log(this)  // window// }// fn()// 对象方法箭头函数 this// const obj = {//   uname: 'pink老师',//   sayHi: () => {//     console.log(this)  // this 指向谁? window//   }// }// obj.sayHi()const obj = {uname: 'pink老师',sayHi: function () {console.log(this)  // objlet i = 10const count = () => {console.log(this)  // obj }count()}}obj.sayHi()</script>

解构赋值

知道解构的语法及分类,使用解构简洁语法快速为变量赋值。

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>// 普通的数组let arr = [1, 2, 3]// 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] = arrconsole.log(a); // 1console.log(b); // 2console.log(c); // 3
</script>

总结:

  1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
  3. 变量的数量大于单元值数量时,多余的变量将被赋值为 undefined
  4. 变量的数量小于单元值数量时,可以通过 ... 获取剩余单元值,但只能置于最末位
  5. 允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

注:支持多维解构赋值,比较复杂后续有应用需求时再进一步分析

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>// 普通对象const user = {name: '小明',age: 18};// 批量声明变量 name age// 同时将数组单元值 小明  18 依次赋值给变量 name  ageconst {name, age} = userconsole.log(name) // 小明console.log(age) // 18
</script>

总结:

  1. 赋值运算符 = 左侧的 {} 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 对象中找不到与变量名一致的属性时变量值为 undefined
  4. 允许初始化变量的默认值,属性不存在或单元值为 undefined 时默认值才会生效

注:支持多维解构赋值

<body><script>// 1. 这是后台传递过来的数据const msg = {"code": 200,"msg": "获取新闻列表成功","data": [{"id": 1,"title": "5G商用自己,三大运用商收入下降","count": 58},{"id": 2,"title": "国际媒体头条速览","count": 56},{"id": 3,"title": "乌克兰和俄罗斯持续冲突","count": 1669},]}// 需求1: 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面// const { data } = msg// console.log(data)// 需求2: 上面msg是后台传递过来的数据,我们需要把data选出当做参数传递给 函数// const { data } = msg// msg 虽然很多属性,但是我们利用解构只要 data值function render({ data }) {// const { data } = arr// 我们只要 data 数据// 内部处理console.log(data)}render(msg)// 需求3, 为了防止msg里面的data名字混淆,要求渲染函数里面的数据名改为 myDatafunction render({ data: myData }) {// 要求将 获取过来的 data数据 更名为 myData// 内部处理console.log(myData)}render(msg)</script>

综合案例

forEach遍历数组

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

注意:

1.forEach 主要是遍历数组

2.参数当前数组元素是必须要写的, 索引号可选。

<body><script>// forEach 就是遍历  加强版的for循环  适合于遍历数组对象const arr = ['red', 'green', 'pink']const result = arr.forEach(function (item, index) {console.log(item)  // 数组元素 red  green pinkconsole.log(index) // 索引号})// console.log(result)</script>
</body>

filter筛选数组

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景: 筛选数组符合条件的元素,并返回筛选之后元素的新数组

<body><script>const arr = [10, 20, 30]// const newArr = arr.filter(function (item, index) {//   // console.log(item)//   // console.log(index)//   return item >= 20// })// 返回的符合条件的新数组const newArr = arr.filter(item => item >= 20)console.log(newArr)</script>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可拓展的低代码全栈框架

尽管现在越来越多的人开始对低代码开发感兴趣&#xff0c;但已有低代码方案的局限性仍然让大家有所保留。其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定。 显然这样的担忧是合理的&#xff0c;因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持&…

OpenGL LUT滤镜算法解析

1. 简介 滤镜&#xff1a;一些图像处理软件针对性地提供了一些对传统滤镜效果的模拟功能&#xff0c;使图像达到一种特殊效果。滤镜通常需要同通道、图层、色阶等联合使用&#xff0c;才能使图像取得最佳艺术效果。在软件界面中也直接以“滤镜”&#xff08;Filter&#xff09…

实现一个自己的脚手架教程

前言 脚手架并不实现&#xff0c;难的是最佳实践的整理和沉淀。本文不会涉及到最佳实践方面的内容&#xff0c;只是教会你如何实现一个最基础的脚手架&#xff0c;以此作为展示最佳实践的载体。 如何搭建一个脚手架的工程 如何开发和调试一个脚手架 脚手架中如何接收和处理命…

12.2 实现键盘模拟按键

本节将向读者介绍如何使用键盘鼠标操控模拟技术&#xff0c;键盘鼠标操控模拟技术是一种非常实用的技术&#xff0c;可以自动化执行一些重复性的任务&#xff0c;提高工作效率&#xff0c;在Windows系统下&#xff0c;通过使用各种键盘鼠标控制函数实现动态捕捉和模拟特定功能的…

数字孪生和数据分析:数字化时代的力量结合

在当今数字化时代&#xff0c;数据是无处不在的。企业、政府和个人不仅生成了大量数据&#xff0c;还寻求从中获取有价值的信息以进行更好的决策。在这个背景下&#xff0c;数字孪生和数据分析成为了迎合这一需求的两个关键概念。本文带大家一起探讨二者之间相辅相成的关系。 一…

Spring Boot:自定义注解--annotation

目录 自定义注解的定义和作用范围如何创建自定义注解创建注解接口 如何使用自定义注解进行数据验证创建注解处理器控制器中使用注解 如何为字段添加注解 自定义注解的定义和作用范围 自定义注解可以作用在类、方法、属性、参数、异常、字段或其他注解上。 如何创建自定义注解…

Google AdSense 账户开通网站广告位后如何配置付款电汇账号的详细教程!

本篇文章主要讲解&#xff1a;Google AdSense 账户开通网站广告位后如何配置付款电汇账号的详细教程。通过本文章可以快速了解开通账户配置权限的整体流程&#xff0c;很多小白朋友注册完毕后发现根本没有配置账号的入口&#xff0c;这篇文章能够告诉你详细的原有。 日期&#…

知识增强语言模型提示 零样本知识图谱问答10.8+10.11

知识增强语言模型提示 零样本知识图谱问答 摘要介绍相关工作方法零样本QA的LM提示知识增强的LM提示与知识问题相关的知识检索 实验设置数据集大型语言模型基线模型和KAPIN评估指标实现细节 实验结果和分析结论 摘要 大型语言模型&#xff08;LLM&#xff09;能够执行 零样本cl…

CAN和CANFD通信介绍

CAN&#xff08;Controller Area Network&#xff0c;控制器局域网&#xff09;是一种串行通信技术&#xff0c;专门用于在汽车电子控制单元&#xff08;ECU&#xff09;之间实现可靠的数据交换。 CAN协议介绍 电子化 汽车近年来的发展呈现出以电子化为主的特点。电子化的主…

Lab 1: Unix utilities汇总

这个实验主要学习了常用的一些系统调用。 Lab 1: Unix utilities Boot xv6 (easy) git克隆&#xff0c;切换分支&#xff0c;qemu。根据要求进行操作即可。 $ git clone git://g.csail.mit.edu/xv6-labs-2020 $ cd xv6-labs-2020 $ git checkout util $ make qemusleep (ea…

数据中心供配电及能效管理系统的设计要点

摘要&#xff1a;现代的数据中心中都包括大量的计算机&#xff0c;对于这种场所的电力供应&#xff0c;都要求供电系统需要在所有的时间都有效&#xff0c;这就不同于一般建筑的供配电系统&#xff0c;它是一个交叉的系统&#xff0c;涉及到市电供电、防雷接地、防静电、UPS不间…

分类预测 | MATLAB实现KOA-CNN-BiGRU开普勒算法优化卷积双向门控循环单元数据分类预测

分类预测 | MATLAB实现KOA-CNN-BiGRU开普勒算法优化卷积双向门控循环单元数据分类预测 目录 分类预测 | MATLAB实现KOA-CNN-BiGRU开普勒算法优化卷积双向门控循环单元数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现KOA-CNN-BiGRU开普勒算法优化…

Visual Studio 2022新建项目时没有ASP.NET项目

一、Visual Studio 2022新建项目时没有ASP.NET项目 1、打开VS开发工具&#xff0c;选择工具菜单&#xff0c;点击“获取工具和功能” 2、选择“ASP.NET和Web开发”和把其他项目模板&#xff08;早期版本&#xff09;勾选上安装即可

ICPC 2019-2020 North-Western Russia Regional Contest

A (codeforces.com) 这题在移动不被挡板挡住以及不超过边界的情况下&#xff0c;每次走的越多那么次数就越少 只要两个每次都走b-a步&#xff08;已经是不被挡板挡住走的最多了&#xff09;&#xff0c;就不用考虑被挡板挡住的情况&#xff0c;只用单独考虑了&#xff0c;如果…

2023年陕西省安全员B证证考试题库及陕西省安全员B证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年陕西省安全员B证证考试题库及陕西省安全员B证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大…

ArcGIS/GeoScene脚本:基于粒子群优化的支持向量机分类模型

参数输入 输出 栅格 预测为负类的概率 预测为正类的概率 二值化结果 评估结果 ROC曲线

kepler.gl 笔记:Layer

Point S2Layer Icon Line Cluster Polygon 一个路径型的GeoJSON图层可以显示诸如行程路线或等值线的数据。轮廓的颜色可以使用数值字段进行设置。 一个多边形型的GeoJSON图层本质上是一种区域填充图层&#xff0c;最适合用于呈现地理围栏。填充颜色或高度可以使用数值字…

LLVM(5)ORC实例分析

ORC实例总结 总结 因为API茫茫多&#xff0c;逻辑上的一些概念需要搞清&#xff0c;编码时会容易很多。JIT的运行实体使用LLVMOrcCreateLLJIT可以创建出来&#xff0c;逻辑上的JIT实例。JIT实例需要加入运行库&#xff08;依赖库&#xff09;和用户定义的context&#xff08;…

设计模式 - 状态模式

目录 一. 前言 二. 实现 一. 前言 状态模式&#xff08;State Pattern&#xff09;&#xff1a;它主要用来解决对象在多种状态转换时&#xff0c;需要对外输出不同的行为的问题。状态和行为是一一对应的&#xff0c;状态之间可以相互转换。当一个对象的内在状态改变时&#x…

点击、拖曳,15分钟搞定BI零售数据分析

早几年做数据分析还很依赖IT&#xff0c;过程复杂、耗时长、灵活性差&#xff0c;但这几年随着BI智能数据分析技术的成长&#xff0c;零售数据分析发生了翻天覆地的变化&#xff0c;其中最直观的一点就是&#xff1a;点击、拖曳&#xff0c;15分钟内就能搞定BI零售数据分析。 …