版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Sweet__Cat/article/details/77452686
一、ES6简介
ECMAScript6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出了JavaScript2.0。
ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。
二、let命令
用来声明变量，用法类似于var，但是它所声明的变量，只在let命令所在的代码块内有效不受外部影响，let不像var有“变量提升”现象。
let不允许在相同作用域内，重复声明同一变量。
{
var a = 100;
let b = 200;
}
console.log("var a 的值" + a); // var a 的值:100
console.log("let b 的值" + b); // b is not defined三、const
用来声明变量，但是声明的是常量，一旦声明，常量的值就不能改变，const也有块级作用域。
const obj = 123456;
const obj2 = 666;
obj = 123;
console.log( obj ); //Assignment to constant variable.
console.log( obj2 ); //666
var obj = 789;
console.log( obj ); //789四、解构（Destructuring）
es6允许按照一定模式，自动解析数组或对象中的值，直接返回一个数组，数组中的值会自动被解析对变量进行赋值。
var {a,b,id,name:Alice} = {id:6,a:1,b:2,name:{a:"1",b:"2",c:"3"}};
console.log(Alice); //{a:"1",b:"2",c:"3"}
console.log(Alice.b); //2解构赋值的用途：
A. 交换变量的值 （es6更简便，更节省内存空间）
// es5
var a = 5, b = 10,temp;
temp = a ;
a = b ;
b = temp ;
console.log(a); // a = 10
console.log(b); // b = 5
// es6
var c = 5, d = 10;
[c,d] = [d,c];
console.log(c); // c = 10
console.log(d); // d = 5B. 从函数返回多个值，返回一个数组
// 返回数组
function funArr(){
return [1 , 2 , 3]
}
var [a, b, c] = funArr() ;
console.log( "a = " + a ,"b = " + b ,"c = " + c); // a = 1 b = 2 c = 3
// 返回对象
function funObj(){
return {
name : "apple" ,
id : "001" ,
time : "2017"
}
}
var { id : d , name : n , time : t} = funObj() ;
console.log( "id值："+ d +" name值："+ n +" time值：" + t )
// id值：001 name值：apple time值：2017C. 函数参数
// 有序数组参数
function funArr([ a , b , c ]){
console.log( a , b , c ); // 1 2 3
}
funArr([ 1 , 2 , 3 ]);
// 无序对象参数
function funObj({ x , y , z }){
console.log( x , y , z ); // 11 22 33
}
funObj({ x : 11 , y : 22 , z : 33 });D. 提取json数据
var jsonData = {
name : "Iphone" ,
id : "001" ,
time : "2017",
product : {a : "apple" , b : "华为" , c : "vivo"}
};
console.log( jsonData.product.b ); // es5 方法
// es6处理后 获取结果相比es5更加方便快捷
let { name : n , id : d , time : t , product : pro } = jsonData ;
console.log( pro.a ); // apple
console.log( n ); // Iphone
console.log( t ); // 2017E. 函数参数的默认值
F. 遍历Map解构
G. 输入模块的指定方法
五、箭头函数（inputs => outputs）
//基本用法
var fun = el => el;
//等同于
var fun = function(el){
return el
};
// 如下例子
var array = [1, 2, 3];
//传统写法
array.forEach(function(e) {
console.log(e); // 1 2 3
});
//ES6
array.forEach( e => console.log(e)); // 1 2 3
//如果箭头函数无参数或者有多个参数时候，则需要使用括号括起来，
// 若箭头函数outputs代码块语句多于一条，则用大括号括起来并return，如下：
var fun2 = ()=> v ;
//等同于
var fun2 = function(){
return v ;
}
var fun3 = ( a , b )=> { a + b ; } // ps：由于大括号解析为代码块，若返回为对象，必须在对象外加上括号。
//等同于
var fun3 = function( a , b){
return a + b ;
}对于箭头函数this也需要简单说明一下：
箭头函数this永远指向当前对象，也就是箭头函数的this是固定的，永远指向定义时的对象，而不是使用时的对象；
箭头函数没有自己的this，即不可用call()、apply()、bind()强制改变this指向；
箭头函数不可以当做构造函数，不可以使用new；
三变量 arguments、super、new.target 在箭头函数中是不存在：
function fun(){
var arr = [ 1 , 2 , 3 ] ;
arr.forEach(
(e) => {
console.log(e);
console.log(arguments)
}
)
}
fun( 11 , 22 , 33);
六、class关键字
//类的定义方法
class father {
//ES6中新型构造器
constructor(elem) {
this.elem = elem;
}
//实例方法
sayName() {
console.log("I'm "+this.elem);
}
}
//类的继承
class son extends father {
constructor(elem) {
//直接调用父类构造器进行初始化
super(elem);
//super关键字用于访问父对象上的函数
//super()调用会生成一个空对象，作为context来调用父类的constructor，返回this对象，
// 作为子类constructor的context继续调用构造函数。
console.log(this);
}
program() {
console.log("I'm "+ this.elem);
}
}
//测试我们的类
var testA = new father('apple'), testB = new son('banana');
testA.sayName(); //输出 ‘I'm apple’
testB.sayName(); //输出 ‘I'm banana’
testB.program(); //输出 ‘I'm banana ’七、定义方法时候可不加function
var init = {
fun(){
console.log("es6")
}
}
init.fun();八、字符串模板
非常便捷的一个功能，反引号（`）代替了以前繁琐的引号+加号的字符串拼接，变量在 ${} 内书写即可。
var arr = ["apple","banana","peal","苹果2","香蕉2","梨子2"];
var elem = document.getElementById("box");
elem.innerHTML = `
<p> ${arr[4]} </p>
<p> ${arr[0]} </p>
<p> ${arr[3]} </p>
`;九、for of值遍历
//es5 ---- for in
var arr = [ 1 , 5 , 3 , 32 , 5 , 6 , 7 , 11 , 19 ];
for(let i in arr ){ // i 是下标
console.log( `第 ${i} 位是 ${ arr[i] }` );
// 第 0 位是 1
// 第 1 位是 5
// 第 2 位是 3
// ...
}
//es6 ----- for of
for(let i of arr){ // i 是值
console.log(i)
// 1
// 5
// 3
// ...
}十、模块
// point.js
module "point" {
export class Point {
constructor (x, y) {
public x = x;
public y = y;
}
}
}
// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";
var origin = new Point(0, 0);
console.log(origin);十一、Map 、set
Map是具有极快查找速度的键值对结构。
我们看看Map的使用示例：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined上面的has方法比indexOf速度快。
Set和Map类似，也是存在key的列表，只不过Set中的元素不能够重复。
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}可以看到，再次添加的重复数据会被过滤掉。
那么这两种对象的运用场景有哪些呢？
Map可以用来存储键值对，比如姓名和年龄，而Set可以用来存储不能重复的目标，比如学号列表。