【H2O2|全栈】JS进阶知识(六)ES6(2)

news2024/11/24 22:28:49

目录

前言

开篇语

准备工作

Set和Map

基本概念

Set

相互转化

常见属性和API

数组去重

并集、交集和差集

Map

转化

常见的属性和API

Set和Map的区别

This的指向

function函数

箭头函数

修改this

使用方式

三种方式的异同

案例

更改this指向为obj

求数组数据最大值

闭包

概念

形式

优缺点

案例

事件绑定

稍微复杂一些的情况

结束语


前言

开篇语

本系列博客主要分享JavaScript的进阶语法知识,本期为第六期,依然围绕ES6的语法进行展开。

本期内容为:Set,Map,This指向和闭包。

与基础部分的语法相比,ES6的语法进行了一些更加严谨的约束和优化,因此,在之后使用原生JS时,我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示:在不熟练的阶段建议关闭AI助手

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

Set和Map

基本概念

Set和Map是ES6新增的两种数据类型,它们本质上都是构造函数,使用new进行实例化。

Set中的数据项为单项,且可以实现自动去重

Map中的数据项为键值对,可以利用键进行增删改查

Set

相互转化

Set的构造器可以接收一个数组,即将数组转化成Set类型数据

基本形式如下——

let set = new Set(arr);

在这个过程中,数组arr中的重复数据将被自动去除。 

与之对应的,Set可以使用扩展运算符展开,并存入数组中。

基本形式如下——

let arr = [...set];

常见属性和API

属性/API作用
size获取Set的大小
add()增加数据,可以链式操作
delete()删除数据,不可链式操作
clear()清空Set
has()

查询是否含有某个元素,返回true/false

只可以查单层,如果有多层数组转成的Set集合,则查询第一层

数组去重

在数组==>Set==>数组的过程中,可以实现数组的去重操作。

于是,可以得到数组去重的最简单的方式——

arr = [...new Set(arr)];

并集、交集和差集

利用Set集合和数组的API结合,可以求两个数组之间的集合关系。

比如有下面这两个数组——

let arr1 = [1, 2, 5, 8]
let arr2 = [2, 5, 9, 11]

现在要求它们的并集,可以先将两个数组拼接起来,然后转成Set集合去重,最后转回数组。

let arr3 = [...new Set([...arr1, ...arr2])]

如果需要求它们的交集,可以现将其中的一个数组转为Set集合,利用另一数组的filter方法过滤出包含对方的数据。

let arr4 = arr1.filter(item => new Set(arr2).has(item))

如果需要求它们的差集,则只需要从并集中过滤出不是交集的部分即可。

let arr5 = arr3.filter(item => !arr4.has(item))

Map

转化

Map中存储的是键值对数据,所以它的构造器需要接受一个二维数组,每个元素的第一位是键,第二位是值,类似下面的形式——

var arr = [["key1", "value1"], ["key2", "value2"], ["key3", "value3"]]
let map = new Map(arr)

常见的属性和API

属性/API作用
size获取Map的大小
set(key, value)

没有key,则设置key => value对

有key,则修改key对应的value

delete()删除指定键值对
clear()清空Map()
get()查询某个键对应的值

Set和Map的区别

①应用场景:Set用于数据重组,Map用于数据储存;

②Set: 

(1)成员不能重复

(2)只有键值没有键名,类似数组

(3)可以遍历,方法有add, delete, has, clear

Map:

(1)本质上是健值对的集合,类似集合

(2)可以遍历,可以跟各种数据格式转换,方法有add, delete, set, has, clear

This的指向

function函数

命名函数,this指向window。

  function fn() {
    console.log(this);//window
  }

匿名函数,this指向window。

  let a = function () {
    console.log(this);//window
  };

立即调用函数,this指向window。

  (function () {
    console.log(this);//window
  })();

事件函数,this指向事件源。

  document.querySelector("#btn").onclick = function () {
    console.log(this);//事件源(btn)
  }

构造函数,this指向实例化对象。

  function Per(name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
    this.fn = function () {
      console.log(this);//实例化对象
    }
  }

对象中的函数,this指向调用者。

  let obj = {
    fn: function() {
      console.log(this);//obj
    }
  }

箭头函数

箭头函数没有this指向,在箭头函数中的this指向为父级的this指向。

  let obj = {
    fn: () => {
      console.log(this);//window
    }
  }

修改this

使用方式

目前,有三种修改this指向的方式——call(),apply(),bind()。

call()的使用方式如下——

方法名.call(修改后的指向,参数1,参数2,……)

call的参数为枚举类型。

apply()的使用方式如下——

方法名.apply(修改后的指向,[参数1,参数2,……])

apply的参数为数组类型。

bind()的使用方式如下——

方法名.bind(修改后的指向,参数1,参数2,……) 

bind()的参数也是枚举类型。

三种方式的异同

三个的相同点:都用于修改this指向;

不同点:

1.调用方式不同:call和apply都是默认立即调用,bind返回函数体,需要手动调用(可以使用立即调用函数);

2.传参方式不同:call和bind都是枚举形式传参,apply为数组形式传参。

案例

更改this指向为obj

对于下面这段代码——

  var x = 1, y = 2
  var obj = {
    x: 3,
    y: 4
  }

  function fun() {
    console.log(this.x, this.y);
  }

上面的代码中,this的指向默认为window,所以这里输出的是window中的x和y的值。

如果想要输出obj中的x和y,可以使用下面的方式(示例)更改this指向——

  fun.call(obj)
求数组数据最大值

Math对象的max()方法可以用来求输入参数中的最大值,如果我们想要让传入的参数为一个数组,则需要使用到apply()方法。

这里我们不需要改变this指向,依然设置原来的指向Math.max。

let maxNum = Math.max.apply(Math.max, [1, 2, 3])

闭包

概念

js方法的作用域是静态的,是定义函数的作用域,不是执行的作用域

调用外部函数返回的内部函数后,即使外部函数已经执行完毕,被内部函数引用外部函数的变量依然会保存在内存中,这些引用了其他函数作用域变量的函数(或变量)以及这些被引用变量的集合,就是闭包。

形式

闭包的一种示例形式如下,b就是一种闭包(保存了方法内部变量a的值)。

  function fn() {
  // 函数作用域
    let a = 7
    return a
  }
  // 执行作用域
  let b = fn()

优缺点

优点:读取函数内部变量,使这些变量保存在内存中,不会在外部函数执行完毕后销毁。

缺点:内存消耗大,IE中会造成内存泄漏。

案例

事件绑定

还记得之前的经典案例li绑定点击事件吗,我们此前已经说过三种方式——

  • 绑定index属性
  • 使用let造成暂时性死区
  • forEach自行遍历

提示:lis为原生DOM获取的所有li。

方式一:

  for (var i = 0; i < lis.length; i++) {
    lis[i].setAttribute("index", i)
    lis[i].onclick = function () {
      console.log(this.getAttribute("index"));
    }
  }

方式二:

  for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
      console.log(i);
    }
  }

 方式三:

  lis.forEach(function (item, index) {
    item.onclick = function () {
      console.log(index);
    }
  })

现在,我们补充一种使用闭包绑定li点击事件的方式。

首先,设定一个方法用来绑定当前的点击事件,而该方法的参数为当前的索引。

  let fn = function (index) {
    lis[index].onclick = function () {
      console.log(index);
    }
  }

由于index为方法内部的变量,所以我们可以使用一个外部变量来记住index。

而这个外部变量,其实也就是当前的索引值,我们只需要把当前索引值传入fn的形参列表即可。

而我们知道,在for-i遍历中,绑定事件之前的i是可以作为当前li的索引的。

所以,直接传入当前遍历变量i的值即可。

  fn(i)

上述代码可以写成立即调用函数的形式,完整代码如下——

  for (var i = 0; i < lis.length; i++) {
    (function (index) {
      lis[index].onclick = function () {
        console.log(index);
      }
    })(i)
  }

稍微复杂一些的情况

下面这个闭包的使用稍稍复杂一点,代码如下——

  var name = "The Window";

  var object = {
    name: "MyObject",
    getNameFunc() {
      console.log(this.name, this); // 1
      return function () {
        console.log(this); // 2
        return this.name;
      };
    }
  };

  object.getNameFunc();
  object.getNameFunc()();
  console.log(object.getNameFunc()());

现在,问最后三行代码会输出什么结果?

首先,看到第一行输出,调用了object对象的getNameFunc()方法,所以首先会输出语句1的内容,即MyObject  object。

而方法的返回值为一个匿名方法,而该行输出中没有调用这个方法,所以该方法没有执行。

接下来,看到第二行输出,调用了object对象的getNameFunc()方法的返回值中的匿名方法。

当然,首先还是先输出和第一行中相同的输出,即MyObject  object。

然后,立即调用匿名方法,输出语句2的内容,对于这个匿名方法,相当于一个闭包,记录了方法内部的返回值,实质上是在全局执行的,所以输出window。

同样的,匿名方法的返回值没有使用到,所以没有输出。

最后,看到第三行输出, log将最后匿名方法返回的值也输出出来了,而匿名方法是在全局执行的,所以此时的this.name为全局的name。

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的JS进阶专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】

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

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

相关文章

Redis配置主从架构、集群架构模式 redis主从架构配置 redis主从配置 redis主从架构 redis集群配置

Redis配置主从架构、集群架构模式 redis主从架构配置 redis主从配置 redis主从架构 redis集群配置 1、主从模式1.1、主节点配置1.2、从节点配置1.3、测试 2、集群模式 1、主从模式 1.1、主节点配置 # 监听所有网络接口 bind 0.0.0.0# cluster-enabled表示为集群模式&#xff…

人工智能深度学习-前置-Torch框架

PyTorch是一个基于Python的深度学习框架&#xff0c;它提供了一种灵活、高效、易于学习的方式来实现深度学习模型。PyTorch最初由Facebook开发&#xff0c;被广泛应用于计算机视觉、自然语言处理、语音识别等领域。 安装 建议创建一个新的conda虚拟环境来安装pytorch&#xf…

vue3+ts el-tabel 搜索组件

爷爷页面 <template> <searchstyle"z-index: 9999":options"options"placeholder"请选择时间&#xff0c;或输入名称、单选、多个勾选、模糊查询"search"onSearch"></search> </template> <script lan…

Proteus 8.17的详细安装教程

通过百度网盘分享的文件&#xff1a;Proteus8.17(64bit&#xff09;.zip 链接&#xff1a;https://pan.baidu.com/s/1zu8ts1Idhgg9DGUHpAve7Q 提取码&#xff1a;8q8v 1.右击【Proteus8.17(64bit&#xff09;.zip】&#xff0c;选择【全部解压缩......】。 &#xff0c; 2.…

Django基础配置

一.前言 前面我们说完了前端基础&#xff0c;现在我们开始讲后端框架了&#xff0c;我们今天说的是django&#xff0c;当然今天主要还是和大家了解一下框架和django的基础配置 二.web框架 2.1 web框架初始 在我们学习web框架的时候&#xff0c;我们首先得了解到web框架的本…

Keepalived部署

Keepalived部署 安装配置单VIP模式配置master节点查看节点IP信息配置 keepalived.conf启动且加入开机自启查看是否生效 配置backup节点配置 keepalived.conf启动且加入开机自启查看是否生效 主备测试 多VIP配置 keepalived.conf查看IP 安装 dnf install -y keepalived配置 单…

Oracle JDK(通常简称为 JDK)和 OpenJDK区别

Java 的开发和运行时环境主要由两种实现主导&#xff1a;Oracle JDK&#xff08;通常简称为 JDK&#xff09;和 OpenJDK。尽管它们都基于同一个代码库&#xff0c;但在一些关键点上有所区别。以下是详细的对比&#xff1a; 1. 基础代码 Oracle JDK&#xff1a; 基于 OpenJD…

qt+opengl 三维物体加入摄像机

1 在前几期的文章中&#xff0c;我们已经实现了三维正方体的显示了&#xff0c;那我们来实现让物体的由远及近&#xff0c;和由近及远。这里我们需要了解一个概念摄像机。 1.1 摄像机定义&#xff1a;在世界空间中位置、观察方向、指向右侧向量、指向上方的向量。如下图所示: …

ASCB1系列APP操控末端回路智能微断 物联网断路器 远程控制开关 学校、工厂、农场、商业大楼等可用

安科瑞戴婷 Acrel-Fanny ASCB1系列智能微型断路器是安科瑞电气股份有限公司全新推出的智慧用电产品&#xff0c;产品由智能微型断路器与智能网关两部分组成&#xff0c;可用于对用电线路的关键电气因素&#xff0c;如电压、电流、功率、温度、漏电、能耗等进行实时监测&#x…

JMeter监听器与压测监控之 InfluxDB

1. 简介 在本文中&#xff0c;我们将介绍如何在 Kali Linux 上通过 Docker 安装 InfluxDB&#xff0c;并使用 JMeter 对其进行性能监控。InfluxDB 是一个高性能的时序数据库&#xff0c;而 JMeter 是一个开源的性能测试工具&#xff0c;可以用于对各种服务进行负载测试和性能监…

[安洵杯 2019]iamthinking-parse_url绕过thinkphp6.0反序列化

/www.zip下载源码 查看序列化点&#xff0c;index.php <?php namespace app\controller; use app\BaseController;class Index extends BaseController {public function index(){echo "<img src../test.jpg"."/>";$paylaod $_GET[payload];i…

解决CondaError: argument COMMAND: invalid choice: ‘activate‘

自上篇系统重装后&#xff0c;Anaconda重新导入后终端进入conda环境报错&#xff1a; conda-script.py: error: argument COMMAND: invalid choice: ‘activate’ C:\Windows\system32>conda activate xin usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ... …

【CSS3】Flex弹性布局

文章目录 前言一、基本概念1.容器和项目&#xff1a;2.主轴和交叉轴&#xff1a; 二、容器属性1.flex-direction&#xff1a;决定主轴的方向&#xff0c;即x轴还是y轴2.flex-wrap&#xff1a;定义项目的换行方式3.flex-flow&#xff1a;flex-direction属性和flex-wrap属性的简写…

简述C++map容器

pair键值对 std::pair在很多关联容器&#xff08;如std::map、std::multimap、std::set、std&#xff1a;multiset等&#xff09;中被广泛应用。以std::map为例&#xff0c;std::map是一个键值对的容器&#xff0c;其中每个元素都是一个std::pair&#xff0c;键用于唯一标识元…

刷题计划 day22回溯(一)【组合】【组合总和 III】【电话号码的字母组合】

⚡刷题计划day22 回溯&#xff08;一&#xff09;开始&#xff0c;此期开启回溯专题&#xff0c;敬请期待关注&#xff0c;可以点个免费的赞哦~ 往期可看专栏&#xff0c;关注不迷路&#xff0c; 您的支持是我的最大动力&#x1f339;~ 目录 回溯算法理论基础 回溯法解决的…

Qt桌面应用开发 第六天(鼠标事件 定时器事件 定时器类 事件分发器 事件过滤器)

目录 1.1鼠标进入和离开enterEvent\leaveEvent 1.2鼠标按下释放和移动mousePressEvent\mouseReleaseEvent\mouseMoveEvent 1.3定时器事件timerEvent 1.4定时器类QTimer 1.5事件分发器event 1.6事件过滤器eventFilter 1.1鼠标进入和离开enterEvent\leaveEvent 事件&#x…

【Linux清空显存占用】Linux 系统中清理 GPU 显存

操作指令 # 查看NVIDIA GPU状态和进程 nvidia-smi # 查找所有包含"python"的进程 ps -ef | grep python # 强制结束进程号为3023的进程 kill -9 3023截图演示 在 Linux 系统中清理 GPU 显存可以采用以下方法&#xff1a; 1. 终止特定进程&#xff08;常用方法&…

对撞双指针(七)三数之和

15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组…

vue2-基础核心

vue简介 动态构建用户界面的渐进式 JavaScript 框架 vue的特点: 遵循MVVM模式 采用组件化模式&#xff0c;提高代码复用率&#xff0c;让代码更好维护 声明式编码&#xff0c;无需直接操作DOM&#xff0c;提高开发效率&#xff0c;编码简洁、体积小&#xff0c;运行效率高 本…

Prompting LLMs to Solve Complex Tasks: A Review

文章目录 题目简介任务分解未来方向结论 题目 促使 LLM 解决复杂任务&#xff1a; 综述 论文地址&#xff1a;https://www.intjit.org/cms/journal/volume/29/1/291_3.pdf 简介 大型语言模型 (LLM) 的最新趋势显而易见&#xff0c;这体现在大型科技公司的投资以及媒体和在线社…