JS部分

1. 如何判断array

array.isArray([]) // true
[] instanceof Array // true

2. typeof

typeof(null / undefined / [] / {}) // obj / undefined / obj / obj

3. && || ?? !等操作符相关

"123" || 1    // "123"
0 && 1        // 1 
0 || 1        //  1
!0            // true
!""           // true
undefined ?? 0 // 比较新的es标准
附带可考察 obj.?key

4. 浅拷贝, 深拷贝
   1. 引用指向的理解

   const obj = { val: 1 }
   const newObj = obj
   newObj.val = 2
   console.log(obj.val) // 2
   

   2. 如何避免1的情况

   1. 解构{...}
   2. object.assign()
   3. JSON.parse(JSON.stringify())
   

5. 闭包/ let不同于 var的升项理解

 for (var i = 1; i <= 5; i += 1) {
     setTimeout(() => {
         console.log(i)
     }, i * 1000)
 }

6. this 指向, vue项目里调用请求封装的回调 例子之后补一下

CSS

1. css 如何实现左侧固定 200px，右侧自适应的布局
   1. flex布局的, 考察flex-shrink, flex-grow, flex对width的影响

    .container {
        display: flex;
    }
    .left {
        width: 200px; // or flex-basis: 200px;
        border: 1px solid #000;
        flex-shrink: 0;
    }
    .body {
        border: 1px solid red;
        flex-grow: 1;
    }

2. 传统inline-block布局, 考察calc使用, 和display,

    .container {
        width: 100%;
    }
    .left {
        display: inline-block;
        width: 200px;
    }
    .body {
        display: inline-block;
        width: calc(100% - 200px);
    }

3. 接着2追问, 如果left加上border会怎么样, 如何处理, 考察盒子模型, box-sizing

    .container {
        width: 100%;
    }
    .left {
        display: inline-block;
        border: 1px solid #000;
        width: 200px;
    }
    .body {
        display: inline-block;
        width: calc(100% - 200px - 2px); // or .left box-sizing: border-box;
    }

2. 说说css常用的隐藏方式

   1. display: none;
   2. visibility: hidden;
   3. opacity: 0;
   4. 2 和 1 的区别: 元素占位;
   5. vue框架的话, 可在此追问v-if和v-show的区别; v-show => display实现

3. 对animation的了解

4. 常用的响应式布局手段

   1. @media
   2. rem ()
   3. vw vh

5. 对position的了解, 或者直接问6

   1. static: 默认值，无定位，top、right、bottom、left 不起任何作用relative: 相对定位
   2. relative: 相对定位
   3. absolute: 绝对定位，脱离文档流
   4. fixed: 脱离文档流，上下左右以浏览器视口为参照系
   5. sticky: relative 与 fixed 的结合体
   6. absolute追问, 或者直接问这个, 考察absolute定位的理解程度:
      1. 以下样式渲染出来的效果
      2. container-b加position: relative?
      3. container加position: relative?

html内为 div.container 包裹 div.container-b 包裹 div.child

.container {
    margin: 20px;
    padding: 20px;
    border: 1px solid red;
}

.container-b {
    padding: 20px;
    border: 1px solid blue;
}

.child {
    position: absolute;
    left: 0;
}

浏览器API

1. 图片懒加载原生实现
   1. 考察onScroll事件监听, clientHeight, scrollTop;
   2. 考察html内data-*属性应用;
   3. 追问onScroll频繁触发, 如何节流处理;
2. e.currentTarget e.target区别
3. DOM如何阻止事件默认行为
4. 前端如何实现文件上传, 如何限制上传文件大小, 名称等
5. 前端跨域解决

项目管理

1. 代码分支管理 merge, push, pull, rebase
2. 线上bug处理
3. 打包, 发版

其他

1. 优化经验
2. 技术博客
3. 印象比较深刻的技术调研与实现