一、什么是ECMAScript，以及es6的誕生？
1997年 ECMAScript 1.0 誕生
1999年12月 ECMAScript 3.0誕生，它 是一個巨大的成功，在業界得到了廣泛的支持，它奠定了JS的基本語法，被其后版本完全繼承。直到今天，我們一開始學習JS，其實就是在學3.0版的語法
2000年的ECMAScript4.0是當下ES6的前身，但由於這個版本太過激烈，對ES3做了徹底升級，所以暫時被“和諧”了
2009年12月，ECMAScript5.0版正式發布。ECMA專家組預計ECMAScript的第五個版本會在2013年中期到2018年作為主流的開發標准。2011年6月，ES5.1版發布，並且成為ISO國際標准
2013年，ES6草案凍結，不再添加新的功能，新的功能將被放到ES7中；2015年6月，ES6正式通過，成為國際標准
二、es6語法：let和const
es6新增了let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
上面代碼在代碼塊之中，分別用let和var聲明了兩個變量。然后在代碼塊之外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這表明，let聲明的變量只在它所在的代碼塊有效
for循環相信大家都玩過。下面這種現象扭曲了我們塊級作用域的思想！如果將var改成let就可以了！
var變量的一個例子：
變量i是var命令聲明的，在全局范圍內都有效，所以全局只有一個變量i。每一次循環，變量i的值都會發生改變，而循環內被賦給數組a的函數內部的console.log(i)，里面的i指向的就是全局的i。也就是說，所有數組a的成員里面的i，指向的都是同一個i，導致運行時輸出的是最后一輪的i的值，也就是 10
1 var a = [];
2 for (var i = 0; i < 10; i++) {
3 a[i] = function () {
4 console.log(i);
5 };
6 }
7 a[6]();
# 打印結果
10
let變量的一個例子：
如果使用let，聲明的變量僅在塊級作用域內有效，最后輸出的是 6
變量i是let聲明的，當前的i只在本輪循環有效，所以每一次循環的i其實都是一個新的變量，所以最后輸出的是6。你可能會問，如果每一輪循環的變量i都是重新聲明的，那它怎么知道上一輪循環的值，從而計算出本輪循環的值？這是因為 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();
# 打印結果：
6
三、不存在變量提升
var命令會發生”變量提升“現象，即變量可以在聲明之前使用，值為undefined。這種現象多多少少是有些奇怪的，按照一般的邏輯，變量應該在聲明語句之后才可以使用。
為了糾正這種現象，let命令改變了語法行為，它所聲明的變量一定要在聲明后使用，否則報錯。
// var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2;
上面代碼中，變量foo用var命令聲明，會發生變量提升，即腳本開始運行時，變量foo已經存在了，但是沒有值，所以會輸出undefined。變量bar用let命令聲明，不會發生變量提升。這表示在聲明它之前，變量bar是不存在的，這時如果用到它，就會拋出一個錯誤。
四、不允許重復聲明
let不允許在相同作用域內，重復聲明同一個變量。
// 報錯
function func() {
let a = 10;
var a = 1;
}
// 報錯
function func() {
let a = 10;
let a = 1;
}
因此，不能在函數內部重新聲明參數
function func(arg) {
let arg; // 報錯
}
function func(arg) {
{
let arg; // 不報錯，這里{}重新定義新的私有作用域
}
}
五、為什么需要塊級作用域？
ES5 只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。
第一種場景，內層變量可能會覆蓋外層變量。
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
上面代碼的原意是，if代碼塊的外部使用外層的tmp變量，內部使用內層的tmp變量。但是，函數f執行后，輸出結果為undefined，原因在於變量提升，導致內層的tmp變量覆蓋了外層的tmp變量。
第二種場景，用來計數的循環變量泄露為全局變量。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
上面代碼中，變量i只用來控制循環，但是循環結束后，它並沒有消失，泄露成了全局變量。
六、const命令
基本語法
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.
上面代碼表明改變常量的值會報錯
const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須立即初始化，不能留到以后賦值
const foo; // SyntaxError: Missing initializer in const declaration
上面代碼表示，對於const來說，只聲明不賦值，就會報錯
const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
七、變量的解構賦值
數組解構賦值，就是把數組元素的值按照順序依次賦值
解構變量就是賦值，用更少的代碼來解決更多的事情
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 </head> 9 <body> 10 <script> 11 // ==============一般的操作================ 12 // let arr = [11,22,55,444]; 13 // let a = arr[0]; 14 // let b = arr[1]; 15 // let c = arr[2]; 16 // let d= arr[3]; 17 // console.log(a,b,c,d) //11 22 55 444 18 19 // ===============升級版的操作============ 20 // let[a,b,c] = [88,55,77]; //解構賦值的目的就是縮減代碼，吧上面幾行顯示的用一行來替代 21 // console.log(a,b,c) //88 55 77 22 // 23 // let[a,b,c,[d]] = [88,55,77,100]; //會報錯 24 // let[a,b,c,[d]] = [88,55,77,[100]]; //左邊和右邊的格式定義成一樣的 25 // console.log(a,b,c,d) ; //88 55 77 100 26 // 27 // let obj={ 28 // al:"json", 29 // a2:23, 30 // a3:666 31 // }; 32 // let {aa,bb}=obj; 33 // console.log(aa,bb); //undified 34 35 36 let obj2={ 37 a5:"dddff", 38 "a4":"jggz", 39 a2:[11,22], 40 a3:666, 41 a1:'jaas' 42 }; 43 let {a1,a2,a3,a4,a5}=obj2; //注意格式是一致的，並且和里面的鍵對應 44 console.log(a2,a1,a3,a4,a5); //undified 45 </script> 46 </body> 47 </html>
八、數組的擴展
1、判斷數組當中是否存在某個數值 console.log(arr.indexOf(1000)) console.log(arr.includes(201)) 2、對數組的遍歷 forEach()：范圍比map廣，他能做的事情map不一定能做 map()：map能做的事情forEach一定能做 arr.forEach(function (value,index) { console.log(value); }) //也可以不用map,在forEach里面就能做操作，為了簡單用一個map也可以解決，具體見示例 var arr2 = arr.map(function (value,index) { return value+1 }) 3)對數組的過濾 var arr4 = arr.filter(function (value,index) { return value > 50 }) console.log(arr4);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>Title</title> 8 <script> 9 // var arr=[77,88,99,44]; 10 // //如果對數組進行循環，用for循環 11 // var arr2=[]; 12 // for (var i=0;i<arr.length;i++){ 13 // arr2.push(arr[i]+1); 14 // } 15 // console.log(arr2); 16 17 // =============================== 18 // var arr=[77,88,99,44]; 19 // //在es6中的循環如下，對里面的元素都加1 20 // arr.forEach(function (value,index,arr) { 21 // console.log(value);// 77 88 99 44 22 // console.log(index); //0 1 2 3 23 // }); 24 // var arr2=arr.map(function (value,index) { //map是一個循環生成一個新的數組 25 // return value+1 26 // }); 27 // console.log(arr2);//78 89 100 45 28 29 30 // //查詢一下90在不在arr里面,一般可用於判斷 31 // var arr2=[11,22,33,44]; 32 // console.log(arr2.indexOf(44)); //3 根據值取索引,如果有就顯示索引，沒有就顯示-1 33 // console.log(arr2.indexOf(1000)) ; //-1 根據值取索引,如果有就顯示索引，沒有就顯示-1 34 // 35 // console.log(arr2.includes(33)) ; // true 看包含不包含，如果包含返回true，不包含返回false 36 37 //============================================== 38 // let arr3=[11,22,33]; 39 // for (var i in arr3){ 40 // console.log(i) ; //打印的是索引 41 // console.log(arr3[i]); //打印值 42 // } 43 // for (var j of arr3) { 44 // console.log(j); //打印的是值 45 // } 46 47 // 過濾 ===================================== 48 arr = [51,2,14,845]; 49 // var arr4 = arr.filter(function (value,index){ 50 // console.log(value); 51 // if (value>50){ 52 // return value //[51, 845] 53 // } 54 // }); 55 // console.log(arr4) 56 57 var arr4 = arr.filter(function (value,index) { 58 return value>50 //和map一樣，一定要有個返回值 59 }) 60 console.log(arr4) 61 </script> 62 </head> 63 <body> 64 65 </body> 66 </html>