8-猿辅导-前端面试

目录

1.项目

1.自我介绍

2.了解angularjs的依赖注入吗?

3.ajax和angular框架?

4.脏值检查?

5.数据库三大范式?

2.CSS

1.盒模型?

width是什么?

怎么改变width?

怎么改变盒子模型?

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

不知道父元素的宽度呢?

transform的原理?

flex如何实现?

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

align-items和text_align的区别?

3.JS

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

2.代码输出:

2.1 promise

2.2 this,剪头函数;new的过程

3.for in的用途?

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

了解defineProperty吗?

枚举?

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

4.算法

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


1.项目

1.自我介绍

2.了解angularjs的依赖注入Dependency Injection吗?

指对象是被动接受依赖类而不是自己主动去找,换句话说就是指对象不是从容器中查找它依赖的类,而是在容器实例化对象的时候主动将它依赖的类注入给它。在实例化一个类时,它会自动去实例化它里面所用到的其它实例。所以这就叫依赖注入。在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 

判断法则:

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

JS代码有三种运行环境

  1. Global Code : JavaScript代码开始运行的默认环境 this=> window
  2. Function Code: 代码进入一个JavaScript函数 this => 调用函数的对象
  3. 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
}

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值