前端培訓-初級階段（1三、18）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

先來講一下爲何這節課跳課了，不是說中間的咱們不講了，並且上節課主講人講了 18，沒辦法我這節課補一下。

收集上幾周的反饋，廣泛以爲內容多的超乎想象，因此以後的培訓計劃會根據內容適當調整。

咱們要講什麼

1. 上下左右居中的幾種實現。
2. ECMAScript核心語法結構

上下左右居中的幾種實現

這個問題比較常見，我們也簡單說說吧。其實分爲兩種，一種行內結構，一種塊結構。

行內結構居中

行內結構能夠理解爲文本，文本居中能夠經過設置父元素的屬性來實現。

1. text-align: center 水平居中
2. line-height: height; 垂直居中。行高和高設置爲同樣的值。
3. vertical-align: middle; 垂直居中。這個屬性是用來設置對齊方式的，經過僞元素構建一個 height:100% 而後設置居中就ok了。

塊級結構居中

塊結構的特色，佔滿整行，因此設置要點是設置本身的屬性來實現。2019年6月24日10:15:41-補個demo

1. margin: auto; 水平居中，自動分配剩餘空間，可是正常狀況下，只有水平方向有剩餘空間。
2. position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中，這個方法有個要點，就是定寬定高，否則就佔滿了。固然還有要 margin:auto 來分配剩餘空間才能夠。
3. position:absolute;left:50%;margin-left:負一半寬度;top:50%;margin-top:負一半寬度 垂直水平居中，left 是基於父級來設置的，因此須要用 margin 再拉回來，也須要定寬高。
4. position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); 垂直水平居中,這個方案是上一個方案的優化版本，translate是基於本身的寬高來現實，因此能夠用 -50% 來拉回。

特殊的盒子實現居中

這個東西就是說一個特殊模型，因此他自身就支持完成水平垂直居中

1. table-cell vertical-align: middle;text-align:center
2. flex 就不用多說了吧，不懂的去看看上節課。還不懂就要挨錘了。
3. grid margin: auto;

ECMAScript 核心語法結構

ECMAScript 是一種由 Ecma國際（前身爲歐洲計算機制造商協會，英文名稱是 European Computer Manufacturers Association）經過 ECMA-262 標準化的腳本程序設計語言。能夠理解爲是JavaScript的一個標準，但實際上 JS 是 ECMA-262 標準的實現和擴展。

版本	時間	簡述
ECMAScript 1	1997年06月	首版
ECMAScript 2	1998年06月	格式修正，以使得其形式與ISO/IEC16262國際標準一致
ECMAScript 3	1999年12月	強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數輸出的格式化及其它改變
ECMAScript 4	未完成	更明確的類的定義，命名空間等等。2004年6月歐洲計算機制造商協會發表了ECMA-357標準，它是ECMAScript的一個擴延，它也被稱爲E4X（ECMAScript for XML）
ECMAScript 5	2009年12月	首版
ECMAScript 2015 (ES6/ES2015)	2015年6月17日	截止發佈日期，JavaScript的官方名稱是ECMAScript 2015，Ecma國際意在更頻繁地發佈包含小規模增量更新的新版本，下一版本將於2016年發佈，命名爲ECMAScript 2016。從如今開始，新版本將按照ECMAScript+年份的形式發佈。
ECMAScript 2016 (ES7/ES2016)	2016年
ECMAScript 2017 (ES8/ES2017)	2017年
ECMAScript 2018 (ES9/ES2018)	2018年
ECMAScript 2019	2019年

這一課我真的以爲 ruanyifeng大佬的就很棒 ，這裏我先大致介紹一下，以後有時間會開單張來介紹一些常規用法。如：Array數組對象的forEach、map、filter、reduce --以前寫的一篇，這樣的章節。

下面的介紹不全，只是其中的一部分

1. let/var/const 的區別

   關鍵字	綁定到頂層對象（特殊狀況）	變量提高	塊級做用域(if、for)	描述
   var	yes	yes	no	會變量提高，可屢次賦值，無塊級概念（function、try 的塊有）
   let	no	no	yes	只可聲明一次，可屢次賦值
   const	no	no	yes	只能夠賦值一次

   
   
   

2. 字符串擴展

   1. repeat(n)，重複字符串多少次，
   2. padStart(n,s)，padEnd(n,s)，字符串補全長度的功能,好比前面補 0
   3. 模板字符串 反引號標識

   4. 標籤模板，其實也是一個偶然機會碰到這個東西的。有個prompt(1) to win，作這個題的時候發現了這種辦法。

      alert`123`
           // 等同於
           alert(123)

3. 正則的擴展

4. 數值的擴展

   1. isNaN() ，NaN是惟一一個本身不等於本身的。

5. 函數的擴展

   1. 默認值 ，fucntion(a = 1){}

   2. 默認值解構，

      // 寫法一
      function m1({x = 0, y = 0} = {}) {
        return [x, y];
      }
      
      // 寫法二
      function m2({x, y} = { x: 0, y: 0 }) {
        return [x, y];
      }

   3. rest 參數 ，代替 arguments 對象

   4. => 函數

      1. ()=>console.log(1) 等同於 function(){return console.log(1)}
      2. ()=>{console.log(1)} 等同於 function(){console.log(1)}
      3. this對象綁定爲定義時候的對象
      4. 不能夠看成構造函數
      5. 不能夠使用arguments對象

6. 數組的擴展

   1. 擴展運算符，...[1,2,3]分開插入，能夠用來替代 apply()
   2. Array.from()，將類數組轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。
   3. Array.of() 用來修復new Array(3)的異常
   4. find() 和 findIndex()，查找元素或者下標
   5. fill() 填充一個數組
   6. entries()，keys() 和 values() 遍歷
   7. includes() 判斷是否存在，用來替代~indexOf
   8. flat()，flatMap() 將嵌套的數組「拉平」，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。還能夠傳入深度
7. 對象的擴展
8. Proxy
9. Promise 對象
10. async 函數

課後做業（能寫幾種寫幾種，越多越好）

1. 一行居中，多行居左，怎麼實現？（水平居中）
2. 一行居中，多行居中，怎麼實現？（垂直居中）
3. 實現一個重複字符串的函數。

往期內容

1. 前端培訓-初級階段（1 - 4）
2. 前端培訓-初級階段（5 - 8）
3. 前端培訓-初級階段（9 - 12）

後記

這裏記錄一下主講人文章，這周有點忙，文章補的晚了。順便補一下大哥給的目錄。

參考資料

1. ECMAScript --百度百科
   介紹了一些歷史
2. JavaScript 實現 --w3school.com.cn
   介紹了JS由什麼構成，值得一看
3. JavaScript 高級教程 --w3school.com.cn
   一些語法基礎
4. ECMAScript 6 入門 --ruanyifeng若是你想學 ES6，這本書必定不要錯過