js高级记录

news2024/11/24 14:30:30

目录

1.怎么理解闭包?

2.闭包的作用?

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

4.变量提升

5.函数动态参数

 6.剩余参数 ...(实际开发中提倡使用)

7.展开运算符

8.箭头函数

9.解构赋值(数组、对象)


1.怎么理解闭包?

        内层函数+外层函数的变量

2.闭包的作用?

        实现数据私有化,外部也可以访问函数内部的变量

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

        内存泄漏

4.变量提升

仅存在于var声明的变量

1.把所有var声明的变量提升到 当前作用域的最前面

2.只提升声明,不提升赋值

注:

1.变量在未声明即访问的情况下,会报语法错误

2.使用变量在声明前,变量的值为undefined

3.let const 没有变量提升

4.变量提升出现在相同作用域当中

5.实际开发中推荐先声明在访问变量

5.函数提升

函数在声明之前就可以调用

    test()
    function test() {
      console.log('函数被调用了')
    }

1.会把函数声明提升到当前作用域的最前面

2.只提升函数声明,不提升函数调用

3.函数表达式必须先声明和赋值,后调用,否则会报错


    fun()  //-闭包.html:41 Uncaught TypeError: fun is not a function

    var fun = function (){
      console.log('函数表达式')
    }

   // fun() 先声明赋值后调用

5.函数动态参数

1)argument是有一个伪数组,只存在于函数中,无法用pop,push等数组方法

2)arguments的作用是动态获取函数的实参

3)可以通过for循环依次得到传递过来的实参

    // 动态参数求和

    function sum (){
      let sum = 0
      for(let i = 0;i< arguments.length;i++){
        sum+=arguments[i]
      }
      console.log(sum); //10
    }
    sum(1,2,3,4)

 6.剩余参数 ...(实际开发中提倡使用

允许将一个不定数量的参数表示为一个数组,是真数组

function getSum(...other) {
      console.log(other); //[3, 4, 5, 6, 7, 8]
    }
getSum(3,4,5,6,7,8)


 // 剩余参数
    function getSum(a,b,...other) {
      console.log(a,b,other); //3 4 (4) [5, 6, 7, 8]
    }
    getSum(3,4,5,6,7,8)

7.展开运算符

使用场景:求数组最大值(最小值),合并数组

    // 展开运算符
    const arr = [1,2,3,4]
    console.log(...arr) //1 2 3 4
    // 1求数组最大/小值
    console.log(Math.max(...arr)) //4
    console.log(Math.min(...arr)) //1
    // 2合并数组
    const arr2 = [5,6,7]
    console.log([...arr, ...arr2]) //[1, 2, 3, 4, 5, 6, 7]

8.箭头函数

目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁

使用场景:箭头函数更使用于那些本来需要匿名函数的地方

箭头函数没有arguments 动态函数,但是有剩余参数 ...args

    // 箭头函数
    const fuc = (a,b) => {
      console.log(a,b) //哈哈 呼呼
    }
    fuc('哈哈','呼呼')

 // 省略括号
    const fuc = a => console.log(a) //哈哈
    fuc('哈哈')

 // 省略return
    const add = x => x+x
    console.log(add(1) ); //2

  // 箭头函数可以直接返回一个对象
    const objFn = (uname) => ({name:uname}) 
    console.log( objFn('张三')); //{name: '张三'}

9.解构赋值(数组、对象)

    // 数组结构
    const [a, b, c] = [1, 2, 3]
    console.log(a, b, c);

    const [a1, b1, ...c1] = [1, 2, 3, 4, 5]
    console.log(a1, b1, c1);  //1 2 (3) [3, 4, 5]

  // 设置默认值
    const [a2, b2, c2, d2='444'] = [1, 2, 3]
    console.log(a2, b2, c2, d2); //1 2 3 '444'
    // 对象解构
    const { uname, age } = { uname:'zs', age:18 } 
    console.log(uname, age); //zs 18

    // 可以将变量名重新更改
    const { uname:username, age:uage } = { uname:'ls', age:18 } 
    console.log(username, uage); //zs 18

 // 解构数组对象
    const pig = [
      {
        weight:200,
        height:50
      }
    ] 
    const [{weight, height}] = pig
    console.log(weight, height); //200 50

// 解构对象多级嵌套
    const animal = {
      name:'猫咪',
      family:{
        name1:'小小'
      }
    }
  const {name, family:{name1}} = animal
  console.log(name, name1); //猫咪 小小

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

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

相关文章

为UOS启用VNC和Windows远程桌面

1 参考资料 UOS系统中安装x11vnc远程桌面 如何通过windows电脑远程UOS桌面RDP 已在ARM版本和X86版本中验证均可用 2 准备工作 2.1 设置代理&#xff08;可选&#xff09; 如果设备本身能和公网通&#xff0c;就不需要了。 由于我们全程需要在root账号下进行&#xff0c;系…

RadSystems Studio crack视觉设计和快速行动

RadSystems Studio crack视觉设计和快速行动 RadSystems Studio是一个充满激情的开发和保存环境&#xff0c;不需要专门的编程。该软件提供数字解决方案和组件&#xff0c;以尽快在API和UI中构建程序&#xff0c;只需少量代码&#xff0c;甚至无需编写。该软件减少了编写时间并…

Kubeadm方式搭建K8s集群【1.27.0版本】

文章目录 一、集群规划及架构二、系统初始化准备(所有节点同步操作)三、安装并配置cri-dockerd插件四、安装kubeadm(所有节点同步操作)五、初始化集群六、Node节点添加到集群七、安装网络组件Calico八、测试CoreDNS解析可用性九、拓展1、ctr和crictl命令具体区别2、calico多网卡…

【计算机视觉 | 图像分割】通用AI大模型Segment Anything在医学影像分割的性能究竟如何?

最近看到了一篇论文&#xff1a; 论文地址为&#xff1a; https://arxiv.org/pdf/2304.14660.pdf这篇文章用来探究最近大火的大模型SA在医学图像上的效果。 文章目录 一、前言二、数据集展示三、方法展示四、结果分析 一、前言 近半年来&#xff0c;ChatGPT、DALLE等引发了大…

网络安全之IPSEC

目录 VPN 分类 业务层次划分 网络层次划分 VPN的常用技术 隧道技术 IPSEC VPN IPSEC的安全服务 IPSEC的技术协议族架构 ESP AH IPSEC架构 IKE 两种工作模式 两个通信协议 密钥管理协议 两个数据库 解释域 DOI 传输模式 使用场景 封装结构 隧道模式 使用场…

Spring框架|这n篇就够了

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

论文笔记——chatgpt评估+

文章目录 1. chatgpt 效果评估:Evaluating ChatGPT’s Information Extraction Capabilities: An Assessment of Performance, Explainability, Calibration, and Faithfulness文章简介文章结论 2. 事件抽取&#xff1a; OneEE: A One-Stage Framework for Fast Overlapping an…

DolphinScheduler海豚调度教程

DolphinScheduler 教程 &#xff08;一&#xff09;入门指南 简介 关于Dolphin Apache DolphinScheduler是一个分布式易扩展的可视化DAG工作流任务调度开源系统。解决数据研发ETL 错综复杂的依赖关系&#xff0c;不能直观监控任务健康状态等问题。DolphinScheduler以DAG流式…

MySQL知识学习06(SQL语句在MySQL中的执行过程)

1、MySQL 基本架构概览 下图是 MySQL 的一个简要架构图&#xff0c;从下图可以很清晰的看到用户的 SQL 语句在 MySQL 内部是如何执行的。 先简单介绍一下下图涉及的一些组件的基本作用帮助大家理解这幅图 连接器&#xff1a; 身份认证和权限相关(登录 MySQL 的时候)。查询缓…

mysql数据之表管理-mysql高级管理

1. #创建表tt01 #对id字段设置零填充约束、主键约束、自增长约束 #对name字段设置非空约束、默认值约束 #对cardid字段设置非空约束、唯一键约束 插入数据记录&#xff1a; 1&#xff09;因为id字段设置了自增长&#xff0c;如果不指定id字段值&#xff0c;则默认从1开始递…

electron+vue3全家桶+vite项目搭建【17】pinia状态持久化

文章目录 引入问题演示实现效果展示、实现步骤1.封装状态初始化函数2.封装状态更新同步函数3.完整代码 引入 上一篇文章我们已经实现了electron多窗口中&#xff0c;pinia的状态同步&#xff0c;但你会发现&#xff0c;如果我们在一个窗口里面修改了状态&#xff0c;然后再打开…

第十四届蓝桥杯Python B组省赛复盘

第十四届蓝桥杯Python B组省赛复盘 文章目录 第十四届蓝桥杯Python B组省赛复盘试题 A: 2023【问题描述】&#xff08;5 分&#xff09;【思路】 试题 B: 硬币兑换【问题描述】【思路】 试题 C: 松散子序列【问题描述】【输入格式】【输出格式】【样例输入】【样例输出】【评测…

Python | 人脸识别系统 — 活体检测

本博客为人脸识别系统的活体检测代码解释 人脸识别系统博客汇总&#xff1a;人脸识别系统-博客索引 项目GitHub地址&#xff1a; 注意&#xff1a;阅读本博客前请先参考以下博客 工具安装、环境配置&#xff1a;人脸识别系统-简介 UI界面设计&#xff1a;人脸识别系统-UI界面设…

6---N字形变化

将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你的输出需要从左往右逐…

JavaScrpit—数据类型转换

目录 1、起 源 理 念 2、特 点 框 架 AngularJS框架 WebSocket协议 3、书 写 位 置 注 释 浏览器调试js代码 4、变量作用 全局变量 局部变量 常量 5、数据类型 数 组 严格检查数据类型 字符串 6、类型转换 字符串转数字 转bool值 能力判断 7、编码方式 …

Spring IOC相关注解运用——上篇

目录 前言 一、Component 二、Repository、Service、Controller 三、Scope 四、Autowired 五、Qualifier 六、Value 1. 直接设置固定的属性值 2. 获取配置文件中的属性值 3. 测试结果 往期专栏&文章相关导读 1. Maven系列专栏文章 2. Mybatis系列专栏文章 3.…

记录一次Linux下ChatGLM部署过程

前言 本地化的GPT就是香&#xff0c;就是有点费钱。 项目地址&#xff1a;https://github.com/THUDM/ChatGLM-6B 前期准备 服务器&#xff08;本机的跳过&#xff09; 由于本地电脑显卡都不行&#xff0c;所以我租了AutoDL的一台算力服务器。Tesla T4 16G显存&#xff0c;…

自供电-测力刀柄资料整理

自供电-测力刀柄资料整理 2. 相关专利2.1 实时测量铣削过程中床主轴温度装置【1】2.2 一种基于应变片的测力系统【2】 3. 相关商业化产品3.1 spike 测力刀柄【3】3.2 瑞士奇石乐&#xff08;Kistler&#xff09;旋转切削测力仪【4】3.3 kistler的通用型压电式切削力测量系统3.4…

SPSS如何进行聚类分析之案例实训?

文章目录 0.引言1.快速聚类分析2.分层聚类分析3.两阶段聚类分析 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对聚类分析进行阐述。…

【软考高项笔记】第1章 信息化发展1.5 数字化转型与元宇宙

1.5 数字化转型与元宇宙 元宇宙本质上是对现实世界的虚拟化、数字化过程&#xff0c;需要对内容生产、经济系统、用户体验以及实体世界内容等进行大量改造1.5.1 数字化转型 新建一个富有活力的数字化商业模式 组织对业务进行彻底重新定义&#xff08;大洗牌&#xff09;之后才…