前端笔试题面试题纪录(上)

媒介

过完元宵,就到上海找了波事情,如今已入职好了,蹭波热门,写一波口试纪录,内容包括笔试题和口试题,另有一些没有写进来,预备再开一篇,好久没写了,写的确切有些慢。假如喜好的话能够点波赞,或许关注一下,愿望人人看完本文能够有所收成。

个人博客相识一下:
obkoro1.com

后续

前端笔试题口试题纪录(下)

Q:什么情况下会碰到跨域题目?有哪些解决要领?

  • 跨域题目是这是浏览器为了平安实行的同源战略致使的,同源战略限定了来自差别源的document剧本,同源的意义就是两个URL的域名、协定、端口要完整雷同。
  • script标签jsonp跨域、nginx反向代办、node.js中间件代办跨域、后端在头部信息设置平安域名、后端在服务器上设置cors。

Q:怎样推断一个变量是对象照样数组?

推断数组和对象离别都有好几种要领,其顶用prototype.toString.call()兼容性最好。

function isObjArr(value){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是数组');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个要领兼容性好一点
            console.log('value是对象');
      }else{
          console.log('value不是数组也不是对象')
      }
}

ps:万万不能运用typeof来推断对象和数组,由于这两种范例都邑返回”object”。

Q:定时器的实行递次或机制。

这个题目照样挺经常被问到的,有一些会直接问定时器的机制,有一些是经由过程笔试题的体式格局问实行递次然后问我为何是如许。

长话短说,我们须要记着的是:由于js是单线程的,浏览器碰到setTimeout或许setInterval会先实行完当前的代码块,在此之前会把定时器推入浏览器的待实行事件队列内里,比及浏览器实行完当前代码以后会看一下事件队列内里有无使命,有的话才实行定时器的代码。 所以纵然把定时器的时刻设置为0照样会先实行当前的一些代码。

《前端笔试题面试题纪录(上)》

上面是我写的一个栗子,假如还不清晰的话,人人能够找一篇关于定时器机制的详解文章来看看。

Q:html中title属性和alt属性的区分?

这个题目被问了一次,当时我只记得,alt属性是用于img标签的,当图片失效的时刻会涌现alt属性内里的内容,title用来标记页面的title,当时口试官问我另有无其他的区分。我。。。

然后我就找了一篇文章来看,涨了点姿态:

1.<img src="#" alt="alt信息" />
//1.当图片不输出信息的时刻,会显现alt信息 鼠标放上去没有信息,当图片一般读取,不会涌现alt信息
2.<img src="#" alt="alt信息" title="title信息" />
// 2.当图片不输出信息的时刻,会显现alt信息 鼠标放上去会涌现title信息
//当图片一般输出的时刻,不会涌现alt信息,鼠标放上去会涌现title信息

别的另有一些关于title属性的学问:

title属性能够用在除了base,basefont,head,html,meta,param,script和title以外的一切标签
title属性的功用是提醒。分外的申明信息和非本质的信息请运用title属性。title属性值能够比alt属性值设置的更长
title属性有一个很好的用处,即为链接增加描述性笔墨,特别是当衔接自身并非非常清晰的表达了链接的目标。

Q:规范盒子模子与IE奇异盒子模子

这个题目重要会出如今笔试题上面,比方:

<div style="width:100px;height="100px;border:10px;padding:10px;"></div>

这个盒子在w3c规范盒子模子和IE的奇异盒子模子下面它的宽度离别是多少?

规范盒子模子:总宽度=content100px+border 10px*2+padding 10px*2 //140px
奇异盒子模子: 总宽度=content60px+ border 10px*2+padding 10px*2 //100px

ps:

box-sizing: content-box || border-box;//css3 box-sizing设置为border-box将运用奇异盒子模子
当奇异盒子的宽度小于border+padding的宽度的时刻,content width将变成0,盒子的宽度会被border和padding的总宽度撑开

ES5的继续和ES6的继续有什么区分?

ES5的继续时经由过程prototype或组织函数机制来完成。ES5的继续实质上是先建立子类的实例对象,然后再将父类的要领增加到this上(Parent.apply(this))。

ES6的继续机制完整差别,实质上是先建立父类的实例对象this(所以必须先挪用父类的super()要领),然后再用子类的组织函数修正this

详细的:ES6经由过程class关键字定义类,内里有组织要领,类之间经由过程extends关键字完成继续。子类必须在constructor要领中挪用super要领,不然新建实例报错。由于子类没有本身的this对象,而是继续了父类的this对象,然后对其举行加工。假如不挪用super要领,子类得不到this对象。

ps:super关键字指代父类的实例,即父类的this对象。在子类组织函数中,挪用super后,才可运用this关键字,不然报错。

Q:CSS3有哪些新增的属性?

这里能够分为边框、背景,渐变,暗影、2D转换 3D转换等之类的来讲。
比方:边框(border-radius、border-shadow、border-image)之类的 。

详细的能够拜见菜鸟教程:链接。相似的镜像题目另有HTML5的新增属性,能够本身谷歌一下。

Q:你晓得哪些http状况码?

1xx:1开首的是信息状况码
2xx:2开首的是要求胜利
3xx:3开首的是重定向
4xx:4开首的是客户端毛病
5xx:5开首的是服务器毛病

这个题目并不难,在笔试口试都有碰到过,巧的是之前我就总结过一篇相似的文章

Q:怎样对一个数组去重?

这个题目涌现了好几次,而且许多口试官不满足你只给出一两种要领。

1、Set构造去重

这是ES6 供应了新的数据构造 Set。它相似于数组,然则成员的值都是唯一的,没有反复的值。

let unique= [...new Set(array)];
//es6 Set数据构造相似于数组,成员值是唯一的,有反复的值会自动去重。
//Set内部运用===来推断是不是相称,相似'1'和1会两个都保留,NaN和NaN只会保留一个

2、遍历,将值增加到新数组,用indexOf()推断值是不是存在,已存在就不增加,到达去重结果。

    let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
    let unique= arr =>{
         let newA=[];
        arr.forEach(key => {
           if( newA.indexOf(key)<0 ){ //遍历newA是不是存在key,假如存在key会大于0就跳过push的那一步
             newA.push(key);
           }
        });
        return newA;
    }
    console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]
//ps:这个要领不能区分NaN,会涌现两个NaN。是有题目标,下面谁人要领好一点。

3、遍历,将数组的值增加到一个对象的属性名里,并给属性赋值,对象不能增加雷同属性名,以这个为依据能够完成数组去重,然后用Object.keys(对象)返回这个对象可罗列属性构成的数组,这个数组就是去重后的数组。

    let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
    const unique = arr => {
        var obj = {}
        arr.forEach(value => {
            obj[value] = 0;//这步新增加一个属性,并赋值,假如不赋值的话,属性会增加不上去
        })
        return Object.keys(obj);//`Object.keys(对象)`返回这个对象可罗列属性构成的数组,这个数组就是去重后的数组
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

注重:

这个要领会将 number,NaN,undefined,null,变成字符串情势,由于对象的属性名就是一个字符串,依据需求来吧,想一想照样Set去重最简朴也最有用。

Q:垂直居中有哪些要领?

  • 单行文本的话能够运用height和line-height设置统一高度。
  • position+margin:设置父元素:position: relative;,子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;(定高)
  • position+transform:设置父元素position:relative,子元素:position: absolute;top: 50%;transform: translate(0, -50%);(不定高)
  • 百搭flex规划(ie10+),设置父元素display:flex;align-items: center;(不定高)

相似的另有许多,现实运用中,能够就会运用一两种要领,有兴致的能够看下这篇文章

Q:翻转一个字符串

这个题目重要在笔试题碰到的多,思绪就是先将字符串转成一个数组,然后用数组的reverse()+join()要领。

let str="hello word";
let b=[...str].reverse().join("");//drow olleh

后续

前端笔试题口试题纪录(下)

小结

我想说的是:在找事情时期,肯定有本身发挥不好,或许不会的题目,肯定要在晚上的时刻本身再进修总结一下,在一个题目上面只管不要栽倒两次,学到了的才是本身的。

以上就是近期口试碰到的一些题目纪录总结,现实上照样有一些题目没有写出来,好久没有写文章了,写的很慢,有点累。先给本身立一个flag,下周再写一篇出来。愿望列位大佬看了本文,能有所收成,谢谢浏览。

末了:如需转载,请放上原文链接并签名。码字不容易,谢谢支撑!本人写文章本着交换纪录的心态,写的不好的地方,不撕逼,然则迎接指导。然后就是愿望看完的朋侪点个喜好,也能够关注一下我。
个人blog and 掘金个人主页

以上2018.3.18

参考链接:

title与alt的区分

CSS-规范盒模子 & 奇异盒模子

罕见的js算法口试题网络,es6完成

CSS垂直居中的11种完成体式格局

    原文作者:OBKoro1
    原文地址: https://segmentfault.com/a/1190000013819539
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞