1.声明变量的关键字：const 和 let

JavaScript ES6中引入了别的两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。

const关键字

const声明一个只读的常量。一旦声明，常量的值不能被转变。

const声明一个变量，就必需马上初始化，不能留到今后再赋值。

需注重：若这个变量是数组或许对象的话，它内里持有的内容是可以被更新的。

因为运用const声明一个复合范例的数据(主假如对象和数组)，变量名不指向数据，而是指向数据的地点。

举例以下：

//这类写法是不可行的
const str = 'hello world';
str = 'hello kitty';     //TypeError: Assignment to constant variable

//这类写法是可行的
const arr = [1,2,3];
arr[0]=9;

let关键字

被let关键字声明的变量可以被转变。

举例以下：

//这类写法是可行的
let str = 'hello world';
str = 'hello kitty';

需注重：

• let声明的变量只要地点的代码块有用。
• 不存在变量的提拔：运用let声明的变量要在声明后运用，不然会报错。

     //运用var定义的变量，存在变量的提拔。
     console.log(a);   //undefined
     var a = 10; 
     
     //运用let定义的变量，不存在变量的提拔，所以下面的代码会报错
     console.log(b);  // ReferenceError: b is not defined
     let b = 20;

• 暂时性死区：运用let敕令声明变量之前，该变量都是不可用的。
• typeof不再是一个百分百平安的操纵

     typeof c;   // ReferenceError: c is not defined
     let c;

ES6声明变量的六种要领
ES5只要两种声明变量的要领：var和function
ES6除了增加let和const，另有别的两种声明变量的要领：import敕令和class敕令。所以，ES6一共有6种声明变量的要领。

2.顶层对象的属性

顶层对象，浏览器中指的是window对象，在Node中指的是global对象。

ES5中，顶层对象的属性和全局变量是等价的。举例：

window.a = 1;
a  //1

a = 2;
window.a   //2

ES6为了转变这一点，一方面划定，为了坚持兼容性，var和function敕令声明的全局变量，依旧是顶层对象的属性；
另一方面划定，let敕令,const敕令,class敕令声明的全局变量，不属于顶层对象的属性。

也等于说，从ES6最先，全局变量将逐渐与顶层对象的属性脱钩。
举例以下：

var a = 1;
window.a  //1

let b=2;
window.b  //undefined

上述代码中，全局变量a由var敕令声明，所以是顶层对象的属性；全局变量b由let敕令声明，所以它不是顶层对象的属性，返回undefined

3.模板字符串

传统的JavaScript言语，输出模板通常是用字符串拼接起来的，这类写法相称烦琐不方便，因而ES6引入了模板字符串来处理这个题目。

模板字符串(template string)是增强版的字符串，用反引号(`)标识。可以当作一般的字符串运用。也可以用来定义多行字符串，或许在字符串中嵌入变量。

举例以下：

//一般字符串
`In JavaScript '\n' is a line feed`

//多行字符串
`In JavaScript this is
 not legal`
 
 //字符串中嵌入变量
 let name = 'Bob',time = 'today';
 `Hello ${name},how are you ${time}`

上述代码中的模板字符串，都是用反引号示意的。
需注重：假如再模板字符串中须要引入反引号，则前面要用反斜杠转义。
举例以下：

let greeting = `\Yo\` world

模板字符串中嵌入变量，须要将变量名写在
${ } 当中。

模板字符串中还能挪用函数

function fn(){
    return "Hello World";
}
`foo ${fn()} bar`
//foo Hello World bar;

4.箭头函数

ES6中许可运用“箭头”（=>）定义函数。

举例以下：

var f = v => v;
//上面的箭头函数等同于

var f = function(v){
    return v;
}

若箭头函数须要多个参数，则参数要用圆括号括起来。

var f = () => 5;
//等同于
var f = function(){return 5;}

var sum = (num1,num2) => num1+num2;
//等同于
var sum = function(num1,num2){
    return num1 + num2;
}

因为大括号被解释为代码块，所以，假如箭头函数直接返回一个对象，必需在对象表面加上括号，不然会报错。

//报错
let getTempItem = id => {id:id,name:"temp"};

//不报错
let getTempItem = id => ({id:id,name:"temp"});

箭头函数与变量构造可以连系运用

const full = ({first,last}) => first + '' + last;

//等同于
function full(person){
    return person.first + '' + person.last;
}

5.运用export和import完成模块化

因为JavaScript是没有模块这一体系的，先辈们为了处理这一题目，提出来许多范例，个中最长用的就是 CommonJs 和 AMD 两种。前者用于服务器，后者用于浏览器。

简朴看一下CommonJs的模块化要领

在CommonJs中，暴露模块运用
module.exports，加载模块有一个全局的要领：
require()，用于加载模块。

示例代码：

//app.js
let person = {
    age:'20',
    name:'Jolin'
};
module.exports = person;  //所暴露出的对象

//index.js
let person = require('./app');   //加载app模块
console.log('姓名'+person.name);  //姓名Jolin

注重：CommonJs 的模块化要领是运转于服务器端的，直接在浏览器端运转是不识别的，所以进入装置 nodejs 的目次，翻开 cmd 敕令窗口，键入敕令node index.js来运转吧~

好了，言归正传~ ES6供应了简朴的模块体系，可以庖代 CommonJs 和 AMD 范例。那就是export 和 import 。

ES6中新增了两个敕令
export和
import，
export敕令用于暴露出模块对外的接口，而
import则用于输入某一模块。

示例代码：

//export.js
exports var firstName = 'Micheal';
exports var lastName = 'JackJson';
exports var year = 1958;


//import.js
import {firstName,lastName} from './export.js'
console.log(firstName+' '+lastName);   //Micheal JackJson

因为浏览器如今对ES2015（ES6）的语法支撑不是很强，所以，即便是Firefox和Chrome浏览器，若版本较低，可以照样只支撑一部分语法，那末怎样才能让ES6语法可以一般的在各个浏览器运转呢？则就须要将编写的JS文件经由过程一些编译东西编译成ES5的语法，那末babel东西就可以完成这个转义。

但是，babel 只能转新的JavaScript句法（syntax）而不能转新的API，而且像import和export两个敕令在如今任何浏览器都是不支撑的，同时babel也没法转换其为浏览器支撑的ES5，因为：

babel只是个翻译，假定a.js 里 import 了 b.js, 对a.js举行转码，只是翻译了a.js，并不会把b.js的内容给读取兼并进来, 假如想在终究的某一个js里，包括 a.js，b.js 的代码，那就须要用到打包东西。

所以，我们可以运用webpack东西将带有import和export语法的JS文件，经由过程打包东西天生一切浏览器都支撑的单个JS文件。