2022-02-22前端试题

1、js的数据类型有哪些?
数据类型分为基本数据类型,复杂数据类型
基本数据类型:Boolean(布尔型),String(字符串型),Number(数字型),Nul(空型),Undefined(未定义型)
复杂数据类型: Object(对象)

2、js中变量的三种定义方式,有什么区别
const: 设置常量
var:设置变量
let:块几作用于,设为变量

3、const obj = { name:’jack’ },这样定义一个obj的变量,那么能改变obj.name 吗?
可以, obj等于一个对象,对象是复杂类型,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

4.判断是否是数组
var obj = [];
Arrary.isArray(obj) IE8及以下不支持
Object.prototype.toString.call(obj) === '[object Array]'
obj instanceof Array
obj.constructor === Array

5、介绍一下promise
promise是用来表示一个异步操作的完成状态与结果
promise有待处理,接受,拒绝3种状态
promise的优缺点:
promise可以链式调用控制事件的执行顺序;可以使用catch捕捉到错误信息;可以避免回调地域

6、浅拷贝和深拷贝有什么区别,怎么去深拷贝
深拷贝:JSON.parse(JSON.stringfy(X));递归实现
浅拷贝:Object.assign();直接赋值;循环第一层

深拷贝递归地复制新对象中的所有值或属性,而浅拷贝只复制引用。
在深拷贝中,新对象中的更改不会影响原始对象,而在浅拷贝中,新对象中的更改,原始对象中也会跟着改。
在深拷贝中,原始对象不与新对象共享相同的属性,而在浅拷贝中,它们具有相同的属性。

 json.parse(json,stringfy())的弊端:深复制之后时间对象会变成字符串;正则对象,error对象会变成空对象;函数和undefined会丢失;
属性值为NAN的为变为null;

7、怎么删除数组第一个值
原数组长度改变:shift(), splice(start, length)
原数组长度不变: slice(start, end)

8、vue生命周期(组件)、keep-alive的用法

beforeCreate
created
beforeMounte
mounted
beforeUpdate
updated
beforeDestroy
destrored

当页面加入keep-alive缓存之后,进入A缓存页面 --> B不缓存页面 --> 再次进入A缓存页面
beforeCreate
created
beforeMounte                    A  
mounted
activated
deactivated
 ===》
beforeCreate
created
beforeMounte
mounted                            B
beforeUpdate
updated
beforeDestroy
destrored
===》
activated
deactivated                        A

9、两个div,A包含B,怎么做水平垂直居中,用flex布局怎么做
使用line-height
使用position定位

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .className1 {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            background-color: red;
            position: relative;
        }
        /* .className2 {
            width: 600px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgb(98, 0, 255);
        } */
        
        .className2 {
            width: 600px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;   /* 有了这个就自动居中了 */
            background-color: rgb(0, 255, 179);
        }
    </style>
</head>

<body>
    <div class="className1">
        <div class="className2"></div>
    </div>
</body>

</html>

10、组件之间通信该怎么做
props传值
vuex 全局传值

11、v-for和v-if能一起使用么

v-for和v-if不能一起使用,因为v-for会比v-if先执行。一个数组循环,它不会先执行v-if过滤数据,再循环,而是先执行循环再过滤数据,影响渲染速度

12、css3有哪些新特性
圆角(border-radius)
阴影(box-shadow)
线性渐变(linear-gradient)
2D转换(trasform)=>缩放(scale),倾斜(skew),平移(translate),旋转(rotate),matrix(旋转,缩放,平移,倾斜,n,n)
3D转换
背景(background-image,background-size,background-repeat, background-origin,background-position)
动画(@keyframes,animation)
过度(transition)
多列(column-count)
多媒体查询(@media)

13、盒模型(box-sizing)
IE盒模型(border-box):宽包括content,padding,border
W3C的标准盒模型(content-box):宽包括content

14、css选择符
id选择器(#myId)
类选择器(.myId)
伪类选择器(a:hover)
伪元素选择器(::before ::after)
标签选择器(p,div)
属性选择器(input[type="submit"])
相邻子元素选择器(ul>li)
相邻兄弟选择器(p+div)
兄弟选择器(li~a)
通配符选择器(*)

15、GET和POST的区别:
简单来说:GET产生一个TCP数据包,POST产生两个TCP数据包
严格的说:对于GET方式的请求,游览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST请求。游览器先发送header,服务器响应100 continue,游览器再发送data,服务器响应200 ok(返回数据)

16、HTTP、状态码:
200:成功
302:重定向
404:请求失败,请求希望得到的资源违背在服务器发现。(只要不是新手写的demo,一般404都是你路径写错了,或者未区分大小写啥的)
502:无效的响应(基本上就是Tomcat没启好)
400:请求没有进入到后台服务里(一般都是前端的锅)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...
    终身成长人格阅读 13,747评论 0 3
  • client,page和screen的区别? clientX,clientY是触摸点相对于viewport视口x,...
    change_22fa阅读 5,692评论 1 1
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 5,664评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 9,055评论 1 19
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,414评论 0 7

友情链接更多精彩内容