【前端高频面试】

面试题持续更新中。。。面试总结

ES6新特性

1. 新增块级作用域（let、const）

Var

变量提升，函数内声明变量函数内有效，函数外部声明全局作用域有效，可重复声明，可在声明前使用。

let、const

不存在变量提升

存在暂时性死区（声明语句前不能被访问或赋值）

作用域是块级作用域{}

同一作用域内不重复声明,先声明再使用（var相反）

Const声明的变量是常量不能再次赋值

let和const的区别： let 声明的变量可以被重新赋值，const 声明的常量不能被重新赋值。

定义了新增定义类的语法糖（class）

Constructor\methods、Class继承（extend\super）

2. 新增了一种基本数据类型（symbol）

独一无二的值

3. 新增解构赋值

从数组或对象中取值，再给变量赋值

4. 新增函数参数默认值

5. 给数组新增了API

1. Array.from()：将类数组对象或可迭代对象转换为数组。
2. Array.of()：根据传入的参数创建一个新的数组。

6. 对象和数组新增了扩展运算符

7. Promise

     1. 解决回调地狱的问题

     2. 自身有all,reject,resolve,race方法

     3. 原型上有then,catch

     4. 把异步操作队列化

     5. 三种状态：pending（初始状态），fulfilled（操作成功），rejected（操作失败）

8. 新增模块化（import、export）

9. 新增map、set数据结构

    1. Set就是元素不重复

    2. Map 以键值对形式存储，key类型不受限制

10. 新增generator函数

11. 新增箭头函数

CSS动画和过渡

CSS过渡（transition）是指在元素从一种样式逐渐变化为另一种样式的过程中，添加一些过渡效果，使得变化更加平滑自然。

常用的时间函数有：linear（匀速过渡）、ease（先加速后减速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速再加速）等。

CSS动画（animation）是指通过关键帧（keyframe）来定义元素的动画效果。

animation: animationName duration timing-function delay iteration-count direction fill-mode play-state;

animationName表示动画的名称，duration表示动画的持续时间，timing-function表示动画的时间函数，delay表示动画的延迟时间，iteration-count表示动画的循环次数，direction表示动画的播放方向，fill-mode表示动画结束后元素的样式，play-state表示动画的播放状态。

常用的播放方向有：normal（正向播放）、reverse（反向播放）、alternate（正反交替播放）等。

常用的填充模式有：none（不填充）、forwards（保留最后一帧的样式）、backwards（使用第一帧的样式）等。

常用的播放状态有：running（播放状态）、paused（暂停状态）。

animation和transition使用场景

1. transition主要用于简单的过渡动画效果，例如当元素的某个属性（如颜色、大小、位置等）发生变化时，可以通过transition属性来实现平滑的过渡效果。它的优点是使用简单，代码量少，适合实现简单的动画效果。但是对于复杂的动画效果，transition可能无法满足需求。

    2. animation则适用于复杂的动画效果，例如可以通过定义关键帧（@keyframes）来实现元素的多个状态之间的过渡效果，可以控制动画的每一帧，实现更加精细的动画效果。它的优点是可以实现复杂的动画效果，但使用起来相对复杂，需要定义多个关键帧，控制多个属性，代码量相对较大。