广州地区12月份前端开发真实面试题---部分附带照片

最新推荐文章于 2024-06-21 15:14:18 发布

山竹回家了

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量1.7k

点赞数 7

分类专栏：面试文章标签：前端 javascript vue.js reactjs

本文链接：https://blog.csdn.net/weixin_47886687/article/details/111650439

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

最近在找工作,所以进了一些同样找工作的群,发现群友发的面试题都相对大同小异，如果只考理论或笔试，把这篇理解透都没有太大问题。这里并不打算展开介绍，主要是方便自己记忆写的，如果看不懂可以把题目拿去自己研究也一样。

重复率较高的面试题

1. typeOf与instanceOf的区别

相同点:都用用来判断一个变量是否为空,或者是什么类型

不同点:typeOf返回值是一个字符串,该字符串说明运算数的的数据类型。

instanceOf是判断一个实例是否属于某种类型

2.清除浮动的方法

额外标签法clear:both;
父级添加overflow:hidden;
after伪元素清除浮动;
before和after双伪元素清除浮动;

3.CSS3新特性

flex布局、媒体查询、阴影效果、过渡、旋转、动画等

4.BFC(块级格式化上下文)

通俗来讲可以把BFC理解为封闭的大箱子,箱子内部的元素无论怎么排都不会影响到外部。

5.ES6新语法

1.const和let：块级作用域

2.模板字符串${}

3.箭头函数=>:不需要function关键字，省略return，继承当前上下文this

4.参数默认值:例：function（text=‘default’）{}

5.对象超类super():

6.for…of和for…in:遍历

7.解构：从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。

8.proxy：可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作

9…验证操作符

6.call bind apply的区别?

相同点:都是改变this指向，第一个参数为this指向的对象

区别:

1.apply（obj，’山竹‘，18）：立即调用，后续参数为列举的元素

2.call（obj，[’山竹’,18])：立即调用，后续参数为数组

3.bind(obj)(‘山竹’):非立即调用,后续参数写在另一个括号

7.js继承方式

1.原型链继承:让新实例的原型等于父类的实例

2.构造函数继承:用call()、apply（）将父类构造函数引入子类函数

3.组合继承（原型链与构造函数）：结合两种模式的优点、传参和复用

4.原型式继承：用一个函数包裹一个对象返回这个函数的调用，这个函数就变成了可以随意添加属性的实例或对象。

5.寄生式继承：就是给原型式继承外面套个壳子

6.寄生组合式继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

8.你怎样看待闭包？

内部函数引用外部变量的现象就是闭包，本质上说就是在函数内部和函数外部搭建起一座桥梁，使得子函数可以访问父函数中所有的局部变量与参数，但是反之不可以，这只是闭包的作用之一，
另一个作用，则是保护变量不受外界污染，使其一直存在内存中，在工作中我们还是少使用闭包的好，因为闭包会产生内存泄漏，需要手动释放。

9.你是如何理解原型与原型链？

把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __ proto __ 存储这个地址,而这个共用属性就是原型。原型出现的目的就是为了减少不必要的内存消耗。

而原型链就是对象通过__ proto __向当前实例所属类的原型上查找属性或方法的机制,如果查找的原型没有找到想要的属性或者方法则查找结束,返回undefined.

10.js中跨域的方法

同源策略(协议+端口+域名要相同)

解决方法:

1.CROS后台服务器设置响应头:对某个URL开放

2.Proxy代理:网页服务器同时负责转发不同服务器的数据.

例如:浏览器A向B请求数据,B响应的同时转发C的请求给A .

3.jsonp:利用script标签不受跨域限制的特性,使用script标签向数据服务器请求js文件,数据服务器会将数据动态生成一个js文件响应.

11. 前端有哪些页面优化方法

一、减少操作量

1.减少HTTP请求

2.不要在HTML中使用缩放图片

3.Image压缩

4.减少DOM操作,减少重绘

二、提前做加载操作

1.对域名进行预解析

2.预载入组件或延迟载入组件

2.CSS放代码页上端

三、提升并行加载

切分组件到多个域，提升服务器的响应能力

四、JavaScript和CSS优化

1.从页面剥离js与css

2.压缩js与css

3.js放页底减少阻塞

五、异步加载

12.数组去重

1.new Set(arr)

2.for嵌套for,splice去重

3.indexOf判断-1加入新数组

4.filter

13.get与post请求的区别

相同点:都是传输数据,底层是TCP/IP

不同点:

get	post
产生一个TCP数据包	产生两个TCP数据包
浏览器回退时无害	浏览器回退会再次提交请求
浏览器自动cache	需手动设置
只能进行url编码	多种编码
参数保留浏览器历史记录	不保留
长度限制2k	不限制
只接受ASCLL字符	不限制
不安全不能传递敏感信息	不限制
URL传递	request传递

14.promise

promise是什么?

1.主要用于异步计算

2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3.可以在对象之间传递和操作promise,帮助处理队列

promise处理异步

Promise本身是同步编程的，他可以管理异步操作的

new Promise经历三个状态:pending(等待)、fulfilled(成功)、rejected（失败）。

new Promise传递函数立即执行两个参数，resolve（成功时执行），rejected(失败时执行)

15.VUE理解

是一个渐进式JS框架,可以将一个页面分隔成多个组件,当其他页面有类似功能时,直接让封装的组件进行复用。它是构建用户界面的声明式框架，只关心图层，不关心具体怎么实现。

16.Vue双向绑定原理

Vue的双向数据绑定是由数据劫持结合发布者订-阅者实现的，数据劫持是通过Object.defineProperty()来劫持对象数据的setter和getter操作。在数据变动时做你想做的事。
原理:通过Observer来监听自己的model数据变化,通过Compile来解析编译模块指令,最终利用Watcher搭起Observe和compile之间的通信桥梁,达到数据变化>视图更新。在初始化vue示例时，遍历data这个对象，给每一个键值对利用Object.defineProperty对data的键值对新增get和set方法,利用了事件监听DOM 的机制,让视图改变数据。

17.谈谈对vue生命周期的理解

beforeCreate:vue实例的挂在元素el和数据对象data都是undefined,还没初始化。
created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有。
beforeMount:vue实例的el和data都初始化了，但挂载之前为虚拟的dom节点.
mounted:vue实例已经挂载到真实的DOM上，就可以通过DOM获取DOM节点。
beforeUpdate:响应式数据更新时调用,发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移出已添加的事件监听器。
updated:虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数操作数据，防止死循环。
beforeDestroy:示例销毁前调用,实例还可以用,this能够获取到实例,常用于销毁定时器,解绑事件。
destroyed:实例销毁后调用,调用后所有事件监听器会被移出,所有子实例都会被销毁。

18.vuex有哪几种状态和属性

state:储存共有数据,数据是响应式的
getter:对state进行计算操作,主要过滤数据,多组件之间复用
mutations:定义commit方法修改state数据,方法必须同步
action:异步通过mutaitions修改state的数据
modules:模块化vue

19.防抖与节流

防抖（debounce）：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新出发定时器。

节流（throttle）：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

20.position定位有哪几种形式及区别

static静态定位：位置不会发生改变不会脱离文档流
fixe 固定定位：相对与浏览器定位脱离文档流
relative 相对定位：相对与自身不会脱离文档流
absolute 绝对定位：相对于父级元素的定位，如果没有父级元素时相对于窗口的定位不会脱离文档流

21.http(https)请求都有哪些?区别?

OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。
HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。
GET：向特定的资源发出请求。
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
PUT：向指定资源位置上传其最新内容。
DELETE：请求服务器删除Request-URI所标识的资源。
TRACE：回显服务器收到的请求，主要用于测试或诊断。
CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

22.回调地域是什么?如何避免?

回调地域的普遍存在是由于函数的层层嵌套,导致后续代码规模增大之后代码可读性降低,逻辑难以理清,然而回调地域本身不是bug或者是错误代码,通常使用Promise来解决回调地域.

23.简述小程序原理

小程序本质是一个单页面应用,所有的页面渲染和事件处理都在一个页面执行,但又可以通过微信客户端调用原生的各种接口;
它的构架是数据驱动的构架模式,它的UI和数据时分离的,所有的页面更新都需要通过对数据的更改来实现;
它从技术讲和现有的前端开发差不多,采用js,WXML,WXSS三种技术进行开发;
功能可分为webview和appService两个部分;
webview用来展示UI,appSerview来处理业务逻辑、数据及接口调用；
两个部分在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

24.小程序关联微信公众号如何确定用户的唯一性

通过union_id

25.行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

26.http请求过程

浏览器发送请求>解析域名得到IP进行TCP连接>浏览器发送HTTP请求和头信息发送>服务器对浏览器进行应答,响应头信息和浏览器所需的内容>关闭TCP连接或保持>浏览器得到数据进行操作.

27.vue常用指令

v-show,v-if,v-text,v-for,v-on等

28.vue中时间修饰符主要有哪些?作用?

stop：阻止冒泡
prevent：阻止默认事件
self：只有自身执行
capture：捕获冒泡
once：只执行一次
native：当想要给组件的根元素绑定事件的时候，可以使用native修饰符

30.bindtap和catchtap的区别(微信小程序)

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

31.ajax与axios的区别

ajax：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
axios：从 node.js 创建 http 请求支持 Promise API 客户端支持防止CSRF 提供了一些并发请求的接口

31.js的数据类型都有什么?如何判断

undefined,boolean ,string ,number ,object

32.js如何阻止事件冒泡与阻止默认事件

event.stoppropagation()阻止事件冒泡，
event.preventdefault()阻止默认事件。

33.new一个对象,这个过程发生了什么

1、创建一个空对象
let obj = {};
2、让构造函数中的this指向新对象，并执行构造函数的函数体
let result = Person.call(obj);
3、设置新对象的proto属性指向构造函数的原型对象
obj.proto = Person.prototype;
4、判断构造函数的返回值类型，如果是值类型，则返回新对象。如果是引用类型，就返回这个引用类型的对象。
if (typeof(result) == “object”)
p = result;
else
p = obj;

34.vue mixin的用法


<body>
    <div id="app">{{name}}</div>
    <script>
        // 定义一个混入对象
        const myMixin = {
            data() {
                return {
                    name: '胖虎'
                }
            }
        }
        // 定义一个Vue
        const app = new Vue({
            el: '#app',
            //mixins节点表示引入混入,接收一个数组,可以是多个mixin
            mixins: [myMixin],
            data() {
                return {
                    name: '山竹'
                }
            }
        })
    </script>
</body>

35.v-show与v-if指令的共同点与不同点

1.共同点：都能控制元素的显示和隐藏。

2.不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

36.vue如何获取dom

使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素，并且可以直接调用子组件中定义的方法；

37.小程序生命周期

应用生命周期:
onlaunch:小程序初始化完成时(全局只触发一次)
onshow:小程序启动或从后台进入前台显示
onhide:小程序从前台进入后台
onerror:脚本错误或api调用失败时触发
onpagenotfound:页面不存在时触发
页面生命周期:
onload:监听页面加载
onready:页面初次渲染完成
onshow:监听页面显示
onhide:页面隐藏
onunload:页面卸载

38.利用swiper滑动视频如何解决滑动过程卡顿?

不使用v-show的判断是否到达slide的尽头，使用swiper中的disabledClass属性让swiper自己去决定箭头是否显示

39.vue怎么阻止事件冒泡

1、@click.stop=“handleClick” //阻止事件冒泡
2、@click.prevent=“handleClick” //取消默认事件
3、@click.stop.prevent= “handleClick” //阻止事件冒泡且取消默认事件

40.小程序怎么阻止事件冒泡

1、事件的bind 改成 catch
2、bindtap 改成 catchtap

其余面试题

1.如何实现一个200px*200px的div块在不同分辨率下上下左右居中,根据掌握情况写出能实现的方式(不少于两种)

2.代码题

在这里插入图片描述

3.运算题

在这里插入图片描述

4.小程序题

在这里插入图片描述

5.用js写99乘法表

山竹回家了

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
广州地区12月份前端开发真实面试题---部分附带照片

前言最近在找工作,所以进了一些同样找工作的群,发现群友发的面试题都相对大同小异，如果只考理论或笔试，把这篇理解透都没有太大问题。这里并不打算展开介绍，主要是方便自己记忆写的，如果看不懂可以把题目拿去自己研究也一样。重复率较高的面试题1. typeOf与instanceOf的区别相同点:都用用来判断一个变量是否为空,或者是什么类型不同点:typeOf返回值是一个字符串,该字符串说明运算数的的数据类型。instanceOf是判断一个实例是否属于某种类型2.清除浮动的方法额外标签法clear
复制链接

扫一扫