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
- Css
- 面试题︰自适应
淘宝无限适配【移动端】︰淘宝无限适配+布局单位使用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优先级算法如何计算?伪类和伪元素区别
- 伪类:用于选择DOM树上元素不同的状态(:visited :link),或者是DOM上无法用简单选择器选择的元素(:first-child)。(元素本身)伪类用一个:
- 伪元素:DOM树上看不到的元素。和元素相关的内容。(元素周边)伪元素用俩::