js、jq小实例面试

た入场券 2021-10-19 02:34 325阅读 0赞

1、动态设置显示的位置（x、y是获得鼠标的坐标），css不需设置left、top等

$(".rt_mouse_box").show().css({left:x,top:y});

2、什么是promise、和用法：

解决地狱回调问题

3、跨域：

引起原因：浏览器的同源策略、协议名、域名、端口号必须一致

解决办法：1、jsonp（前端和后台）2、cors（后台）3、服务器代理（后台）

jsonp实现方法原理：scrict标签是不受同源策略影响、js代码动态添加scrict，

var scrict = document.creatElement("crict")
    
    scrict.src = "http://xxxxx?callbakc=getdata"
    
    function getdata(){
        console.log(data)
    }
    document.body.appendchild(scrict)

4、闭包：

定义：嵌套函数中，内部函数访问外部函数的局部变量，则内部函数就是闭包

优点：可以延长外部函数的局部变量的生命周期

缺点：也是优点造成的，就是容易出现内存的泄漏

function fun(){
       var count = 1
        retutn function(){
            count++
            console.log(count)
        }
    }
    var fun2 = fun()
    fun2() //2
    fun2()//3

5、如何实现rem的适配

原因：同一个元素或盒子在不同大小的屏幕上要有一样的大小比例

实现原理：1rem等于html根元素的font-size的大小

实现步骤：

//获取屏幕宽度
    var width = document.documentElement.clientWidth
    //查找根元素
    var htmlNode = document.querySelector("html")
    //设置font-size
    htmlNode.style.font-size = width+"px"

6、变量提升（预处理）

定义：代码执行之前会把变量和函数收集，变量是声明提前但赋值不会，函数是整体提前。

console.log(name)//undefined
    var name = "xioaming"
    
    console.log(name)//xioaming
    func() //xioaming
    function func(){
        console.log(name)
    }

7、vue和react的区别

相同点：（1）都是组件式开发和虚拟dom

（2）可以通过父子组件传值

（3）通过数据来驱动

不通点：（1）vue是双向绑定、react数据流是单向的

（2）react是使用jsx，即html下载js里，而vue是分开

8、vue的通讯方式有哪几种

1、props（父传子）

2、自定义事件（子传父）

3、消息的订阅与发布（pubsub）（任意组件间）

4、vuex（任意组件间）

5、slot（插槽，主要传标签）

9、es6去重

var arr  = [1,2,3,3,4,5]
    
    var result = new Set(arr)
    
    var newarr = [...result]

10、数组元素对应作为实参

var arr=[1,2,3],
    function test(a,b,c){
    
    }
    test.apply(this,arr) //a=1,b=2,c=3
    
    
    call
    test.call(this,1,2,3) //a=1,b=2,c=3
    
    bind
    test.bind(this,1,2,3) //不调用改变this

11、前端优化方法

（1）css放顶部，js放底部；（2）异步路由；（3）雪碧图（小图标放到一个图）

（4）减少请求；（5）压缩资源；（6）减少dom操作、和循环

12、前端解决缓存问题

分为：1页面缓存、css缓存、js缓存

页面缓存解决办法

js和css的解决办法（添加版本号）

12、js数据类型

1、基本类型：string、number、null、undefind、boolen、symbol
       因为大小基本固定，值是存放在栈中
    
    2、引用类型：Array、Object、function
       栈中存的是指针，值存在堆中；指针指向堆，堆中存放值
        复制只是复制指针，而不是值

13.宏任务、微任务

1、宏任务：主线程就是一个宏任务、setTimeout、setInterval
       宏任务可以有多个
       宏任务执行完后，如果存在微任务，则想执行完所有微任务、再执行下一个宏任务
       
    2、微任务：new Promise.then({微任务})
       只有一个
    
    
    主线程从上到下执行，遇到异步或setTimeout忽略掉，把它们放到一个队列中，主线上的同步都执行完后，
    找微任务来执行，后再指向队列里那些异步

14、rem、em的区别

rem：相对html的font-size,如果html的font-size的字体大小为10px，则1rem等10px
    
    em:两种情况
       字体大小：相对父元素的字体大小，如：
         父的font-size=10px;则子的font-size是1em的话即使 10px；
       width/height/padding/margin:相对自身的字体大小

15、vw、wh

相对于视窗，（1vw 代表视窗的宽度为 1%）如窗口宽度为100px，则1vw=1px
    vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致
    
    与%的区别是，%是相对父元素

16.判断是数组还是对象

一.通过构造函数
    arr.constructor == Array  //返回true则是数组
    
    二.Array.isArray(arr)  //返回true
    
    三.console.log(arr instancof Arrray) //返回true

17.类

类：具有相同属性和方法的对象的集合
    怎么定义？和定义函数一样，类名需要大写：（属性写在构造函数下，方法写在原型下）
    
    function Person(name,age){ //类或叫构造函数
        this.name = name,
        this.age = age，
        //this.eat = function(){ 不建议写在这
        
       // }
    }
    //定义类里面的方法最好在原型下定义，因为原型对象下的属性和方法能被实例化对象共用
    Person.prototype.eat = function(){
        console.log(this.name +"在吃饭")  //this指向当前实例化对象
    }
    
    实例化：通过构造函数new出来的就是实力化对象，如person1就是实例化对象
    var person1 = new Person('小明','20')
    console.log(person1.eat())  //小明在吃饭

18.继承

父类：
    function Person(name,age){ 
        this.name = name,
        this.age = age
    }
    Person.prototype.eat = function(){
        console.log(this.name +"在吃饭") 
    }
    
    子类继承父类的属性和继承方法是不一样的
    
    继承父类的属性:
    function Cat(name,age){
        Person.call(this,'lili',20) //使用call使得this指向car1而不是window
    }
    继承父类的方法：
    Cat.prototype = new Person()
    Cat.prototype.constructor = Cat.constructor  //指回Cat
    
    使用：
    var car = new Cat("lili",20)

19.改变this的方法

var name = "小明"
    var obj ={
        name:"小红"
    }
    function a(one,two){
        console.log(this.name)
    }
    a() //指向window 小明
    
    a.call(obj,1,2) //小红 指向obj
    a.apply(obj,[1,2]) //小红
    a.bind(obj,1,2)() //小红  需要执行()

20.事件

div1.addEventListen('click',function(e){ 
        e.stopPropagation() //阻止冒泡
        e.preventDefault() //阻止默认
        e.target //事件源，就是点击了哪里触发的
        this  //当前事件的事件源
        return false //阻止默认
        e.cancelBubbiele() //IE阻止冒泡
    
     })

21 事件委托

作用：解决后生成元素的事件绑定问题
    通过冒泡事件，点击子元素触发父元素事件，再根据e.target.tagname == "LI" 来识别
    
    jq 
    
    $("ul").on("click","li",function(){ })  //动态添加的li也有点击事件

22、闭包

定义：函数里定义函数，内部函数可以调用外部函数的局部变量，外部函数被抵用完之后，内部函数没被释放，所以变量也没有释放
    
    用到的例子：ul下，点击li输出是第几个（自己的索引）
    
    for(var i=0;i<lilength;i++){
        (function(idx){ //外部函数
            uli[index].onclick = function(){ //内部函数，使用了外部函数的i
                consoel.log(idx)
            }
        })(i)
    }

23、jquery原理

使用的是继承（面向对象的方法封装），$是一个函数，返回jquery对象
    
    function $(selector){ selector是节点如 #div
        return new jquery(selector)
    }
    
    function jquery(){
        //定义属性
        //判断selector是类还是id还function，并且放进elementui数组
    }
    jquery.prototype.css = function(xxx,xxx){
        //this指向新生成的对象
    }
    
    //使用：
    $(".div").css("color":"#000")

24、重绘与回流

重绘：元素改变不影响布局，只是UI层面上的改变就叫重绘
    如改元素的颜色，背景色等
    
    回流（重排）：当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。
    如：页面初始渲染、浏览器窗口大小变化，增删dom元素、 大小、位置更改
    
    避免这两种情况：
        避免频繁操作样式，可汇总后统一一次修改
        减少 DOM 的操作

25、防抖

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行
    （每次执行方法时先清除之前的的延时器）（模糊搜索用到）

26、节流

https://www.cnblogs.com/jianxian/p/12077570.html
    节流：指定时间间隔内只会执行一次任务
    （防止表单频繁提交）

27、mvc与mvvm怎么理解

mvc：数据层改变后传给控制层，控制层做了一系列操作后传给视图层改变视图，整个过程是单向的
    
    mvvm：视图层改变把指令发给viewmoldel层，直接改变视图，是双向的

28、js原型

什么是原型对象
    每一个js对象（除了null）在创建的时候，都会有一个与之关联的对象，这个对象就是原型，每一个对象都可以从它的原型中继承属性。
    
    function Person () {}
    var person = new Person()
    每一个js函数都有一个prototype属性，这个属性指向函数的原型对象
    每一个js对象(除null)都有一个_proto__属性，这个属性指向该对象的原型
    Person.prototype === person.__proto__
    Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
    
    所以查找属性的时候查到 Object.prototype 就可以停止查找了。

29、http缓存

强缓存：状态码是200的时候，浏览器如果判断本地缓存未过期，就直接使用，不发请求到服务器
    协商缓存：状态码304，浏览器向服务器发起http请求，然后由服务器告诉浏览器文件并未改变，让浏览器使用本地存储；
    通过header头部的来区分两种缓存机制