【前端面试课程重点总结】

最新推荐文章于 2024-07-15 21:11:11 发布

度春秋

最新推荐文章于 2024-07-15 21:11:11 发布

阅读量264

点赞数

文章标签：面试前端职场和发展

本文链接：https://blog.csdn.net/weixin_44934478/article/details/124761000

版权

长文警告⚠⚠⚠
题目引出：

typeof能判断哪些类型？
何时使用===何时使用==？
window.onload和DOMContentLoaded的区别？
JS创建10个<a>标签，点击的时候弹出对应的序号
手写节流throttle、防抖debounce
Promise解决了什么问题？

以上题目的考点分析：

JS变量类型
强制类型转换
页面加载过程
JS作用域
性能、体验优化
JS异步

思考：

拿到一个面试题，你第一时间看到的是什么？
如何看待网上搜出来的永远做不完的题海？
如何对待接下来遇到的面试题？

如何搞定所有面试题？

回答：

拿到一个面试题，第一时间看到–>考点
如何看待做不完的题海->不变应万变(题可变，考点不变)
如何对待接下来的题目->题目到知识点，再到题目

前端知识体系

仅针对本课程

在这里插入图片描述

高效学习三部曲：

找准知识体系；
可以训练；
及时反馈

知识体系：结构化的知识范围
涵盖所有知识点；结构化、有组织、易扩展

从哪些方面梳理？

W3C标准
ECMA 262标准
开发环境
运行环境

知识体系：

CSS基础知识(布局、移动端响应式、动画等)
JS基础语法(变量、原型、作用域、异步、模块化)
JS-Web-API(DOM、BOM、事件、ajax、存储)
开发环境(git、webpack、调试)
运行环境(页面加载过程、性能优化、浏览器安全及漏洞)
http协议(状态码、restful api、headers、缓存策略)

面试准备：

什么是面试？

经过组织者精心设计
以交谈和观察为主要手段
评价知识、能力和经验，综合素质

你的简历如何被HR拿到？

员工内推
猎头推荐
hr收集（主动搜索、接收邮件）

面试流程：

一面（考察基础知识）
二面（交叉面试|业务场景、项目经验）–始于技术知识，终于项目经验
三面（技术之外的话题，leader面）
hr面试

校招和社招的区别？

校招看重基础知识和能力，主要在一面
社招看重经验，主要在二面（基础知识要过关）
社招，工作时间越长，越偏重经验

JD是什么？

JD是用人单位发布的招聘信息
职位描述
岗位要求

从JD中能看到什么？

工作内容
技术栈
经验要求

不要过于在意JD

如何写简历？

简历包含的内容
简历中需要注意的问题
案例

划重点

简历就像高考作文——阅卷时间非常短
内容整洁
直击重点，表现出自己的优势

简历包含的内容

个人信息 |必备：姓名、性别、电话、邮箱、籍贯、年龄
教育经历 |最高学历；学校、专业、入学和毕业时间
专业技能 |表现出自己的核心竞争力；内容不要太多（3、5条即可）；太基础的不要写，例如会使用vscode
工作经历 |如实写；写明公司，职位，入职离职时间即可；若有空窗期，如实写明即可
项目经历 |写2-4个具有说服力的项目（视工作时间）；项目描述，技术栈，个人角色；技巧：可以把别人的项目写上，只要你能hold住
博客和开源 |有博客或者开源作品，会让你更有竞争力；切记：需要真的有内容，不可临时抱佛脚；可以从现在开始，慢慢积累，为以后的工作做准备（提升个人竞争力）

注意事项：

界面不要太花哨，简洁明了即可
注意用词，精通、熟练等慎用
不可造假，会被拉入黑名单（项目经历那里，不是造假！！）

面试前的注意事项：

能加班吗？——能！除非你特别自信，可以找到其他机会
不要挑战面试官，即使他错了
遇到不会的问题，要表现出自己积极的一面

其他情况：

参考 https://www.imooc.com/article/300475

HTML&CSS面试题

HTML面试题

如何理解HTML语义化？
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
- display:block/table; 有div h1~h6 table ul ol p 等
- display:inline/inline-block; 有 span img input button 等

CSS面试题

分析知识模块：

布局
- 盒子模型的宽度如何计算
- margin纵向重叠的问题
- margin负值的问题
- BFC理解和应用
- float布局的问题，以及clearfix
- flex画色子
定位
- absolute和relative分别依据什么定位
- 居中对齐有哪些实现方式
图文样式
- line-height的继承问题
响应式
- rem是什么
- 如何实现响应式
CSS3
- 关于CSS3动画

盒模型宽度计算

在这里插入图片描述

首先需要知道offsetWidth=(内容宽度+内边距+边框)，无外边距
因此答案是 100+ 10x2 + 1x2 = 122 px；
补充：如果让offsetWidth等于100px，该如何做？

设置 box-sizing: border-box;

//设置此项后，width就包括了内容宽度+内边距+边框

margin 纵向重叠问题

在这里插入图片描述

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠
答案是 15px

margin负值问题

对margin的top left right bottom 设置负值，有何效果？
- margin-top和margin-left负值，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响

BFC理解与应用

什么是BFC?如何应用？

什么是BFC?
- Block format context , 块级格式化上下文
- 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

float 不是none
position是absolute或fixed
overflow不是visible
display是flex / inline-block 等

BFC的常见应用

清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
       
            background-color: #f1f1f1;
        }
        .left {
       
            float: left;
        }
        .bfc {
       
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

未设置BFC之前：（图片设置float后，跑到了容器的外面，脱离了标准文档流）

在这里插入图片描述

设置BFC之后：

在这里插入图片描述

float布局

如何实现圣杯布局和双飞翼布局
- 圣杯布局和双飞翼布局的目的
  - 三栏布局，中间一栏最先加载和渲染（内容最重要）
  - 两侧内容固定，中间内容随着宽度自适应
  - 一般用于PC网页
    
    圣杯布局：
    
    采用设置padding的方式为左右留白
    
    双飞翼布局：
    
    采用设置margin的方式为两边留白
- 圣杯布局和双飞翼布局的技术总结
  - 使用float布局
  - 两侧使用margin负值，以便和中间内容横向重叠
  - 防止中间内容被两侧覆盖，一个用padding 一个用margin

手写clearfix

/* 手写 clearfix */
.clearfix:after {
     
    content:'';
    display: table;
    clear: both;
}
.clearfix {
     
    *zoom: 1; /* 兼容IE低版本，可写可不写 */
}

flex布局

flex实现一个三点的色子

常用语法回顾：（必须掌握）
- flex-direction 主轴方向（横向/纵向）
- justify-content 主轴对齐方式（从开始对齐/从结束对齐）
- align-items 交叉轴(与主轴垂直的轴)对齐方式（从开始对齐/从结束对齐/居中对齐）
- flex-wrap 是否换行
- align-self 子元素在交叉轴的对齐方式（从开始对齐/从结束对齐/居中对齐）

CSS - 定位

absolute和relative分别依据什么定位

relative 依据自身定位
absolution 依据最近一层的定位元素定位
定位元素:
- absolute relative fixed
- body

示例代码如下：

<title>absote relative 定位问题</title>
<style type="text/css">
        body {
         
            margin: 20px;
        }
        .relative {
         
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            
            top: 20px;
            left: 50px;
        }
        .absolute {
         
            position: absolute;
            width: 200px;
            height: 100px;
            border: 1px solid blue;

            top: 20px;
            left: 50px;
        }
    </style>
</head>

<body>
    <p>absolute 和 relative 定位问题</p>
    <div class="relative">
        <div class="absolute">
            this is absolute
        </div>
    </div>
</body>

居中对齐有哪些实现方式
- 水平居中
  - inline 元素：text-align:center
  - block元素：margin:auto
  - absolute元素：left:50% + margin-left 负值
- 垂直居中
  - inline 元素：line-height 的值等于height值
  - absolute 元素：top: 50% + margin-top 负值(水平居中的话，必须知道宽高)
  - absolute 元素：transform(-50%,-50%)
  - absolute 元素：top,left,bottom,right = 0 + margin:auto（既要保证浏览器兼容性，又要保证子元素的尺寸是未知的情况下用此方法）

CSS - 图文样式
- line-height 如何继承
  - 写具体数值，如30px，则继承该值（比较好理解）
  - 写比例，如 2/1.5 ，则继承该比例（比较好理解）
  - 写百分比，如200%，则继承计算出来的值（考点）
  答案是 40px
- rem 是什么？
  
  rem是一个长度单位
  - px，绝对长度单位，最常用
  - em，相对常用单位，相对于父元素，不常用
  - rem，相对长度单位，相对于根元素，常用于响应式布局
- 响应式布局的常用方案
  - media-query，根据不同的屏幕宽度设置根元素font-size
  - rem，基于根元素的相对单位
- CSS - 响应式 - vw/vh
  - rem 的弊端
    
    阶梯性
  - 网页的视口尺寸
    - window.screen.height //屏幕高度
    - window.innerHeight //网页视口高度
    - document.body.clientHeight //body高度
  - vw/vh
    - vh 网页视口高度的1/100
    - vw 网页视口宽度的1/100
    - vmax 取两者最大值；vmin 取两者最小值
      
      window.innerHeight === 100vh
      
      window.innerWidth === 100vw

JS

变量类型和计算
- 题目
- 知识点
- 解答
值类型和引用类型的区别

值类型

引用类型

深入分析：

值类型一般存储在栈中（图中key表示变量名，value表示变量值）

在计算机中变量在存储时栈和堆是同时存在的：
- 栈是从上往下存放
- 堆是从下往上存放
- 对于引用类型，是把变量的内存地址存在栈中，然后这个内存地址指向堆中的内存变量
  
  例子中b.age=21就改变了堆中的val值，所以导致a.age也会相应改变（a也指向内存地址1）
那为什么需要采用这种方式来进行变量赋值呢？

值类型占用的存储空间较少，直接赋值是没问题的；

而引用类型就不同了，可能会非常大，直接放到栈中，

会导致存储地址太大不好管理，第二会复制时会导致复制过程非常慢。因此，计算机采用此存储机制来作区分
常见值类型

注意：（用const定义一个常量时必须赋值，否则报错）

undefined、数字、字符串、布尔值以及Symbol(ES6中的)
常见引用类型

对象、数组、null以及函数
typeof 运算符
- 识别所有值类型
- 识别函数
- 判断是否是引用类型（不可再细分）

在这里插入图片描述

只能识别出来是不是引用类型，不能识别出具体的哪一个引用类型

手写深拷贝

/**
 * 深拷贝
 */

let result = {
     };

const obj1 = {
     
  age: 18,
  name: "xiaodu",
  address: {
     
    city: "上海",
  },
  arr: ["a", "b", "c"],
};

// const obj2 = obj1;
const obj2 = deepClone(obj1)
obj2.address.city = '北京'
obj2.arr[0] = 'd'
//console.log(obj1.address.city); // 北京
console.log(obj1.arr[0]); // a

//现在需要实现的是 改变obj2的值不会影响到obj1的值
/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 **/
function deepClone(obj = {
      }) {
     
  if (typeof obj !== "object" || obj == null) {
     
    //如果不是数组和对象或者是null,则直接返回obj
    return obj;
  }

  //初始化返回结果
  let result;
  if (obj instanceof Array) {
     
    result = [];
  } else {
     
    result = {
     };
  }

  for (let key in obj) {
     
    //保证 key不是原型的属性
    if (obj.hasOwnProperty(key)) {
     
      //递归调用！！！
      result[key] = deepClone(obj[key]);
    }
  }

  //返回结果
  return result
}

变量计算—类型转换（注意某些坑）
- 字符串拼接
  
  注意数字和字符相加时会返回字符串（只要出现字符串了，此时的+就是代表字符串拼接符了）
- ==
  
  ==会出现很多不可预测的情况，此时我们只需要记住：
- if语句和逻辑运算
  - truly 变量：!!a === true 的变量
  - falsely 变量：!!a === false 的变量
    
    逻辑判断
typeof 能判断哪些类型？
- 识别所有值类型
- 识别函数
- 判断是否是引用类型（不可再细分）
何时使用==,何时使用===?

除了 == null 之外，其他一律用===
值类型和引用类型的区别？
手写深拷贝
- 注意判断值类型和引用类型
- 注意判断是数组还是对象
- 递归

原型和原型链

题目
- 如何准确判断一个变量是否是数组？
- 手写一个简易的jQuery，考虑插件和扩展性
- class 的原型本质，怎么理解？
知识点
- class 和继承
- 类型判断 instanceof
- 原型和原型链
class
- constructor
- 属性
- 方法

class Student {
   
    constructor(name,number) {
   
        this.name = name
        this.number = number
    }
    sayHi(){
   
        console.log(`你好！我的姓名是${
     this.name},学号是${
     this.number}`);
    }
}


//通过类声明对象/实例
const zhangsan = new Student('张三',1001)
console.log(zhangsan.name)
zhangsan.sayHi()

控制台打印结果如下：

在这里插入图片描述

继承
- extends
- super
- 扩展或重写方法

//父类
class People {
   
    constructor(name) {
   
        this.name

最低0.47元/天解锁文章

度春秋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【前端面试课程重点总结】

前端知识体系如何写简历？HTML&CSS 面试题CSS面试题JS原型和原型链作用域和闭包异步和单线程JS 异步 - 进阶从JS基础知识到JS Web APIajax存储http 面试题https关于开发环境运行环境
复制链接

扫一扫