前端js 面试笔记

1箭头函数和普通函数的区别
1. this指向的问题
箭头函数中的this只在箭头函数定义时就决定的，而且不可修改的 (call、apply、bind)****箭头函数的this指向定义时候、外层第一个普通函数的this
2．箭头函数不能new(不能当作构造函数)
3．箭头函数prototype
4．箭头函数arguments
箭头函数没有原型，没有argument

2.promise有几种状态P1
有三种状态
pending(进行中)fulfilled (已成功)rejected (已失败)
Promise:解决地狱回调，

3.面试题:find和filter的区别
区别一:返回的内容不同
filter返回是新数组find返回具体的内容区别二∶
find :匹配到第一个即返回
filter :返回整体（没一个匹配到的都返回)
 

4.七、some和every的区别

面试题:some和every的区别
some ==》如果有一项匹配则返回true

every ==》全部匹配才会返回true5.

一.var let const的区别 p1
var、let.const共同点都是可以声明变量的
区别一:
var具有变量提升的机制
let和const没有变量提升的机制区别二:
var可以多次声明同一个变量
let和const不可以多次声明同一个变量区别三∶
var、let声明变量的const声明常量
var和let声明的变量可以再次赋值，但是const不可以再次fu zhi
 

1. Css
2. 面试题︰自适应
   淘宝无限适配【移动端】︰淘宝无限适配＋布局单位使用rem
    

响应式：

1．是什么?
一个URL可以响应多端2．语法结构
@media only screen and (max-width: 100epx){

ul li:last-child{
display: none;

}
}
only :可以排除不支持媒体查询的浏览器screen :设备类型
max-width |max-height

min-width | min-height3．

响应式图片【性能优化】
<picture>
<source srcset="1.jpg" media= ' (min-width : 1000px) '>

<source srcset="2.jpg" media= ' (min-width : 700px) ' ><img srcset="3.jpg">
</ picture>
 

@media 会使浏览速度下降。

网页布局方案

布局方案
一、什么情况下采用响应式布局
数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
例如︰公司的官网、专题页面
特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。
二、pc+移动端应该做什么样的布局方案
注意:访问量还可以或者比较大，类似于淘宝网。
pc是一套,会加入一点点响应式。
移动端是一套，会使用自适应的布局方式。

三、pc的设计图
ui: 1980
笔记本电脑:1280
ui图的宽度和电脑的宽度不对应该怎么办?
1．把ui图进行等比缩放，缩放成和电脑一样的尺寸2．换1980的电脑
四、移动端的设计图
宽度:750
因为75e设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点

面试题:自适应
淘宝无限适配【移动端】︰淘宝无限适配＋布局单位使用rem
 

Bostrap----响应式。。

面试题︰响应式
1．是什么?
一个URL可以响应多端2．语法结构
media only screen and (max-width: 1000px){

ul li:last-child{
display: none;

}
}
only :可以排除不支持媒体查询的浏览器

screen :设备类型
max-width | max-height

min-width |min-height

3．响应式图片【性能优化】|<picture>
<source srcset="1.jpg" media= ' (min-width: 100epx)'>

<source srcset="2.jpg" media= '(min-width: 700px)'><img srcset="3.jpg">
</picture>

面试题:什么是语义化标签
1．易读性和维护性更好。
2. seo成分会更好，蜘蛛抓取更好。

面试题:::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。
1，区别
:是伪类、::伪元素===》是为了做区分
2.是什么?作用
元素before之前、元素after之后作用:清除浮动、样式布局上也有作用

面试题: png、 jpg、 gif 这些图片格式解释一下，分别什么时候用?
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。gif:一般是做动图的。
webp:同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

区别一:
title :鼠标移入到图片显示的值

alt :图片无法加载时显示的值

区别二:
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

1.2 CSS面试题
面试题:介绍一下CSS的盒子模型
CSs的盒子模型有哪些:标准盒子模型、IE盒子模型cSs的盒子模型区别:
标准盒子模型: margin、border、padding. content
IE盒子模型: margin、content ( border +padding+ content )

通过cSs如何转换盒子模型:
box-sizing: content-box;/*标准盒子模型*/

b x-sizing: border-box;/*工E盒子模型*/

面试题︰对BFC规范(块级格式化上下文: block formatting context)的理解?
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1.了解BFC :块级格式化上下文。
2.BFC的原则:如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。3．如何触发BFC:
float的值非none
overflow的值非visible
display的值为: inline-block、table-ce11. .

面试题:line-height和heigh区别【大厂】
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大(行数*行高)。

height是一个死值，就是这个盒子的高度。

面试题:CSS选择符有哪些?哪些属性可以继承?
css选择符:
通配(*)id选择器(#)类选择器（.)
标签选择器(div、p、h1. . .)相邻选择器(+)
后代选择器(ul li)子元素选择器（> )-属性选择器(a[href]+
CSs属性哪些可以继承:
文字系列:font-size、 color、line-height、 text-align.. .

不可继承属性: border.padding、margin...

面试题:CSS优先级算法如何计算?
伪类和伪元素区别

1. 伪类：用于选择DOM树上元素不同的状态（:visited :link），或者是DOM上无法用简单选择器选择的元素(:first-child)。（元素本身）伪类用一个：
2. 伪元素：DOM树上看不到的元素。和元素相关的内容。（元素周边）伪元素用俩::