8-猿辅导-前端面试_猿辅导前端面试题-CSDN博客

指对象是被动接受依赖类而不是自己主动去找，换句话说就是指对象不是从容器中查找它依赖的类，而是在容器实例化对象的时候主动将它依赖的类注入给它。在实例化一个类时，它会自动去实例化它里面所用到的其它实例。所以这就叫依赖注入。在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。

优点：松耦合，可重用；提高了组件的可测试性

AngualrJs中可用来注入的有三种类型，service、factory、provider,这三种写法不样，用法也都不一样。其中，service只实例化一次，其实就是单例模式的思想。无论我们在什么地方注入我们的service，将永远使用同一个实例。所以对很多在controller层中的操作就可以放到serivce层中去。AngularJS提供例如许多内在的服务，如：$http, $route, $window, $location等。每个服务负责例如一个特定的任务，$http是用来创建AJAX调用，以获得服务器的数据。 $route用来定义路由信息等。内置的服务总是前缀$符号。

3.ajax和angular框架？

angular 的ajax使用的是链式调用的方式，比较省事，简单易懂
$http({
        method: "POST",
        url: "./ajax.php",
        data:{'username':$scope.username,
           'email':$scope.email
         }
      }).
      success(function(data, status) {
      }).
      error(function(data, status) {
     });
$http的配置项

method:请求方式，有GET/DELETE/HEAD/JSONP/POST/PUT

url：绝对的或者相对的请求目标

data或者 params：请求的数据传送，data是post请求的数据，params是get请求的数据

headers：请求的头部

timeout：设置请求超时的时间，以毫秒计算，1000就相当于一秒

4.脏值检查？

https://blog.csdn.net/weixin_45440502/article/details/109729016 6.angular-js脏值检查、angular

5.数据库三大范式？

1.第一范式（1NF）:列不可再分

1.1.每一列属性都是不可再分的属性值，确保每一列的原子性

考虑这样一个表：【联系人】（姓名，性别，电话）。如果在实际场景中，一个联系人有家庭电话和公司电话，那么这种表结构设计就没有达到 1NF。要符合 1NF 我们只需把列（电话）拆分，即：【联系人】（姓名，性别，家庭电话，公司电话）

1.2.两列的属性相近或相似或一样，尽量合并属性一样的列，确保不产生冗余数据

2.第二范式（2NF）属性完全依赖于主键

首先是 1NF，另外包含两部分内容，一是表必须有一个主键；二是没有包含在主键中的列必须完全依赖于主键，而不能只依赖于主键的一部分。

考虑一个订单明细表：【OrderDetail】（OrderID，ProductID，UnitPrice，Discount，Quantity，ProductName）。因为我们知道在一个订单中可以订购多种产品，所以单单一个 OrderID 是不足以成为主键的，主键应该是（OrderID，ProductID）。显而易见 Discount（折扣），Quantity（数量）完全依赖（取决）于主键（OderID，ProductID），而 UnitPrice，ProductName 只依赖于 ProductID。所以 OrderDetail 表不符合 2NF。不符合 2NF 的设计容易产生冗余数据。可以把【OrderDetail】表拆分为【OrderDetail】（OrderID，ProductID，Discount，Quantity）和【Product】（ProductID，UnitPrice，ProductName）来消除原订单表中UnitPrice，ProductName多次重复的情况。

第三范式（3NF）属性不依赖于其它非主属性属性直接依赖于主键

首先是 2NF，另外非主键列必须直接依赖于主键，不能存在传递依赖。即不能存在：非主键列 A 依赖于非主键列 B，非主键列 B 依赖于主键的情况。

考虑一个订单表【Order】（OrderID，OrderDate，CustomerID，CustomerName，CustomerAddr，CustomerCity）主键是（OrderID）。其中 OrderDate，CustomerID，CustomerName，CustomerAddr，CustomerCity 等非主键列都完全依赖于主键（OrderID），所以符合 2NF。不过问题是 CustomerName，CustomerAddr，CustomerCity 直接依赖的是 CustomerID（非主键列），而不是直接依赖于主键，它是通过传递才依赖于主键，所以不符合 3NF。通过拆分【Order】为【Order】（OrderID，OrderDate，CustomerID）和【Customer】（CustomerID，CustomerName，CustomerAddr，CustomerCity）从而达到 3NF。

英文名称是 Normal Form。范式是关系数据库理论的基础。三大范式只是一般设计数据库的基本理念，可以建立冗余较小、结构合理的数据库

A B C D
A B 为主键
C -> B 依赖违反了范式吗？违反的第几条？

违反了第二范式（2NF）：没有包含在主键中的列必须完全依赖于主键，而不能只依赖于主键的一部分

2.CSS

1.盒模型？

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

width是什么？

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域Content的宽度和高度。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

怎么改变width？

p
  {
  height:100px;
  
  width:100px;

  }

怎么改变盒子模型？

盒子模型分为两种：第一种是W3c标准的盒子模型（标准盒模型）；第二种IE标准的盒子模型（怪异盒模型）。

怪异盒模型：大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距Padding和边框Border的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距Padding，而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

2.子元素如何垂直居中？

https://blog.csdn.net/weixin_45440502/article/details/109729016 第4点：实现parent全局布局，children左右上下垂直

百分比布局、平移、Flex、定位、内联元素

不知道父元素的宽度呢？

transform: translate(-50%, -50%)

//与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中：往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

transform的原理？

CSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后，元素主要可以进行以下变换：

旋转(rotate)，平移(translate)，缩放(scale)，倾斜(skew)

有这些方法：

translate()，translateX()，translateY()，translateZ()，translate3d()

向X轴平移，填正数往右平移，填负数，往左平移；向Y轴平移，填正数往下平移，填负数，往上平移。

Matrix：矩阵，transform模板函数。是线性方程组，通过建立一种对应关系，得到目标结果的一种工具。下图是一个矩阵方程，它的作用就是将原有坐标值(X0,Y0)通过某种变换，转换目标值(X1,Y1)。

其中，(x0,y0)为起始点坐标，(x1,y1)就是我们要输出的目标坐标值。
不难发现，e,f就是我们想要的横纵坐标上的偏移量。

flex如何实现？

justify-content: center;
align-items: center;

align-items是哪个方向？justify-content呢？text_align?

侧轴（纵轴）方向上的对齐方式；主轴（横轴）方向上的对齐方式。元素中的文本在所在标签内水平居中

align-items和text_align的区别？

text-align:center 实现文字居中对齐; align-items:center:实现div内所有标签居中

3.两个div，一个bottom-margin = 10px,一个top-margin = 20 px, margin为多少？

合并外边距：20px

3.JS

1.封装Ajax成promise，返回一个promose

如果不使用promise,$.ajax请求的时候成功和失败的回调函数是写在参数里的,他是对象参数的一个值

$.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json',
        success:()=>{}//成功后的回调函数
        error:()=>{}//失败后的回调函数
    }
 )

如果使用jQuery.axja()发送请求,并使用promise,代码如下

let myButton = document.getElementById('myButton');

function success(responseText){
    console.log("成功")
    console.log(responseText);//responseTex
}
function fail(request){
    console.log("失败")
    console.log(request);
}
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json'//预期服务器返回的数据类型,如果不写,就是响应里设置的
    }
    ).then(success,fail)//$.ajax()返回一个promise
})

2.代码输出：

2.1 promise

promise 的状态

https://blog.csdn.net/weixin_45440502/article/details/109823333 12.了解promise的哪些方法？promise.all是干嘛的？了解promise的链式调用吗？

Promise的then的第二个参数和catch的区别一样吗？有什么区别？

1. promise.then(f1,f2)
2. promise.then(f1)
.catch(f2)

1.reject是用来抛出异常的，catch是用来处理异常的；

2.reject是Promise的方法，而then和catch是Promise实例的方法（Promise.prototype.then 和 Promise.prototype.catch）。

区别：如果在then的第一个函数里抛出了异常，后面的catch能捕获到，而then的第二个函数捕获不到。

catch只是一个语法糖而己，还是通过then 来处理的：Promise.prototype.then(null,onRejected);

then的第二个参数和catch捕获错误信息的时候会就近原则，如果是promise内部报错，reject抛出错误后，then的第二个参数和catch方法都存在的情况下，只有then的第二个参数能捕获到，如果then的第二个参数不存在，则catch方法会捕获到。

第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议总是使用catch方法，而不使用then方法的第二个参数。

可以这样写吗：

promise
.then(f1)
.catch(f2)
.then(f3)
//promise rejected 状态

可以。return的值会作为新Promise对象下一个then的回调函数的参数值

2.2 this，箭头函数

var a = {
f1: () => { console.log(this) },
f2: function() {console.log(this)}
}
a.f1() // window
a.f2() // a

var b = new a.f2(); // b

a.f1() // window：箭头函数：法则三

a.f2() // a：对象：法则一

var b = new a.f2(); // b

判断法则：

对象方法中的this指向对象本身（箭头函数形式的除外）
多层嵌套函数中的this指向等同于包含该this的最近一个function的this
箭头函数以及非指向对象方法中的function的情况下this指向window
在构造函数中，this上的值会在创建实例的时候被绑定到新创建的实例上

JS代码有三种运行环境

Global Code : JavaScript代码开始运行的默认环境 this=> window
Function Code: 代码进入一个JavaScript函数 this => 调用函数的对象
Eval Code : 使用eval()执行代码

判断this的值分为两个部分，第一个部分是确认出函数被调用的位置，级、第二个部分是结合第一步分析出的结果，根据四个规则来确认this的值。

一. 我们判断this的值首先第一步应该是判断出函数的调用栈信息

二. 结合第一步的调用栈信息，结合四个规则来判断this的值

1. 隐式绑定，可能有些地方是这样描述这个规则的，“调用一个对象的方法时，该方法的this指向该对象”，但是这样不是很准确，应该是，当一个函数拥有上下文对象时，该函数的this指向离函数最近的上下文对象（其实就是刚刚的调用栈信息）

2. 显式绑定，即用bind，call，apply来调用函数，可以为函数来绑定一个值

3.使用new时 new FunctionName() 时，先会创建一个新的对象，然后如果没有return对象的话，就return这个新对象

4. 默认绑定默认情况就是说如果一个函数的调用方式匹配不了以上的三种方式，就会采用的方式

三. 优先级问题

new > 显示绑定 > 隐式绑定 > 默认绑定

new 绑定：我们首先先要了解下通过 new 来调用函数，发生了哪些步骤。

1. 创建一个全新的对象

2. 新对象会被执行原型连接

3. 新对象会绑定到函数调用的 this

4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象

new的过程

https://blog.csdn.net/weixin_45440502/article/details/110098282 6.原型+原型链+构造

3.for in的用途？

for in循环本质上是forEach循环，用于枚举对象中的非符号键属性。for(const propName in Window){...}

因为对象的属性是无序的，因此不能保证返回对象属性的顺序。

它主要有两个作用

遍历数组

var a = ['a', 'b', 'c'];

for(var index in a) {

console.log(index);//0,1,2

}

遍历JavaScript对象

var json = {a:{num:1},b:{num:2}};

for(var name in json){

console.log(name);//a,b

}

可以用在对象模型的定义属性吗？

取决于这个属性的enumerable的值为true还是false

了解defineProperty吗？

let obj = Object.create(null);
let descriptor = {
configurable:true,
writable:true,
enumerable:true,
value:undefined
};
Object.defineProperty(obj,'hello',descriptor);

obj.hello = "hello world";

console.log(obj.hello);//hello world

枚举？

enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为true。

4.跨域的解决办法？jsonp 的原理、cors、options、img？cors可以携带cookie吗？

https://blog.csdn.net/weixin_45440502/article/details/109586398 2.了解跨域吗？

4.算法

题目：给一棵树，输出这棵树从右边看到的值

var rightList = function(root){
    if(root == null) return null
    
    let result = [];
    let row = [root];
    
    while(row.length != 0){//这里我写反了循环结束的条件
        result.push(row[0].val);//需要加上val
        let rowLength = row.length;//这里应该先定义length，不能在for循环里写
        for(let i = 0;i<rowLength;i++){
            if (row[i].right!=null){//需要判断是否null，因为数组里没有null这个结果
                row.push(row[i].right);
            }
            if (row[i].left!=null){
                row.push(row[i].left);
            }
            row.shift();
        }
    }

    return result
}