php网站开发的成功经历,公司网站现状,平台经济是什么意思,可编辑wordpress主题目录
前言
开篇语
准备工作
Set和Map
基本概念
Set
相互转化
常见属性和API
数组去重
并集、交集和差集
Map
转化
常见的属性和API
Set和Map的区别
This的指向
function函数
箭头函数
修改this
使用方式
三种方式的异同
案例
更改this指向为obj
求数组数…目录
前言
开篇语
准备工作
Set和Map
基本概念
Set
相互转化
常见属性和API
数组去重
并集、交集和差集
Map
转化
常见的属性和API
Set和Map的区别
This的指向
function函数
箭头函数
修改this
使用方式
三种方式的异同
案例
更改this指向为obj
求数组数据最大值
闭包
概念
形式
优缺点
案例
事件绑定
稍微复杂一些的情况
结束语 前言
开篇语
本系列博客主要分享JavaScript的进阶语法知识本期为第六期依然围绕ES6的语法进行展开。
本期内容为SetMapThis指向和闭包。
与基础部分的语法相比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()清空Sethas() 查询是否含有某个元素返回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 namethis.age agethis.sex sexthis.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 2var 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 7return 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); // 1return function () {console.log(this); // 2return 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】
