JavaScript 进阶(一)

news2024/12/22 15:51:30

一、作用域

1.  局部作用域

(1)函数作用域

(2)块作用域

2.  全局作用域

3.  作用域链 

g 作用域可以访问 f 作用域(子访问父),但是 f 作用域,不能访问 g 作用域(父访问子)

会依次像冒泡一样,向上一级查找离他最近的一个作用域

【总结】

4.  垃圾回收机制

(1)定义

(2)垃圾回收机制的算法说明

5.  闭包

注意:闭包可能有内存泄露的问题 

6.  变量提升

二、函数进阶

1.  函数提升 

注意:函数表达式不存在提升现象

2.  函数参数

(1)动态参数

注意:arguments 动态参数 只存在于函数里面 

(2)剩余参数

注意:第一个中,把 2,3 分别给 a, b 没有剩余数字给 …arr ,所以它的结果为空

第二个剩余了三个,就把最后三个都给了 …arr

注意:使用的时候(打印的时候)不需要写 …

【补充】展开运算符

可以将数组展开,变为字符串形式

… arr  === 1,2,3

应用场景

① 求数组最大最小值

② 合并数组

注意:展开运算符 得到的结果不是一个数组。 剩余参数 得到的结果是一个真数组

3.  箭头函数

(1)基本语法

注意:没有参数时,必须写小括号

【总结】

(2)箭头函数参数

利用箭头函数求和

(3)箭头函数 this

以前 this 的只指向

【举例】

this 指向函数的调用者

三、解构赋值

1.  数组解构

注意:必须加分号的两种情况

【案例】

设置一个默认值就好了

注意:

2.  对象解构

注意:解构时,变量名必须和属性名相同

注意:多级对象解构,注意数组对象前面要加对象名和冒号

【案例】

只选取 msg 对象里面的 data 部分

必须加大括号,解构,否则传过来的就是 msg 整个数据,而我们只要其中的 data 部分

3.  遍历数组 forEach 方法 (重点)

注意:forEach 没有返回值,只是遍历

  

【案例】

①、遍历数组,得到对象

注意:forEach 有几条数据就遍历几次

上图有八条数据,则做完遍历后,str 里面有 8 个 div 即八个字符串,需要通过 innerHTML 加到 list 中

 ②、解构

解构,获得对象里面的属性

这两种解构,等价

解构,可以使下面写数据时,不再写 item . name 之类的,直接写解构时给的名称就好了

【总代码】

四、综合案例 -- 筛选列表

1.  渲染页面模块

【代码】

【补充】filter 筛选数组

筛选出大于等于 20 的部分,并将筛选出来的部分,放入一个新数组里面

简写 

注意:这两种方式,等价

2.  点击不同需求,显示不同内容

黄框中的是对象,红圈中的是对象解构后的使用

【代码】

这两行代码等价,但是后面的代码更加简化

 

注意:不用写 4 的情况,因为获取 A ,就等于获取到了 1-4 之间所有数,那么不是 1-3 之间的数就是剩下的 4 了

注意:这里不能写空数组,若是空数组的话,点击不是 1-3 的数,就不会渲染数据,会返回空。

必须写 goodslist ,这样要是点击的不是 1-3 ,则不进行判断,直接进行渲染数据

好啦!本次的分享到这里就结束啦!我们下次不见不散哦!!!

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

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

相关文章

[数据集][图像分类]杂草分类数据集17509张9类别

数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):17509 分类类别数:9 类别名称:["chineseapple","lantana","negatives","parkinsonia","part…

经典面试题---环形链表

1. 环形链表1. - 力扣(LeetCode) 要解决这道题,我们首先要挖掘出带环的链表与不带环的链表之间的差别。 以此,才能设计出算法来体现这种差别并判断。 二者最突出的不同,就是不带环的链表有尾结点,也就是说…

Springboot打包jar如何后台启动和查看日志?

如何后台启动Spring Boot的fat jar 使用nohup命令启动: 在Linux或Unix系统中,你可以使用nohup命令来启动jar包,以确保即使你关闭了终端或断开了SSH连接,程序仍然可以在后台运行。命令格式如下:nohup java -jar yourapp…

C语言(指针)6

Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,关注收藏,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记&#x…

opencv车道偏离系统-代码+原理-人工智能-自动驾驶

车道偏离预警系统(Lane Departure Warning System, LDWS)是一种主动安全技术,旨在帮助驾驶员避免因无意中偏离车道而引发的事故。从原理到实战应用,其工作流程大致如下: 传感器采集 :系统通常配备有一个或…

智能终端RK3568主板在智慧公交条形屏项目的应用,支持鸿蒙,支持全国产化

基于AIoT-3568A的智慧公交条形屏,可支持公交线路动态展示,语音到站提醒,减少过乘、漏乘的情况,有效提高了公交服务效率和质量,为乘客提供了更舒适、更安全和更方便的出行体验,为城市的发展增添了新的活力。…

升级Microsoft 365后,SAP GUI中无法打开Excel的解决方案

最近,我们遇到了一个棘手的问题,一位客户在升级到Microsoft 365后,无法在SAP GUI中打开Excel。这个问题不仅影响了工作效率,也给用户的日常操作带来了不便。在本文中,我们将探讨问题的成因,并提供一种解决方…

纯福利|手把手教你如何白嫖免费的GPU资源(二)

大家好,我是无界生长。 前段时间写过一篇文章《纯福利|手把手教你如何白嫖免费的GPU资源(一)》,使用Google Colab提供的免费的GPU资源,今天接着写白嫖GPU资源攻略,可获得“长期免费的CPU实例资源…

Redis:分布式系统

文章目录 认识RedisRedis和MySQLRedis的场景Redis的设计 分布式单机架构应用数据分离架构应用服务集群架构 认识Redis 在开始Redis学习前,要先认识一下Redis Redis的设计,是想要把它当做是一个数据库,一个缓存,或者说是一个消息…

AI时代的网络安全战:以智取胜,守护数字安宁

在数字化浪潮的推动下,我们的生活和工作日益离不开互联网。然而,随着人工智能(AI)技术的飞速发展,网络安全问题也日益凸显。美国联邦调查局(FBI)的一则警报如同一记重锤,敲响了我们对…

无尘室手套的选定标准

无尘室手套的选定标准主要包括以下几个方面: 材料选择: 考虑与应用的相容性,例如某些化学品可能对某些材料产生反应。是否存在乳胶过敏也是一个重要的考虑因素。常见的选择包括丁腈手套,它们通常比乳胶手套更耐用且化学稳定性更…

【爬虫】爬取股票历史K线数据写入数据库(三)

前几天有写过两篇: 【爬虫】爬取A股数据写入数据库(二) 【爬虫】爬取A股数据写入数据库(一) 现在继续完善,分析及爬取股票的历史K线数据通过ORM形式批量写入数据库。 2024/05,本文主要内容如下…

Vue的学习 —— <vue响应式基础>

目录 前言 正文 单文件组件 什么是单文件组件 单文件组件使用方法 数据绑定 什么是数据绑定 数据绑定的使用方法 响应式数据绑定 响应式数据绑定的使用方法 ref() 函数 reactive()函数 toRef()函数 toRefs()函数 案例练习 前言 Vue.js 以其高效的数据绑定和视图…

Nginx - location中的匹配规则和动态Proxy

文章目录 官网location 规则详解动态Proxy使用多个 if 指令指定不同的 proxy_pass根据参数选择不同的 proxy_pass 官网 https://nginx.org/en/docs/http/ngx_http_core_module.html#location location 规则详解 Nginx的location指令工作原理如下: 位置匹配&#…

【中级软件设计师】上午题3-数据结构(查漏补缺版)

上午题3-数据结构 0 前言1 时间、空间复杂度2 串2.1 串的模式匹配 3 矩阵4 图4.1 邻接矩阵和邻接表 5 查找6 哈希表、7 树7.1 B树 0 前言 因为我之前考研系统地学习过数据结构和操作系统&#xff0c;这两部分的笔记不完整 1 时间、空间复杂度 指数<阶乘<n次方阶 使用队…

Java入门基础学习笔记22——程序流程控制

程序流程控制&#xff1a;控制程序的执行顺序。 程序有哪些执行顺序&#xff1f; 顺序、分支和循环。 分支结构&#xff1a; if、switch 循环&#xff1a; for、while、do-while 顺序结构是程序中最简单最基本的流程控制&#xff0c;没有特定的语法结构&#xff0c;按照代码…

01-02-5

1、单链表中按位置查找 a.原理 通过传递的位置&#xff0c;返回该位置对应的地址&#xff0c;放到主函数定义的指针变量中。 我们认为位置从&#xff1a;有数据的节点开始计数 即如下结构&#xff1a; 查找位置&#xff0c;就是返回该位置对应的空间地址。 b.代码说明 Ⅰ…

深度剖析深度神经网络(DNN):原理、实现与应用

目录 引言 一、DNN基本原理 二、DNN核心算法原理 三、DNN具体操作步骤 四、代码演示 引言 在人工智能和机器学习的浪潮中&#xff0c;深度神经网络&#xff08;Deep Neural Network&#xff0c;简称DNN&#xff09;已经成为了一种非常重要的工具。DNN模仿人脑神经网络的结…

2023年数维杯国际大学生数学建模挑战赛A题复合直升机的建模与优化控制问题解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛 A题 复合直升机的建模与优化控制问题 原题再现&#xff1a; 直升机具有垂直起降等飞行能力&#xff0c;广泛应用于侦察、运输等领域。传统直升机的配置导致旋翼叶片在高速飞行过程中受到冲击波的影响&#xff0c;难以稳定飞行。为了在保…

【轮转数组】力扣python

1.python切片 这里nums[:]代表列表 class Solution:def rotate(self, nums: List[int], k: int) -> None:nlen(nums)nums[:]nums[-k%n:]nums[:-k%n] 2.边pop边push 0代表插入的位置 class Solution:def rotate(self, nums: List[int], k: int) -> None:nlen(nums)fo…