【截图】常见前端面试题

https://www.bilibili.com/video/BV1ek4y1r7GT

文章目录

    • day01 css3
      • 1.标签语义化
      • 2.盒子水平垂直居中
      • 3.盒模型标准
      • 4.几大经典布局
        • --左右固定、中间自适应
        • --移动端响应式布局
    • day 02 js
      • 1.对象深浅拷贝
      • 2.堆栈内存+闭包作用域
      • 3.一道面向对象面试题
      • 4.EventLoop
      • 5.使下面输出1
    • day03 React常见
      • 1.react双向绑定
      • 2.跨域问题
        • Jsonp
        • iframe
        • CORS-服务端配置
        • http Proxy
        • nginx反向代理
      • 3.组件中通信
    • day 04 入门算法
      • 1.数组去重和排序
        • 去重
        • 排序
      • 2.数组扁平化
      • 3.斐波那契数列
      • 4.输出所有和N的连续正数序列

day01 css3

1.标签语义化

【截图】常见前端面试题_第1张图片

顾名思义,合理的标签干合适的事情

块级(display:block):div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

行级(display:inline):a、span、small、strong、em、i、code、

行内块(display:inline-block):img、input

区别

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

display还有none(隐藏dom)、flex(弹性)、table(表)

display:none和visibility:hidden、ocpacity:0(兼容用fliter)

filter滤镜:对比度、饱和度、阴影、色相、透明度

display:flex 响应式、兼容性

2.盒子水平垂直居中

【截图】常见前端面试题_第2张图片

项目中经常遇到这种需求,最开始xxx,喜欢用flex,后来发现xxx,在xx博客上突然发现xx更好,xx解决了兼容性(拒绝背书式)

(1)定位1:需要知道父的宽高

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VlsIX3oj-1591087127372)(upload\image-20200602104327188.png)]

(2)定位2:需要父亲有宽高限定

【截图】常见前端面试题_第3张图片

(3)定位3:不需要父有具体宽高限制(兼容性不如上边Ie9+)

【截图】常见前端面试题_第4张图片

(4)display:flex(ie10+)

【截图】常见前端面试题_第5张图片

(5)js实现就是模拟css写样式

【截图】常见前端面试题_第6张图片

(6)固定宽高的父级 display:table-cell 子级inline-block

【截图】常见前端面试题_第7张图片

3.盒模型标准

content、padding、border、margin

标准盒模型(content-box)、ie怪异盒模型(border-box)、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处,固定到border控制宽高,不用重新计算padding和border

flex详见阮一峰的flex布局

【截图】常见前端面试题_第8张图片

多列布局

【截图】常见前端面试题_第9张图片

4.几大经典布局

–左右固定、中间自适应

圣杯布局

【截图】常见前端面试题_第10张图片

【截图】常见前端面试题_第11张图片

【截图】常见前端面试题_第12张图片

【截图】常见前端面试题_第13张图片

【截图】常见前端面试题_第14张图片

双飞翼

【截图】常见前端面试题_第15张图片

【截图】常见前端面试题_第16张图片

【截图】常见前端面试题_第17张图片

【截图】常见前端面试题_第18张图片

使用calc

【截图】常见前端面试题_第19张图片

使用flex

【截图】常见前端面试题_第20张图片

定位实现

【截图】常见前端面试题_第21张图片

image-20200602113433438

–移动端响应式布局

*媒体查询(一套)

*rem(应用于两套 中的移动端)

flex

vh/vw

day 02 js

1.对象深浅拷贝

【截图】常见前端面试题_第22张图片

JSON.parse(JSON.stringify(obj))不能对函数、正则、时间对象、数字对象的时候会不好用

最佳递归实现(这个没搞function),自己加一下用instanceof即可,建议统一用Object.prototype.toString.call

【截图】常见前端面试题_第23张图片

2.堆栈内存+闭包作用域

堆:存储引用类型值的空间

栈:存储基本类型值和指定代码的环境

【截图】常见前端面试题_第24张图片

答案:培训,对象的key数字和字符串等效

【截图】常见前端面试题_第25张图片

答案:珠峰,Symbol的特点,都是唯一的

【截图】常见前端面试题_第26张图片

答案:培训,key会转化成字符串[Obejct object]

【截图】常见前端面试题_第27张图片

答案:‘4’,alert弹出的会转化成字符串

【截图】常见前端面试题_第28张图片

答案:‘1’ ‘4’

【截图】常见前端面试题_第29张图片

3.一道面向对象面试题

【截图】常见前端面试题_第30张图片

【截图】常见前端面试题_第31张图片

【截图】常见前端面试题_第32张图片

4.EventLoop

同步异步、宏任务微任务

【截图】常见前端面试题_第33张图片

【截图】常见前端面试题_第34张图片

5.使下面输出1

image-20200602131851148

var a={
    toString = function*(){
        yield 1;
        yield 2;
        yield 3;
    }
}

a.toString

会转换,规则:

对象==字符串 对象.toString

null==undefined 相等 但是和其他值不相等

NaN!=NaN

剩下的都转换成数字

数据劫持

【截图】常见前端面试题_第35张图片

数组弹出

【截图】常见前端面试题_第36张图片

day03 React常见

1.react双向绑定

【截图】常见前端面试题_第37张图片

2.跨域问题

因为同源策略,采用前后端分离

Jsonp

只能get,不安全、有缓存、大小限制

iframe

  • window.name
  • document.domin
  • location.hash
  • post message

CORS-服务端配置

【截图】常见前端面试题_第38张图片

http Proxy

webpack添加proxy

nginx反向代理

在build之后proxy不可以用,要服务器端nginx反向代理

3.组件中通信

【截图】常见前端面试题_第39张图片

day 04 入门算法

1.数组去重和排序

去重

【截图】常见前端面试题_第40张图片

排序

冒泡、插入、快速(略

【截图】常见前端面试题_第41张图片

【截图】常见前端面试题_第42张图片

【截图】常见前端面试题_第43张图片

2.数组扁平化

【截图】常见前端面试题_第44张图片

【截图】常见前端面试题_第45张图片

【截图】常见前端面试题_第46张图片

3.斐波那契数列

【截图】常见前端面试题_第47张图片

【截图】常见前端面试题_第48张图片

4.输出所有和N的连续正数序列

【截图】常见前端面试题_第49张图片

【截图】常见前端面试题_第50张图片

你可能感兴趣的:(前端面试,面试)