ES6语法详解

什么是ES6？

ES6是ECMAScript6的简称，是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 在IDEA中默认配置ECMAScript5版本，我们如果要编写ES6的语法，需要进行配置。

接下来我们通过和ES5语法的对比来学习ES6语法。

let声明变量

ES5使用var声明变量，ES6使用let声明变量。它们的区别请看如下示例代码。

//var 声明的变量没有作用域
//let声明的变量有作用域
// {
//     var a=1
//     let b=2
// }
// console.log(a)//1
// console.log(b)//b is not defined
?
//var可以声明多次
//let只能声明一次
// var m=1;
// var m=2;
// let n=3;
// let n=4;// Identifier 'n' has already been declared
// console.log(m)
// console.log(n)
?
//var会提升变量的作用域
//let不会提升变量的作用域
console.log(x) //undefined
var x='apple'
?
console.log(y) // Cannot access 'y' before initialization
let y='orange'

总结：

• var声明的变量没有作用域，let声明的变量有作用域。
• var可以声明多次，let只能声明一次。
• var会提升变量的作用域，let不会提升变量的作用域。

常量

ES5常量并不是真正的常量，只是一种约定，实际上开发人员还是能改变常量的值，ES6常量被声明之后就不允许被改变了，一旦声明就必须初始化，否则会报"Missing initializer in const declaration"错误。示例代码如下：

//一旦声明常量就不能被修改
const PI ='3.1415926'
PI = 0 //Assignment to constant variable.
?
//一旦声明就必须初始化，否则就会报错
const MY_APP // Missing initializer in const declaration

解构赋值

ES5将一个对象的属性赋值给其他变量必须一个一个取，ES6可以直接取出对象中的所有值赋值给其他变量。示例代码如下：

//传统的
// let a=1,b=2, c=3
// console.log(a,b,c)
?
// //es6
// let [x,y,z]=[1,2,3]
// console.log(x,y,z)
?
//对象定义
let user={name:'wunian',age:10}
//传统的
let name1=user.name
let age1=user.age
console.log(name1,age1)
//es6 取出对象中所有的值
let {name,age}=user //解构的变量名必须和对象属性同名
console.log(name,age)

模板字符串

ES6支持在字符串中引号需要改为``，可以直接在字符串中使用变量，不需要像ES5那样拼接字符串。示例代码如下：

let name='hello'
let age=3
//传统的
let info='name:'+name+" age:"+age//拼接字符串
?
//字符串引号要改为``
let infoes6=`name:${name} age:${age}` //模板字符串，真正的前端开发
?
console.log(info)
console.log(infoes6)

对象声明简写

一个对象中的属性如果和值的参数名相同，可以省略属性，直接传入参数名。示例代码如下：

const age=3
const name='wunian'
?
//传统的
const person1={age:age,name:name}
console.log(person1)
?
//es6
const person2={name,age}
console.log(person2)

定义方法简写

ES5我们在对象中定义方法的格式为：方法名:function()，ES6可以把function省略。示例代码如下：

const p={
    //方法
    sayHi:function(){
        console.log('hello')
    }
}
p.sayHi();
?
//es6
const p2={
    sayHi(){
        console.log("hello es6")
    }
}
p2.sayHi()

对象扩展运算符

ES5将一个对象赋值给另一个变量，实际上是引用赋值，引用指向的地址和原对象是相同的，因此现对象的值一旦发生改变，会影响原对象的值，类似于Java中的引用传递。ES6可以实现对象的完全拷贝，一旦拷贝现对象就和原对象没任何关系了，因此它是一种深拷贝。示例代码如下：

let person={name:'wunian',age:20}
let someoneOld=person //引用赋值
?
//对象拷贝 ... 深度拷贝
let someone={...person}
someoneOld.name='jishiyu'
someone.name='jishiyu neo'
?
console.log(person) //jishiyu
console.log(someoneOld)//'jishiyu'
console.log(someone) //jishiyu neo

函数的默认参数

ES6可以对函数中的形参设置默认值。示例代码如下：

function showInfo(name,age=18){
    console.log(name+','+age)
}
?
showInfo('wunian',20) //wunian,20
showInfo('wunian') //wunian,18
showInfo('wunian',undefined) //wunian,18
showInfo('wunian',null)  //wunian,null

箭头函数

ES6箭头函数类似于Java中的lambda表达式，是函数的一种简化形式，一般格式为：参数=>函数体。示例代码如下：

let arr=['100','534','37','412','3000']
let arr1=arr.sort();
console.log(arr1)
//需要使用排序的函数
let arr2=arr.sort((a,b) => a-b)
console.log(arr2)
// let arr2=arr.sort(function(a,b){
//     return a-b
// })
?
//()=>{}
var f1=function (a,b){
    let result =a+b
    return result
}
?
var f2= (a,b) =>{
    let result =a+b
    return result
}
//最终简化版本
var f3= (a,b) => a+b
?
console.log(f1(2,3))
console.log(f2(2,3))
console.log(f3(2,3))

在许多前端框架的底层代码中，可以看到大量这种ES6语法的代码，尤其是对接后端接口的API。

NPM包管理

只要安装了Node.js，系统就会自动安装npm环境。

C:\Users\Administrator>npm -v 
6.13.4

什么是npm？

npm的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。好比Java中的maven，所有东西只要导入依赖即可，npm也是如此，npm install命令类似于Linux的yum安装。

测试使用

1、创建一个npm目录。

2、测试初始化项目，理解npm是如何管理前端依赖的。package.json文件和pom文件一样，用来管理我们的项目版本依赖。

项目初始化：

npm init  #初始化，需要设置一些参数
npm init -y # 快速初始化，自动设置默认参数，

修改npm镜像

npm默认镜像地址在国外，下载缓慢，我们可以把它修改成淘宝的镜像，那样下载速度会比较快。

 #查看npm的配置信息
npm config list
#配置所有依赖通过淘宝镜像下载，速度较快
npm config set registry https://registry.npm.taobao.org/

下载依赖包

1、npm install xxx 安装指定依赖，默认安装最新版本。

2、npm install xxx@x.x.x 安装指定依赖并指定版本。

3、package.json管理了所有的依赖版本控制。

4、npm install --save-dev(或者 -D) xxx 安装指定依赖并且只在开发的时候使用。

5、npm install -g xxx 全局环境下安装指定依赖，依赖安装位置一般在C:\User\Administrator\AppData\Roaming\npm\node_modules目录下，在VSCode终端中可能会因为权限问题安装失败，可以去DOS窗口下运行该命令进行安装。

6、更新和卸载指定依赖包：

npm update xxx # 更新包
npm uninstall xxx # 卸载包