面试题汇总
-
js数据类型
基本类型：String、Number、boolean、null、undefined。 引用类型：object。里面包含的 function、Array、Date。 -
如何判断数据类型
typeof 、instanceof 、constructor 、 Object.prototype.toString.call() -
es6新增特性
1.let声明变量和const声明常量，两个都有块级作用域 2.箭头函数 3.模板字符串 4.解构赋值 5.for of循环 6.import、export导入导出 7.set数据结构 8.... 展开运算符 9.修饰器 @ 10.class 类的继承 11.async、await 12.promise 13.Symbol 14.Proxy代理 -
箭头函数与普通函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用new 箭头函数不绑定arguments，取而代之用rest参数...解决 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值 箭头函数通过call（）或apply（）方法调用一个函数时 只传入了一个参数，对this没影响 箭头函数不能当作generator函数，不能使用yield关键字 普通函数的this指向调用它的对象 -
介绍pormise
promise是解决异步回调地狱问题的方案 promise对象的状态不受外界影响 promise有pending、fulfilled和rejected三种状态 promise的状态一旦改变就不会在变，任何时候都可以得到这个结果， 状态不可逆，只能由 pending变成fulfilled或者由pending变成rejected promise一旦建立他就会立即执行，无法中途取消 若果不设是回调函数promise内部抛出的错误不会反映到外部 当处于pending状态时无法得知目前进行到哪一个阶段 他还有四个方法分别是resolve成功调用 reject失败调用 all 将成功的内容合并 race里面那个结果后的的快就返回那个 -
弹性布局主要解决了什么问题
容纳所有类型的显示设备和屏幕尺寸 提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容， 即使它们的大小是未知或者动态变化的 -
vue的生命周期
创建前/后beforeCreate/created： 在beforeCreated阶段，vue实例的挂载元素el和数据对象 data都为undefined，还未初始化。 created阶段vue实例的数据对象data有了，el还没有 载入前/后beforeMount/mounted： 在beforeMount阶段，vue实例的el和data都初始化了， 但还是挂载之前为虚拟的dom节点，data尚未替换。 在mounted阶段，vue实例挂载完成，data成功渲染。 更新前/后beforeUpdate/updated： 当data变化时，会触发beforeUpdate和updated方法。不常用 销毁前/后beforeDestory/destoryed： beforeDestory是在vue实例销毁前触发， 一般在这里要通过removeEventListener 解除手动绑定的事件 执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定， 但是dom结构依然存在 -
vue中的组件通信
父组件给子组件传值： 父组件通过自定义属性的方式传给子组件子组件通过porops方法接收 子组件给父组件传值： 父组件通过自定义事件方式向子组件传递子组件通过$emit来接受参数 使用vuex来进行组件通信 -
vuex的模式什么，解决了什么问题
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.多个组件共享状态时，单向数据流的简洁性很容易被破坏： 2.多个视图依赖于同一状态。 3.来自不同视图的行为需要变更同一状态。 -
为什么data是函数
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离 而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题 -
computed与watch的区别
Computed： 支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步，当computed内有异步操作时无效， 无法监听数据的变化，computed 属性值会默认走缓存， 计算属性是基于它们的响应式依赖进行缓存的 Watch： 不支持缓存，数据变，直接会触发相应的操作； watch支持异步； 监听的函数接收两个参数，第一个参数是最新的值； 第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作；一对多； -
flex左固定，右边自适应
<div id="flex">
<div id="left">我在左边，固定宽</div>
<div id="right">我在右边，自适应</div>
</div>
#flex{
display: flex;
}
#left{
width: 200px;
}
#right{
background:green;
flex:1
}
-
promise静态方法
resolve()、reject()、all()和race() -
Promise实例化两个参数的作用
Promise通常配合then方法来链式的使用， then方法里面第一个回调函数表示成功状态， 也就是resolve通过.then调用， 第二个是失败状态-reject通过.Cath调用， 如果默认写一个参数的话，默认resolve -
原生js继承的方式
构造函数继承 拷贝继承 原型继承 寄生组合式继承 es6中class继承 -
普通函数与箭头函数作用域的区别
箭头函数不会创建自己的this，所以它没有自己的this， 它只会从自己的作用域链的上一层继承this 箭头函数继承而来的this指向永远不变.是继承的它定义时所处的 全局执行环境, 之后不再改变 箭头函数继承而来的this指向永远不变 普通函数内部的this分两种情况，严格模式和非严格模式。 非严格模式下，this 默认指向全局对象window 而严格模式下， this为undefined 构造函数中的this与被创建的新对象绑定 对象内部方法的this指向调用这些方法的对象 -
vue中动态路由的实现
Vue的路由实现：hash模式 和 history模式 hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash， 用window.location.hash读取； history模式：history采用HTML5的新特性；且提供了两个新方法： pushState（），replaceState（）可以对浏览器历史记录栈进行修改， 以及popState事件的监听到状态变更 -
e m i t 和 emit和 emit和on的实现方式原理，子传父的原理
$on和$emit采用了经典的发布订阅者设计模式 $on首先定义一个事件中心，通过on订阅事件，将事件存储在事件中心 然后通过$emit触发事件中心里面存储的订阅事件 $emit根据传入的时间名从当前实例的事件中心中获取到该事件名所对 应的的回调函数cbs，然后在获取传入的附加参数args，由于cbs是一 个数组所以遍历该数组，拿到每一个回调函数，执行回调函数并将附 加参数args传给该回调。 父组件通过自定义事件的方式 向子组件传递 子组件通过$emit来接受参数 -
Keep-alive如何清除缓存
将实例 $destroy() 清除 cache 对应的 Vnode 删除 keys 中对应的 key -
原生js写一个轮播图
<div id="box" class="all">
<div class="div">
<ul>
<li>
<img src="images/1.jpg" width="500px" height="300px"/>
</li>
<li>
<img src="images/2.jpg" width="500px" height="300px"/>
</li>
<li>
<img src="images/3.jpg" width="500px" height="300px"/>
</li>
<li>
<img src="images/4.jpg" width="500px" height="300px"/>
</li>
<li>
<img src="images/6.jpg" width="500px" height="300px"/>
</li>
</ul>
<ol></ol>
</div>
<div id="btn">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all{
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.div{
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.div>ul>li{
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.div>ul{
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.div>ol{
position: absolute;
right: 35%;
bottom: 10px;
line-height: 20px;
text-align: center;
margin: 0 auto;
}
.div>ol>li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
border: none;
margin-left: 10px;
}
.all>.div>ol>.sbtn{
background: orange;
border-radius: 50%;
border: none;
}
#btn{
display: none;
}
#btn>span{
margin-top: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 50%;
cursor: pointer;
line-height: 40px;
text-align: center;
background: #000;
font-size: 30px;
color: #fff;
opacity: 0.5;
}
#btn>#right{
right: 8px;
left: auto;
}
var box=fun$("box")
var div=box.children[0]
var width=div.offsetWidth
var ul=div.children[0]
var ol=div.children[1]
var li=ul.children
var btn=fun$("btn")
var num=0
for (i=0; i<li.length; i++) {
var list=document.createElement("li")
ol.appendChild(list)
list.setAttribute("index",i)
list.onmouseover=function(){
for (k=0; k<ol.children.length; k++) {
ol.children[k].removeAttribute("class")
}
this.className="sbtn"
num=this.getAttribute("index")
animate(ul,-num*width)
}
}
ol.children[0].className="sbtn"
ul.appendChild(ul.children[0].cloneNode(true))
var time=setInterval(fun,1000)
box.onmouseover=function(){
btn.style.display="block"
clearInterval(time)
}
box.onmouseout=function(){
btn.style.display="none"
time=setInterval(fun,1000)
}
fun$("right").onclick=fun
function fun(){
if(num==li.length-1){
num=0
ul.style.left=0+"px"
}
num++
animate(ul,-num*width)
if (num==li.length-1) {
ol.children[ol.children.length-1].removeAttribute("class")
ol.children[0].className="sbtn"
}else{
for(h=0; h<ol.children.length; h++){
ol.children[h].removeAttribute("class")
}
ol.children[num].className="sbtn"
}
}
fun$("left").onclick=function(){
if (num==0) {
num=5
ul.style.left=-num*width+"px"
}
num--
animate(ul,-num*width)
for(h=0; h<ol.children.length; h++){
ol.children[h].removeAttribute("class")
}
ol.children[num].className="sbtn"
}
function animate(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function() {
var current = element.offsetLeft
var step = 10;
step = current < target ? step : -step
current += step;
if(Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 10);
}
- 多维数组求和简单方式
- js实现斐波那契数列
//斐波那契数列1 1 2 3 5 8 13 ......
function feiBo(n){
var a = 1;
var b = 1;
if(n == 1){
return a;
}
if(n == 2){
return b;
}
for(var i = 3,sum = 0;i <= n;i++){
sum = a + b;//sum的值为a,b的和
b = a;//a的值赋值给b;
a = sum;//sum的值给a,接着i++进行下一圈
}
console.log(sum);
}
feiBo(6);
斐波那契数列代码原文链接：https://blog.csdn.net/weixin_40196539/article/details/95751447
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
