前端培训-初级阶段（13,18）

我们要讲什么

1. 上下左右居中的几种实现。

2. ECMAScript核心语法结构

上下左右居中的几种实现

这个问题比较常见，咱们也简单说说吧。其实分为两种，一种行内结构，一种块结构。

行内结构居中

行内结构可以理解为文本，文本居中可以通过设置父元素的属性来实现。

1. text-align: center 水平居中

2. line-height: height; 垂直居中。行高和高设置为一样的值。

3. vertical-align: middle; 垂直居中。这个属性是用来设置对齐方式的，通过伪元素构建一个 height:100% 然后设置居中就ok了。

块级结构居中

块结构的特点，占满整行，所以设置要点是设置自己的属性来实现。

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 标准的实现和扩展。

这一课我真的觉得ruanyifeng大佬的就很棒 ，这里我先大体介绍一下，之后有时间会开单张来介绍一些常规用法。如：Array数组对象的forEach、map、filter、reduce --之前写的一篇，这样的章节。

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

1. let/var/const 的区别

2.字符串扩展

a.repeat(n)，重复字符串多少次，

b.padStart(n,s)，padEnd(n,s)，字符串补全长度的功能,比如前面补 0

c.模板字符串 反引号标识

d.标签模板，其实也是一个偶然机会碰到这个东西的。有个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];
}

c.rest 参数 ，代替 arguments 对象

d.=>函数

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，这本书一定不要错过