学习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'; // ReferenceError let 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}=obj console.log(name,age,other) /* 结果： jine 22 undefined */ ----------------------------------------------------------------------------------------- 若出现变量名和对象属性名有的相同，有的不同，可以一下写法，例如： let{name,age,mvp:other}=obj console.log(name,age,other) /* 结果： jine 22 haha */ ----------------------------------------------------------------------------------------- 若对象属性值已有，在声明相同的变量来进行赋值并不会覆盖（如下age） 若声明的变量没有对应的对象属性，可以给这个变量初始化值，便不会出现undefined（如下height），例如： let{name,age=18,other,height=175}=obj console.log(name,age,height) /* 结果为：jine 22 175 */ ========================================================================================= 2、ES5写法 var obj={ name:"jine", age:22 } var name1=obj.name var age1=obj.age

数组解构赋值

数组顺序进行依次赋值 1、ES6写法 let arr=[10,20,30] let [num1,num2,num3]=arr console.log(num1,num2,num3) /*结果：10 20 30*/ let [num1,num2,num3,num4]=arr console.log(num1,num2,num3,num4) /*结果：10 20 30 undefined*/ let [num1,num2,num3,num4=40]=arr console.log(num1,num2,num3,num4) /*结果：10 20 30 40*/ let [num1=100,num2,num3,num4=40]=arr console.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改成=> => 可以读成goesto b.如果只有一个形参，那就可以省略形参小括号. 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=20 let obj={ name, //相当于name:name age, 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 1 1 2 2 3 undefined */ ----------------------------------------------------------------------------------------- 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 1 1 2 2 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和第一次的值加入arrNew if(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.log(set2) /* 结果：Set { 1, 2, 3, 4, 5 } */ let newArr=[...set2] console.log(newArr) /* 去重结果：[ 1, 2, 3, 4, 5 ] */