ECMAScript6入門學習筆記(一)

ECMAScript是Javascript語言的國際標準，JavaScript是ECMAScript的實現。

總結一些ECMAScript的特性

1、let和const命令

 let命令用於聲明變量，用法和var類似，但是所聲明的變量，只在let命令所在的代碼塊內有效，爲JavaScript新增了塊級作用域。

function f1() {
    let n = 5;
    if(true){
        let n = 10
    }
    console.log(n) //5
}

上面的函數有兩個代碼塊，都聲明瞭變量n，輸出結果爲5。外層代碼塊不受內層代碼塊的影響。

const用來聲明常量，一旦聲明，其值就不能改變。

const PI = 3.1415
PI //3.1415

重新給常量賦值，其值不會發生改變。const的作用域和let命令相同：只在聲明所在的塊級作用域內有效。

2、變量的結構賦值

ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被成爲解構。

var [a,b,c] = [1,2,3]

上面的代碼表示，可以從數組中提取值，按照位置的對應關係，對變量賦值。

常見賦值方法，如果機構不成功，變量的值就等於undefined

var [foo,[[bar],baz]] = [1,[[2], 3]];
foo//1
bar//2
baz//3

var [,,third] = ["foo", "bar", "baz"]
third// "baz"

對undefined或null進行解構會報錯，解構只能用於數組或對象，其他原始類型的值都可以轉爲對應的對象，但是，undefined和null不能轉爲對象，因此報錯。

//報錯
var [foo] = undefined
var [foo] = null

解構賦值允許指定默認值。解構賦值不僅適用於var命令，也適用於let和const命令。

var [foo=true] = []
foo//true

var [v1,v2,...,vN] = array;
let [v1,v2,...,vN] = array;
const [v1,v2,...,vN] = array;

解構不僅可以用於數組，還可以用於對象。

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var {bar, foo} = {foo:"aaa", bar:"bbb"}
foo//aaa
bar//bbb

var {baz} = {foo:"aaa", bar:"bbb"}
baz//undefined

解構賦值用途：

• 變換變量的值

• [x, y] = [y, x]

  從函數返回多個值。函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象裏返回。通過解構賦值，可以很方便的取出這些值。

• function example() {
      return [1,2,3]
  }
  var [a,b,c] = example();
  
  function example2() {
      return {foo: 1, bar: 2}
  }
  var {foo, bar} = example2()

  函數參數的定義

• function f({x,y,z)} {
  
  }
  
  f({x:1, y:2, z:3})

  函數參數的默認值

• 遍歷map解構。任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map解構原生支持Iterator接口，配合變量的結構賦值，獲取鍵名和鍵值就非常方便。

• var map = new Map();
  map.set('first', 'hello');
  map.set('second', 'world');
  
  for(let [key, value] of map) {
      console.log(key +" is " + value)
  }
  //first is hello
  //second is world
  

  輸入模塊的指定方法。加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode} = require("source-map");