分类：ES6

2022
04-30

详细谈谈ES6中的symbol数据类型

目录symbol数据类型symbol出现的原因Symbol特点symbol的应用在rb对象中添加up和down方法Symbol内置的属性值总结symbol数据类型js语言中，ES6前有6种数据类型。ES6新提出symbol数据类型，所以symbol是js的第七种数据类型，表示独一无二的值。是一种类似于字符串的数据类型。目的是为了防止属性名的冲突，保证对象中每一个属性名都是独一无二的。lets1=Symbol('foo');lets2=Symbol('foo');s1===s2//falseSymbol类型可以有... 继续阅读 >

2022
04-20

js中ES6继承和ES5继承之间的差别

目录继承方式ES5prototype继承ES6class继承二者区别ES5prototype继承内部实现方式ES6class继承内部实现方式扩展继承方式ES5prototype继承通过原型链（构造函数+[[prototype]]）指向实现继承。（备注：后续__proto__我都会写成[[prototype]]这种形式）子类的prototype为父类对象的一个实例。因此子类的原型对象包含指向父类的原型对象的指针，父类的实例属性为子类原型的属性。//父类：functionSuperType；子类：function... 继续阅读 >

2021
10-12

ES6中Set与WeakSet集合的深入讲解

目录Set是值永不重复的特殊集合Set集合基础API关于唯一值的判断Set集合遍历的3种方式Set集合案例实践Set集合与Array数组之间的转换单个数组去重多个数组合并去重获取交集(重复的元素)判断是否有交集(重复的元素)获取差集：只返回重复WeakSet“弱”在哪里？弱功能弱引用总结Set是值永不重复的特殊集合每天都用数组，有没有过一个Moment，担心插入了重复的值？使用Set集合吧！Set拥有特殊的数据结构，保证插入的值永远不会重复。Set... 继续阅读 >

2021
10-12

ECMAScript6中Map映射的基本概念与常用方法

目录什么是映射Object与Map区别Map映射常用方法声明并初始化赋值set获取键值get删除键值delete判断键值是否存在has获取所有键值values()key/value迭代器entries()遍历所有键值forEach(callback)清空Map映射所有键值clear()与其它数据结构的转换Map映射转为数组Map映射转为对象数组转为Map映射对象转为Map映射Map转为JSON总结映射（Map）是ECMAScript6规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法，类似... 继续阅读 >

2021
09-04

如何使用ES6的class类继承来实现绚丽小球效果

目录介绍实现步骤创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类实例化小球index.js完整代码总结介绍本效果采用Canvas画布绘制，再利用class类继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失。效果图示实现步骤书写HTML创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类实例化小球HTML结构<!DOCTYPEhtml><h... 继续阅读 >

2021
07-12

ES6 解构赋值的原理及运用

目录数组的解构赋值对象的解构赋值解构赋值的运用交换变量的值从函数返回多个值遍历Map结构函数参数的解构赋值数组的解构赋值let[a,b,c]=[1,2,3]同时定义多个变量，a匹配1、b匹配2、c匹配3解构赋值允许指定默认值，即左边变量指定默认值，右边没有对应的值，会优先输出默认值。let[x,y='b']=['a']//x='a',y='b'x匹配字符a，y默认值为字符b，若右边没有对应的，默认输出字符b。对象的解构赋值解构不仅可以用于... 继续阅读 >

2021
07-01

详解Node.js如何处理ES6模块

目录一、两种模块的差异二、Node.js的区分三、CommonJS模块加载ES6模块四、ES6模块加载CommonJS模块五、同时支持两种格式的模块一、两种模块的差异ES6模块和CommonJS模块有很大的差异。语法上面，CommonJS模块使用require()加载和module.exports输出，ES6模块使用import和export。用法上面，require()是同步加载，后面的代码必须等待这个命令执行完，才会执行。import命令则是异步加载，或者更准确地说，ES6模块有一... 继续阅读 >

2021
06-19

详解JS ES6编码规范

1、块级作用域1.1、let取代varES6提出了两个新的声明变量的命令:let和const。其中，let可以完全取代var，因为两者语义相同，而且let没有副作用。var命令存在变量提升的特性，而let没有这个命令。所谓变量提升，即指变量可以先使用，再声明，显然，这种编码规范非常不适合阅读。1.2、全局常量和线程安全在let和const之间，优先使用const。let应出现在单线程模块代码内，而const则非常适合多线程。//badvara=1,b=2,c... 继续阅读 >

2021
06-11

JS快速掌握ES6的class用法

1.如何构造？先复习一下es5常用的构建类的方法：首先es5的写法使用原型进行对象的方法的，为什么不在构造函数里添加方法呢？因为实例化对象的时候，会重复的建立好多相同的方法，浪费资源。所以需要把对象的方法挂载到prtotype里。关于new和this的绑定问题，可以大概简化为：首先通过new生成一个新的对象然后让这个对象绑定到构造函数的this中去然后绑定这个构造对象的原型对象上最后把这个对象返回给前面定义的对... 继续阅读 >

2021
06-11

分析ES5和ES6的apply区别

概述众所周知，ES6新增了一个全局、内建、不可构造的Reflect对象，并提供了其下一系列可被拦截的操作方法。其中一个便是Reflect.apply()了。下面探究下它与传统ES5的Function.prototype.apply()之间有什么异同。函数签名MDN上两者的函数签名分别如下：Reflect.apply(target,thisArgument,argumentsList)function.apply(thisArg,[argsArray])而TypeScript定义的函数签名则分别如下：declarenamespaceReflect{funct... 继续阅读 >

2021
06-08

详解JS中的对象字面量

前言在ES6之前，js中的对象字面量(也称为对象初始化器)是非常基础的。可以定义两种类型的属性：键值对{name1:value1}获取器{getname(){..}}和设置器{setname(val){..}}的计算属性值varmyObject={myString:'value1',getmyNumber(){returnthis._myNumber;},setmyNumber(value){this._myNumber=Number(value);},};myObject.myString;//=>'value1'myObject.myNumber='15';myObje... 继续阅读 >

2021
06-08

详解JS ES6变量的解构赋值

1.什么是解构？ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。2.数组解构以前，为变量赋值，我们只能直接指定值，比如leta=1;letb=2;letc=3;现在可以用数组解构的方式来进行赋值let[a,b,c]=[1,2,3];console.log(a,b,c);//1,2,3这是数组解构最基本类型的用法，还可以解... 继续阅读 >

2021
06-05

JS ES6展开运算符的几个妙用

1.添加属性复制对象的同时，为其添加新的属性。例子中复制了user对象到userWithPass，并添加了password属性。constuser={id:110,name:'KaysonLi'}constuserWithPass={...user,password:'Password!'}user//=>{id:110,name:'KaysonLi'}userWithPass//=>{id:110,name:'KaysonLi',password:'Password!'}2.合并多个对象利用...可以合并多个对象到一个新的对象。part1和part2合并到user1：constpart... 继续阅读 >

2021
06-04

JS ES6异步解决方案

最初使用回调函数​由于最初js官方没有明确的规范，各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范，没有明确各个参数的意义，不便于使用。​但是node中有明确的规范​node中的的回调模式：1.所有回调函数必须有两个参数，第一个参数表示错误，第二个参数表示结果2.所有回调函数必须作为函数最后的参数3.所有回调函数不能作为属性出现es6异步处理模型Es6出现以后，官方就提出了异... 继续阅读 >

2021
06-04

聊聊JS ES6中的解构

概述es6新增了一种从数组或者对象中获取指定元素的方式，这种方式就是我们今天要说的解构。先来说说数组的解构在有解构之前呢，我们获取数组中的指定元素通常是根据索引去做的：constarr=[1,2,3];consta=arr[1];有了解构之后呢，我们便可以使用如下方式快速的去获取数组中的某个元素：constarr=[1,2,3];const[a,b,c]=arr;console.log(a);console.log(b);console.log(c);这样打印出a,b,c的值分别是：123如果我... 继续阅读 >

2021
02-21

详解ES6实现类的私有变量的几种写法

闭包实现类的私有变量方式私有变量不共享通过new关键字person的构造函数内部的this将会指向Tom，开辟新空间，再次全部执行一遍，classPerson{constructor(name){let_num=100;this.name=name;this.getNum=function(){return_num;}this.addNum=function(){return++_num}}}consttom=newPerson('tom')constjack=newPerson('jack... 继续阅读 >