学习Node.js之前必须了解的ES6语法

以下内容，是一些常用的ES6语法，并不是全部的喔~
推荐网址（https://www.babeljs.cn/）将ES6语法兼容旧浏览器的写法

概述

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

let

let特点：1、没有变量提升例如：console.log(age);let age=38;/*直接报错，age变量undefined*/-----------------------------------------------------------------------------------------2、有块级作用域例如：for(let i=0;i<10;i++){//块级作用域}console.log(i)/*直接报错，i变量undefined*/ES6 允许块级作用域的任意嵌套，例如：{{{{let insane = 'Hello World';{let insane = 'Hello World'}}}}};/*内层作用域可以定义外层作用域的同名变量。*/-----------------------------------------------------------------------------------------3、不能重复声明let num=10;let num=20;console.log(num)/*直接报错，不可重新声明变量*/----------------------------------------------------------------------------------------=4、可以重新赋值let num=10;num=20;console.log(num)/*结果为：20*/-----------------------------------------------------------------------------------------5、暂时性死区只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。var tmp = 123;if (true) {tmp = 'abc'; // ReferenceErrorlet tmp;}上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。=========================================================================================var特点：1、有变量提升2、没有块级作用域，是函数作用域3、可以重复声明4、可以重新赋值

const

const 关键字声明的常量（一旦声明就无法更改）1、没有变量提升2、有块级作用域3、不能重复声明4、不能重新赋值（声明必须要有初始值）5、同样存在暂时性死区const foo = {};// 为 foo 添加一个属性，可以成功foo.prop = 123;foo.prop // 123// 将 foo 指向另一个对象，就会报错foo = {}; // TypeError: "foo" is read-only上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

对象解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。对象可以不按顺序赋值，只要找到对应的属性便可以1、ES6写法let obj={name:"jine",age:22，mvp:"hha"}let {name:name1,age:age1}=obj-----------------------------------------------------------------------------------------变量名可与对象属性名一致let {name:name,age:age}=obj-----------------------------------------------------------------------------------------如果声明的变量名和对象属性名一致，可以简写，例如：let{name,age}=obj-----------------------------------------------------------------------------------------若出现变量名没有和对象属性名一致，只会声明一个空变量，例如：let{name,age,other}=objconsole.log(name,age,other)/*结果： jine 22  undefined*/-----------------------------------------------------------------------------------------若出现变量名和对象属性名有的相同，有的不同，可以一下写法，例如：let{name,age,mvp:other}=objconsole.log(name,age,other)/*结果： jine 22  haha*/-----------------------------------------------------------------------------------------若对象属性值已有，在声明相同的变量来进行赋值并不会覆盖（如下age）若声明的变量没有对应的对象属性，可以给这个变量初始化值，便不会出现undefined（如下height），例如：let{name,age=18,other,height=175}=objconsole.log(name,age,height)/*结果为：jine 22 175*/=========================================================================================2、ES5写法var obj={name:"jine",age:22}var name1=obj.namevar age1=obj.age

数组解构赋值

数组顺序进行依次赋值1、ES6写法let arr=[10,20,30]let [num1,num2,num3]=arrconsole.log(num1,num2,num3)/*结果：10 20 30*/let [num1,num2,num3,num4]=arrconsole.log(num1,num2,num3,num4)/*结果：10 20 30 undefined*/let [num1,num2,num3,num4=40]=arrconsole.log(num1,num2,num3,num4)/*结果：10 20 30 40*/let [num1=100,num2,num3,num4=40]=arrconsole.log(num1,num2,num3,num4)/*结果：10 20 30 40*/=========================================================================================2、ES5写法var arr=[1,2,3]var a=arr[0]var b=arr[1]var c=arr[2]

解构赋值结合函数声明

function test1({name,age}){console.log(name,age)}test1({name:"jine",age:20,})

箭头函数

匿名函数的简写，但是这样写法的this指向和以前写法的this指向不一样简写规则:a.function改成=>     => 可以读成goestob.如果只有一个形参，那就可以省略形参小括号.C.如果不是一个形参,0个或者多个形参，那就不能省略这个形参小括号了d.如果函数体只有一句话， 那就可以省略函数体的大括号e.如果函数体只有一句话,并且这一句话是return返回值,那return也要省略f.如果函数体不是一句话，那就不能省略这个大括号.-----------------------------------------------------------------------------------------由规则b，d，例如：let fun=function(name){console.log("name:"+name)}/*ES5写法*/let fun=name=>console.log("name:"+name)/*ES6箭头函数*/fun("jine")-----------------------------------------------------------------------------------------由规则c,d，例如：let fun=function(name,age){console.log(name,age)}/*ES5写法*/let fun=(name,age)=>console.log(name,age)/*ES6箭头函数*/fun("jine",22)-----------------------------------------------------------------------------------------由规则a,d,e，例如:let fun=function(name){return name}/*ES5写法*/let fun=name=>name/*ES6箭头函数*/console.log(fun("jine"))-----------------------------------------------------------------------------------------由规则c，f，例如：let fun=function(name,age){console.log(name)console.log(age)}/*ES5写法*/let fun=(name,age)=>{console.log(name)console.log(age)}/*ES6写法*/fun("jine",22)-----------------------------------------------------------------------------------------"需要注意的是：let fun=name=>console.log(name)"这样也是可以的，虽然换行了，但是因为有箭头，所以不是结束，所以还会输出name"

对象成员的简写

let name="jine"let age=20let obj={name, //相当于name:nameage,printf(){ //相对于 printf:function(){}console.loe(name,age)}}obj.printf()-----------------------------------------------------------------------------------------以下写法会报错，例如：let obj={name,age,score,printf(){console.log(name,age,score)}}obj.printf()/*因为全局作用域没有声明score，所以会报错*/-----------------------------------------------------------------------------------------let obj={name:1,age,score:age+58,printf(){console.log(this.name,age,this.score)}}obj.printf()/*结果：1  20  78*/

展开运算符

对象展开

let Person={name:"jine",age:22,printf(){console.log(this.name,this.age)}}let Fun={song:"歌唱",jump:"跳跳"}let Jine={...Person, //将Person对象中所有的成员拿过来...Fun,jump:"不跳了" //此时jump把前面Fun对象传入的jump覆盖}console.log(Jine)/*结果：{name: 'jine',age: 22,printf: [Function: printf],song: '歌唱',jump: '不跳了'}*/

数组展开

可以做数组拼接也可求max值等let arr1=[1,2,3]let arr2=[4,5,6]let arr3=[...arr1,...arr2]console.log(arr3)/* [1,2,3,4,5,6] */let max1=Math.max(arr3)console.log(max1)/* NaN */let max2=Math.max(...arr3)console.log(max2)/* 6 */

数据类型 Set

作用：和数组类似，和数组不同的是不能存放重复的元素应用场景：数组去重Set测试，例如：let set1=new Set([10,20,30,10,20,40])console.log(set1)/*结果是一个Set对象：Set { 10, 20, 30, 40 }*/-----------------------------------------------------------------------------------------数组去重，例如：let arr=[1,2,3,1,2,4,5]let set2=new Set(arr)console.log(set2)/*结果：Set { 1, 2, 3, 4, 5 }*/let newArr=[...set2]console.log(newArr)/*去重结果：[ 1, 2, 3, 4, 5 ]*/

模板字符串

语法： ``（使用反引号标识）作用：类似于python的多行字符串（ES5是没有多行字符串）特点：1、可以在模板字符串中调用变量或函数。2、模板字符串中的所有的空格和缩进也都会保留。可以在模板字符串中调用变量，例如：let author="----jine"let strs=`我要开始输入啦，这是第二段的字符串输入，这便是多行字符串的输入.  Noproblem~${author}`console.log(strs)/*结果：我要开始输入啦，这是第二段的字符串输入，这便是多行字符串的输入.  Noproblem~----jine*/-----------------------------------------------------------------------------------------也可以在模板字符串中写调用函数，例如let fun=()=>"我是一个小函数~"console.log(`我也可以调用函数哟：${fun()}`)

数组的方法

forEach() 可以替换以前用的for循环作用：循环遍历，把遍历出来的每一项交给回调函数，无返回值例如：let arr=[1,2,3]let ret=arr.forEach(function(item,index){//item 是遍历出来的每一项//index 是遍历出来每一项对应的索引console.log(index,item)return "返回值"})console.log(ret)/*结果：0 11 22 3undefined*/-----------------------------------------------------------------------------------------map() 循环遍历，与forEach()类似，唯一不同的是map()有返回值let arr=[1,2,3]let ret=arr.map(function(item,index){console.log(index,item)return item*item})console.log(ret)/*结果：0 11 22 3[ 1, 4, 9 ]*/返回属性的值，例如：let arr=[{name:"jine",age:18},{name:"ren",age:22},{other:"其他",age:23}]let ret=arr.map((item,index)=>item.name)console.log(ret)/*结果：[ 'jine', 'ren', undefined ]返回所有name属性的值，第三个没有name实现，所以返回undefined*/-----------------------------------------------------------------------------------------filter() 过滤器作用：返回一个新的数组，新的数组中的元素是通过检查后符合条件的元素过滤偶数，例如：let arr=[1,2,3,4,5,6]let ret=arr.filter((item,index)=>item%2==0)console.log(ret)/*[2,4,6]*/过滤指定元素，例如：let arr=[{name:"jine",age:18},{name:"ren",age:22},{other:"其他",age:23}]let ret=arr.filter((item,index)=>item.name)console.log(ret)/*结果：[ { name: 'jine', age: 18 }, { name: 'ren', age: 22 } ]*/

数组去重

1、排序后判断法let arr=[10,20,30,30,20,40,50,10,20]let arrNew=[]arr.sort((a,b)=>{return a-b})// [10, 10, 20, 20, 20,30, 30, 40, 50]console.log(arr)arr.forEach((item,index)=>{//若下一个和上一个不相等if(item!=arr[index+1]){arrNew.push(item)}})// [ 10, 20, 30, 40, 50 ]console.log(arrNew)=========================================================================================2、使用对象法，数组去重let arr=[10,20,30,30,20,40,50,10,20]let arrNew=[]let obj={}arr.forEach(item=>{/*** 利用对象重复赋值的方法* 若要加入obj对象的item属性不是undefined，便加到对象中* 若有重复的item属性便不会加到对象中，也就不会执行if中的arrNew.push()*/if(obj[item]==undefined){arrNew.push(item)obj[item]='value'}})console.log(arrNew)/* [ 10, 20, 30, 40, 50 ] */

数组升维

//需求:将下列数组arr,根据类别type升为二维数组let arr =[{type:'电子产品',name:'iPhone',price: 8888},{type:'家具',name:'桌子',price: 100},{type:'食品',name:'瓜子',price: 10},{type:'家具',name:'椅子',price: 380},{type:'电子产品',name:'小米手机',price: 1380},{type :'食品',name:'辣条',price: 5},{type: '食品',name:'咖啡',price: 50}];let obj=[]let arrNew=[]arr.forEach(v=>{//把第一次type和第一次的值加入arrNewif(obj[v.type]==undefined){obj[v.type]='value'arrNew.push({type:v.type,data:[v]})}//第二的值加入arrNew中对应的type中else{arrNew.forEach((v2,j)=>{if(v.type==v2.type){arrNew[j].data.push(v)}})}})console.log(arrNew)

数据类型 Set

作用：和数组类似，和数组不同的是不能存放重复的元素应用场景：数组去重Set测试，例如：let set1=new Set([10,20,30,10,20,40])console.log(set1)/*结果是一个Set对象：Set { 10, 20, 30, 40 }*/-----------------------------------------------------------------------------------------数组去重，例如：let arr=[1,2,3,1,2,4,5]let set2=new Set(arr)console.<4000/span>log(set2)/*结果：Set { 1, 2, 3, 4, 5 }*/let newArr=[...set2]console.log(newArr)/*去重结果：[ 1, 2, 3, 4, 5 ]*/