2020面试整理

最新推荐文章于 2022-12-27 10:38:08 发布

少女彤

最新推荐文章于 2022-12-27 10:38:08 发布

阅读量157

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/weixin_43244655/article/details/106613075

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

2020面试整理

一. HTTP常用状态码及其含义？
200 请求成功
3** 重定向
4** 客户端错误
403 资源不可用
404 Not Found 无法找到指定位置的资源
405 请求方式
5** 服务端错误

二、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

h5新标签兼容：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分：
DOCTYPE声明\新增的结构元素\功能元素

三、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS 选择符：

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = “external”]）

9.伪类选择器（a: hover, li:nth-child）

可以继承的属性：

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级：

!important > id > class > tag

important 比内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景 rgba

媒体查询，多栏布局

border-image

background-image：设置元素的背景图像。

background-origin：规定背景图片的定位区域。

background-size：规定背景图片的尺寸。

background-repeat：设置是否及如何重复背景图像。
　　
word-wrap属性允许长单词或URL地址换行到下一行。

五、简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;
空元素： img，link，br,hr,

元素类型的转换
display:block 此元素将显示为块级元素，此元素前后会带有换行符（后面元素会换行显示）。

inline-block 将元素转化为行内块元素

inline 将元素转换为行内元素

六. CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;

**JS部分

1、cookie、localStorage、sessionStorage的区别和使用？**

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
   创建和访问localStorage：
        1）、设置数据：
        var forgetData = {phone:vm.phone};        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化为字符串格式；
            获取数据：
        vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //将对象转化为json；
        2）、设置：localStorage.name = "zhao";
             获取：localStorage.name    //zhao        localStorage.setItem(key,value);//设置数据        localStorage.getItem(key);//获取数据        localStorage.removeItem(key);//删除单个数据        localStorage.clear();//清除所有localStorage的数据
 
    sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；
    
    共同点：都是保存在浏览器端，且同源的。
    区别：
        cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
        sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
        数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
        作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，

2.call和apply的区别？

call和apply 都是用来修改函数中this的指向问题； 改变this指向。


共同点：
    都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
    另一种说法，都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行。
不同点：
    apply();//最多只能有两个参数--新this对象和一个数组argArray，如果给该方法传递多个参数，则把参数都写进这个数组里边，当然，即使只有一个参数，也要写进数组里边。
    call();//可以接收多个参数，第一个参数apply()一样，后面则是一串参数列表。
    实际上，apply和call的功能是一样的，只是传入的参数列表的形式不同。

3. 基本数据类型有哪些？
Number、String、object、Boolean、undefined、Null
ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。

数据类型转化
1、显式转化(强制类型转换)

   1）全局方法：Number() 转换为数字， 
      String() 转换为字符串，
      Boolean() 转化为布尔值。（parseInt 和 parseFloat也算）                                       
   2） toString()方法：
       Date/Number/Boolean对象中均有对应的 toString()方法 
       可以将相应对象转化为字符串 
   3）Date对象中的getTime()方法可以将Date转化为Number　　
   4)一元运算符“+”可以将　字符串对象/日期对象/布尔对象转化为数字

数组的方法

arr.push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
str.split() 将字符串转化为数组
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。
arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组
　　callback的参数： value --当前索引的值
　　　　　　　　　　index --索引
　　　　　　　　　　array --原数组
arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
　　callback的参数： value --当前索引的值
　　　　　　　　　　index --索引
　　　　　　　　　　array --原数组
ps: arr.forEach()和arr.map()的区别
1. arr.forEach()是和for循环一样，是代替for。arr.map()是修改数组其中的数据，并返回新的数据。
2. arr.forEach() 没有return arr.map() 有return