2021-09-16常见经典前端面试题

1.v-if和v-for可不可以一起用

 

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

2怎么在created里面操作dom结点

1.vue中 ref的方法 给元素起一个ref名称 通过  this.$refs.ref名称获取

2.第二个无非是 原生dom操作了  document.getElement //  document.querySelector 等等

3.结点操作

 4.js里面的调用问题

知识点一:js函数调用时加括号和不加括号的区别.不加括号相当于把函数代码赋给等号左边,加括号是把函数返回值赋给等号左边.参考JS中函数名后面的括号加与不加的区别和作用？ - 知乎

知识点二:js中this的用法,this总是指向调用它的对象,倒数第二行的getColor为windows调用的,倒数第一行的getColor是test4399对象调用的.参考

5.响应式布局缺点：

flex布局优缺点：

a.容易上手，根据flex规则很容易达到某个布局效果。

b.首先要ie9以上的版本才可以，同时无法直接定义列数

rem布局优缺点：

a.内容会随着设备屏幕的大小进行等比缩放

b.rem处理小数的时候有误差，（需要引入一段JS代码，耦合深，无法解耦，违背样式行为分离思想）

百分比布局（流式布局）优缺点：

a.可以适应不同尺寸的屏幕

b.高度和文字大小都通过px固定了，宽度自适应，所以当屏幕过大或过小可能导致某些页面被拉的很长

@media布局优缺点：

a.应用广泛，适用pc端和移动端

b.相对代码有重复很多，也有可能出现闪屏

vw布局优缺点：

a.可以适应不同尺寸的屏幕

b.因为相对于视口，失去了最大宽度、高度的限制，这时你需要额外元素添加最大宽度

 6.var const let区别

1.var声明变量会挂载到window上，同时还要变量提升还可以声明同名变量，而let和const声明变量不会。

2.let 和const声明形成块作用域（暂时死区）

3.const一旦声明必须赋值，不能使用null占位；声明后不能在修改；如果声明是复合类型数据，可以修改其属性。

4.let暂时性死区： 在这运行流程进入作用域创建变量，到变量可以被访问之间的一段时间。（在let声明变量之前都不可以用，会绑定当前的块级，当是同名变量时候，也访问不了外面的）

 7.原型和原型链

原型也是一个对象，通过原型可以实现对象的属性继承；js的对象中都包含一个“[[ Prototype]]”属性，也就是说，所有的实例的原型引用的是函数的 prototype属性。

var p = new Person('张三'， 20)

 其过程分为3步： 

（1）var p = {};初始化一个对象p。

（2）p._proto_ = Person.prototype；将对象p的_proto_属性设置为Person.prototype

（3）Person.call(p, "张三"， 20)；调用构造函数Person来初始化p；

原型链：每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来就构成了原型链。

8.原型链和作用域链的区别：

作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域

　　全局作用域==>函数1作用域==>函数2作用域

作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。

var a = 1;
function b(){
    var a = 2;
    function c(){
        var a = 3;
        console.log(a);
    }
    c();
}
b();

 函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找

　原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。

　　Object ==> 构造函数1 ==> 构造函数2

　　就和css中的继承一样，如果自身没有定义就会继承父元素的样式。

function a(){};
a.prototype.name = "追梦子";
var b = new a();
console.log(b.name); //追梦子

 作用域最顶层是window ，原型链最顶层是Object

9.闭包

闭包就是能够读取其他函数内部变量的函数，闭包是将函数内部和函数外部连接起来的桥梁；让这些变量的值始终保持在内存中

10.异步请求

 异步请求的方式，常用的有三种，如$.ajax()、$.post()、$.get()。

异步请求所需要的常用要素：
a、url （访问url）   b、dataType（数据传输方式）   c、success成功之后的回调函数

设接口url
var url='/test/test.do';   //下面的实例代码都用此访问接口url
$.ajax({
     url:url,
     dataType:'text',
     success: function(data){
               (请求成功之后的前端处理代码)
       }
});

$.post使用示范代码：
$.post(url, { name: "John", time: "2pm" },   function(data){ 
         alert("Data Loaded: " + data); 
 },'text');

$.get使用实例代码：
$.get(url, { name: "John", time: "2pm" },  function(data){
              alert("Data Loaded: " + data);
 });

11.处理异步的方法 

async/await，promise，发布/订阅模式，事件监听，回调函数

promise里面：

1.状态

promise有3种状态：pending（待解决，这也是初始化状态），fulfilled（完成），rejected（拒绝）。

2.接口

promise唯一接口then方法，它需要2个参数，分别是resolveHandler和rejectedHandler。并且返回一个promise对象来支持链式调用。

http://www.cnblogs.com/painsOnline/p/5102359.html