ES6學習筆記（let,const,變量的解構賦值）

1.let：

所聲明的變量，只在let命令所在的代碼塊內有效；

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
} // abc // abc // abc

不存在變量提高，它所聲明的變量必定要在聲明後使用，不然報錯；

// var 的狀況 console.log(foo); // 輸出undefined var foo = 2;
 // let 的狀況 console.log(bar); // 報錯ReferenceError let bar = 2;

不容許重複聲明：不容許在相同做用域內，重複聲明同一個變量；

 

2.const:

聲明一個只讀的常量。一旦聲明，常量的值就不能改變;

const一旦聲明變量，就必須當即初始化賦值，不能留到之後賦值;只聲明不賦值，就會報錯;

const的做用域與let命令相同：只在聲明所在的塊級做用域內有效;

 

3. 數組的解構與賦值

「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值；若是解構不成功，變量的值就等於undefined；

 let [a, b, c] = [1, 2, 3];

不徹底解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。這種狀況下，解構依然能夠成功

 let [x, y] = [1, 2, 3];
x // 1 y // 2 
let [a, [b], d] = [1, [2, 3], 4];
a // 1 b // 2 d // 4

 解構賦值容許指定默認值。

let [foo = true] = [];
foo // true 
let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

 

 4.對象的解構賦值

對象的解構與數組有一個重要的不一樣：對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

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

對象的解構賦值的內部機制，是先找到同名屬性，而後再賦給對應的變量。真正被賦值的是後者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa" foo // error: foo is not defined

 

 5.字符串的解構賦值：字符串被轉換成了一個相似數組的對象。

const [a, b, c, d, e] = 'hello';
a // "h" b // "e" c // "l" d // "l" e // "o"

let {length : len} = 'hello';
len // 5

 

6.函數參數的解構賦值

[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]

函數參數的解構也能夠使用默認值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0]

 

7.解構賦值的用途

（1）交換變量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

（2）從函數返回多個值

函數只能返回一個值，若是要返回多個值，只能將它們放在數組或對象裏返回。有了解構賦值，取出這些值就很是方便。

// 返回一個數組 
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
 // 返回一個對象 
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

 （3）函數參數的定義

解構賦值能夠方便地將一組參數與變量名對應起來。

// 參數是一組有次序的值 function f([x, y, z]) { ... }
f([1, 2, 3]);
 // 參數是一組無次序的值 function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取 JSON 數據

解構賦值對提取 JSON 對象中的數據，尤爲有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number); // 42, "OK", [867, 5309]

 （5）函數參數的默認值

指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config } = {}) {
  // ... do stuff };

 （6）遍歷 Map 結構

const 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

// 獲取鍵名 for (let [key] of map) {
  // ... }
 // 獲取鍵值 for (let [,value] of map) {
  // ... }