面试合集

深拷贝和浅拷贝?

对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性

宏任务和微任务?

遍历有哪些?

for循环
foreach
map
filter过滤 条件筛选
some,every

apply,bind,call区别?

1、相同点:
三个函数都会改变this的指向(调用这三个函数的函数内部的this)
2、不同点:
1)、bind会产生新的函数,(把对象和函数绑定死后,产生新的函数)
2)、call和apply不会产生新的函数,只是在调用时,绑定一下而已。
3)、call和apply的区别,第一个参数都是要绑定的this,apply第二个参数是数组(是函数的所有参数),call把apply的第二个参数单列出来。

创建new的时候会做什么?

第一步:创建一个空对象,关联构造函数的原型对象。
第二步:执行构造函数,改变this的上下文,给创建的空对象属性赋值
第三步:判断第二部执行返回的是不是对象
第四部:返回var new2 = function(fn){//fn即构造函数

 var newObj = Object.create(fn.prototype);   
  var k = fn.call(newObj );    
 if( typeof(k) === 'object'){     
      return k   
  }else{        
 return newObj   
  }}

promise用法和返回值?

promise接受的参数是一个函数,函数有2种,resolve和reject。resolve将等待态转为成功态,rejec将等待态转为失败态。有两个静态方法,all和race。all是所有都会成功才会返回成功状态,race是谁先成功或者失败,就会返回成功或者失败

v-if 和v-show区别?

1.v-show跟v-if都是做条件隐藏跟显示用的,
2.v-show是页面加载的时候显示的内容跟隐藏的内容同时加载在页面上只是根据条件进行了隐藏。
3.v-if是页面加载的时候根据条件进行显示需要展示的内容。并且销毁不需要显示的条件内容,每次加载的时候进行销毁当前加载符合条件的内容
4.简单的来说就是前者在页面上可以看见隐藏的条件,后者看不见隐藏的条件。
5.使用场景:v-show在高频切换的时候为了不浪费资源更多的使用,后者在不需要高频切换的时候更多的使用。

深拷贝的方法?

1、使用递归的方式实现深拷贝
检查是数组还是对象,数组就数组拷贝,对象就对象拷贝。
2、通过 JSON 对象实现深拷贝json.parse(json.stringify(obj))
3、通过jQuery的extend方法实现深拷贝
Object.assign()拷贝,这个东西叫做对象合并,把源对象的所有可枚举的属性复制到目标对象。
es6中的...拓展符
当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝

数组遍历方法?

foreach
map
filter过滤 条件筛选
some,every

判断数组的类型?

array.isarray
typeof typeof无法判断 null object array
instanceof instanceof 能够区分typof 无法判断的那几个
constructor constructor用来区分obj其他特殊类型 比如date
object.prototype.tostring object那个最全,不过输出结果是[object xxx]所以需要封装

vue中session和localstorage 区别?

sessionStorage(临时存储):为没一个数据维持一个存储区域,浏览器打开会创建,关闭浏览器就会消失。
2.localStorage(长期存储):和前者一样,区别在于浏览器关闭后数据依然存在。

在js中数组指定位置中插入元素

push 在头部插入 splice 在指定位置插入

1~x递归求和

vue双向绑定、响应式原理

使用object.denfineproperty把属性全部转换为getter或者setter,
Vue 不能检测到对象属性的添加或删除,解决方法是手动调用 Vue.set 或者 this.$set

vuex的全局管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
核心概念:
state 存放状态
mutations state成员操作
getters 加工state成员给外界
actions 异步操作
modules 模块化状态管理

vuerouter的history和hash模式

history:没有#,不会重新加载
hash:前面有#,可以对记录进行修改

webpack的plugin和loader区别以及常见配置

Loader直译为"加载器"。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。在合适的时机通过 Webpack 提供的 API 改变输出结果。

babel把es6转换为es5,原理

babel是个编译器,由3个部分,解析,变换,再建。解析:代码字符串抽象成语法树,变换:对语法树进行操作,再建:变换后的语法树再生成代码字符串

rem怎么用

VUE中装饰器原理(我项目里写了@prop)

其实装饰器参数是这样的,我们这里的 addA,

它外层接收的是 num: number。

内层接收的是 constructor: Function

VUE的依赖注入 provide/inject

这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
  也就是说,在父组件只要声明了provide,在其子组件,孙组件,曾孙组件等能形成上下游关系的组件中交互,无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。

页面性能优化

1、减少http请求数;2、图片优化;3、使用CDN;4、开启GZIP;5、样式表和JS文件的优化;6、使用无cookie域名。

VUE的组件data为什么是函数?

当我们的data是一个函数的时候,每一个实例的data属性都是独立的,不会相互影响了。你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关

函数声明和表达式的区别?

函数声明会存在作用域提升的情况,
函数表达式进行时复制,需要在声明之后才会被调用
函数声明无论是放在被调用后,仍然可以正确使用、函数表达式不行,会报错

把已知的字符串用驼峰表示法转换

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
   window.onload = function(){
    function toTF(str){
     //截断
     var tf = str.split('-');
     for(var i=1; i<tf.length; i++){
      //获取首字母
      var k = tf[i].charAt(0);
      //修改数组    首字母
      tf[i] = tf[i].replace(k,k.toUpperCase());
      // console.log(tf[i]);
     }
     console.log(tf);
     //拼接字符
     return tf.join('');
    }
    var pt = document.querySelector('input');
    var btn = document.querySelector('button');
    // console.log(pt)
    btn.onclick = function(){
     alert('驼峰命名: '+toTF(pt.value));
    }
    // var kk = toTF("back-aaa-fff-cc-dd-ff-gg");
    // console.log(kk)
   }
  </script>
 </head>
 <body>
  <input type="text" name="" id="" value="background-color" /><button type="button">转驼峰命名</button>
 </body>
</html>

清除浮动的方式以及各自的优劣

1.加个空白标签
2.父级元素添加overflow
3.after伪元素清楚 display:block。 content:“ ”,clear:both

HTML的全局属性

<img>的title和alt的区别

浏览器地址栏输入url到显示页面的步骤

1、浏览器地址栏输入url

2、浏览器会先查看浏览器缓存--系统缓存--路由缓存,如有存在缓存,就直接显示。如果没有,接着第三步

3、域名解析(DNS)获取相应的ip

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手

5、握手成功,浏览器向服务器发送http请求,请求数据包

6、服务器请求数据,将数据返回到浏览器

7、浏览器接收响应,读取页面内容,解析html源码,生成DOm树

8、解析css样式、浏览器渲染,js交互绑定多个域名,数量不限;

如何水平居中一个元素?

1.margin: 0 auto,
text-align:center‘’

  1. display:flex
    3.父元素poaition:absolute子元素margin-left
    4.display:inline-block

如何垂直居中一个元素

  1. table自带功能
  2. 100% 高度的 afrer before 加上 inline block
  3. div 装成 table
  4. margin-top -50%
  5. translate -50%
  6. absolute margin auto
  7. flex

==和===的区别

什么是fouc,如何避免?

说出至少3种减少页面加载时间的办法?(加载时间指的是感知的时间或者页面实际加载时间)

1.减少http请求
2.减少图片尺寸,更改图片格式
3.压缩代码 减少无用空格

POST和GET区别

get回退浏览器是无害的,poat会载体提交请求
get产生的地址可以加入收藏夹,post不可以
get只支持url编码 post不可以
get 的参数会被保留 post不会
get传输有长度限制 post没有

什么是Ajax和JSON,他们的优缺点?(个人猜测是想问JSONP?但是面试题确实就这么问的)

手机端,PC端适配

一:响应式

做一个响应式的页面。即只用一个链接,用媒体查询来控制样式。同一个链接但是pc打开与移动端打开是不一样的样式。
二:做两套页面

对外宣传用同一个链接,但是该链接在移动端与pc端打开,会分别自动跳转到两个不同的详细的链接。

js判断是pc或移动端核心代码

TCP的3次握手

收到一个json格式的数据,怎么解析?

CSS的盒模型

DOM如何删除一个节点

remove和removechild hidden

闭包的理解

VUE传值,父到子,子到父,兄弟,爷孙 ,

父子组件:使用 v-on 通过事件通信
爷孙组件:使用两次 v-on 通过爷爷爸爸通信,爸爸儿子通信实现爷孙通信
任意组件:使用 eventBus = new Vue() 来通信,eventBus.on 和 eventBus.emit 是主要API
任意组件:使用 Vuex 通信

Vuex,怎么进行数据交互?

CSS半透明

1、opacity:不仅背景半透明,内部其他元素也半透明

2、rgba():只有背景半透明。

推荐阅读更多精彩内容