前端es6基礎語法

1、let、const、var

var是聲明全局的變量，作用域是全局，const是聲明全局的常量，不能修改,而let是塊級變量只在當前聲明的作用域中生效:

{
    var a = 10;
    let b = 20;
}
console.log(a); // 打印a的值
console.log(b); // 報錯：ReferenceError: b is not defined

2、var的標量聲明提前現象

// 直接打印a的值，文件中沒有聲明a
console.log(a);// 報錯：Uncaught ReferenceError: a is not defined

因為代碼從上往下執行，a並沒有聲明，所以報錯,但var有一個聲明提前的情況,看下面代碼：

console.log(a); //打印undefine
var a = 10;

是不是認為應該會報錯，其實不然，因為var有一個聲明提前的現象，如果你在調用一個變量時，它在下文有聲明時，他做了這樣一個事情，相當在你調用前聲明了變量名而沒有賦值：

var a           //等效調用前加上該語句
console.log(a); //打印undefined
var a = 10;

注意，var在函數中聲明的時局部標量，沒var聲明的全局變量

function ff(){
    var a=1;
    console.log(a);    //1
}
ff();
console.log(a);    //a is not defined


function ff(){
    a=1;
    console.log(a);    //1
}
ff();
console.log(a);    //1

var 在函數內部聲明時的變量提前：

// 情況1
var name = 'kingfan';
function foo(){
    console.log(name)   //打印kingfan;
}

// 情況2
var name = 'kingfan';
function foo(){
    console.log(name)   //打印undefined;
    var name = 'fan';
};
console.log(name)   // 打印 kingfan,var name = 'fan'在函數中聲明的時局部變量
// 注意正常情況下，console.log(name)找的時全局
//，但是在局部中又聲明了name，這時調用時就不會去找全局的name
//,而是聲明提前的name=undefined.

而let 聲明的就是局部標量就不會出現聲明提前的問題:

    var pname = 'kingfan';
    function f() {
        console.log(pname); //直接報錯：Uncaught ReferenceError: pname is not defined
        let pname = 'fan';
        console.log(pname)
    }
    f();
    console.log(pname);

var、let、const的區別

var a = 1;
var a =2;
a = 3;
// var 可以對變量重新定義和賦值

let b = 3;
b = 4;
let b = 5;  //報錯:Identifier 'b' has already been declared
// let聲明的變量 只能重新賦值，不能重新定義

const c = 5;
c = 6;  // 報錯,不能修改
const c = 7 //報錯不能重新定義

總結：var聲明的變量是可以重新定義和賦值，let聲明的只能重新賦值，const不能重新定義和賦值修改

3、字符串拼接

在es6中新增了模板字符串拼接：

var name='kingfan';
var age = 18;
var msg = `我是${name},今年${age}歲`；
console.log(msg)    //打印 我是kingfan,今年18歲

4、數據解構

ES6允許按照一定的模式，從數組或對象中提取值，對變量進行賦值，這種方式被稱為解構賦值。

// 解構數組
var list =[1,2,3,4];
var [a,b,c,d] = list;
console.log(a);     //1
console.log(b);     //2 
console.log(c);     //3
console.log(d);     //4


//結構對象
var obj = {
    name:'kingfan'，
    age:18，
}

// 利用key去接受
var {name,age}=obj;
console.log(name);  //'kingfan'
console.log(age);   //18

// 利用其它變量名接受
var {name:pname,age:page}=obj;
console.log(pname);  //'kingfan'
console.log(page);   //18

5、類的定義

ES5的構造對象的方式 使用構造函數來創造。構造函數唯一的不同是函數名首字母要大寫。

<script>
    class Animal{
    //初始化函數，相當python中的init
        constructor(){
            this.type = 'animal'
        };
        say() {
            console.log('我是動物')
        };
    }
    // 實例化對象
    var dog = new Animal();
    // 調用對象屬性
    console.log(dog.type);
    // 調用對象方法
    dog.say();
</script>

類的繼承，使用extens關鍵字繼承父類:

    class Peopel extends Animal{
        constructor(){
            super()     // 必須在子類的構造函數中執行父類super方法才能得到this調用對象
        }
        // 子類可以重構父類的方法
        say(){
            console.log('我是人')
        }
    }
    // 實例化new方法
    var p =new Peopel();
    // 調用父類的方法
    console.log(p.type);
    // 重構后調用自己得say方法
    p.say();

6、箭頭函數

箭頭函數有個特點：

1. 如果參數只有一個，可以省略小括號
2. 如果不寫return，可以不寫大括號
3. 沒有arguments變量
4. 不改變this指向
5. 其中箭頭函數中this指向被固定化，不是因為箭頭函數內部有綁定this的機制。實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。

可以查看下面兩段代碼輸出的區別：

var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person對象

//****************************************
var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window對象

7.JS文件之間的導入

在es6中增加了像python類似的import語法來導入其他js文件來使用。例如現在有2個文件，file1、file2

// file1
let name='kingfan';
let age = 18;
// 要確保其他文件導入使用，需要確定你要導出哪些數據給別人使用
export {name,age}

//***************************************
// file2
// 指定從file1要導入的數據
import {name,age} from 'file1'

目前很多瀏覽器不兼容此寫法，會報錯。