常见前端面试题

2019-12-26  本文已影响0人  zlf_j
深拷贝，浅拷贝
  • 深拷贝是开辟一块新的内存地址，将源对象的各个属性逐个复制过去，对拷贝对象和源对象各自的操作互不影响
function deepCopy(obj) {
　　var out = (obj.constructor === Array) ? [] : {};
　　for (var i in obj) {
　　　　if (typeof obj[i] === 'object') {
　　　　　　out[i] = (obj[i].constructor === Array) ? [] : {};
　　　　　　out[i] = deepCopy(obj[i]);
　　　　} else {
　　　　　　　out[i] = obj[i];
　　　　}
　　}
　　return out;
}
  • 浅拷贝（会导致引用类型A和引用类型B指向同一块内存地址。改变其中一方内容，都是在原来的内存上做修改会导致对象和源对象都发生改变）
let obj = {a: 1}
obj1 = obj

https://www.cnblogs.com/jiajiamiao/p/11641574.html

promise
const fn = new Promise(function (resolve, reject) {
  setTimeout(()=>{
    let num = Math.random()
    if (num > 5) {
      resolve(num)  //返回值
    } else {
      reject(‘error’) // 报错
    }
  },3000)
})
fn.then((res)=>{
  console.log(res) // 随机数
},(err)=>{
  console.log(err) // 报错
})

https://www.cnblogs.com/lunlunshiwo/p/8852984.html

响应式，数据绑定
  • 数据驱动：Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。
  • 在vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。
  • 大致上是使用数据劫持和订阅发布实现双向绑定。通过实例化一个Vue对象的时候，对其数据属性遍历，通过Object.defineProperty()给数据对象添加setter getter，并对模板做编译生成指令对象，每个指令对象绑定一个watcher对象，然后对数据赋值的时候就会触发setter，这时候相应的watcher对其再次求值，如果值确实发生变化了，就会通知相应的指令，调用指令的update方法，由于指令是对DOM的封装，这时候会调用DOM的原生方法对DOM做更新，这就实现了数据驱动DOM的变化。同时vue还会对DOM做事件监听，如果DOM发生变化，vue监听到，就会修改相应的data

https://blog.csdn.net/tangxiujiang/article/details/79594860

$set
数组===> this.$set( Array, index , value)
对象===>this.$set(Object,''key'',value)

https://blog.csdn.net/aaa333qwe/article/details/80362117

$nextick
  • 定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
  • 用法1：created
    Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
  • 用法2：
    当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

https://blog.csdn.net/zhouzuoluo/article/details/84752280

节流函数
  • 函数节流：针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
  • 最常见的一些需要节流的事件：onresize，scroll，mousemove ,mousehover，因为这些事件会在页面中频繁被触发
  • 主要实现思路就是通过setTimeout定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用
document.querySelector('.box').addEventListener('mouseenter',function(){
  console.log('鼠标进来啦')
})

节流函数
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
  clearTimeout(clock)
   clock = setTimeout(function(){
    console.log('鼠标进来啦')
  },1000)
})

https://www.jianshu.com/p/be095def79ec

子组件改变父组件的值

$emit直接调用函数，把参数传给父元素，父元素调用函数时，赋值就可以了。
https://www.cnblogs.com/doing-good/p/10862491.html

vue .sync修饰符
<text-document :title.sync="doc.title"></text-document>
当子组件需要更新 title 的值时，它需要显式地触发一个更新事件：
this.$emit('update:title', newValue)

https://www.cnblogs.com/00feixi/p/11526057.html

继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。

　　var arr = [8, 7, 6, 5, 4, 3, 2, 1];
　　function maoPao(s) {
　　　　for (var i = 1; i < arr.length; i++) { //进行了7次
　　　　　　for (var j = 0; j < arr.length; j++) {
　　　　　　　　if (arr[j] > arr[j + 1]) {
　　　　　　　　var temp; //空杯子
　　　　　　　　temp = arr[j]; //大叔放到空杯子
　　　　　　　　arr[j] = arr[j + 1]; //小数放到小的位置上
　　　　　　　　arr[j + 1] = temp; //da数放到大的位置上
　　　　　　　　}
　　　　　　}
　　　　}
　　return arr;
　　}
     console.log(maoPao(arr))

https://www.cnblogs.com/yy0419/p/11137205.html

块级作用域 关键字let, 常量const
箭头函数
(1).简化了代码形式，默认return表达式结果。
(2).自动绑定语义this，即定义函数时的this。
promise异步请求数据
set,map
字符串模板 Template strings
var name = "Bob", time = "today";
Hello ${name}, how are you ${time}?
// return "Hello Bob, how are you today?"
https://www.cnblogs.com/sunshinezjb/p/9248533.html

 $('input[name="nw"]'   $("[name='theName']");

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);  x,y,r,开始度数，结束度数，圆是360度（2*Math.PI）
ctx.stroke();

https://www.w3school.com.cn/tags/canvas_arc.asp

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
https://www.runoob.com/cssref/css3-pr-mediaquery.html

var cu = navigator.userAgent;
if('ActiveXObject' in window){
    alert('是ie浏览器')
}else if(/firefox/i.test(cu)){
   alert('是火狐浏览器')
}else if(/chrome/i.test(cu)){
   alert('是谷歌浏览器')
}

https://blog.csdn.net/qq_35872777/article/details/85272300

原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

  • 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
  • 定义：程序不需要的内存，由于某些原因其不会返回到操作系统或者可用内存池中。 内存泄露会导致（运行缓慢 ，高延迟，崩溃）的问题
  • 常见的导致内存泄露的原因有：
    1；意外的全局变量
    2；被遗忘的计时器或回调函数
    3；脱离文档的DOM的引用
    4；闭包

1.CORS跨域资源共享 后端需要设置Access--Control-Allow-Credentials:true ****
2.jsonp实现跨域：动态创建script，利用src属性进行跨域
3.nginx代理跨域
4.nodejs中间件代理跨域
5WebSokect协跨域
6.window.name+ifram跨域

let str = "http://localhost:3000/index.html？phone=12345678901&pwd=123123";
let arr = str.split("?")[1].split("&");   //先通过？分解得到？后面的所需字符串，再将其通过&分解开存放在数组里
let obj = {};
for (let i of arr) {
  obj[i.split("=")[0]] = i.split("=")[1];  //对数组每项用=分解开，=前为对象属性名，=后为属性值
}
console.log(obj);

https://www.cnblogs.com/zhangzhiyong/p/9949641.html

    //500毫秒内多次触发只会执行一次，
    function de(){
        let timer;
、
        return function(){
            if(timer) clearTimeout(timer);//如果500毫秒内又一次触发，则会重新计算时间

            timer = setTimeout(() => {
              console.log('dddd')
            }, 500)
        }
    }
    document.querySelector('#btn').addEventListener('click',de())

https://blog.csdn.net/weixin_35958891/article/details/94462047

请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

面试题网站
https://www.cnblogs.com/jiajiamiao/p/11609335.html OK V
https://www.jianshu.com/p/eb0f269098d5 不是很全 V
https://blog.csdn.net/keyandi/article/details/89227175 OK V

自己了解

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
  4. Ajax的最大的特点是什么。
    Ajax可以实现动态不刷新（局部刷新）
    readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成
    ajax的缺点
    1、ajax不支持浏览器back按钮。
    2、安全问题 AJAX暴露了与服务器交互的细节。
    3、对搜索引擎的支持比较弱。
    4、破坏了程序的异常机制。
    5、不容易调试。

https://blog.csdn.net/kenChenFire/article/details/88875832

上一篇 下一篇

猜你喜欢

热点阅读