首页 > 字节国际化部门前端一面(凉)
头像
Lostkevin
编辑于 2021-09-07 14:12
+ 关注

字节国际化部门前端一面(凉)

8.11面试,现在先认真梳理一下
我明明会但是总是在第一时间傻掉,然后补不过来。
1、首先自我介绍,因为我写了一个uni-app的项目 是怎么实现的(做了什么工作)hbuliderx?问了下 在实现的时候有没有遇到什么兼容性的问题。我说视频那里是不行的
【*** 这个问题被问到两次了,既然写了uni-app,可以稍微准备下…… 】
2、(1)OSI七层模型。我直接傻了,为什么问这个…… 只记得四层了
3、(10)输入一个URL发生了什么
这个应该讲的还行,从DNS开始(我还讲了为什么找的是ip而不是域名),然后TCP建立连接,然后协商缓存【这里似乎说的乱了??】,最后cssom树,dom树
4、(0)DNS域名解析 我又不知道了 话到嘴边讲不出来。。(真是挖坑啊。。。)
5、(7)TCP和UDP的区别,
讲了面向连接和无连接,拥塞控制,最大报文,应用场景(视频直播、文件传输这种的)
6、(7)讲一下CORS跨域 还有解决方案
浏览器的安全策略,domain、还有一个啥

代码的题目-------------------------------------
1、1为基准 2 3 4下面哪个是跨域,原因是什么
【主域名company 子域名store】
2. http://news.company.com/dir/other.html 子域名不同 news和store(跨域)
3. http://store.company.com/dir/inner/another.html 子域名和主域名都ok 不跨
2、(8)js的基本数据类型?7种啊。新增的也是
// null undefined Number string  Boolean
// BigInt Symbol
object是复杂类型所以不属于
检测数据类型的方法?typeof ,instance of,object.prototype.call.tostring【还有个是啥 ?】
A instance of B
xxx.prototype.call.toString() // object Object
手写一下instanceof,对于array和object那个点。。 前三行是给的
// ins instanceOf Cla
// myInstanceOf(ins, Cla)
function myInstanceOf(ins, Cla) {
    while(1){
        if(ins==null)return false;// 【这里注意 可能传入的是null】
        if(ins.__proto__==Cla.prototype){
            return true;
        }
        ins=ins.__proto__;
    }
}
两个问题右边是prototype 其次没有写while(1)
这里问了一下__proto__ 和prototype的区别(是构造函数指向对象的,没说错)
3、(7)代码题打印什么
setTimeout(function() {
  console.log('setTimeout');
})
new Promise(function(resolve) {
  console.log('promise');
  resolve(true)
}).then(function() {
  console.log('then');
})
// promise  then   setTimeout  
这样呢打印什么
    console.log('setTimeout');
})
new Promise(function(resolve) {
    console.log('promise');
    resolve(true)
}).then(function() {
    new Promise(function(resolve) {
        console.log('promise2');
        resolve(true)
    }).then(function() {
        console.log('then2');
    })
    console.log('then');
})
// promise promise2 then  then2 setTimeout   
宏任务和微任务。。
即使是后来加入的 也一直是微任务优先的 红任务settimeout就是个屑
4、(10)写垂直水平居中
// 不允许使用具体的像素数值
<div class="box">
  <div class="content"> </div>
</div>
.box {
  width: 300px;
  height: 300px;
}
.content {
}
我写的
.box{
 display:flex
 justify-content:center;
    align-items:center;
}

.box{
    position:relative;
}
.content{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50%;
    margin-top:-50%;
}

.box{
    display:table
}
5、(10)输入一个链表,输出该链表中倒数第k个节点  15分钟内写出来了
// input: 1->2->3->4->5->6->7 3
// output 5

// [1,2,3,4,5,6,7] 3 

// 双指针
// 第一个走k步之后第二个开始走,当第一个走到末尾的时候第二个指的就是倒数第k个

// var obj={
//     num:0,
//     next:null
// }
//  computed

//  watch  $off 
jsx

function lastKList(List,k){
    var head={
        num:-1,
        next:null,
    }
    var tmp={
        num:List[0],
        next:null
    }
    head.next=tmp;
    var num=1;
    while(num<List.length){
        var obj={
            num:List[num++],
            next:null
        }
        tmp.next=obj;
        tmp=obj;
    }
    
    var head2=head;
    tmp=head;
    var k2=0;
    while(tmp.next!=null){
        if(k2+1<k){
            tmp=tmp.next;
            k2++;
        }
        else{
            tmp=tmp.next;
            head2=head2.next;
        }
    }
    return head2.num;
}
console.log(lastKList([1,2,3,4,5,6,7,8,9],3 ));
6、还问了一点vue的
computed和watch的区别是什么(进入触发,场景使用,异步这种的不同)
组件通信的方式(说了父子组件,兄弟$on $off 数据总线 vuex)
为什么data那里是return出去(不会被污染
7、html有什么数据请求的方法
HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法

8、反问 部门是做啥的(国际化电商)在科技绿洲吗(不在) 技术栈(react)会过吗(再评定一下  T.T)有什么学习的建议
“综合评定下” =差不多没了



==============================================================
知识点补充整理
1、跨域
我懂 我背的可熟了 可为什么一做题我就不会了呢
protocal  host port (pph)
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
域名主次是从后往前的,如t.sina.com.cn的主域名就是sina.com.cn,www.sf.gg的的主域名就是sf.gg【 加上后缀,只有两级】
那么子域名就是t.sina.com.cn  、www.sf.gg
可以看到上面www. test. com 和 www.baidu.com就是【主域名不同】
然后www.test.com blog.test.com主域名都是test,后面在子域名不同。
和第一个类似,如果是斜杠后面的文件路径这是可以自己设置就行了的。
(域名举例)
url的构成结构:
▽▽▽ scheme://hostname[:port]/ path/[;parameters][?query]#fragment ▽▽▽
可以看到,【只有前面的scheme://hostname[:port]/(协议,域名,端口)】  不同才是跨域,path没关系!(一直没有path,是我自己记错了)端口可选的话就是协议和域名
scheme:通信协议,常用的有http、https、ftp、mailto等。
hostname:主机域名或IP地址。
port:端口号,可选。省略时使用协议的默认端口,如http默认端口为80。
path:路径由零或多个"/"符号隔开的字符串组成,一般用来表示主机上的一个目录或文件地址。
query:查询,可选。用于传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。
fragment:信息片断字符串,也称为锚点。用于指定网络资源中的片断。
2、OSI的七层(Open System Interconnect),即开放式系统互联
(1)物理层【交通工具】是相当于网线,光缆
(2)数据链路层 早起就是做分组的的,因为规定好8位这样才有意义 。将比特组合成字节,再将字节组合成帧,使用链路层地址 (以太网使用MAC地址)来访问介质,并进行差错检测。
(3)网络层【快递公司发送找IP】
(4)传输层 TCP UDP【投递员,收发员】
(5)应用层(表示层:编码转换+会话层:管理通信绘画,由不同设备服务请求和响应组成)
https://www.cnblogs.com/qishui/p/5428938.html 这个讲的很通俗,不过有点偏了
3、广播和网关非常形象
计算机底层,只要在一个教室里(一个局域网),都是靠广播的方式,吼。互联网就是由一个个局域网组成,局域网内的计算机不管对内对外都靠吼,这就是数据链路层的工作方式 广播。不同教室(不同局域网)就要用到网络层了
Mac地址是用来标识你这个教室的某个位置,IP地址是用来标识你在哪个教室(哪个局域网)。比如你要访问百度,你肯定得知道百度服务器的IP地址。计算机在发包前,会判断你在哪个教室,对方在哪个教室,如果在一个教室,基于mac地址的广播发包就OK了;如果不在一个教室,即跨网络发包,那么就会把你的包交给教室负责人(网关)来转发。Mac地址及IP地址唯一标识了你在互联网中的位置。
·· 局域网中怎么获取对方的Mac地址:
先得知道目标的ip地址,目标Mac为12个F,我们叫广播地址,表达的意思是我想要获取这个目标IP地址172.16.10.11的机器的Mac地址。(Mac为12个F代表的是一种功能,这个功能就是获取对方的MAC地址,计算机的Mac永远不可能是12个F)解包,大家不是那个地址的就丢弃,符合就返回
·· 跨网络怎么获取对方的Mac地址:
判断出目标不在一个教室,然后目标就变成了那个网关(负责人)的ip,发给网关,网关就来操作。。(所以说局域网我还是不懂啊T T )

4、DNS域名解析
①本机向本地域名服务器发出一个DNS请求报文,报文里携带需要查询的域名;
② 本地域名服务器往上查询,先去根服务器查
③ 本地域名服务器向本机回应一个DNS响应报文,里面包含域名对应的IP地址。
DNS协议就是用来将域名解析到IP地址的一种协议,当然,也可以将IP地址转换为域名的一种协议。 DNS协议基于UDP和TCP协议的,端口号53,用户到服务器采用UDP,DNS服务器通信采用TCP
域名服务器主要分为:(从大到小)根域名服务器、顶级域名服务器、权限域名服务器、本地域名服务器。
先举个例子来看一下各个服务器之间的联系:
--------------------------(没啥问题,结合着看,容易弄混。本机是向本机服务器,本机服务器是直接到顶去根服务器问了)--------------------------
当一个应用要通过DNS来查询某个主机名,比如www.google.com的ip时,粗略地说,查询过程是这样的:它先与根服务器之一联系,根服务器根据顶级域名com,会响应命名空间为com的顶级域服务器的ip;于是该应用接着向com顶级域服务器发出请求,com顶级域服务器会响应命名空间为google.com的权威DNS服务器的ip地址;最后该应用将请求命名空间为google.com的权威DNS服务器,该权威DNS服务器会响应主机名为www.google.com的ip。
---------------根域名com --------顶级域名google.com-------------权威域名服务器www.google.com-----------------xxx.yyy.zzz.com 从右边的com是顶级域名,到左依次是:二级域名,三级域名,四级域名;根域名服务器一共就13个中国没有只有5个根服务器的镜像
具体可描述如下:
1. 主机先向【本地域名服务器】进行  [ 递归查询 ]
2. 本地域名服务器采用  [ 迭代查询 ] ,向一个 [ 根域名服务器 ] 进行查询
3. 根域名服务器告诉本地域名服务器,下一次应该查询的顶级域名服务器的IP地址
4. 本地域名服务器向顶级域名服务器进行查询
5. 顶级域名服务器告诉本地域名服务器,下一步查询权限服务器的IP地址
6. 本地域名服务器向权限服务器进行查询
7. 权限服务器告诉本地域名服务器所查询的主机的IP地址
8. 本地域名服务器最后把查询结果告诉主机
————————————————
上文我们提出了两个概念:递归查询和迭代查询
(1)递归查询:本机向本地域名服务器发出一次查询请求,就静待最终的结果。如果本地域名服务器无法解析,自己会以DNS客户机的身份向其它域名服务器查询,直到得到最终的IP地址告诉本机
(2)迭代查询:本地域名服务器向根域名服务器查询,根域名服务器告诉它下一步到哪里去查询,然后它再去查,每次它都是以客户机的身份去各个服务器查询。
通俗地说,递归就是把一件事情交给别人,如果事情没有办完,哪怕已经办了很多,都不要把结果告诉我,我要的是你的最终结果,而不是中间结果;如果你没办完,请你找别人办完。
迭代则是我交给你一件事,你能办多少就告诉我你办了多少,然后剩下的事情就由我来办(具体查询其实是本地域名服务器做的)。
————————————————
5、补原型链和类型的知识
instanceof是运算符,不是内置函数,所以不用大写,无法用等于,只要a instanceof b就行了
相应的 typeof也是运算符 直接typeof a就可以
所谓的instanceof 不认识基础数据类型是必须要new它才知道,否则 会(检测出错)

作为一个array(),原型是原型

构造函数是一个函数。
instanceof是检测 对象的原型链(也就是__proto__)是否指向构造函数的prototype对象
其实对于array也可以直接arr.constructor ==Array 没有括号
可以用Array的静态方法判断,写作 Array.isArray(x)


6、设置margin-top: 50%;基于父容器宽度相当于margin-top: 200px;”
妈呀!!!这也不说155551
未知宽高的怎么弄?
应该是用transform: translate(-50%,-50%);
以及 父设置
text-align: center;
line-height: 40px;(和父高度一样)


7、简单的vue

为什么vue中的data用return返回

1、必须声明成data函数,而不是一个简单的对象
为什么在项目中data需要使用return返回数据呢?
1 不使用return包裹的数据会在项目的全局可见,会造成变量污染;
2 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

3 当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

watch和computed的区别

(下面这两行只是辅助理解orz)
从属性上,computed是计算属性,也就是依赖其它的属性计算所得出最后的值;【用于定义基于数据之上的数据】 watch是去监听一个值的变化,然后执行相对应的函数。【某个数据变化时做一些事情】

如果一个数据依赖于其他数据,那么把这个数据设计为computed/ 如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化

计算属性computed:

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算(也就是页面上放一堆的fullname,但没有改变数据,还是只触发一次computed,后面再用到,直接从缓存拿就ok了
  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化(直接不会执行)
  • 默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个 多对一或者一对一,一般用computed(多个得到一个,依赖别的多个)
  • 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
  • 初始化显示或处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

    watch:

  • 不支持缓存,数据变,直接会触发相应的操作。
  • watch支持异步;监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 当一个属性发生变化时,需要执行对应的操作;一对多;(一个得到多个或者?)
  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作
  • 先旧,再新。。。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体
此外,课上总结的小知识点:---------(有关getter,详细使用)-------------------------------------------------------------
1、可以写getter(在类方法里写),computed里的就像一个处理过的data,比如double1{ .... } ,在dom里可以直接用上,它的返回值代表了它的结果嘛 相当于半种数据了qaq
2、vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写
可以写 fullname: function(){ ... } 也可以直接fullname(){ ... }(是返回函数)fullname=function(。。 最后这个等于的不行,直接崩溃(不能声明式,起码得let一个再调用?。。。)
或者如果要详细fullname:{  get() { ... } set(val) {...} }
如果这个值没有在模板里用,是不能触发里面的get方法的,但是仍然能获取到(并且跟着更新…… 很迷…… )
3、还有setter方法是【直接在模板里改变了这个computed的值】触发的,和getter互不冲突。(这样就相当于阻止被改变的一种吧hhhh,或者是改了全名之后再去把它依赖的那两个也去更新掉)
watch处理异步,用于开销比较大的情况,监听复杂数据类型(引用)时要加deep:true
总结:异步,缓存,依赖,业务逻辑(涉及原理了?上面那个 需要依赖其他得到新数据 vs 需要在改变的时候新做点什么事)

GET POST
1 HEAD 类似get 但是响应里面没有具体内容 只用于获取报头
2 DELETE 请求删除指定页面(Request-URL所标识的资源)
3 TRACE回显服务器收到的请求,主要用于测试或诊断
4 OPTIONS 允许客户端查看服务器的性能。返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
5、PUT 向指定资源位置上传其最新内容
6、CONNECT  HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

indexOf、lastIndexOf(注意首字母小写,其他都大写~)
string两个方法:找不到就返回-1哟。返回的都是字符串第一次出现的位置~ 这种位置是数组里面 的下标 那么当然也是按照字符串里面的下标开始--- 》 从0开始的哟
两个方法都区分大小写,只会找一次,找不到返回-1
注意即使是lastIndexof,也只是说从后面开始找而已,匹配的时候还是完整匹配的,
哈哈哈.lastIndexof(哈哈)  应该是匹配到 哈【哈哈】 ,所以是返回1

组件通信的方式【经常考】
1 props/$emit(读诶妹特) 父子组件通信
2 $parent / $children与 ref
3 $emit/$on  无亲缘也可。这种方法通过一个空的Vue实例作为中央事件总线(事件中心),
比较麻烦,定义一个很长的var a={。。。。methods里写send, Event.$emit( ...)
A传递给C,c也定义一个很长的,然后在,mounted里写Event.$on
 
   var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {});
4 vuex
5 evebrBus
6 $attrs/$listeners 7 provide/inject
 
vuex 是 vue 的状态管理器,存储的数据是响应式的。但是并不会保存起来,
刷新之后就回到了初始状态,具体做法应该在vuex里数据改变的时候把数据
拷贝一份保存到localStorage里面,刷新之后,如果localStorage里有保存
的数据,取出来再替换store里的state。(也可以存在路由里。。。)
因为localstorage的原因,要进行json字符串转换
 

更多模拟面试

全部评论

(3) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

热门推荐