面试题总结day01

待我称王封你为后i 2022-10-30 06:27 152阅读 0赞

**json对象与json字符串转换的方法**  
var tojson = JSON.parse(); 转JSON格式  
var tostring = JSON.stringify() 转string格式  
**jq的选择器都有哪些**  
$(id)  
class  
div  
p:eq(index)  
ul li:last()  
ul li:first()  
\*  
**谈谈ajax**  
是指不刷页面的情况下更新页面上的数据  
var xhr = XMLHttpRequest();  
xhr.onreadstatechange=function()\{

\}  
xhr.open(‘get’,‘xx.php’,true);  
xhr.send(null)  
$.ajax(\{  
url:"",  
type:"",  
data:\{\},  
call:"",  
callback:"",  
cuccess:function(res)\{  
\},  
error:function(err)\{  
\}  
\})  
http状态码  
200请求成功  
300重定向  
400 客户端错误  
500 服务器端错误  
ES6新特性  
块级作用域

**清除浮动的方法**  
// 方法1 根据浮动元素的宽高 来设置浮动元素父元素的宽高 来清除浮动  
// 方法2 在浮动元素的最后加一个空元素设置css为 clear:both demo01  
// 方法3 在浮动元素的父级元素加 overflow:hidden 属性  
**H5新特性**  
video  
audio  
Drag 和 drop 拖放  
音视频/ 拖放API  
Canvas画布 svg  
Geolocation地理定位  
css动画 js动画 jq动画  
@keyframes animation  
**css3新属性**  
flex布局  
flex-direction 主轴的方向 flex-direction: row | row-reverse | column | column-reverse;  
flex-wrap 换行 flex-wrap: nowrap | wrap | wrap-reverse;  
flex-flow flex-direction属性和flex-wrap属性的简写形式  
justify-content 主轴上的对齐方式 justify-content: flex-start 左对齐 | flex-end 右对齐 | center 居中| space-between 两端对齐，项目之间的间隔都相等 |  
space-around 个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍;  
align-items 交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch;  
align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 align-content: flex-start | flex-end | center | space-between | space-around | stretch;  
媒体查询  
@media only screen and (max-width: 500px) \{  
**css优先级**  
!important 行内 ID 类/伪类

**props怎么实现双向数据绑定**  
通过Object.defineProperty来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。  
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为  
getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。  
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，  
通过Compile来解析编译模板指令（vue中是用来解析 \{ \{\}\}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；  
视图交互变化（input）—>数据model变更双向绑定效果。

## js ##

**this指向问题**  
普通函数的this指向看的是：  
// 1.调用者  
// 2.有没有call/apply改变this指向  
// 3.new改变AO中的this为一个空的对象  
// 4.什么都没有，单纯调用函数，this就是window，在自己的AO中。  
对于普通函数, this的值基于函数如何被调用,  
对于箭头函数,this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的  
**Promise 实现**  
// 三个状态 pending (未决定的) resolve (决定) reject (拒绝)  
// Promise 是 ES6 新增的语法，解决了回调地狱的问题。  
// 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，  
// 将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。  
// then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。  
// 因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，  
// 如果返回的是一个相同实例的话，多个 then 调用就失去意义了  
**请描述一下cookie、sessionStorage和localStorage的区别？**  
// 相同点：都存储在客户端  
// 不同点：  
// 1.存储大小  
// cookie数据大小不能超过4k。  
// sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。  
// 2.有效时间  
// localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；  
// sessionStorage 数据在当前浏览器窗口关闭后自动删除。  
// cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭  
// 3.数据与服务器之间的交互方式  
// cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端  
// sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存  
**闭包 机制 及 原理**  
闭包是什么，有什么特性，对页面有什么影响  
及重用一个变量又使变量不受全局污染的一种机制  
造成内存泄漏  
一个函数的返回值是另一个函数 ， 返回的函数调用了父级函数的标量 返回的函数在外部被调用就形成了闭包

**如何阻止事件冒泡，阻止事件默认行为**  
e.stopPropartion e.eventdefulrt  
**事件代理**  
//利用事件冒泡 让其父元素代理  
写法 $("\#ul").on(‘click’,‘li’,function()\{\}  
**原型链**

在js中每个对象都有prototype属性，通过__proto__进行访问，__proto__将对象和原型连接起来组成原型链

**作用域**  
全局作用域  
最外层函数和最外层函数外声明的变量 拥有全局作用域  
所有未声明赋值的变量 拥有全局作用域  
window  
**局部作用域**  
函数内部  
**作用域链**  
作用域链的作用是保证执行环境中有权访问的变量和函数有序执行，变量自下往上访问，当访问到window的属性时终止访问  
**浅拷贝 和 深拷贝**  
浅拷贝只拷贝一层，深层次的对象只拷贝其引用，深拷贝拷贝多层，每一级别的数据都能拷贝出来  
浅拷贝 赋值 展开运算符的方法 JSON.parse(JSON.styingify)

跨域 和 解决方式(7种及优缺点) 中及原理  
浏览器从一个域名的网页去访问另一个域名的资源时 协议 端口 域名 任意一个不同时会出现跨域  
解决跨域的问题有 jsonp  
nginx 反向代理 ActiveX控件 websocket CORS  
后端设置允许跨域请求 前端  
***vue***\*\*\*  
vue-model响应原理  
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。  
在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。  
Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。  
一旦创建了绑定，DOM 将与数据保持同步。  
每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，  
不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护  
vue双向数据绑定原理  
Vue.js的数据观测实现原理和Angular有着本质的不同。了解Angular的读者可能知道，Angular的数据观测采用的是脏检查（dirty checking）机制。  
每一个指令都会有一个对应的用来观测数据的对象，叫做watcher；一个作用域中会有很多个watcher。每当界面需要更新时，  
Angular会遍历当前作用域里的所有watcher，对它们一一求值，然后和之前保存的旧值进行比较。如果求值的结果变化了，就触发对应的更新，  
这个过程叫做digest cycle。  
脏检查有两个问题：  
1.任何数据变动都意味着当前作用域的每一个watcher需要被重新求值，因此当watcher的数量庞大时，应用的性能就不可避免地受到影响，并且很难优化。  
2.当数据变动时，框架并不能主动侦测到变化的发生，需要手动触发digest cycle才能触发相应的DOM 更新。  
Angular通过在DOM事件处理函数中自动触发digest cycle部分规避了这个问题，但还是有很多情况需要用户手动进行触发。  
Vue.js采用的则是基于依赖收集的观测机制。从原理上来说，和老牌MVVM框架Knockout是一样的。依赖收集的基本原理是：  
1.将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值，也可以被赋值。  
2.在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。  
3.当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值，并触发相应的更新。  
4.依赖收集的优点在于可以精确、主动地追踪数据的变化，不存在上述提到的脏检查的两个问题。但传统的依赖收集实现，比如Knockout，  
通常需要包裹原生数据来制造可观察对象，在取值和赋值时需要采用函数调用的形式，在进行数据操作时写法繁琐，不够直观；同时，对复杂嵌套结构的对象支持也不理想。  
Vue.js利用了ES5的Object.defineProperty方法，直接将原生数据对象的属性改造为getter和setter(这是ES5的特性，需要js解释引擎的支持，  
无法通过各种打shim补丁来实现，至少现在的babel pollyfill和各种shim是没法的。这也是为什么Vue不支持IE8及以下版本的原因，  
因为IE8的defineProperty只支持DOM对象，纯Object会报错。)，在这两个函数内部实现依赖的收集和触发，而且完美支持嵌套的对象结构。  
对于数组，则通过包裹数组的可变方法（比如push）来监听数组的变化。这使得操作Vue.js的数据和操作原生对象几乎没有差别\[注:在添加/删除属性，  
或是修改数组特定位置元素时，需要调用特定的函数，如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。  
在操作对象类型数据的时候一定要注意这点，否则无法实现响应。  
vue.js的两个核心是什么  
数据驱动、组件系统  
请问 v-if 和 v-show 有什么区别  
列举 vue指令  
v-for 与 v-if 的优先级  
vue中 keep-alive 组件的作用  
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。  
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。  
vue中如何利用 keep-alive 标签实现某个组件缓存功能？

<keep-alive include='include_components' exclude='exclude_components'>
    <component>
        
    </component>
    </keep-alive>
    
    include - 字符串或正则表达式，只有名称匹配的组件会被缓存
    exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
    include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

vue中如何编写可复用的组件  
十个常用的自定义过滤器  
8.vue中 key 值的作用？  
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，  
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

vue等单页面应用及其优缺点  
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。  
MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。  
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；  
第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退  
什么是vue的计算属性  
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；  
②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，  
也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。  
vue生命周期  
beforeCreate（创建前） 在数据观测和初始化事件还未开始  
created（创建后） 完成数据观测，属性和方法的运算，初始化事件， e l 属 性 还 没 有 显 示 出 来 b e f o r e M o u n t （ 载 入 前 ） 在 挂 载 开 始 之 前 被 调 用 ， 相 关 的 r e n d e r 函 数 首 次 被 调 用 。 实 例 已 完 成 以 下 的 配 置 ： 编 译 模 板 ， 把 d a t a 里 面 的 数 据 和 模 板 生 成 h t m l 。 注 意 此 时 还 没 有 挂 载 h t m l 到 页 面 上 。 m o u n t e d （ 载 入 后 ） 在 e l 被 新 创 建 的 v m . el属性还没有显示出来 beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted（载入后） 在el 被新创建的 vm. el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）在el被新创建的vm.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。  
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。  
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。  
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。  
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。  
1.什么是vue生命周期？  
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。  
2.vue生命周期的作用是什么？  
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。  
3.vue生命周期总共有几个阶段？  
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。  
4.第一次页面加载会触发哪几个钩子？  
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。  
5.DOM 渲染在 哪个周期中就已经完成？  
答：DOM 渲染在 mounted 中就已经完成了。  
vue组件通信  
父>子

<Hade :name=list></Hade>    
    props:["name"] ;
    子>父
    子组件
    <input type="text" v-model="num" @change="getData">
    methods
    
    getData:function(){
            // console.log("发送了");
            this.$emit("val",this.datanum ++);
        }
    父组件
    <Footer v-on:val="vals"></Footer>
    vals:function(data){
            this.listnum = data 
        }
    
    兄弟
    创建 bus.js
    import Vue from "vue";
    export default new Vue();
    child1
    import Bus from "../../assets/bus.js";
    <input type="button" value="点击发送" @click="setData">
    setData:function(){
            Bus.$emit("val",this.listnum)
        }
    child2
    import Bus from  '../../assets/bus.js';
        mounted(){
            var _this = this;
            Bus.$on('val',(data)=>{
                console.log(data)
            })
        }

vue怎么定义全局方法  
vue-router如何响应 路由参数 的变化？  
首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。  
beforeEach主要有3个参数to，from，next：  
to：route即将进入的目标路由对象，  
from：route当前导航正要离开的路由  
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。  
vue-router的几种实例方法以及参数传递

vue-router的动态路由匹配以及使用  
组件及其属性  
vue-router实现路由懒加载（ 动态加载路由 ）  
vue-router路由的两种模式  
hash模式：在浏览器中符号“\#”，\#以及\#后面的字符称之为hash，用window.location.hash读取；  
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。  
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。  
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。  
Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，  
你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

什么是vuex？  
使用vuex的核心概念  
组件中使用vuex的值和修改值的地方？  
pc端页面刷新时实现vuex缓存  
vuex工作原理详解

http  
Promise对象是什么  
axios、fetch与ajax有什么区别？  
什么是JS的同源策略和跨域问题？  
axios有什么特点及使用方法  
如何使用axios拦截器

webpack的特点  
如何配置 config.js或者 vue.config.js

css3  
如何适配移动端？【 经典 】  
垂直居中对齐  
使用表单禁用时移动端样式问题

优化  
vue如何优化首屏加载速度  
如何配置 vue 打包生成文件的路径  
Object.defineProperty()方法

源码剖析  
vue内部与运行机制：  
Vue.js 全局运行机制  
响应式系统的基本原理  
如何编译template 模板？  
批量异步更新策略及 nextTick 原理？  
什么是proxy代理？  
什么是 Virtual DOM？

concat 合并数组  
join 返回字符串,连接数组中所有元素，元素由指定分割符分割开来  
pop 移除数组最后一个元素  
push 往数组结尾添加一个元素 ，并返回新的长度  
shift 移除数组开头第一个元素  
unshift 往数组开头添加一个元素，并返回新的长度  
slice(start,end) 取数组中的一段  
sort 数组排序  
reverse() 数组倒序  
length 获取数组的长度  
lastindexOf(‘arr1’) 反向查找循序  
indexOf() 正向查找 查不到返回-1

字符串方法  
charAt() 返回指定索引位置的字符  
concat() 拼接字符串  
replace(a,b) 字符串替换  
slice(start,end) 取字符串中的一段  
split(str/reg,length)字符串分割维数组  
search(reg) 检索字符串指定字符串，  
indexOf()  
match() 正则相匹配的字符串  
substring(start,end)字符串截取  
tostying(); 将number类型转为字符串类型  
toFixed() 四舍五入,参数为小数点后的位数  
toUpperCase() 转大写  
toLowerCase() 转小写

data方法  
Data() 根据本地时间返回当天的日期和时间；  
getData() 返回日期(1-31)  
getFullYear() 返回年份(四位数字)  
getMouth() 返回月份(0-11月)  
getDay() 返回星期(0-6)  
getHours 返回小时(0-23)  
getMinutes() 返回分钟(0-59)  
getSeconds() 返回秒(0-59)

Math 方法  
Math.floor() 向下取整  
Math.ceil() 向上取整  
Math.max(a,b) 取最大值  
Math.min(a,b) .2  
Math.random() 随机数 公式min+Math.random()\*(max-min)

//自动获取地址栏链接带？以及后面的字符串  
var surl = ‘https://baidu.com?name=333&name1=444&name2=555&name=’;  
var obj = \{\};  
var urls = surl.substr(surl.indexOf("?")+1).split("&");  
for(var i = 0;i<urls.length;i++)\{  
var temp = urls\[i\].split("=");  
obj\[temp\[0\]\] = temp\[1\]  
\}  
console.log(obj)