学习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 ]
*/