共计 3053 个字符，预计需要花费 8 分钟才能阅读完成。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
先来说一下为什么这节课跳课了，不是说中间的我们不讲了，而且上节课主讲人讲了 18，没办法我这节课补一下。
收集上几周的反馈，普遍觉得内容多的超乎想象，所以之后的培训计划会根据内容适当调整。
我们要讲什么
上下左右居中的几种实现。
ECMAScript 核心语法结构
上下左右居中的几种实现
这个问题比较常见，咱们也简单说说吧。其实分为两种，一种行内结构，一种块结构。
行内结构居中
行内结构可以理解为文本，文本居中可以通过设置父元素的属性来实现。
text-align: center 水平居中
line-height: height; 垂直居中。行高和高设置为一样的值。
vertical-align: middle; 垂直居中。这个属性是用来设置对齐方式的，通过伪元素构建一个 height:100% 然后设置居中就 ok 了。
块级结构居中
块结构的特点，占满整行，所以设置要点是设置自己的属性来实现。
margin: auto; 水平居中，自动分配剩余空间，但是正常情况下，只有水平方向有剩余空间。
position:fixed;top:0;right:0;bottom:0;left:0; 垂直水平居中，这个方法有个要点，就是定宽定高，不然就占满了。当然还有要 margin:auto 来分配剩余空间才可以。
position:absolute;left:50%;margin-left: 一半宽度 垂直水平居中，left 是基于父级来设置的，所以需要用 margin 再拉回来，也需要定宽高。
position:absolute;left:50%;top:50%;transform: translate(-50%,-50%); 垂直水平居中, 这个方案是上一个方案的优化版本，translate 是基于自己的宽高来现实，所以可以用 -50% 来拉回。
特殊的盒子实现居中
这个东西就是说一个特殊模型，所以他自身就支持完成水平垂直居中
table-cell vertical-align: middle;text-align:center
flex 就不用多说了吧，不懂的去看看上节课。还不懂就要挨锤了。
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 – 之前写的一篇，这样的章节。
下面的介绍不全，只是其中的一部分
let/var/const 的区别
关键字
绑定到顶层对象（特殊情况）
变量提升
块级作用域 (if、for)
描述
var
yes
yes
no
会变量提升，可多次赋值，无块级概念（function、try 的块有）
let
no
no
yes
只可声明一次，可多次赋值
const
no
no
yes
只可以赋值一次
字符串扩展
repeat(n)，重复字符串多少次，
padStart(n,s)，padEnd(n,s)，字符串补全长度的功能, 比如前面补 0
模板字符串 反引号标识
标签模板，其实也是一个偶然机会碰到这个东西的。有个 prompt(1) to win，做这个题的时候发现了这种办法。
alert`123`
// 等同于
alert(123)
正则的扩展
数值的扩展
isNaN()，NaN 是唯一一个自己不等于自己的。
函数的扩展
默认值，fucntion(a = 1){}
默认值解构，
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 写法二
function m2({x, y} = {x: 0, y: 0}) {
return [x, y];
}
rest 参数，代替 arguments 对象
=> 函数
()=>console.log(1) 等同于 function(){return console.log(1)}
()=>{console.log(1)} 等同于 function(){console.log(1)}
this 对象绑定为定义时候的对象
不可以当作构造函数
不可以使用 arguments 对象
数组的扩展
扩展运算符，…[1,2,3] 分开插入，可以用来替代 apply()
Array.from()，将类数组转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
Array.of() 用来修复 new Array(3) 的异常
find() 和 findIndex()，查找元素或者下标
fill() 填充一个数组
entries()，keys() 和 values() 遍历
includes() 判断是否存在，用来替代~indexOf
flat()，flatMap() 将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。还可以传入深度
对象的扩展
Proxy
Promise 对象
async 函数
课后作业（能写几种写几种，越多越好）
一行居中，多行居左，怎么实现？（水平居中）
一行居中，多行居中，怎么实现？（垂直居中）
实现一个重复字符串的函数。
往期内容
前端培训 - 初级阶段（1 – 4）
前端培训 - 初级阶段（5 – 8）
前端培训 - 初级阶段（9 – 12）
参考资料
ECMAScript – 百度百科 介绍了一些历史
JavaScript 实现 –w3school.com.cn 介绍了 JS 由什么构成，值得一看
JavaScript 高级教程 –w3school.com.cn 一些语法基础
ECMAScript 6 入门 –ruanyifeng 如果你想学 ES6，这本书一定不要错过
