React開發管理後臺0

React開發需要用ES6語法，ES6是在2015年釋出的，對Javascript語法進行了重大擴充，所以直到現在還不是所有的瀏覽器都支援ES6語法，React使用Babel來支援ES6語法。
在這裡我們先來熟悉一下ES6的語法，為今後進行React開發打下基礎。

變數擴充套件

塊作用域

在老版本的Javascript中，只有全域性和函式作用域，沒有塊作用域，如下程式碼所示：

function t1() {
    var i = 1;
    if (1 == i) {
        let n1 = 'n1 block';
        alert(`n1=${n1}!`);
        n1 = 'new n1';
        alert(`new n1=${n1}!`);
    }
    alert(n1);
}

在第4行定義變數n1，在第5行可以正確顯示其結果。在第6行可以改變n1的值，第7行也可以正確顯示出來（與其他很多語言不同，let這裡表示塊作用域變數，而不是常量）。

常量

ES6中引入常量概念，用const開頭：

const n2 = 'abc';
n2 = 'def';

這時就會報錯，因為不能向常量賦值。

模板字串

ES6引入模板字串，就是將變數嵌入到字串中，而無需使用+來拼接字串，使程式碼更易懂。實際中模板字串有兩種主要用途，一種是在字串中嵌入變數，另一種是輸入多行字串，如下所示：

var name = '王一';
console.log(`歡迎${name}光臨！`);
console.log('歡迎' + name + '光臨！');
var message = `

這裡是多行文字

`;

注意上述程式碼中第2行使用的是Tab鍵上邊的反引號，不是單引號。其效果和第3行相同。第4行定義的多行文字也是可以直接顯示為多行文字的，同時也需要注意，其使用的是Tab鍵上面的反引號而不是單引號。

函式擴充套件

Lambda表示式

ES6中引入Lambda表示式又稱之為簡頭函式，可以用另一種方式來定義函式：

function add(a, b) {
    return a + b;
}

var addNew = (a, b) => {
    return a + b;
}

alert(`a+b=${add(1, 2)}!`);
alert(`a+b=${addNew(3, 2)}!`);

setTimeout(()=>{ alert('timeout'); }, 2000);

function onTimeout() {
    alert('timeout2');
}
setTimeout(onTimeout, 1000);

我們首先定義了普通函式add和箭頭函式addNew，在後面可以看到，他們無論呼叫方式還是執行效果都是完全一樣的。
接下來我們設定timeout執行的函式，通過箭頭函式或普通函式作為setTimeout函式的第一個引數，效果都是一樣的。而使用箭頭函式，可以使程式碼更簡潔。

預設引數

預設引數就是可以給函式中的引數賦預設值，當函式呼叫時，如果不給這個引數賦值，就使用預設值，如果給引數賦值，則使用傳入的值，如下所示：

function increase(a, b=1) {
    return a + b;
}

alert(`increase 1:${increase(3)}!`);
alert(`increase 100:${increase(3, 100)}!`);

執行上面的程式碼，第一次輸入為4，因為此時沒有給b賦值，系統使用預設值1；第二次輸入為103，此時b使用傳入值100。

展開符

展開符為…，可以將陣列元素取出，去掉中括號，如下所示：

function sum(a, b) {
    return a + b;
}
var vals = [1, 2];
alert(`老方法：sum=${sum.apply(null, vals)}!`);
alert(`新方法：sum=${sum(...vals)}!`);

在老Javascript中，需要使用apply函式，而ES6中可以在陣列前面加展開符…，直接將陣列變為元素的列表。

物件擴充套件

物件屬性

ES6在物件中增加了keys、values、entries方法，可以返回物件的屬性、值和鍵值對，如下所示：

let user = {name: '王一', age: 55, gender: '男'};
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));
let v1 = Object.entries(user);
console.log(`${v1[0][0]}=${v1[0][1]}!`);