这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战。

一、ES6新增特性–箭头函数

（一）优点

1、箭头函数简化了创建函数的代码

2、箭头函数的创建都是函数表达式方式（变量=函数）

1.如果形参只有一个，小括号可以不加

2.函数体中只有一句话，并且是return xxx的，可以省略大括号和return等

const fn = n => n*10;
fn(10);

1.ARFGUMENTS 箭头函数中没有ARFGUMENTS，但是可以基于剩余运算符获取实参集合，而ES6中是支持给形参设置默认值的

2.this 箭头函数中没有自己的this,他里面用到的this,都是自己所处上下文的this（在真实项目中，一旦涉及this问题，箭头函数慎用）

1、clientWidth / Height 定义：盒子可视区域的宽高（内容宽度+左右 padding ）

特点:

1.内容溢出与否对其无影响

2.获取的结果是没有单位的(其余的盒模型属性也是)

3.获取的结果是整数,它会自己进行四舍五入(其余的盒模型属性也是)

1、clientLeft / Top 定义：盒子边框大小

box.clientLeft:获取盒子左边框的大小

box.clientTop:获取盒子上边框的大小

3、盒子模型的应用

（1）获取当前页面区域高度

注意: documentElement在低版本浏览器下不兼容

（2）盒子居中

原理:(一屏幕的宽度-盒子的宽度）/2 === LEFT

1、offsetWidth/Height 定义：获取当前元素的总宽、高度--相当于在 client的基础上加上 border --盒子本身的宽高

2、offsetLeft/Top 定义：距离父参照物的左偏移/上偏移

特点与client系列一致

3、offsetParent

1、scrollWidth/Height

(1）在没有内容溢出的情况下，获取的结果和client是一样的

(2）在有内容溢出的情况下，获取的结果约等于真实内容的宽高（左/上PADDING+真实内容的宽度/高度)

2、scrollLeft/Top：竖向/横向滚动条卷去的高度