当前位置: 首页 > 后端技术 > Node.js

快速掌握ES6基本特性

时间:2023-04-03 20:51:27 Node.js

这里只列出容易被大家忽略的知识点,用来查漏补缺~Symbol原始数据类型,由Symbol函数生成。//正确的。返回一个唯一值Symbol()Symbol(label)//错误//因为返回的是原始类型;同undefined;null;Boolean;String;Number;//Object(Object,Array,Function)是引用数据类型。newSymbol()不能做字符串拼接等操作,但可以显示并转换为字符串:Symbol().toString()//"Symbol()"。应用:1.作为对象属性//获取Symbol的方法:Object.getOwnPropertySymbols(obj)//获取对象的Symbol属性名Reflect.ownKeys(obj)//获取对象自身的所有属性,包括非-enumerable和Symbol在封装对象时可以使用Symbol作为非私有的,但只能使用内部访问的Attributes。(它挂在对象上,但是如果不能从外部获取到Symbol的值,就无法访??问到它对应的值)。2.作为一个常量值3.Symbol.for(label)全局注册方法,只有没有找到才会返回一个新的Symbol值;利用其全局环境搜索的这一特性,可以跨iframe获取值。4、内置的Symbol值在对象(Object或String等)的原型上执行特定的内部方法时,会自动执行该对象对应的Symbol对应的函数。举两个典型的例子:1.Symbol.iterator——其值为对象的遍历器对象生成器——当使用for...of()循环时,会自动调用对象的Symbol.iterator方法//for...ofES6为访问数据结构提供了统一的接口2.Symbol.toStringTag//使用Object.prototype.toString方法会先找到对象的Symbol.toStringTag({[Symbol.toStringTag]:'M2'})。到字符串();//“[对象M2]”代理|ReflectES6是为操作【对象】而提供的新API。Reflect的内部方法:Proxy这个问题Reflect解决了对象操作,一些命令式操作变成了函数式行为,比如:deleteobj.attr变成了Reflect.deleteProperty(obj,attr)而Proxy方法对应Set|Map特性:set:保证值的唯一性;重复数据删除。map:相对于objects,是更完整的hash结构实现。适用于各种使用for...of实现遍历的场景,如扩展运算符等。Map结构体默认的遍历器接口(Symbol.iterator属性)是entries方法。map[Symbol.iterator]===默认可以遍历map.entriesSet结构体的实例,其默认的遍历器生成函数是其values方法。Set.prototype[Symbol.iterator]===Set.prototype.valuesWeakSet|WeakMap只接受对象作为键名;弱引用,不计入垃圾收集;防止内存泄露,也会造成遍历和size不支持。用途:1)dom元素的记录或操作2)私有方法|私有财产Object1。比较两个值是否完全相同//除了+0和-0不相等;NaN等于它自己。其他等价于===Object.is(a,b)2.对象的合并;复制对象本身的可枚举属性//原类型会转为对象Object.assign(2)//Number{2}//原类型只能将string复制到对象中,因为可以遍历(结合迭代器理解)Object.assign({},2,'3');//{0:"3"}//数组替换Object.assign([1,2,3],[4,5])//[4,5,3]3.设置|获取对象原型Object.setPrototypeOf(target,prototype);Object.getPrototypeOf(目标);4。遍历Object.keys()Object.values()Object.entries()//对象到键值对数组5.键值对数组到对象Object.fromEntries()//entries的逆运算;所以适合将Map结构转换为ObjectObject。getOwnPropertyDescriptors()返回指定对象所有自身属性(非继承属性)的描述对象。主要目的是解决Object.assign()不能正确复制get属性和set属性的问题。getOwnPropertyDescriptors不仅返回对象属性,还返回它们的属性描述符。obj={a:'a',b:'b'}Object.getOwnPropertyDescriptors(obj);//输出:{a:{value:"a",writable:true,enumerable:true,configurable:true}b:{value:"b",writable:true,enumerable:true,configurable:true}}应用:可以结合Object.assign,Object.createObject.create(proto[,propertiesObject])功能:创建一个新对象,使用existing对象是新建对象的__proto__;propertiesObject可选,默认为创建对象的自身属性;o=Object.create({a:1},{foo:{value:"hello"}})o.hasOwnProperty('foo')//true省略的属性默认为false,所以属性foo不可写、可枚举或可配置。常见示例:创建一个空对象1.obj={};相当于obj=Object.create(Object.prototype);2.obj=Object.create(null);//创建一个原型为null的空对象子类继承父类时使用//子类继承父类Rectangle.prototype=Object.create(Shape.prototype);/**等价于*functionprototypeCerate(o){*functionF(){}*F.prototype=o;*returnnewF();*}*Rectangle.prototype=prototypeCerate(Shape.prototype);*/Rectangle.prototype.constructor=矩形;super指向当前对象的原型对象;[作为构造函数|prototypeobject]//当指向原型对象时,只能用在对象方法中,如下:constobj={getName(){super.getName();}}//错误。super用在普通函数中,这个函数赋值给getName。constobj={getName:()=>super.getName()}内部原理:super.foo//1.作为原型属性:Object.getPrototypeOf(this).foo//2。作为原型方法:`bject.getPrototypeOf(this).foo.call(this)spreadoperator//arraytoobject。深入理解迭代器遍历leta={...['a','b','c']};//{0:"a",1:"b",2:"c"}//withCombiningdestructuringassignmentwith[a,...rest]=[1,2,3]数组实用方法[1,2,7,4].find((n)=>n>5);//7;返回第一个满足条件[1,5,10,15].findIndex(function(value,index,arr){returnvalue>9;})的A值;//2;返回满足条件的第一个下标['a','b','c'].fill(7,1,3)//['a',7,7]Array()//[]Array(3)//[,,,]Array(3,11,8)//[3,11,8]Array.of(1,2)//[1,2]函数参数作用域的默认值参数被设置,当函数声明和初始化时,参数将形成一个单独的作用域(上下文)。当初始化完成后,作用域就会消失。//Example1varx=1;functionf(x,y=x){console.log(y);}f(2)//2//Example2varx=1;functionfoo(x=x){//等valenceletx=x;temporarydeadzone}foo()//ReferenceError:xisnotdefined//Example3functionf(y=x){lety=2;console.log(y);}f()//标识符'y'已经声明let&const不存在变量提升console.log(bar);//UncaughtReferenceError:Cannotaccess'bar'beforeinitializationletbar=2;在一个临时死区块中有let和const命令,这个块为这些命令声明的变量从一开始就形成一个封闭的范围。在声明之前使用这些变量将导致错误。//example1vartmp=123;if(true){tmp='abc';//ReferenceErrorlettmp;}//example2letx2=x2;//ReferenceError块级作用域//IIFE写法(function(){vartmp=...;...}());//块级作用域写法{lettmp=...;...}声明变量的方法var,function,let,const,import,class顶级对象属性浏览器:window(this,self)节点:global更多技术分享,欢迎【扫码关注】~