標籤：foreach ons 列印 添加 element for 按鈕 中括弧 靈活
一、let大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 公眾號：Web前端之巔
- 部落格園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
作用：與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);2、數組的解構賦值注意：
1、對象的解構賦值必須使用大括弧 {}2、大括弧裡面的變數名必須和obj裡面的屬性名稱相同
3、可以只定義一部分變數接收一部分的obj屬性，不需要全部接收。
數組沒有對象的數組名，但是有下標可以使用。所以這裡的變數名可以隨便起。
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>從零開始學 Web 之 ES6（三）ES6基礎文法一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
