前端常考面试题

HTML、CSS常考20道

1. 行内元素、块级元素以及非替换元素、替换元素的区别（🌟🌟🌟）

   行内元素与块级元素的区别：

   1）行内元素与块级元素直观上的区别

   ​ 行内元素会在一条直线上排列，都是同一行的，水平方向排列

   ​ 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

   2)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

   3)行内元素与块级元素属性的不同，主要是盒模型属性上

   4）行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

2. img的title和alt属性（🌟🌟）

   • title是全局属性，可以用于所有的html元素

3. meta标签的作用以及常用的meta标签（🌟🌟）

4. DOCTPE标签（🌟🌟🌟）

   • 标准模式、兼容模式

5. scrip标签的defer和async（推迟和异步属性）（🌟）

6. W3C盒模型和怪异盒模型（🌟🌟🌟）

   

   ​ 在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为

   ​ 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

   IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值)

7. 水平垂直居中的方法（还有只水平居中、只垂直居中）（🌟🌟🌟）

8. BFC（🌟🌟🌟）

   • BFC是什么

     BFC(Block formatting context)直译为”块级格式化上下文”

   • 触发条件

     1、float的值不是none。

     2、position的值不是static或者relative。

     3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

     4、overflow的值不是visible

   • 特性及作用

     解决

     1. 浮动元素的父元素高度坍塌
     2. 两栏自适应布局
     3. 外边距垂直方向重合

9. 清除浮动的方法（🌟🌟🌟）

       1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
       2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
       3. 使用after伪元素清除浮动（推荐使用）
       4. 使用before和after双伪元素清除浮动
   

10. position属性（绝对、相对、固定定位、粘性定位）（🌟🌟🌟）

11. CSS隐藏元素的方式（🌟🌟🌟）

    • 举例：display：none和visibility：hidden的区别（可以结合重排重绘说明）

12. Flex布局（🌟🌟🌟）

    • Flex容器和项目常见属性，举例：常用考察布局

    三个重要概念：轴，对齐，弹性

13. 双栏布局、三栏布局（每种布局掌握多种方法）（🌟🌟🌟）

14. 重排和重绘（🌟🌟🌟）

15. CSS选择器（🌟🌟）

    • 了解各个选择器的优先级
    • important属性

    ID选择器、标签选择器、类选择器、伪类选择器、属性选择器、结构选择器（6种）

16. CSS动画（难点，代码实现）（🌟🌟）

    • animation属性
    • transition属性

17. CSS实现三角形（手写实现）（🌟）

18. CSS Sprites（🌟🌟）

    • 原理和优势

19. CSS长度相关题：px、rem、em（🌟）

20. 伪类、伪元素（🌟）

JavaScript高频题

1. js数据类型（🌟🌟🌟）

   • 基本类型（6种，null，undefined比较像容易被问到，es6的symbol）

   • 引用类型（1种object）

     js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）

     1.Number类型

     Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。

     NaN:非数字类型。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。

     isNaN() 函数用于检查其参数是否是非数字值。

     isNaN(123) //false isNaN(“hello”) //true

     2.String类型

     字符串有length属性。

     字符串转换：转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）；toString()方法（null,defined没有toString()方法）。

     3.Boolean类型

     该类型只有两个值，true和false

     4.Undefined类型

     只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。

     5.Null类型

     null类型被看做空对象指针，前文说到null类型也是空的对象引用。

     三大引用类型

     ​ 引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响，而简单值类型

     1.Object类型

     我们看到的大多数类型值都是Object类型的实例，创建Object实例的方式有两种。

     第一种是使用new操作符后跟Object构造函数，如下所示

     var person = new Object();

     person.name = “Micheal”;

     person.age = 24;

     第二种方式是使用对象字面量表示法，如下所示

     var person = {

     　　name : “Micheal”,

     　　age : 24

     };

     2.Array类型

     数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象….另外，数组的大小是可以动态调整的。

     创建数组的基本方式有两种

     第一种是使用Array构造函数，如下所示

     var colors = new Array(“red”,”blue”,”yellow”);

     第二种是使用数组字面量表示法，如下所示

     var colors = [“red”,”blue”,”yellow”];

     3 Function类型

     每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的，如下所示

     function sum(num1,num2){

     　　return num1 + num2;

     };

     这和使用函数表达式定义函数的方式相差无几。

     var sun = function (){

     　　return sum1 + sum2;

     };

2. 判断变量的类型（🌟🌟🌟）

   • typeof
   • instanceof及原理
   • Object.toString().call()及原理([可以输出对象的内部属性[class]])

   ​ typeof 操作符

   ​ 由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.

   typeof  123　　 //Number
   typeof  'abc'　　//String
   typeof   true    //Boolean
   typeof   undefined  //Undefined
   typeof   null     //Object
   typeof   { }      //Object
   typeof   [ ]      //Object
   typeof   console.log()    //Function
   

   ​ null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。

   ​

   ​ Object.toString().call()

   ​ 在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、 object。
   ​ 对于null、array、function、object来说，使用typeof都会统一返回object字符串。
   ​ 要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法， 判断某个对象之属于哪种内置类型。
   ​ 分为null、string、boolean、number、undefined、array、function、object、date、math。

3. 数据类型转换（🌟🌟）（复杂、适当看看就行）

   • 相等==和全等===

   • 强制类型转换和隐式转换

   • 包装类型

     相等 ==： 先转换类型再比较
     全等 ===：直接比较，不转换类型，只要是类型不同就不相等，类型相同的看值是否相等
     Object.is(value1,value2)：ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

   ​ 强制类型转换：通过String（），Number（），Boolean（）函数强制转换

   ​ 隐式转换：不同类型的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。隐式转换通常发生在 运算符加减乘除，等于，还有小于，大于等。

   console.log(typeof '11')**//输出string**
   console.log(typeog 11) **//输出number**
   console.log('11' < 4 ) **//输出false**
   

   ​ 1.字符串加数字,数字就会转成字符串。

   ​ 2.数字减字符串，字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符 串相减也先转成数字。

   ​ 3.乘，除，大于，小于跟减的转换也是一样。

   console.log(10+'20') //2010
   console.log(10-'20')//-10 number
   console.log(10-'one') //NaN not a number
   console.log(10-'101a') //NaN
   console.log(10*'20') //200 number
   console.log('10'*'20') //200 number
   console.log(20/'10') //2 number
   console.log('20'/'10') //2 number
   console.log('20'/'one') //NaN
   

4. 原型和原型链（🌟🌟🌟）

   • 举例：给一个构造函数，描述构造函数、实例和原型之间的关系（比如说构造函数的prototype属性是指向原型等）

5. 闭包（🌟🌟🌟）

   • 概念
   • 优缺点

6. call/apply/bind的区别（🌟🌟🌟）

7. DOM事件流（红宝书P347）和委托事件（P347）（🌟🌟🌟）

   • 捕获、冒泡
   • 事件委托及好处

8. cookie和storage区别（🌟🌟🌟）

   • cookie的构成

   • localStorage和sessionStorage

     举例：cookie的HTTPOnly（加上之后无法通过js获取cookie，从而防止xss攻击）

9. 数组/对象常见的方法（这些方法会不会改变原始值）（🌟🌟）

   • Array：slice/splice/concat/filter/map/reduce
   • Object：key/assign（Object.assign可用于浅拷贝）

10. new一个对象时内部发生了什么（🌟）

11. 防抖和节流（🌟

12. JS动画相关：requestAnimationFrame相比于setlnterval实现动画效果的优势是什么

13. this指向（考察概念，或给一段代码说结果）（🌟🌟）

14. 作用域链（🌟）

15. let/var/const（🌟🌟🌟）【15-17是ES6易考点知识，阮一峰ES6入门】

    使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
    使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
    使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

16. 异步编程：promise和async await（🌟🌟🌟）

    • 内部状态
    • promise.race和promise.all

17. 箭头函数（🌟🌟）

18. JS运行机制（介绍什么是event loop、setTimeout和promise结合题目写结果）

    • 单线程、解释性语言
    • 事件循环
    • 宏任务/微任务

19. 实现继承的方式（红宝书P162）（🌟🌟）

20. 垃圾回收（P78）（🌟）