ES6的小知識（前半部分）

一、let與const的使用

let：用來聲明一個變數，與var類似

1.用let聲明的變數，所聲明的變數只在命令所在的代碼塊內有效

1 function hander(){
2     let a = 10;
3     console.log(a); 
4 }
5 
6 hander();          //10
7 console.log(a);    //報錯未定義  

2.用let聲明的變數在域解析的時候是不會被提升的

3.let不允許在同一作用域下聲明已經存在的變數

4.let和var在for迴圈里的區別

//html代碼
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

//js代碼
//在var的情況下點擊五個button
var aBtns = document.getElementsByTagName('button');
var len = aBtns.length;
for(var i = 0; i < len; i++){
    aBtns[i].onclick = function(){
        console.log(i); //5,5,5,5,5
    }
}
//在let的情況下點擊五個button
var aBtns = document.getElementsByTagName('button');
var len = aBtns.length;
for(let i = 0; i < len; i++){
    aBtns[i].onclick = function(){
        console.log(i); //0，1,2,3,4
    }
}

另外在for迴圈語句里的let是父作用域，在迴圈體內是子作用域，他不屬於同一作用域，不會報錯

for(let i=0;i<5;i++){
  let i = 100;
  console.log(i); //100    
}

const：用來聲明一個常量，常量是不可以變化的

const同樣有let的前三條特點，另外他還有以下特點：

1.聲明的時候必須要賦值

2.聲明的常量儲存簡單的數據類型時候不可改變其值，如果存儲的是對象，那麼引用不可以被改變，至於對象裡面的數據如何改變，是沒有關係的

二、變數的結構賦值

變數的結構賦值：就是一種匹配模式，只要等號倆邊的模式相同，那麼左值的變數就可以被賦予對應的值

1.數組的結構賦值

let [a,b,c] = [1,2,3];
console.log(a,b,c);  //1,2,3

let [,,d] = [,,4];
console.log(d);      //4

let [y]  = [];
console.log(y);      //undefind

let [z = 1] = [];    //預設值
console.log(z);      //1 

2.對象的結構賦值

let {a,b} = {b:'1',a:'2'};
console.log(a,b);  //'2','1'

let {a:b} = {a:1};
console.log(a);    //報錯未定義
console.log(b);    //1

 3.其他基本類型的結構賦值

let [a,b,c,d] = '1234';
console.log(a,b,c,d);  //1,2,3,4

//註意：null和undefined是不能進行結構賦值的

三、數據結構Set

集合：集合是有一組無序並且唯一的項組成的，特點是key和value相同，沒有重覆的value

Es6增加了數據結構Set，他和數組相似，但是他裡面的成員都是唯一的，沒有重覆的值

首先創建一個Set集合

const s = new Set([1,2,3]);
console.log(s);  //Set(3)[1,2,3]

想查找Set的長度不是使用常規的length，他提供了一個屬性size查找他的長度

而且他也提供了很多方法，例如

set.add(value)　添加一個數據，返回的是Set集合本身，

set.delete(value)　刪除一個數據，返回一個布爾值，表示刪除是否成功，

set.has(value)　判斷一個值是否是Set 的成員，返回一個布爾值，

set.clear()　清楚Set里所有數據，沒有返回值

set.keys()　返回鍵名的遍歷器

set.values()　返回鍵值的遍歷器

set.entries()　返回鍵值對的遍歷器

set.foreach()　使用回調函數遍歷每個成員

const s = new Set([1,2,3]);
s.forEach(function(value,key,set){
   console.log(value + 'cher'); // 1cher,2cher,3cher
})
console.log(s)  //Set(3){1,2,3};遍歷完本身是沒有改變的

數組去重用Set集合是特別簡單的

四、數據結構Map

字典：是用來存儲不重覆的key的Hash結構，不同於集合Set的是字典使用的是鍵、值的形式存儲數據的

Map的鍵是可以為任意類型的值

首先創建一個Map

const map = new Map([
   ['a',1],
   ['b',2]  
])
console.log(map);  //Map(2){'a' => 1,'b' => 2}

想獲取Map的長度也是和Set一樣使用size屬性，他的方法沒有Set 的add(value)，多了倆個方法，其他都是一樣

1.map.set(key,value)　設置鍵值key對應的鍵值value，返回的是Map結構，如果key已經在Map中存在，那就覆蓋，否則就生成該鍵

2.map.get(key)　get方法讀取key對應的值，如果找不到key，返回undefined

註意：在使用Map過程中

Map.set(NaN,10).set(NaN,100);它只會添加後面一個

Map.set({},'a').set({},'b'); 它會添加倆個，因為鍵名是對象，地址不一樣

五、Symbol數據類型

Symbol表示獨一無二的值，它是JavaScript的第7種數據類型，它屬於基本數據類型

數據類型：null,undefined,number,boolean,string,object,Symbol

let s1 = Symbol();
let s2 = Symbol();

console.log(s1); //Symbol()
console.log(s1 === s2);  //false

Symbol是不能使用new的否則會報錯，因為他是基本數據類型，不是對象

Symbol接取一個字元串作為參數，表示對Symbol的描述，主要是為了在控制台顯示，或者轉為字元串的時候，比較容易區分

let s3 = Symbol('cher');

let s4 = Symbol('chun');

console.log(s3,s4);  //Symbol(chun)  Symbol(cher)

console.log(s3 == s4)  //false

Symbol的數據類型轉換：

//轉換為字元串
console.log(String(Symbol('chun'))) //Symbol(chun)
console.log(Symbol('cher').toString()) //Symbol(cher)

//轉換為布爾值
console.log(!!Symbol()); //true

//Symbol不可以轉換為數字，也不可以做任何運算

Symbol作為對象的屬性名

let s = Symbol('cher');
const obj = {};
obj[s] = 'helloWorld';

console.log(obj);    //{Symbol(cher):"helloWorld"}
console.log(obj[s]); //helloWorld

作為對象的屬性名，它不能被for...in迴圈遍歷，但也不是私有的屬性，可以通過Object.getOwnPropertySymbols方法獲得一個對象的所有Symbol屬性。

const s = {
  [Symbol()]:123,
  a:1,
  b:2
}
    
for(var i in s){
   console.log(i + '---' + s[i]);  //'a---1','b---2'
}
console.log(Object.getOwnPropertySymbols(s));            //[Symbol()]]
console.log(s[Object.getOwnPropertySymbols(s)[0]]);      //123