es6經常使用語法（一）

let 和 const 命令

let 命令

• 只在let命令所在的代碼有效

let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊即{}內有效。

{
  let a = 1;
  var b = 2;
}
console.log(a) // ReferenceError: a is not defined.
console.log(b) // 2
複製代碼

• 不存在變量提高

var命令會發生「變量提高」現象，即變量能夠在聲明以前使用，值爲undefined。這種現象多多少少是有些奇怪的，按照通常的邏輯，變量應該在聲明語句以後纔可使用。

// var 的狀況
console.log(a); // 輸出undefined
var a = 2;

// let 的狀況
console.log(b); // 報錯ReferenceError
let b = 2;
複製代碼

• 暫時性死區

只要塊級做用域內存在let命令，它所聲明的變量就「綁定」這個區域，再也不受外部的

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let a;
}
複製代碼

• 不容許重複聲明

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

---

• const 命令

const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const實際上保證的，並非變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動。對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。但對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，const只能保證這個指針是固定的（即老是指向另外一個固定的地址），至於它指向的數據結構是否是可變的，就徹底不能控制了。所以，將一個對象聲明爲常量必須很是當心。

變量的解構賦值

• 數組的解構賦值

數組中提取值，按照對應位置，對變量賦值

let [a, b, c] = [1, 2, 3];
複製代碼

嵌套數組進行解構的例子

let [ , , x] = ["a", "b", "c"];
console.log(x) // c
let [head, ...end] = [1, 2, 3, 4];
console.log(head)  // 1
console.log(end) // [2,3,4]
複製代碼

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

let [x, y = 'b'] = ['a']; // x='a', y='b'
複製代碼

• 對象解構賦值

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

let { a, b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"
複製代碼

實際上面的寫法等於下面這個{ a, b }是 { a:a, b:b }的簡寫形式

let { a:a, b:b } = { a: 'aaa', b: 'bbb' };
console.log(a) // "aaa"
console.log(b) // "bbb"
複製代碼

對象的解構也能夠指定默認值。

var {a = 3} = {};
 console.log(a) // 3
 
 var {a, b = 2} = {x: 1};
 console.log(a) // 1
 console.log(b) // 2
複製代碼

• 函數參數的解構賦值

函數的參數使用解構賦值是平時最多見的用法。用法相似數組和對象結構賦值，包括默認值，很是好用。

function test([x = 5, y]){
  return x + y;
}

test([1, 2]); // 3
test([, 2]); // 7

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

test2({x: 3, y: 8}); // [3, 8]
test2({x: 3}); // [3, 0]
test2({}); // [0, 0]
test2(); // [0, 0]
複製代碼

數組和對象擴展運算符

擴展運算符（spread）是三個點（...），將一個數組或對象轉爲用逗號分隔的參數序列。

• 數組擴展運算符

console.log(...[1, 2, 3])
  // 1 2 3
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  //用於函數參數
  function push(array, ...items) {
    array.push(...items);
  }
  function add(x, y) {
    return x + y;
  }
  const numbers = [4, 38];
  add(...numbers) // 42
複製代碼

• 對象擴展運算符

關於屬性簡寫

//屬性簡寫
const a = 'a';
const b = {a};
console.log(b) // {foo: "bar"}
// 等同於
const b = {a: a};

//方法簡寫。
let c = {
 method() {
   return "Hello!";
 }
};
// 等同於
let c = {
 method: function() {
   return "test!";
 }
};
複製代碼

對象的擴展符用於從一個對象取值，至關於將目標對象自身的全部可遍歷的

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }
複製代碼

Symbol

---

ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型

let s = Symbol();
typeof s
// "symbol"
let a = Symbol('foo');
let a = Symbol('bar');
console.log(Symbol('test') == Symbol('test')) //fase
a // Symbol(foo)
b // Symbol(bar)

a.toString() // "Symbol(foo)"
b.toString() // "Symbol(bar)"
複製代碼

做爲屬性名的 Symbol

let mySymbol = Symbol();

// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';

// 第二種寫法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上寫法都獲得一樣結果
a[mySymbol] // "Hello!"
複製代碼

Set 和 Map 數據結構

---

• Set

ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
//數組去重
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
複製代碼

Set 實例的屬性和方法

• Set.prototype.constructor：構造函數，默認就是Set函數。
• Set.prototype.size：返回Set實例的成員總數。
• Set.prototype.add(value)：添加某個值，返回 Set 結構自己。
• Set.prototype.delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• Set.prototype.has(value)：返回一個布爾值，表示該值是否爲Set的成員。
• Set.prototype.clear()：清除全部成員，沒有返回值。

let a =new Set();
a.add(1).add(2).add(2);
// 注意2被加入了兩次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false
複製代碼

Set 遍歷操做

• Set.prototype.keys()：返回鍵名的遍歷器
• Set.prototype.values()：返回鍵值的遍歷器
• Set.prototype.entries()：返回鍵值對的遍歷器
• Set.prototype.forEach()：使用回調函數遍歷每一個成員

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
複製代碼

• Map

JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），可是傳統上只能用字符串看成鍵。這給它的使用帶來了很大的限制。

const m = new Map([['name','yzg'],['age',25]]);
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.has('name')  // true
m.get('age') //25
複製代碼

Map 遍歷操做

• Map.prototype.keys()：返回鍵名的遍歷器
• Map.prototype.values()：返回鍵值的遍歷器
• Map.prototype.entries()：返回鍵值對的遍歷器
• Map.prototype.forEach()：使用回調函數遍歷每一個成員