标签：面试题 ol 函数 前端 组件 num var children
面试题汇总
-
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
标签：面试题,ol,函数,前端,组件,num,var,children 来源： https://blog.csdn.net/Acolasiaa/article/details/115324463
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。