ES6新語法(一)

1.常量

        ES5沒有定義聲明常量的方式，ES6標準中引入了新的關鍵字const來定義常量。

        常量必須給初始值； 常量不能在同一作用域內重新定義或賦值； 

<script>
    const PI = 3.14;
    console.log(PI);
</script>

2.塊級作用域

         JS中作用域有：全局作用域、函數作用域

         ES6中新增了塊級作用域。

         塊作用域由 { } 包括，if語句和for語句裡面的{ }就屬於塊作用域。(不包括函數)

//註意 塊級作用域中，使用var聲明的變數是全局變數
{
    var a = 1;
    console.log(a);//1
}
console.log(a);//1

if(true){
    var b = 2;
    console.log(b);//2
}
console.log(b);//2

2.2、let關鍵字聲明塊級變數

           ES6中增加了let關鍵字聲明變數，聲明的變數只在當前代碼塊中生效（塊級作用域）。

         使用let聲明的變數可以重新賦值,但是不能在同一作用域內重新聲明

<script>
      // let聲明的變數可以重新賦值
    {
        let a = 1;
          console.log(a);
          a = 2;
         console.log(a);;
    }
</script>

<script>
  // let聲明的變數不能在同一作用域重新聲明，直接報錯 預解析錯誤
  {
      let a = 1;
      console.log(a);
      let a = 2;
      console.log(a);
}
</script>

2.3、let變數沒有變數提升

{
     console.log(i);//報錯
    let i = 8;
}

2.4、應用：let塊級變數解決i丟失的問題

var arr = [3,4,5,6,7];

for(let i=0; i<arr.length; i++){
    // (function(i){
        setTimeout(function(){
            console.log(i);
            //console.log(arr[i]);
        }, 1000);
    // })(i);
}

3.字元串模板(模板字面量)

            js中單雙引號字元串，均不解析變數，需要使用+號將變數拼接在字元串中。 

         ES6中提供了字元串模板語法，允許使用反引號（倒引號） `` 來創建字元串，裡面可以包含${變數名}形式的變數占位符。 其中的變數會被解析。

//生成一個隨機數
var num=Math.random();

//將這個數字輸出到console
console.log('your num is ' + num);
console.log(`your num is ${num}`);

var str = `hello
歡迎來到黑馬大講堂`;
console.log(str);

 4.函數     

4.1 參數預設值

//ES5中，只能變相實現參數預設值（函數內部加判斷處理）
function f1(username){
    //傳統的指定預設參數的方式
    var username = username || 'zhangsan';
    console.log('Hello ' + username);
}
f1();//Hello zhangsan
f1('lisi');//Hello lisi


//ES6中，直接給形參設置預設值
function f2(username='zhangsan'){
    console.log(`Hello ${username}`);
    //console.log('Hello ' + username);
}

f2();//Hello zhangsan
f2('lisi');//Hello lisi

4.2 展開運算符（拆包）

          ES6新增了展開運算符（用三個連續的點 (...) 表示），能夠將數組和字元串字面量展開為多個元素

//展開數組
var arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3
//展開字元串
var str = "hello";
console.log(str);
console.log(...str);

          應用：拓展參數   

        它允許傳遞數組或者類數組直接做為函數的參數。

//函數本來接收三個單獨的參數
function f3(x,y,z){
    console.log(x,y,z);
}

//ES6中，我們可以將一個數組以拓展參數的形式傳遞，它能很好地映射到每個單獨的參數
var arr=[3,4,5];
f3(...arr);//輸出：3 4 5 

//ES5中，如果需要傳遞數組當參數，我們需要使用函數的apply方法
f3.apply(null,arr);//輸出：3 4 5 

4.3 不定參數(可變參數/剩餘參數)

           不定參數是指，在函數中使用 命名參數 同時接收 不定數量 的 未命名參數，需要使用三個連續的點 (...) 。

         這是一種語法糖(在原語法上的簡化用法)，ES5通過函數內部的arguments對象來達到類似效果。

         不定參數的格式：

//不定參數 將多個實參放在一個數組變數中
//  ...x  三個點是固定格式，x是形參變數名
function f1(...x){
    console.log(x);
}
f1(3,4,5); //[3,4,5]

function f2(m, n, ...x){
      console.log(m, n, x);
}
f2(2,3,4,5,6); // m=2  n=3  x=[4,5,6]