一、ES6基礎
一、ECMAScript和JavaScript關係
JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標
准，但是JavaScript本身也已經被 Netscape 公司註冊為商標，後面的標準都由ECMA制定，取名ECMAScript。
那麼ES6這個版本引入的新內容較多，通常指JavaScript語言的下一個版本。
二、let命令
ES6 新增了let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內
有效。
var和let定義變量區別：
<script>
//var的作用域是函數級的(函數內部定義變量只能函數裏面使用)
// function showName()
// {
// var myName = "張學友";
// alert(myName + "歡迎您!"); //此處的myName為"張學友"
// }
// showName();
// alert(myName + "歡迎您!"); //此處會報錯,myName只能在showName函數中使用
//var的作用域是函數級的(在代碼塊中定義的變量可以在代碼塊之外使用)
// if(1==1)
// {
// var myName = "張學友";
// }
// alert(myName + "歡迎您!"); //此處可以運行
//let的作用域是代碼塊級別的
// if(1==1)
// {
// let myName = "張學友";
// }
// alert(myName + "歡迎您!"); //此處會報錯
//let不存在變量提升
// console.log(a); //報錯
// let a = "apple";
// console.log(b); //undefined
// var b = "banana";
</script>
var和let在循環計數時候的區別：
<script>
// for(var i = 1;i <= 10;i++)
// {
// //
// }
// alert(i); //此處會打印11,i在循環體內和循環體外都可以使用
//此時計數器的變量泄露成了全局變量
// for(let i = 1;i <= 10;i++)
// {
// //
// }
// alert(i); //此處會報錯,i只在循環體內有效,在循環體外無效
// 輸出十個11
// i是全局的,定時器代碼在循環之後發生,所以打印十個11
// for (var i = 1; i <= 10; i++) {
// setTimeout(function(){
// console.log(i);
// })
// }
//輸出1 2 3 4 5 6 7 8 9 10
for (let j = 1; j <= 10; j++) {
setTimeout(function(){
console.log(j);
})
}
</script>
循環綁定網頁元素事件中var和let的區別：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循環綁定按鈕事件</title>
</head>
<body>
<h2>點擊三個按鈕分別彈出1，2，3</h2>
<input type="button" class="myButton" value="第一個按鈕" />
<input type="button" class="myButton" value="第二個按鈕"/>
<input type="button" class="myButton" value="第三個按鈕"/>
</body>
</html>
<script>
//在此案例中i是全局的,點擊按鈕發生在循環之後,所以打印結果全部為4
// var list = document.getElementsByClassName("myButton");
// for(var i = 0;i < list.length;i++)
// {
// list[i].onclick = function(){
// alert(i+1);
// }
// }
//上述代碼不能打印1,2,3,而是打印4,需要採取JS閉包來解決此問題;
//閉包就是能夠讀取其他函數內部變量的函數
// var list = document.getElementsByClassName("myButton");
// for(var i = 0;i < list.length;i++)
// {
// list[i].onclick = (function(num)
// {
// return function(){
// alert(num);
// }
// })(i+1);
// }
//如果使用ES6中let關鍵字則不存在上面演示的問題
var list = document.getElementsByClassName("myButton");
for(let i = 0;i < list.length;i++)
{
list[i].onclick = function(){
alert(i+1);
}
}
</script>
三、const命令
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
<script>
// const PI = 3.14;
// PI = 3.15; //此處會報錯,const聲明的變量不能改變其值
//const一旦聲明變量，就必須立即初始化，不能留到以後賦值。
//const PI; //報錯
//const實際上保證的，並不是變量的值不得改動，
//而是變量指向的那個內存地址所保存的數據不得改動。
const arr = [];
arr.push('jack'); //可以執行
arr.push("rose"); //可執行
console.log(arr[0]);
console.log(arr[1]);
</script>
四、變量的解構賦值
1、數組的解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值
// let a = 1;
// let b = 2;
// let c = 3;
//上述代碼可以如下編寫(從數組中提取值，按照對應位置，對變量賦值)
// let[a,b,c]=[1,2,3];
數組解構賦值案例：
//let [a, [[b], c]] = [1, [[2], 3]]; //a=1,b=2,c=3
//let [ , , c] = ["jack", "rose", "mike"]; //c=mike
//let [x, , y] = [1, 2, 3]; //x=1,y=3
//let [head, ...tail] = [1, 2, 3, 4]; //head=1,tail=[2,3,4]
//let [x, y, ...z] = ['a']; //x=a,y=undefined,z=[]
解構不成功，變量的值就等於undefined：
//let [foo] = []; //解構不成功,foo=undefined
//let [bar, foo] = [1]; //bar=1,foo解構不成功foo=undefined
不完全解構：
左邊的模式只能匹配右邊的一部分，也可以解構成功：
let [x, y] = [1, 2, 3]; //x=1,y=2
字符串解構(將字符串當成一個數組)：
let [a, b, c, d, e] = 'hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
默認值：
解構賦值允許指定默認值
//let [foo = true] = []; //foo=true;
//let [x, y = 'b'] = ['a']; // x='a', y='b'
//let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
//let [x = 1] = [null]; //x=null(只有當一個數組等於undefined，默認值才會生效)
默認值可以引用解構賦值的其他變量，但該變量必須已經聲明
//let [x = 1, y = x] = []; // x=1; y=1
//let [x = 1, y = x] = [2]; // x=2; y=2
//let [x = 1, y = x] = [1, 2]; // x=1; y=2
//let [x = y, y = 1] = []; // ReferenceError: y is not defined
2、對象的解構賦值
解構不僅可以用於數組，還可以用於對象。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; //foo='aaa', bar='bbb'
以上代碼看上去和數組解構賦值沒有多大區別，但是：
（1） 數組解構中數組的元素是按次序排列的，變量的取值由它的位置決定；
（2） 對象解構中對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值 ;
如下：
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; //foo="aaa" bar= "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' }; //baz = undefined，解構失敗，值為undefined
對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量：
// 例一
let { log, sin, cos } = Math; //將Math對象的對數、正弦、餘弦三個方法，賦值到對應的變量上
// 例二
const { log } = console; //將console.log賦值到log變量,簡化代碼
log('hello') // hello
如果變量名與屬性名不一致，必須寫成下面這樣：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz = "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; //f = 'hello' l = 'world'
這實際上說明，對象的解構賦值是下面形式的簡寫
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
真正被賦值的是後者，而不是前者：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
//baz = "aaa" foo = error: foo is not defined
與數組一樣，解構也可以用於嵌套結構的對象 :
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
注意，這時p是模式，不是變量，因此不會被賦值。如果p也要作為變量賦值，可以寫成下面這樣。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
默認值：
let {x = 3} = {};
x // 3
let {x, y = 5} = {x: 1};
x // 1
y // 5
let {x: y = 3} = {};
y // 3
let {x: y = 3} = {x: 5};
y // 5
let { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
默認值生效的條件是，對象的屬性值嚴格等於undefined
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
注意點：
如果要將一個已經聲明的變量用於解構賦值，必須非常小心
// 錯誤的寫法
let x;
{x} = {x: 1};
上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊， 只有不將大括號寫在行首，才能解決
這個問題。
// 正確的寫法
let x;
({x} = {x: 1});
由於數組本質是特殊的對象，因此可以對數組進行對象屬性的解構。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr; //利用數組下標解構賦值
first // 1
last // 3
