大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、let
作用：與var類似, 用於聲明一個變量。
let和var的區別：
- 在塊作用域內有效
- 不能重復聲明
- 不會預處理, 不存在提升
<script type="text/javascript">
console.log(res); //不會預處理, 不存在提升，報錯
// 不能重復聲明
let res = 10;
let res = 10; // 報錯
</script>
應用：循環遍歷加監聽
我們先開看一個例子：
<body>
<button>測試1</button>
<button>測試2</button>
<button>測試3</button>
<script type="text/javascript">
let btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert(i);
}
}
</script>
</body>
我們分別點擊按鈕的時候，分別打印多少？
結果：打印的都是2。因為回調函數的寫法會進行覆蓋操作。如何解決？
方法一：使用閉包。
for (var i = 0; i < btns.length; i++) {
(function(){
btns[i].onclick = function () {
alert(i);
}
})(i);
}
這種方式相當於，每個回調函數有個自己的區間，各個區間互不干擾。而 let 正好有這個特性。
方法二：將 for循環的 var改為let即可。
二、const
作用：定義一個常量。
特點：不能修改，其它特點同let。
const uName = 'Daotin';
三、變量的解構賦值
理解：從對象或數組中提取數據, 並賦值給變量(多個)。
1、對象的解構賦值
之前我們要獲取一個對象的屬性，會定義變量然后接收對象的屬性值。
let obj = {name : 'kobe', age : 39};
let name = obj.name;
let age = obj.age;
console.log(name, age);
對象的解構賦值可以這樣做：
let {name, age} = obj;
console.log(name, age);
注意：
1、對象的解構賦值必須使用大括號 {}2、大括號里面的變量名必須和obj里面的屬性名相同
3、可以只定義一部分變量接收一部分的obj屬性，不需要全部接收。
2、數組的解構賦值
數組沒有對象的數組名，但是有下標可以使用。所以這里的變量名可以隨便起。
let arr = ['abc', 23, true];
let [a, b, c] = arr;
console.log(a, b, c);
注意：
1、數組的解構賦值必須使用中括號 []
如果只想取其中的某幾個值，那么變量可以使用逗號隔開。
let [,,a,,] = arr;
如果定義的變量個數比數組的個數多，多出來的變量的值為 undefined。
四、模板字符串
作用：簡化字符串的拼接。
注意：
1、模板字符串必須用 ``` ` 包含；
2、變化的部分使用${xxx}定義
let obj = {
name: 'anverson',
age: 41
};
// 我們之前拼接字符串用的是+
console.log('我叫:' + obj.name + ', 我的年齡是：' + obj.age);
// 使用模板字符串的方式
console.log(`我叫:${obj.name}, 我的年齡是：${obj.age}`);
五、對象的簡化寫法
如果有變量和對象的屬性名稱相同，之前的寫法是賦值操作：
let a = 1;
let b = 2;
let Obj = {
a: a,
b: b,
};
現在，如果變量和對象的屬性名稱相同，可以簡寫如下：
let a = 1;
let b = 2;
let Obj = {
a,
b,
};
對於對象的屬性，如果是個函數的話，也可以簡寫：
之前的寫法為：
let Obj = {
foo: function(){
//...
}
};
現在的寫法為：（去掉冒號和function）
let Obj = {
foo(){
//...
}
};
六、箭頭函數
作用：箭頭函數的作用主要是定義匿名函數。
有下面幾種情況的匿名函數都可以使用箭頭函數：
let foo = function () {};
// 轉換成箭頭函數
let foo = () => {};
//------------------------------
let Obj = {
foo: function () { }
}
// 轉換成箭頭函數
let Obj = {
foo: () => { }
}
基本語法（參數）：
1、匿名函數沒有參數：() 不能省略，占位作用。let foo = () => {};
2、只有一個參數：() 可以省略，也可以不省略。let foo = a => {};
3、多個參數，() 不能省略。let foo = (a,b) => {};
基本語法（函數體）：
1、函數體只有一條語句：可以省略{}，並且默認返回結果（不需要 return）。
let foo = (x, y) => x + y;
console.log(foo(1, 2));
2、函數體如果有多個語句, 需要用{}包圍，若有需要返回的內容，需要添加return。
let foo = (x, y) => {
console.log(x, y);
return x + y;
};
console.log(foo(1, 2));
箭頭函數的特點：
1、簡介
2、箭頭函數沒有自己的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候處在的對象就是它的this。（意思：箭頭函數的外層的是否有函數，如果有，箭頭函數的this就是外層函數的this，如果沒有，則為 window）
<script type="text/javascript">
let foo = () => {
console.log(this);
};
foo(); // window 對象
let Obj1 = {
bar() {
let foo = () => {
console.log(this);
};
foo();
}
};
Obj1.bar(); // Obj1 對象，箭頭函數外層有函數bar，bar里面的this是Obj1.
let Obj2 = {
bar: () => {
let foo = () => {
console.log(this);
};
foo();
}
};
Obj2.bar(); // window 對象，箭頭函數外層有函數bar，bar函數也是箭頭函數，bar的外層沒有函數，所以bar里面的this是window，所以foo里面的this也是window。
</script>
七、三點（可變參數）運算符
作用：
1、用來取代 arguments 但比 arguments 靈活,
arguments 是個偽數組，但是三點運算符是真數組，可以使用 forEach 等方法。
2、三點（可變參數）運算符只能是最后部分形參參數。 但是前面是可以有參數來占位的。
3、擴展運算符
let arr = [1, 6];
let arr1 = [2, 3, 4, 5];
arr = [1, ...arr1, 6];
console.log(arr); // [1,2,3,4,5,6]
console.log(...arr); // 1 2 3 4 5 6
語法：...數組名 ：表示遍歷數組的所有元素。
八、形參默認值
作用：當不傳入參數的時候默認使用形參里的默認值。
<script type="text/javascript">
//定義一個點的坐標
function Point(x = 12, y = 12) { // 形參的默認值
this.x = x;
this.y = y;
}
let p = new Point();
console.log(p);
let point = new Point(25, 36);
console.log(point);
</script>