ES6，也被称为ESMAScript2015，这个版本增加了很多有用的功能。变量声明ES6在ES6之前使用var来定义变量。ES6增加了const和let两种声明变量的方式，const用来定义常量，let用来定义变量，弥补了var定义的漏洞。var有变量提升，定义在global/function中的变量会被提升到global/function的顶部，并且值为undefinedvar没有块级作用域的概念，通过if/for/switch定义的变量会被提升到全局let定义变量，可修改，不可重复声明，具有块级作用域const定义常量，定义时需要赋值，不可修改，不可重复声明，具有块级作用域。三者的主要区别如下。hoist重复声明重赋值块级作用域跨块访问跨函数访问var×???×?×let×××??××const?×××?××let和const保存变量到定义前变量环境，但无法访问。letuserName='alice'if(true){console.log(userName)letuserName='kiki'}上面代码的执行结果如下上面代码中，块级函数中有一个userName变量if创建的，虽然在global中也有userName变量，但是此时block已经通过let定义保存在block的变量环境中，会直接从block中获取，但是还是赋值前不可访问，所以存在[临时死区（temporarydeadzone）]问题字面量增强在对象中，有一种更简洁的方式来定义属性。当对象中定义的属性键和值相同时，可以合并方法缩写，可以在函数声明对象中移除属性。您可以使用[]定义非字符串变量varname='alice'varage=18varinfo='hobby'varuser={name:name,age:age,eating:function(){console.log('usereating~')}}user[info+'s']='swimming'constperson={name,age,eating(){console.log('personeating~')},[info+'s']:'swimming'}console.log(user)console.log(person)上面两种定义对象的方式最终效果是一样的下标值，es6为我们提供了一种解构的方式，通过下标值的一一对应来获取每个元素//通过下面的Scale值获取元素varnames=['alice','kiki','macus']varx=names[0]vary=names[1]varz=names[2]console.log(x,y,z)//解构var[a,b,c]=namesconsole.log(a,b,c)//当只需要最后两个元素时，第一个元素为空var[,m,n]=namesconsole.log(m,n)//当只有一个元素时，用剩下的参数将它们放在一个数组中var[x,...list]=namesconsole.log(x,list)执行结果如下，es6代码通过babel编译成es5代码，我们可以发现数组解构还是通过下标值解构得到元素对象。在获取对象的值时，我们通常使用.key或者[key]。es6还提供了一种更方便的方法来解构对象。注意解构后的变量要对应键值varuser={name:'alice',age:20}console.log(user.name,user.age)var{name,age}=userconsole.log(name,age)上面两种获取属性值的方法结果是一致的。通过babel将es6代码编译成es5代码，可以发现对象解构的原理还是对象。属性名的表单模板字符串在没有模板字符串之前，需要用引号（""）来连接字符串和变量，代码的可读性比较弱。添加模板字符后，可以直接在``中写入字符串，通过${expression}嵌入动态内容constname='aclie'constage=18constuser='Mynameis'+name+'andiam'+年龄+'岁.'constperson=`我的名字是${name}，我是${age}岁。`console.log(user)console.log(person)以上两种方式定义变量的结果是一致的``执行函数的结果也可以进行拼接)console.log(pet)和模板字符串一样通过拼接+结果``也可以用来调用函数，模板字符串用于拆分参数constname='aclie'constage=18functionfoo(a,b,c,d){console.log(a)console.log(b)console.log(c)console.log(d)}foo`1${name}2${age}3${100}`每个模板字符串中的数据对应一个传入函数的参数，除以其余数据组成数组作为参数模板字符串转换es5代码。字符串的concat方法用于拼接函数的默认参数。es6之前需要判断函数是否有入参。如果不是，将输入参数的变量赋值给一个InitializedvaluefunctiongetUserInfo(name,age){name=name||'kiki'股份公司e=年龄||18console.log(name,age)}getUserInfo('',0)functiongetPersonInfo(name='alice',age=18){console.log(name,age)}getPersonInfo('alice',0)如果有是一个||运算符，当传入的参数为空字符串或0时，会被认为是false，然后执行。||之后的代码运算符还可以使用函数的默认参数解构对象{name='kiki',age=18}={}){console.log(name,age)}getPersonInfo()两种方法解构结果相同。发现babel编译函数的默认参数是通过arguments来处理的。其余参数通过参数进行处理。在ES6之前，函数的所有入参都可以通过arguments获取，es6增加了剩余参数的语法，用来引用还没有对应形参的实参functionfoo(a,b,...rest){console.log('arguments',arguments)console.log(a,b,rest)}foo(1,2,3,4,5,6)通过...的运算符获取剩余参数arguments，剩余参数仍然有一些区别，所有的实参都可以通过arguments获取，剩下的参数只能获取到与形参不对应的实参，而箭头函数中没有实参的arguments的数据结构就像一个数组，但它不是真正的数组，不能直接使用数组方法。其余参数是一个数组，可以直接在数组方法中使用。当剩下的参数通过babel编译成浏览器兼容的es5语法时，通过arguments获取的数据通过创建数组的方式逐一相加。运算、扩展语法有三种应用场景当调用函数时当构造数组时当构造对象字面量时（ES9语法）constarray=[1,2,3]constobj={name:'alice',age:20}constname='kiki'//函数调用functionfoo(a,b,c){console.log(a,b,c)}foo(...array)foo(...name)//构造数组constnewArr=[...array,4,5]console.log(newArr)//构造对象字面量constnewObj={...obj,name:'kiki'}console.log(newObj)可以通过扩展语法扩展对象、数组和字符串。需要注意的是，扩展语法其实是浅拷贝constuser={name:'alice',favorite:{sport:'tennis'}}constnewUser={...user}newUser.name='kiki'newUser.favorite.sport='football'console.log(user)user中的favorite属性是一个对象，由user通过扩展语法创建的newUser对象修改对象中的属性，原用户的favorite属性object在内存中也会改变其表现数组的特性，object的扩展语法比较复杂，有一些函数封装和逻辑判断，所以没有截图数据，从0o开始，每个数字的最大值是7个16进制数据，从0x开始，A-F代表10-15这个数，每一个数字的最大值为Fconsta=0b100constb=0o100constc=0x100console.log(a,b,c)中将转换成十进制数据结束。SymbolSymbol代表一个唯一的值。它是一种新的数据类型。在此之前，对象中的键值只能使用字符串。如果key值相同，会覆盖，但是使用Symbol不会覆盖定义Symbol时，还是有一些注意事项的。Symbol声明的变量可以在括号中定义一个描述，通过description获取描述（ES10添加的）。即使Symbol定义的变量有相同的描述，也不会重复Symbol.for定义的变量，全局可以通过Symbol.keyFor查找。当有相同的描述时，它指向相同的元素。当对象中使用Symbol作为键值时，需要使用[]而不是.分配consta=Symbol('hello')constb=Symbol('hello')constc=Symbol.for('alice')constd=Symbol.for('alice')constobj={[a]:'alice'}obj[b]='kiki'对象。defineProperty(obj,c,{value:'macus'})console.log(a)console.log(a.description)console.log(a===b)console.log(c===d)控制台。log(Symbol.keyFor(a),Symbol.keyFor(c))console.log(obj[a],obj[b],obj[c])执行结果如下Set和WeakSetSetSet表示集合，类似于数组，但是它存储的元素不能重复。Set有这些属性和方法size：返回Set中元素的个数add(value)：添加一个元素，返回Set对象本身delete(value)：从集合中删除等于这个值的元素，返回boolean类型has(value)：判断集合中是否有元素，返回boolean类型clear()：清空集合中所有元素，无返回值forof遍历constarr=[{name:"alice"},2,3,4,5,4,3,2,1]constset=newSet(arr)set.add(0)set.delete(3）安慰。日志(set.size)console.log(set.has(1))console.log(set)console.log([...set])console.log(Array.from(set))for(letitemofset){console.log(item)}set.forEach(item=>{console.log(item)})执行结果如下在WeakSet中只能存储对象类型，不能存储基本数据类型。WeakSet是对元素的弱引用。如果没有其他对象引用，则垃圾收集器(GC)可以回收该对象。它有这些方法add(value)：添加一个元素，返回WeakSet对象本身delete(value)：从WeakSet中删除等于这个值的元素，返回boolean类型has(value)：判断中是否有元素WeakSet，返回布尔类型conststudent={grade:4}letperson={hobby:'running'}constarr=[student,person]constweakSet=newWeakSet(arr)weakSet.add({grade:4})weakSet.delete(student)console.log(weakSet.has(student))console.log(weakSet)因为WeakSet是对元素的弱引用，导入的内容可能会被GC回收，所以无法在对象时遍历使用toString()方法获取元素set中的存储在内存中当地址0x100变为指向null时，原来的内存地址0x100不会被垃圾回收器回收，因为set是强引用，而当对象存储在weakMap中时从内存地址0x200变为指向null，原来的内存地址0x200会被垃圾回收器回收，因为weakSet强引用Map，WeakMapMapMap代表字典存储映射关系，类似于对象，但是Key中的数据类型object只能是string或者Symbol，Map中的Map的公共属性没有限制and方法size：返回Map中的元素个数set(key,value)：将key和value添加到Ma中p，并返回整个Map对象get(key)：根据key获取Map中的valuehas(key)：判断是否包含对于某个key，返回Boolean类型delete(key)：删除一个key-根据key对值对，返回布尔类型clear():清空所有元素forEach(callback,[,thisArg]):通过forEach遍历Map可以通过forofTraverseconstuser={name:'alice'}constinfo={message:'hello'}constmap=newMap()map.set(user,info)//map.clear()console.log(map.size)console.log(map.has(user))console.log(map.get(user))console.log(map)map.forEach((value,key)=>{console.log(value,key)})for(let[key,value]ofmap){console.log('item',key,value)}执行结果如下WeakMap类似于Map，但是WeakMap有一些区别（类似于set和WeakSet的区别）key只能使用对象，并且不接受其他类型作为对象引用的keyWeakMap键这是一个弱参考。如果没有其他人引用这个对象，那么垃圾收集器（GC）就可以回收这个对象。它有这些方法set(key,value)：将key和value添加到Map中，并返回整个Map对象get(key)：根据key获取Map中的valuehas(key)：判断某个key是否存在包含，返回Boolean类型delete(key)：根据key删除一个键值对，返回Boolean类型。因为WeakMap是对元素的弱引用，导入的内容可能会被GC回收，所以无法遍历使用toString()方法获取元素。以上是ES6中包含的大部分属性。关于高级js，开发者需要掌握的东西还是很多的。可以看我写的其他博文，持续更新~
