js-day10

JS学习之旅-day10

  • 1. 作用域
    • 1.1 局部作用域
    • 1.2 全局作用域
    • 1.3 作用域链
    • 1.4 JS垃圾回收机制(GC)
    • 1.5 闭包
    • 1.6 变量提升
  • 2. 函数进阶
    • 2.1 函数提升
    • 2.2 函数参数
    • 2.3 箭头函数
  • 3. 解构赋值
    • 3.1 数组解构
    • 3.2 对象解构
  • 4. 数组遍历
    • 4.1 forEach
    • 4.2 filter

1. 作用域

作用域规定了变量能够访问的“范围”,分为:局部作用域、全局作用域

1.1 局部作用域

  1. 函数作用域:只能在函数内部访问,外部无法直接访问,函数执行完后,函数内部的变量会被清空。
  2. 块作用域:被 {} 包裹的,使用let、const声明的变量会产生块作用域,var不会产生块作用域

1.2 全局作用域

  1. 写在最外层:

1.3 作用域链

  1. 本质:底层的变量查找机制
  2. 变量查找机制:
    1. 在函数被执行时,会优先在当前函数作用域中查找变量
    2. 如果当前作用域查找不到,则会依次逐级查找父级作用域 直到全局作用域
  3. 总结:
    1. 嵌套关系的作用域串联起来形成了作用域链
    2. 相同作用域中按着从小到大的规则查找变量
    3. 子作用域可以访问父作用域,父作用域无法访问子作用域

1.4 JS垃圾回收机制(GC)

  1. JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。
  2. 内存的生命周期:
    1. 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
    2. 内存使用:即读写内存,也就是使用变量、函数等
    3. 内存回收:使用完毕,由垃圾回收器自动回收不再使用的内存
  3. 说明:
    1. 全局变量一般不会回收(关闭页面回收)
    2. 局部变量不被使用了,会被自动回收掉
  4. 内存泄露:程序中分配的内存由于某种原因程序未释放无法释放叫做内存泄露
  5. 算法说明:
    1. 堆栈空间分配区别:
      1. 栈:由操作系统自动分配释放函数的参数值、局部变量等,基本数据类型都放在栈里
      2. 堆:一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型放在堆里
    2. 垃圾回收机制两种常见的算法:引用计数法标记清除法
      1. 引用计数(不再使用)
        1. 嵌套引用(循环引用):如果两个对象相互引用,尽管他们不再使用,但垃圾回收器不会进行回收,导致内存泄露
          function fn(){let o1 = {}let 02 = {}o1.a=o2o2.a=o1return ‘引用计数无法回收’
          }
          
      2. 标记清除法:从根部扫描对象,能查找到的就是使用的,查找不到的就是要回收的

1.5 闭包

  1. 概念:一个函数对周围状态的引用捆绑在一起,内部函数中访问到其他外层函数的作用域

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

    function outer(){const a=1function f(){console.log(a)}f()
    }
    outer()
    
  3. 闭包的作用:封装数据,提供操作,外部也可以访问函数内部的变量

    function outer() {const a = 1;function fn() {console.log(a);}return fn
    }
    const fn = outer()
    fn()
    
  4. 风险:内存泄露

1.6 变量提升

  1. 把所有var声明的变量提升到当前作用域前面;let/const 不存在变量提升
  2. 只提升声明,不提升赋值
  3. 变量提升出现在相同作用域中

2. 函数进阶

2.1 函数提升

  1. 会把所有函数声明提升到当前作用域的最前面
  2. 只提升函数声明,不提升函数调用。(函数表达式不存在提升的现象)
    //函数提升
    foo()
    function foo(){	console.log('提升了')
    }//函数表达式不存在提升
    bar()
    var bar=function(){console.log('报错了')
    }
    

2.2 函数参数

  1. 动态参数:arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参
    function sum() {// arguments 动态参数 只存在函数中// arguments 是一个伪数组, 它不是一个真正的数组, 但是它有length属性, 可以通过下标访问元素// console.log(arguments);let total = 0;for (let i = 0; i < arguments.length; i++) {total += arguments[i];}console.log(total);
    }
    sum(1, 2);
    sum(1, 2, 3);
    sum(1, 2, 3, 4);
    sum(1, 2, 3, 4, 5);
    
  2. 剩余参数:允许我们将一个不定数量的参数表示为一个数组
    1. ...是语法符号,之余最末函数形参之前,用于获取多余的实参
    2. 借助...获取的剩余实参,是一个真数组
    function sum(a,...other) {console.log(other);
    }
    sum(1, 2); // [2]
    sum(1, 2, 3); // [2,3]
    sum(1, 2, 3, 4); // [2,3,4]
    sum(1, 2, 3, 4, 5); // [2,3,4,5]
    
  3. 展开运算符 ...
    1. 可以将一个数组展开
      const arr=[1,2,3]
      console.log(...arr) //1 2 3
      
    2. 说明
      1. 不会修改原数组
      2. 最典型的应用:求数组的最值、合并数组
    const arr = [1, 2, 3, 4, 5];console.log(...arr);// 求数组最大值
    console.log(Math.max(...arr));// 合并数组
    const arr2 = [6, 7, 8, 9, 10];
    const arr3 = [...arr, ...arr2];
    

2.3 箭头函数

  1. 目的:更简洁的函数写法并且不绑定this,适用于那些需要匿名函数的地方
  2. 基本语法
    // 只有一行代码时, 可以省略大括号,return 会自动返回
    const fn = (a, b) => a + b;
    console.log(fn(1, 2));// 只有一个形参时, 可以省略小括号
    const fn2 = a => a + 1;
    console.log(fn2(1));// 直接返回一个对象
    const fn3 = (uname) => ({ uname: uname });
    console.log(fn3("张三"))
    
  3. 参数
    1. 箭头函数没有arguments参数,但是有剩余参数
    2. 箭头函数不会创建自己的this,它会从自己的作用域链的上一层沿用this

3. 解构赋值

3.1 数组解构

  1. 定义:将数组的单元值快速批量赋值给一系列的变量。
  2. 语法:const [a,b,c] = [100,60,80]
  3. 代码案例:交换变量
    let x = 1;
    let y = 2;
    [x, y] = [y, x];  
    console.log(x, y);
    

3.2 对象解构

  1. 语法:const { name, age } = { name: 'John', age: 20 };
  2. 注意:变量名和属性名一定要相同
  3. 解构的变量名可以重新命名:const { name: name1, age: age1 } = { name: 'John', age: 20 };
  4. 数组对象解构:
    // 数组对象解构
    const pig = [{ name: 'John', age: 20 },
    ]
    const [{ name: name2, age: age2 }] = pig;
    
  5. 多级对象解构
    // 多级对象解构
    const person = {uname: 'John',uage: 20,address: {city: 'New York',
    }}
    const { uname, uage, address: { city } } = person;
    

4. 数组遍历

4.1 forEach

  1. 代码:
    被遍历的数组.forEach(function(当前数组元素,当前元素索引号){//函数体
    })
    
  2. 注意:
    1. forEach主要是遍历数组
    2. 当前数组元素是必须写的,索引号可以省略
    3. 与map的区别:map有返回,forEach没有

4.2 filter

  1. 筛选数组符合条件的元素,并返回筛选之后元素的新数组
  2. 代码:
    被遍历的数组.filter(function(当前数组元素,当前元素索引号){return 筛选条件
    })
    

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

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

相关文章

智能数字式毫秒计在实际生活场景中的应用

在电力领域&#xff0c;SYN5307型数字毫秒表可精准监测特高压变电站断路器合闸时间差&#xff0c;定位继电保护装置信号延迟&#xff1b;工业自动化中&#xff0c;优化汽车焊装线时序、提升半导体晶圆切割良率&#xff1b;科研计量上&#xff0c;助力量子通信同步校准&#xff…

Java面试基础:概念

1. Java的特点跨平台性&#xff1a;Java的 “编写一次&#xff0c;运行无处不在” 是其最大的特点之一。Java编译器将源代码编译成字节码(bytecode)&#xff0c;该字节码可以在任何安装了Java虚拟机(JVM)的系统上运行。面向对象&#xff1a;Java是一门严格的面向对象编程语言&a…

PyQt5高级窗口控件详解:停靠窗口、多文档界面与滚动条

掌握PyQt5的高级窗口控件&#xff0c;让你的GUI应用具备专业级的布局与交互体验 在PyQt5应用开发中&#xff0c;高效管理窗口布局和实现复杂交互功能是提升用户体验的关键。本文将深入解析三个核心高级控件&#xff1a;停靠窗口&#xff08;QDockWidget&#xff09;、多文档界面…

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrawingApp(画板组件)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— DrawingApp组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API&#xff08;<script setup>…

Eureka、Nacos、LoadBalance、OpenFeign​之间的区别联系和协作 (附代码讲解)

这篇文章聊聊微服务里的这几个老伙计&#xff1a;Eureka、Nacos、LoadBalance、OpenFeign。咱们做微服务开发&#xff0c;总会跟这几个组件打交道&#xff1a;Eureka、Nacos、Spring Cloud LoadBalancer、OpenFeign。它们各司其职又互相配合&#xff0c;今天就把它们的关系、用…

JavaSE-继承

继承&#xff08;inheritance&#xff09;继承的意义我们首先来看下面两个类&#xff1a;public class Dog {public String name;public int age;public void eat(){System.out.println(this.name"正在吃饭");}public void bark(){System.out.println(this.name"…

第二届虚拟现实、图像和信号处理国际学术会议(VRISP 2025)

重要信息 官网&#xff1a;www.icvisp.net 时间&#xff1a;2025年8月1-3日 地点&#xff1a;中国-长沙 简介 近年来&#xff0c;虚拟现实技术取得了显著进步&#xff0c;与5G、云计算和物联网等新一代信息技术的融合加速&#xff0c;推动了其在硬件、软件和内容应用等方面…

SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:整体布局、架构调整(二)

目录 一、前言 二、后端调整 1.实体类调整 2.菜单相关接口 3.用户相关接口 4.新增工具类 5.新增菜单树返回类 6.配置类、拦截器 三、前端调整 1.请求调整 2.页面布局、样式调整 1.user.vue 2.index.vue 3.请求拦截 四、开发过程中的问题 五、附&#xff1a…

vue3官方文档学习心得

这几天抽空把vue3的文档整个看了一遍。简介 | Vue.js 23年写过一个vue2的项目&#xff0c;24年写了一个vue3的项目&#xff0c;页面功能比较简单&#xff0c;用几个简单的API&#xff0c;watch、watchEffect、ref、reactive就能实现的业务功能。 写了几年的react的&#xff0…

Pycharm恢复默认设置,配置导致复制粘贴等不能使用

在file 种找到manage IDE settings在manage IDE settings中找到restore default settings

【王树森推荐系统】召回12:曝光过滤 Bloom Filter

概述 曝光过滤通常是在召回阶段做&#xff0c;具体的方法就是用 Bloom Filter 曝光过滤问题 如果用户看过某个物品&#xff0c;则不再把该物品曝光给用户。原因是同一个物品重复曝光给用户会损害用户体验&#xff0c;但也不是所有推荐系统都有曝光过滤&#xff0c;像 youtube 这…

基于STM32单片机的心率血氧监测系统设计(STM32代码编写+手机APP设计+PCB设计+Proteus仿真)

系列文章目录 文章目录 系列文章目录前言1 资料获取与演示视频1.1 资料介绍1.2 资料获取1.3 演示视频 2 系统框架3 硬件3.1 主控制器3.2 显示屏3.3 WIFI模块3.4心率血氧传感器 4 设计PCB4.1 安装下载立创EDA专业版4.2 画原理图4.4 使用嘉立创下单助手进行下单&#xff0c;打板。…

main(int argc,char **agrv)的含义

今天和大家讨论一个常见的但是不容易深入了解的知识点。那就是 main 函数声明中使用到的 argc 和 argv 的含义。通常我们写主函数的时候一般都是直接使用int main() 或者 void main() 来声明 main 函数。但是你知道吗&#xff1f;在c89/c99的语言标准中&#xff0c;main函数的声…

如何简单实现发版不影响客户使用?nginx负载

nginx负载发版不影响客户使用 1.需要二台服务器 2.二台服务器均是正式环境配置 3.服务器Nginx配置修改 发版顺序&#xff1a;先在服务器2发版&#xff0c;发布成功后&#xff0c;再改服务器Nginx配置&#xff0c;重新加载nginx&#xff1b;然后在服务器再发版&#xff0c;发布成…

qt笔记(1)——Qtablewidget使用

1.基础使用方法 &#xff08;略&#xff09; 2.坑和注意点 2.1 设置一个单元格的编辑属性 在代码中&#xff0c;想要修改一个单元格的编辑属性&#xff0c;需要对这个item的flags进行设置&#xff1b;注意对一个tablewidget的一个item成员进行设置后&#xff0c;进行一次编…

字符串的模糊匹配方法介绍

字符串的模糊匹配方法介绍 目录字符串的模糊匹配方法介绍一、编辑距离&#xff08;Levenshtein Distance&#xff09;复杂度分析二、Jaro-Winkler 距离复杂度分析三、最长公共子序列&#xff08;LCS&#xff09;复杂度分析四、模糊搜索&#xff08;Fuzzy Search&#xff09;复杂…

ActiveMQ在Spring Boot中的详细使用指南

📋 目录 🚀 ActiveMQ简介 什么是ActiveMQ? 核心概念 🏗️ 基础架构组件 📝 重要概念解释 ActiveMQ vs 其他消息中间件 🔧 环境搭建 1. ActiveMQ服务端安装 Docker方式(推荐初学者) 手动安装方式 2. 验证安装 访问Web管理界面 连接参数 测试连接 �…

二元一次方程

前言 最近刚学二元一次方程&#xff0c;想写一篇专栏熟悉一下本文写给初一的同学看&#xff0c;学过的就划了吧二元一次方程 两个未知数最高项次数为 111 次为整式方程二元一次方程的解不唯一&#xff0c;但是二元一次方程可以用一个未知数来表达另一个未知数eg:eg:eg: xy1x y…

AI编程的未来是智能体原生开发?

目录 前言 一、从“串行”到“并行”&#xff1a;什么是智能体原生开发&#xff1f; 1.1 传统模式&#xff08;串行思维&#xff09; 1.2 智能体原生模式&#xff08;并行思维&#xff09; 二、程序员的新角色&#xff1a;从代码手艺人到系统思想家 三、软件开发的终局&a…

【牛客刷题】小红的与运算

文章目录 一、题目介绍1.1 题目描述1.2 输入描述1.3 输出描述1.4 示例二、 解题思路2.1 核心算法设计2.2 性能优化关键2.3 算法流程图三、解法实现3.1 解法一:基础实现3.1.1 初级版本分析3.2 解法二:优化版本(推荐)3.2.1 优化版本分析四、总结与拓展4.1 关键优化技术4.2 算…