web前端面试基础题

您所在的位置:网站首页 axiosjsonp web前端面试基础题

web前端面试基础题

2023-03-15 00:39| 来源: 网络整理| 查看: 265

一.js1.基本类型:6种

A. Number

B. String

C. Boolean

D. Undifined

E. Null

F. Symbol(es6新增,表示独一无二的值)

2.引用类型:

对象,数组 ,date

栈内存中存放地址指向堆内存中的对象

基本类型就是保存在栈内存中的简单数据段,而引用类型指的是那些保存在堆内存中的对象

基本类型在内存中分别占有固定大小的空间,他们的值保存在栈空间中,我们通过按值访问

引用类型:值的大小不固定,栈内存中存放地址指向堆内存中的对象,是按引用访问的。栈内存中存放的只是该对象的访问地址

3.冒泡排序

概念:将数字按照基础的交换顺序一点一点地向数组的一侧移动

n个数字需要n(n-1)/2 次排序

直接上最优化版本的冒泡排序代码:

//冒泡排序 var arr = [3, 2, 1, 4, 5] var maopao = function (a) { //循环的趟数 有n个数据就要循环n-1趟 //a.前面的元素已经符合排序了则不需要再浪费cpu资源进行循环了,可以设置一个布尔变量进行标识再合适的时候终止循环 //b.如果后面的元素也是已经符合排序了则后面的不要进行循环,只将前面的无序的元素排序就行 var num = 0 //记录最后一次对比交换位置的索引值 var lastChangeIndex = 0 //每次对比只需要对比到这里就行了 var changeBorder = a.length - 1 for (var i = 0; i < a.length - 1; i++) { var flag = true num++ //每趟需要对比相邻数据的次数,每循环一趟就可以减少一次比较 for (var j = 0; j < changeBorder; j++) { if (a[j] > a[j + 1]) { flag = false var temp = a[j] a[j] = a[j + 1] a[j + 1] = temp //记录下最后一次相邻数据交换的位置 lastChangeIndex = j console.log(flag) } } changeBorder = lastChangeIndex console.log('循环了' + num + '次') if (flag) break; } console.log(a) } maopao(arr)4.原型和原型链

概念理解:

首先构造函数上都有一个prototype原型对象,通过构造函数实例出的对象中有一个__proto__原型属性,那么这个__proto__会有个内部指针指向构造函数的prototype原型对象,该实例对象会获得该原型对象上的属性和方法,那么同时prototype原型对象同样也是一个对象,也会存在一个__proto__原型属性指向另外一个构造函数的porotype原型对象,同样也会获得其中的属性和方法,像这样一层一层递进原型属性指向原型对象的过程就可以叫做原型链。

所有原型指向object原型,object原型的__proto__属性是null

作用意义:

a,事项数据共享,从而节省内存

b,可以实现继承

5.作用域和作用域链

全局作用域:定义的变量代码的任何位置都可以访问,例如windows自带的属性就拥有全局作用域

函数作用域:定义的变量只能在指定的代码段使用

作用域的作用主要是分隔变量,在不同作用域下即使变量名同名也不会相互影响

作用与分上下级关系,变量取值只能在创建该变量的作用域中取值,如果所在的作用域没有此变量就会去上级作用域中查找,直到查到全局作用域,这样一中查找方式的链接就叫做作用域链

var b =2 function fn1(){ var a = 10 function fn2(){ console.log( a + b) } return fn2 } var fn3 = fn1() a= 100 b=50 fn3() // 10 + 50 a的值会在其上级fn1的作用域下取值,b的值会在全局作用域下取值 6.继承:

原型链继承

借用构造函数继承:只能继承属性,不能继承方法

组合继承(原型链和借用构造函数)

拷贝继承(一般没啥用)

7.闭包

概念:函数a中有个函数b,函数b可以访问函数a中定义的数据和变量

模式:

函数模式的闭包(函数a中包含一个函数b);

function fn1(){ var a = 1 function fn2(){ console.log(a) } fn2() } fn1()

对象模式的闭包(函数a中包含一个对象,此对象的属性可以关联函数a中定义的变量和数据)

function fn1(){ var a = 1 var obj = { name:a } console.log(obj.name) } fn1()

注意面试题目会根据下面场景进行出题,

function fn1() { var a = 1 return function fn2() { console.log(++a) } } //每次外部函数执行的时候会创建一个新的地址,所以每次执行fn1的时候都会返回一个新的fn2 fn1()() //2 fn1()() //2 fn1()() //2 //由于执行了一次外部函数并且赋值给了变量fn3,所以得到的fn3对应始终是同一个引用地址,引用的数据会递增 var fn3 = fn1() fn3() //2 fn3() //3 fn3() //4

作用:缓存数据,延长作用域

优缺点:优点-缓存数据到内存中,缺点-造成内存泄漏(外部函数调用完毕之后其中的变量值依然存在)

怎样结局它的缺点:

f1.apply(null,[10,20]); f1.call(null,10,20);

8.原生js写new9.let var const

var 变量提升,作用域为全局

let 无变量提升,作用域为块级,

const 无变量提升,作用域为块级,且声明的变量必须赋值并且不能改变

10.apply和call和bind方法

作用:可以改变this的指向,

如果一个方法想调用个自身没有的属性,可以让该方法的调用者用call或者apply函数并将该对象传进去即可改变该方法的this指向到该对象

区别:两者的参数传递方式不同

1、相同点

三个都是用于改变this指向;

接收的第一个参数都是this要指向的对象;

都可以利用后续参数传参。

2、不同点

call和bind传参相同,多个参数依次传入的;

apply只有两个参数,第二个参数为数组;

call和apply都是对函数进行直接调用,而bind方法不会立即调用函数,而是返回一个修改this后的函数。

11.浅拷贝和深拷贝

浅拷贝只是将一个对象的中的基本数据类型拷贝到另一个对象中,将该对象中引用数据类型的引用地址赋值给了新对象,新对象中的引用数据类型在堆中没有自己独立的数据空间只是引用了该对象的的数据空间,该变新对象中引用数据的值的则老对象中的引用数据类型的值也会变化。

深拷贝是同样是将一个对象的基本数据类型拷贝到另一个对象中,为该对象的引用数据开辟了新的空间,拥有了完全数据自己的独立的空间,新对象中的数据值改变后不会影响老对象中的数据的变化。

12.递归

函数调用自身就是递归,递归要有一定的结束条件。否则会将内存撑爆。

13.string中十个方法

cancat() 在后面拼接一个字符串

trim() 去除前空白和后空白

replace("a","b") 将字符串中的a替换成b

join() 可以一个包含string数据类型的的数组拼接成一个字符串(准确来说这是数组的方法)

split() 拆分字符串返回一个数组

match() 判断该字符串是否匹配指定的字符串 返回boolean

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

14.数组中十个方法(https://blog.csdn.net/qq_39132756/article/details/85007082?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165616652316781683944803%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165616652316781683944803&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-85007082-null-null.142^v24^pc_rank_34,157^v15^new_3&utm_term=js%E4%B8%AD%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%B9%E6%B3%95&spm=1018.2226.3001.4187)

1.push() 在后面追加一个或多个元素 返回数组的长度 pop()删除并返回最后一个元素

2.unshift() 在前面追加一个或多个元素 返回数组的长度 shift()删除并且返回第一个元素

3.sort() 数组的排序

4.reverse() 数组的反转

5.join数组转字符串,原数组不变

6.concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

5.slice(start, end) 剪切数组,原始数组不变

6.splice(index,howmany,item1,.....,itemX) 数组更新方法向/从数组中添加/删除项目,然后返回被删除的项目,会改变原始数组

7.indexof(item,start)和 lastIndexof(item,start)

8. 五个迭代方法:forEach()、map()、filter()、some()、every()

forEach():对数组进行遍历循环,这个方法没有返回值。jquery()也提供了相应的方法each()方法

和filter() 方法类似,jquery中有个 grep()方法也用于数组元素过滤筛选。

这几个方法语法都一样,都不会改变原数组。

9. 2个归并方法:reduce()、reduceRight()---这个还不太熟悉

reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

10.ES6数组新增方法:

Array.from() 方法是用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

Array.of() 方法是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。

Array.find()方法返回通过测试(函数内判断)的数组的第一个元素的值(find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。)

findIndex () findIndex和find差不多,不过默认返回的是索引,如果没有符合条件的元素返回 -1

array.fill(value, start, end)方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false

copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员

15.typeof 和instanceof 区别

都是判断数据类型的方法

typeof 返回该数据类型(null 数组 date 返回的是object)可以判断基础数据类型(除了null之外),无法判断引用数据类型(除了function可判断)

instanceof 返回布尔值(判断该对象的原型链是否对应该构造函数的原型) 可以判断引用数据类型返回,但是在没法判断基础数据类型

16.常用的正则表达式17.用js写一个防抖函数//写法一 let input = document.getElementById("tid") let timeout = null input.addEventListener("input",debounce(function(){ console.log(this.value) },2000)) function debounce(fn,delyTime) { return function() { if (timeout !== null) { clearTimeout(timeout) } timeout = setTimeout(() => { fn.apply(this) }, delyTime); } } //写法二 function input(event){ console.log(event.target.value) } function debounce(fn,delaytime){ let timeout= null; return function (...agrs){ if (timeout) { clearTimeout(timeout) timeout = null }else{ //首次解除键盘就打印 fn.apply(this,agrs) } timeout = setTimeout(()=>{ fn.apply(this,args); },delaytime) } } document.getElementById("tid").oninput=debounce(input,300) 18.用js写一个节流函数19.js中let和var的区别20.数组的去重的方法有哪些21.多维数组平铺成一维数组的方法22.闭包的缺点,如何关闭闭包23.按钮的权限设置24.ajax的get和post请求的异同点25.h5新特性26.js中eventloop机制27.常用的es6有哪些

a. let和const生命变量,两者都有块级作用域(es5之前没有块级作用域)

b.箭头函数()

c.解构赋值

d.for of 循环

e.import export模块化导入导出

f.set数据结构

g. ...展开运算符

h. async await 来编写类似同步代码来处理异步流程,提高代码的简洁度数和可读性

i.promise 异步编程的解决方案

j. Symble属于一种基础数据类型

k.proxy代理(不太理解)

二.css布局1.盒子模型:

html中的各个元素可以看作盒子,用来装内容,按照w3c标准从外到内设置margin,border,padding和content从而合理的布局在页面的合适的位置。

区别标准的盒子模型和怪异的盒子模型(ie盒子模型)

box-sizing:content-box 标准盒模型

box-sizing:border-box IE盒模型

2.清楚浮动

为什么要清楚浮动:

浮动元素脱离标准文档流不占据空间容易引起“高度塌陷”

清楚浮动的方式:

a, 添加空标签,设置其clear属性值

b, 设置父级overflow属性

c,使用before和after双伪元素

3.常见的行内元素,行内块元素和块元素

行内元素(内联元素):默认在同一行中,高度和宽度无效

span img a input textarea

行内块元素:默认在同一行中,可设置高度和宽度

img imput td

块元素:默认独占一行,可设置高度和宽度

div h1-h6 ul ol td

3.浏览器运行机制,重绘,重排(回流)

从输入url到页面展示到底发生了什么:

解析html和css创建DOM树和CSSOM树后结合成渲染树(render tree),

布局渲染树,计算每个节点在屏幕上的坐标

绘制渲染树,

重绘:元素无新增或者删除,只是有元素样式发生了改变,浏览器需要该元素进行重新渲染样式,这个过程叫重绘;

重排(回流):元素有新增或者删除,浏览器需要重新渲染dom树的过程就叫做重排

4.居中的方式

文字水平居中:text-align: center

文字垂直居中: line-height: 所在区域的高度

块级元素:margin: auto

加定位的元素:边偏移所在区的宽的一半,margin-对应方向:该元素自身外边距的一半

flex布局:

display: flex

justify-content: center

align-items: center

5.css中选择器

基础选择器:

类选择器,多类名选择器,id选择器,标签选择器,通配符选择器

复合选择器:交集选择器 .并集选择器 ,后代选择器,子代选择器 后代子选择器

伪类选择器

伪元素选择器

6.隐藏元素的方式有哪些区别是什么?

display: none/block 隐藏后没有保留位置

visiblity: visible/hidden 隐藏后保留其位置

position: absolute 绝对定位到显示区以外 (脱标)

opacity:0 透明度设为0隐藏后保留其位置

7.什么是响应式设计?响应式设计的基本原理是什么?如何做

可以根据不同的显示终端做出相应的响应和调整,一个网站同时兼容多个终端

原理是头部meta声明viewport同时设置相应的参数

8.什么是防抖和节流?有什么区别?如何实现?

节流thorttle:n秒内只执行一次操作,如果n秒内有多次的重复此操作,则只有一次有效

防抖debounce: n秒后执行操作,如果n秒内有重复调用此操作,则重新计时n秒后操作

区别:节流是只执行一次操作,防抖是只执行最后一次操作

9.事件捕获,事件冒泡,事件委托

给元素绑定事件有个参数bool: true/false

如果false则为事件捕获,事件会从上级到下级依次触发

如果true则为事件冒泡,事件会从下级到上级依次触发(一般都是事件冒泡,事件捕获很少用)

阻止事件冒泡的方法:event.stopPropagation()

利用冒泡原理给父级绑定事件的达到触发效果

10.ajax axios jsonp 理解区别 11.flex布局面试题12.css优先级13.什么是bfc?

块级格式化上下文(block formating content)

解决了哪些问题:

a. float脱标造成了‘高度塌陷’;

b. margin边距重叠

css3和html5都增加了哪些新元素,然后扩展着问

三,框架--vue1.理解mvc和mvvm设计思想的区别

mvc属于一种设计模式,

2.v-show和v-if的区别

v-show:改变元素css属性display:none来改变元素的显示和隐藏

v-if:操作dom节点的存在和消失来改变元素的显示和隐藏 每次都会重新删除或创建元素

3.简述一下vue的生命周期

beforeCreate():组件实例之前,此时还访问不到data和methods中的数据和方法

created():可以访问到data和methods中的数据和方法

beforeMount():将vue中的指令执行,模板字符串渲染成到内存中的DOM,只是在内存中,渲染好了模板,并没有把模板挂载到真正的页面中去

mounted():表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了

beforeUpdate() :data中的数据已经改变只是还没有同步到页面中去

updated():数据已经同步更新到了页面中了

beforeDestroy():所有的data和所有的methods,以及过滤器、指令等,都处于可用状态,此时还没有真正执行销毁的过程。

destroyed():vue实例已经完全销毁,可清理它与其它实例的连接,解绑它的全部指令及事件监听器并不能清除DOM,仅仅销毁实例。

4.vue的双向数据绑定和底层原理

v-model:实现表单中的数据和model中的数据双向绑定,任何一方改变都是同时改变绑定的另一方。

是通过数据劫持结合发布订阅模式来实现双向绑定的,

数据劫持是通过Object.defineProperty 方法,当我们监听到属性发生变化之后我们需要通知 Watcher 订阅者执行更新函数去更新视图,我们还需要一个 compile 指令解析器,用于解析我们的节点元素的指令与初始化视图

5.vue中的样式设置方法

可以v-bind绑定class和style属性传入无序的键值对进行设计元素的样式

6.v-for中的绑定key属性

不绑定key(直接收string和number类型)元素的话,在遍历一些序列的并且此元素前有选项框的话会出bug

7.vue中过滤器的使用和作用,以及你的使用场景

定义全局或者公共的过滤器filter,并在插值表达式用管道符;可以格式化时间或者一些特殊的字符串

8.v-resource的基本使用和axios的使用和优点

实现Ajax请求 和跨域请求主要是通过插件vue-resource.js

关联vue先引入vue在引入vue-resource

通过this.$http.get/post/jsonp向url请求数据,然后将请求结果返回,返回结果是一个 Promise 对象.then来设置成功的回调函数

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios

axios和vue-resource差不多

如果直接使用axios进行请求的话:get请求的参数用params进行传参,post请求用data传参

axios可以执行多个并发请求

客户端支持保护安全免受 CSRF/XSRF 攻击

9.简述下对jsonp的理解10.vue中动画的实现方式有哪几种:

a.过度类名

b.第三方插件

c.钩子函数

11.a:vue中父子组件之间的传值,b:父组件如何调用子组件的值,c:平级组件之间的传值

a:父组件在引用子组件的时候把需要传递的值以v-bind绑定属性的方式传递到子组件内部供其使用,在子组件的props数组中定义就可以使用了。(props中的数据不能在子组件中进行修改,可以在 computed中进行加工后再进行计算使用)

父组件为引用的子组件中把需要传递的方法通过v-on绑定的方式绑定到子组件中,子组件通过this.$emit的方法进行调用并且可以为父组件传值。

b:一种是在使用子组件时,给子组件加一个ref引用,父组件通过this.$refs即可找到该子组件,也可以操作子组件的方法。另外一种是通过$children,可以获取到所有子组件的集合

c:同级组件不能直接传值,需要一个中间桥梁,可以先将数据传递给公共的父组件,然后父组件再将数据传递给需要的子组件(在需要通信的同级组件中分别引入eventBus.js文件)。

12.vuex的实际应用中的理解,作用,怎么用

是vue中状态管理工具,主要用于管理各个组件所公用的公共数据的存储,

属性有:

state: 存放数据,各组件需要修改数据需要commit提交给vuex中的mutation进行修改,不可以自己修改

mutation:存放方法

getter:用于修饰数据,有点像vue中的computed属性,一单引用了state中的数据有变化,那么getter中引用的state数据的方法也会重新刷新(从数据的同步变化上来看),也有点想过滤器(从返回的数据来看---只做修饰不做修改)

如果组件中用到一次state中的数据可以用$store.state.对象,如果用到多次可以用mapState将vuex中的数据映射到组件中。

13.vue-router路由传值以及编程式导航传值有哪些方式

传值方式一:在路径上用?传值可以用this.$route.query.属性获取值

传值方式二:通过router-link组件的to属性实现,在路径行用:传值可以用this.$route.params.属性获取值

编程式导航:第二个参数可以以对象的形式传入值

path和params不能同时使用,使用path和query是可以的,使用params传参时用name属性将路由路径起一个别名

注意:this.$route式路由路由中的参数对象;this.$router式路由中的导航对象

14.async和await异步调用,其与setTimeout,Promise的区别

.

15.vue3.0了解多少

16.react了解多少17.$nextTick和$set

nexttick 是指 在dom渲染完成后执行的一个函数,在某些特定情况下,我在这个方法中修改了值,然后要在页面上渲染这个值,这时候就需要用到nexttick,set是什么呢?set其实就是我在对一些数组嵌套对象 对象嵌套数组,想对内部的数据进行更改的时候,因为在创建实例期的时候 缺少了vue监听的 set get 属性,所以导致了内容不会更新,nexttick 在源码中编译成了如果在浏览器支持promise 我就添加了一个promise,然后按照时间循环机制event loop执行代码顺序,如果浏览区不支持promise ,源码中就会编译成一个set time out。 他们两个的共同点都在于,修改了数据以后,页面不会进行一个实时的页面刷新;不同点就在于,nexttick 更新的dom渲染完成后,而 set 是更新的是数据

18.vue自定义指令

四,网络

计算机网络模型:

应用层,传输层,网络层等等

响应码:

五,项目

1.



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3