浅出ES6特性

ES6学习小结

用了这么久的es6来写代码，写一点心得，记录自己，总结自己。
ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准,虽然现在很多都不支持，但是我们写代码还是可以用提前用es6来写代码，体验新特性。写完后用Babel就可以转成现在浏览者支持的语言。

首先es6主要会用到的有几点:

let 和const 声明命令

变量解构、参数、字符串模板

箭头函数

支持类的应用

对象字面量

模块

Map，Set 和 WeakMap，WeakSet

let 和const 声明命令

let
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
let命令声明的常量不提升,只能在声明的位置后面使用，且不能重复声明。

var b = 456  
console.log(a)//a is not defined
console.log(b)//456

可以看到，let声明的变量只在它所在的块级作用域起作用。
而且let还能解决闭包变量的问题。

for(var i=0;i<5;i++){  
    var fn = function(){  
        console.log(i)  
    }  
}  
fn()//i=5  
for(let i=0;i<5;i++){  
    var fn = function(){  
        console.log(i)  
    }  
}  
fn()//i=4

第一个fn会通过闭包读到这同一个变量i，导致最后输出的是最后一轮的i的值，也就是5。
第二个fn是通过let定义的，声明的变量仅在块级作用域内有效，所以是4

const
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const的作用域与let命令相同：只在声明所在的块级作用域内有效
const命令声明的常量也是不提升,只能在声明的位置后面使用。

变量解构、参数

变量解构
解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

console.log(a) //1  
console.log(b) //2

默认参数、不定参数、字符串模板
ES6可以在定义函数的时候在()内定义默认值了。

var temp = obj||123;  
    console.log(temp)  
} // ES6之前  
var fn = function(temp=123){  
console.log(temp)  
}//ES6

不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。类似于arguments

var fn = function(...x){ 
console.log(x[2])  
} 
fn(1,2,3) // 输出 3

字符串模板
以前在字符串中添加变量需要用很多+号来完成，ES6有了字符串模板，通过“来写字符串，类似于${temp},就可以添加变量到字符串中。

console.log(`temp is ${temp}`)//temp is hellow ES6

箭头函数

在js中我们经常会用到回调函数，也经常写回调函数，每次都要function…一堆东西，ES6中开发了箭头函数，让回调就是那么简单~~

temp('hellow') // 输出 hellow

支持类的应用

ES6支持class的应用，class再也不只是一个保留字了！

 //类的定义  
class Animal {  
    //ES6中新型构造器  
    constructor(name) {  
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
        //直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
temp=new Programmer('temp');
animal.sayName();//输出 ‘My name is dummy’
temp.sayName();//输出 ‘My name is temp’
temp.program();//输出 ‘I'm coding...’

对象字面量

在ES6中，对象字面量被增强了。
以前在定义对象方法的时候需要function,现在只用()就行了。

var obj = {
    showObj(name){
        console.log('this is '+name)
    }
}

而且可以只在在对象里面定义对象的原型

var father = {
    showFather(){
        console.log("this is fahter");
    }
}
var child = {
    __proto__:father,
    showChild(){
        console.log("this is child");
    }
}
child.showFather() // "this is fahter"
child.showChild()// "this is child"

模块

在ES6标准中，JavaScript原生支持module。
- 命名导出

//export.js
export const dialog = function(){
    console.log("this is dialog");
}

//index.js
import {dialog} from './export';  
dialog();//"this is dialog"

默认导出

//export.js
export default function(){
    console.log("this is export");
}

//index.js
import export from './export';  
export();//"this is export"

Map，Set 和 WeakMap，WeakSet

Set
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

    var temp = new Set()
    temp.add("one") // ['one']
    temp.has("one") // true 
    temp.size // 1

Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
- Map

    var temp = new Map()
    temp.set("one", "content") // { one: content }
    var arr = [1,2,3];
    temp.set(arr, "this a arr")// {  one: content, Array[3]: this a arr }
    temp.get(arr)//"this a arr"

WeakMap，WeakSet
WeakMap,WeakSet,是为了防止内存泄漏，当设置的变量没有定义的时候，会被回收释放掉。

    var temp =  new WeakMap()
    temp.set(one,'this no set');
    temp.size // undefined