ES6是现代JavaScript的基础，ES6是2015年ECMAScript组织提出的JavaScript的第六个版本，也叫ES2015，其中增长了不少新特性，能够说ES6是当下前端程序员必备知识之一。html
ES6中，使用let和const代替var定义变量。let用于定义一个变量，const用于定义一个常量,其中const定义的对象只是对象的地址不变，对象的属性是能够增长或者删除的。前端
使用var定义变量时，会有一些问题，如变量声明提早,ES6中禁止了。webpack
//ES5
console.log(a); //输出undefined
var a=0;
//ES56
console.log(a); //直接报错，取消变量声明提早
var a=0;
复制代码
var定义变量只存在全局做用域和函数做用域，其余大括号中不存在块级做用域,let&const定义的变量在全部大括号中都存在块级做用域。git
//ES5
{
let b=0;
}
console.log(b);//输出0
//ES6
{
let b=0;
}
console.log(b);//报错，b未定义,b的做用域在上面的括号内
复制代码
let&const定义的变量不能再使用window对象调用程序员
var c=0;
console.log(window.c); //输出0
let d=0;
console.log(window.d); //输出undefined
复制代码
使用let&const的特色：es6
let [a,b,c]=[
1,
2,
3
];
console.log(a,b,c);//输出1,2,3
let {d,e,f}={
d:4,
e:5,
f:6
};
console.log(d,e,f);//输出4,5,6
复制代码
解析结构可让咱们快速的将接口返回的数据赋值到变量上。github
同时，只要数组的下标对应或对象的键名对应均可以实现解析结构web
//数组的下标对应，将第一个跟第三个取出并赋值给a、c变量
let [a,,c]=[
1,
2,
3
];
console.log(a,c);//输出1,3
//对象的键名对应，将键名为d、f的键值赋值给d，f变量
let {d,f}={
d:4,
e:5,
f:6
};
console.log(d,f);//输出4,6
复制代码
模板字符串使用反单引号包围，在字符串中能够使用变量,经过${ }的形式插入变量编程
//ES5
var name="李雷";
var age=21;
console.log('你好'+name+','+'我今年'+age+'岁');//输出 你好李雷，我今年21岁
//ES6
let name="李雷";
let age=21;
console.log(`你好${name},我今年${age}岁`);//输出 你好李雷，我今年21岁
复制代码
在${}之中，除了可以解析变量之外，还能够解析js表达式,如三元表达式等。数组
console.log(`${1===1?'true':'false'}`)
复制代码
ES6中引入了一些新的处理字符串的API
let str='lilei';
console.log(str.startsWith('li'));//输出true
console.log(str.endsWith('lei'));//输出true
复制代码
startsWith()接收一个字符串，判断调用该方法的字符串是否以接收的字符串参数做为开头，endsWith()接收一个字符串，判断调用该方法的字符串是否以接收的字符串参数做为结尾。
函数的参数能够预设默认值
function showNumber(number=0) {
console.log(number);
}
showNumber(); //输出0
复制代码
实现调用一次obj.addCount方法就使obj.count加一。
//ES5
var obj={
count:0,
addCount:function() {
var that=this; //定义一个变量暂时保存this指向的obj对象，方便在闭包中使用
setTimeout(function() {
that.count++;
console.log(that.count);
},1000);
}
};
obj.addCount();//输出1
//ES6
const obj={
count:0,
addCount:function() {
setTimeout(()=> { //使用箭头函数修改this指向的上一做用域变量的上下文对象
this.count++;
console.log(this.count);
},1000);
}
};
obj.addCount();//输出1
复制代码
箭头函数就是将function(){}改写为()=>,箭头函数内的this指向外层的this指向的对象，这里是addCount函数的做用域中的this指向的obj对象，这是箭头函数最重要的特性。
箭头函数的参数只有一个的时候能够省略括号
(res)=>{xx}
//简写为
res=>{xx}
复制代码
箭头函数内只有一条js语句时，能够省略大括号
let fun=()=>{console.log('Hello World')};
//简写为
let fun=()=>console.log('Hello World');
fun(); //输出Hello World
复制代码
对象字面量中相同键名与键值同名的状况能够简写。
//ES5
var name='lilei';
var obj={
name:name
}
//ES6
let name='lilei';
let obj={
name
}
复制代码
//ES5
var obj={
hello:function() {
console.log('Hello World');
}
}
//ES6
let obj={
hello() {
console.log('Hello World');
}
}
复制代码
使用中括号表示动态的键名
let key='name';
const obj={
[key]:'李雷'
};
console.log(obj.name); //输出李雷
复制代码
可能你尚未遇到过回调地狱，可是JS做为一门异步编程的语言，学习Promise十分重要，它可让咱们优雅的编写异步程序，详情请看ES6 Promise。
ES6中提供了class关键字与extends关键字让咱们方便快捷的书写OOP代码，详情请看ES6 类与继承。
在ES5的时候，在同一个html文件中引入两个js文件来实现js跨文件的引用。
ES6中，将每个文件视为一个模块，在一个模块中能够经过export关键字设置容许外部文件访问的变量。其余模块经过import关键字将其余js模块导入当前模块中。下面直接看例子：
//a.js
let name='李雷';
let _age=20;
export {name}; //设置外部文件能够访问的变量
//b.js
import {name} from './a.js'; //接收a.js对外暴露的对象
console.log(name); //输出李雷
复制代码
a.js中name被设置对外容许访问，而_age没有设置为对外容许访问。
//b.js
import {name,_age} from './a.js'; //接收a.js对外暴露的对象
console.log(name); //输出李雷
console.log(_age); //输出undfined，未能接收到_age
复制代码
export第二种写法是把export写在要对外暴露的变量以前：
//a.js
export let name='李雷'; //设置外部文件能够访问的变量
export let hello=name=> {//设置外部文件能够访问的函数，使用到了5箭头函数
console.log(`Hello${name}`); //使用到了3.1模板字符串
}
let _age=20;
//b.js
import {hello,name} from './a.js'; //接收a.js对外暴露的对象
hello(name); //输出 Hello李雷
复制代码
export第三种写法是使用export default:
//a.js
export let name='李雷';
export let hello=name=> {
console.log(`Hello${name}`)
}
let _age=20;
export {name,hello}
export default _age;
//b.js
import {hello,name} from './a.js'; //接收a.js对外暴露的对象
import _age from './es6_2.js';
hello(name); //输出 Hello李雷
console.log(_age); //输出20
复制代码
前面咱们使用的import都是对模块暴露出来的变量一个个接收的，也能够一次接收多个变量
//a.js
export let name='李雷';
export let hello=name=> {
console.log(`Hello${name}`)
}
export {name,hello}
//b.js
import * as obj from './a.js'; //将接收的变量所有赋予obj对象
obj.hello(obj.name); //输出 Hello李雷
复制代码
export default语句只能写一句，export语句能够写多句，export default只能输出一个变量，接收的时候不须要包含在大括号内。
注意：export与import在浏览器上还不支持，能够在一些打包工具如webpack中使用。
ES6中还有不少的新特性，它是现代JS语言的基石，解决了ES5中诟病已久的各类问题。上述特性是我认为最多见的特性，是必须掌握的内容。
若是这篇文章帮到你了，以为不错的话来点个Star吧。 github.com/lizijie123