1.html+css相关

假设有五个 div, 怎么让他们轮流 background-color 变为红色

//使用requestAnimationFrame来实现动画
const divList = document.querySelectorAll('.box')

let curIndex = 4
function render(){
    divList[curIndex].style.backgroundColor = 'blue'
    curIndex = (curIndex+1)%5
    divList[curIndex].style.backgroundColor = 'red'

}
let lastTime = undefined
function loop(timestamp){
    if(lastTime===undefined || timestamp-lastTime>=1000){
        lastTime = timestamp
        render()
    }
    requestAnimationFrame(loop)
}
requestAnimationFrame(loop)

css的transform,transition和animation

transform描述了静态样式，没有动画效果
    scale() translate() skew() 
transition是一种样式到另一种样式的过渡效果，有动画效果的
    值包含：property duration timing-function delay
animation是动画,由@keyframes来描述每一帧的样式
    值包含：name duration timing-function delay iteration-count direction

flex布局

主轴：justify-content 控制主轴布局: center flex-start flex-end space-between space-around
副轴：align-iterms 控制副轴布局 center flex-start flex-end space-between space-around
flex-direction：设置谁是主轴的（水平方向或者垂直方向）
flex-wrap：是否换行
flex-grow: 空间变大时，撑开
flex-shrink: 空间不够时，收缩 
flex: 复合属性包含flex-grow flex-shrink flex-basis

怎么判断元素是否到达可视区域

元素的top偏离量 - 滚动容器的上移高度 <= 滚动容器的客户端高度，此时元素达到可视区域！
el.offsetTop - scroller.scrollTop <= scroller.clientHeight

clientHeight: content+padding
offsetHeight: content+padding+border+滚动条
scrollHeight: content+padding+溢出的部分

offsetTop: 元素距离父容器顶部的距离（px）
scrollTop: 父容器内容顶部上移的距离（px）

2.闭包的理解和应用

闭包是一种结构，在一个函数内部，定义一个访问内部变量的函数，我们可以通过这个内部函数来访问函数的内部变量，这种结构就是闭包。
之所以需要闭包，是因为JS里面没有块级作用域的，只有函数作用域。闭包其实就是构造出一个作用域。
应用：
       for (var i = 0; i < 10; i++) {
        setTimeout(_ => { console.log(i)}, 1000)
    }
    // 10个10
    //闭包
    for(var i=0; i<10; i++){
        (function(i){
            setTimeout(_ => { console.log(i)}, 1000)
        })(i)
    }
    // 0 1 2 3 4 5 6 7 8 9 
    //es6引入 let后，产生了块级作用域
    for (let i = 0; i < 10; i++) {
        setTimeout(_ => { console.log(i)}, 1000)
    }
    //0 1 2 3 4 5 6 7 8 9 

3.Set和Map的理解，WeakSet和WeakMap

Set : 存放不重复元素的集合
    add() delete() has() size
    支持forEach()遍历

Map : 比json对象响应速度更快，灵活性更强
    set(key,value) get(key) delete(key) clear() size
    支持forEach()遍历
    * Map要想转换成字符串，需要先转换为json对象

WeakSet和Set的区别在于:
    WeakSet存放的是对象引用，不能存基本数据类型
    WeakSet存放的是对象弱引用，JS的垃圾回收机制不会考虑WeakSet的引用，即当其他引用不再引用对象时，该对象会被垃圾回收机制回收！

WeakMap同理。

12.怎么使用户保持登陆状态

13.用原型链给字符串声明一个函数

14.一百个人循环报数，报到五的人就淘汰，最后剩下一个人，使用算法来实现

15.将一句英文字符串按大小写反转，并以空格进行逆序，如“I am a student”，输出"STUDENT A AM i"