jirengu / frontend-interview Goto Github PK

前端笔试面试题题库

frontend-interview's Introduction

前端笔试面试题库

为什么建这个项目?

知乎上前端学习指南专栏创建3个月有很多前端爱好者特别是入门者关注，很多小伙伴一直期待我们能做一份笔试面试题集锦分享给大家，我和方方也一直想把这个事情做好。但两个人的力量太微弱，于是想到在 github 上建立公共项目，汇集更多前端爱好者的力量一起收集前端常见笔试面试题，作为送给前端入门的小伙伴、需要找工作的小伙伴一份新年礼物🎁

如何贡献题目?

大家可以在【Issue】上通过提交Issue的形式提交日常遇到的笔试面试题，无论是多"高端"或者多"低级"。

注意:

提交 Issue 的时候需要在问题里加上问题来源，比如：来自百度校招笔试题，或者来自某公司面试题
在提交Issue 的时候需要选择合适的标签以便分类整理。目前的标签有 HTML&CSS、JavaScript、前端框架、HTTP、未归类，如果你不知道该选择什么标签，就选择未归类吧。或者可以在题目的描述里加上自己觉得应该添加的标签，当前项目的标签会定期更新添加新标签
当前项目的主题是前端笔试面试题，不要把自己平时学习中的疑问放进去，要的是货真价实的笔试面试题。否则变味了就没人喜欢了

如何贡献答案?

不要吝啬自己的答案，在脑子里的答案不叫答案，只有写下来后才知道答案没那么简单，面试官真问起的时候才能对答如流勇敢的回复自己的答案吧

觉得不错?

Star 这个项目， Watch 这个项目，分享给其他小伙伴吧

致回答问题的同学

请用如下 Markdown 标记来回答问题，否则，你的缩进就没了：

```
你的代码
```

frontend-interview's People

Contributors

Stargazers

Watchers

Forkers

guoxu1989 wpsumsun nicefuting gluneko msi1979 haozhuoran1991 deanandsammy kkkkuang heyxiaoling sgidlhy suxiesumiao zhangningxiang pebblerwon rhythm1995 zeonsam gl5 messixing chaocool batman-1 tangxiaolang101 welcometoearth snailtogo ruixxy xuoutput yuponguu hahaww yanlengzhi xieminjie xiazhiyu1 chenerg gaomengxuan mimi3824ku allen-allin maying2020 jinxiaoyun vc2008man teschan chengxiaoming yangshanghai horoxu walkerlu tongxunlu lawrence51 m-nemo a294465800 yvonne5531773 zhaolyang zhuangjin1994 ghripper dingxiaolei tianhang haolijing jinyueyang tangqunzha lizpeng hellolunan lietoumai kangteng4470 mark-wan zgc103643 zhebocaozuozenmeshuo majianyang666 qianmofeiyu kuleyu aeronzh wgshuhu h246802 wuhuatianbao007 zhzxiansheng spyro-sun raoul1996 renzhihui flynn-z liuqiao1 frisokaiyu mingxuanli cuitymiko csu-it-books qingmeizhujiufan sunnercms imnot2 dreamweaver90 12345555666789 tonyscorner qq159217 foowwweb yyfnevergiveup wessja heystar pentaery outter ak-lee chisonz coinouse chenhaoren yunyao128 pl620 ganiner gongmingren bugman-philip

frontend-interview's Issues

1KB为什么等于1024B而不是1000B？

请说明原因（公式推倒+文字描述），另外，怎么解释硬盘标的量没有实际多，运营商的10M带宽指的是哪种?

简述如何设计一个能创建流程图的页面（类似visio，xmind）

来自华为面试

有没有做过类似功能的页面，有的话，怎么改进？没有的话，讲讲思路。（我没有做过，因此接着问下面的问题）
基本功能（拖拽，连线）如何实现？
怎样变成可复用的插件？
如何实现扩展（考官未细指扩展的方向）？

JS 作用域链相关问题

最近讲到作用域链，再来一发作用域链的题目。下面代码输出什么? 为什么？

var a = 1;

function fn(){
  console.log(a); 
  var a = 5;
  console.log(a);  
  a++;
  var a;
  fn3();
  fn2();
  console.log(a);

  function fn2(){
    console.log(a); 
    a = 20;
  }
}

function fn3(){
  console.log(a)
  a = 200;
}

fn();
console.log(a);

JS 引用相关题目

以下代码输出什么? 为什么?

var a = {n:1}; 
var b = a;  
a = {n:2}; 
a.x = a ;
console.log(a.x);
console.log(b.x);

var a = {n:1}; 
var b = a;  
a.x = a = {n:2}; 
console.log(a.x);
console.log(b.x);

JS 运算符优先级相关题目

如下代码输出什么？解释原因

var object1 = {
    valueOf: function () {
        return 1;
    },
    toString: function () {
        return "object1";
    }
};

var object2 = {
    valueOf: function () {
        return 2;
    },
    toString: function () {
        return "object2";
    }
};

alert((object2 > object1 +-- object1) + true); //输出什么？ 解释原因

async function async1() {
console.log('async1 start')
await async2().then(res=>console.log(res))
console.log('async1 end')
}
async function async2() {
console.log('async2')
return 123
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')

打印的结果以及为什么顺序是这样

从 URL 输入到页面展现发生了什么?经典题

问题：从 URL 输入到页面展现发生了什么?

Tips:
经典题目，可以多查阅些资料

偏离 Web 的答案没必要写

dom操作相关

<ul id="list" class="foo">
  <li>#0</li>
  <li><span>#1</span></li>
  <li>#2</li>
  <li>#3</li>
  <li><ul><li>#4</li></ul></li>
  ...
  <li><a href="//v2ex.com">#99998</a></li>
  <li>#99999</li>
  <li>#100000</li>
</ul>

为 <ul> 添加一个类 bar
删除第 10 个 <li>
在第 500 个 <li> 后面增加一个 <li> , 其文字内容为 <v2ex.com />
点击任意 <li> 弹窗显示其为当前列表中的第几项。

要求：使用原生JS

发现没有还没dom操作的问题，这道题是从https://www.v2ex.com/t/328943?p=1 这里抄来的。

ajax请求序列化问题

某个应用模块由文本框 input，以及按钮 A，按钮 B 组成。点击按钮 A，会向地址 urlA 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据），点击按钮 B，会向地址 urlB 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据）。

当用户依次点击按钮 A、B 的时候，预期的效果是 input 依次被 urlA、urlB 返回的数据填充，但是由于到 urlA 的请求返回比较慢，导致 urlB 返回的数据被 urlA 返回的数据覆盖了，与用户预期的顺序不一致。

请问如何设计代码，解决这个问题？ ——题目来自知乎

前端和后端有多少种交互方式？

服务端如何区分不同的用户

当一个用户多次访问我们的网站的时候，我们如何知道多次的访问来源于同一个用户？
如果我们的网站没有登录功能呢？
考虑用户会清空缓存、清空 localStorage，采用何种方法能“尽量”精准的区分用户？

如何实现深拷贝？

深拷贝的作用在于能够实现对于数组和对象的拷贝，不影响拷贝后数据对原数据造成的影响。
实现函数：
function deepCopy(p,c) { var c=c||{};//容错处理 for(var i in p){ if(typeof p[i]==='object'){//引用类型的数据单独处理 c[i]=(p[i].constructor===Array)?[]:{}; deepCopy(p[i],c[i]);//递归处理引用类型数据 }else{ c[i]=p[i];//值类型的数据直接进行拷贝 } } return c; }
我理解的也不是特别明白，希望各位能够提出一些宝贵的见解
具体的可以参考：https://m.jb51.net/article/91906.htm

JS声明前置相关问题

以下代码会不会报错，如果不报错输出什么，为什么

    var y = 10;

    if (!(x in window)) {
        var x = 10;
    } else {
        ++y;
    }

    alert(x);
    alert(y);

JS 递归相关问题

写一个函数，列出一个整数所有的分解类型，比如对于数字4，可以做拆分得到下列字符串

JS运算符优先级笔试题

以下代码输出什么？为什么

var object1 = {
    valueOf: function () {
	return 10;
    },
    toString: function () {
	return "object1";
    }
};

var object2 = {
    valueOf: function () {
	return 20;
    },
    toString: function () {
	return "object2";
    }
};

var object3 = {
    valueOf: function () {
	return 30;
    },
    toString: function () {
	return "object3";
    }
};

var result = (object2, object1, object3) + object1 +-- object1; 
alert(result);

JS运算符相关笔试题

以下代码是否报错，如果不报错输出什么，为什么

    var x = !!"Hello" + (!"world", !!"from here!!");
    alert(x);

JS 引用类型笔试题

以下代码输出什么?为什么?

function swap(x, y){
  var temp = x;
  x = y;
  y = temp;  
}

var a = 1
var b = 2
swap(a, b)
console.log(a) //输出什么
console.log(b) //输出什么

var obj1 = {name: 'jirengu'}
var obj2 = {age: 2}
swap(obj1, obj2)
console.log(obj1)  //输出什么
console.log(obj2)  //输出什么

来自某互联网公司面试题

JS 相等比较相关

请依次计算下列输出的值：

console.log( +0 ==  -0 )
console.log( +0 === -0 )
console.log( Object.is(+0, -0) )

console.log( "1" == 1 )
console.log( "1" === 1 )
console.log( Object.is("1", 1) )

console.log( new String("foo") == new String("foo") )
console.log( new String("foo") === new String("foo") )
console.log( Object.is(new String("foo") , new String("foo") ) )

console.log( new String("foo") == "foo" )
console.log( new String("foo") === "foo" )
console.log( Object.is(new String("foo") , "foo" ) )

const a = {}
const b = a 
console.log( a == b  )
console.log( a === b  )
console.log( Object.is(a, b) )

console.log( NaN == NaN )
console.log( NaN === NaN )
console.log( Object.is(NaN, NaN) )

JS运算符typeof 相关问题

以下代码输出什么？why

    var str = new String("Hello");
	
    var result = typeof(str instanceof String);
    alert(result); //What is the output of the alert? 
	
    result = typeof typeof(str instanceof String);
    alert(result); //What is the output of the alert? 
	
    result = typeof typeof typeof(str instanceof String);
    alert(result); //What is the output of the alert?

挑战、自豪类项目? 开放性问题

聊一聊你觉得做的最有挑战性的(最自豪、最失败)的项目?

Tips:

可以从以下几个方面回答

是什么项目
这个项目做的是什么, 能线上预览更好
涉及的技术栈
中间遇到了哪些问题，你是如何解决的
项目收益或者通过项目学到了什么

使用ES6实现该方法

const obj={a:1,b:2,c:3};
function foo(o,arr){
	//请实现该方法
}

foo(obj,["a","c"]);

//输出 {a:1,c:3}

JS 字符串操作面试题

请用JavaScript 实现一个方法，该方法能够判断两个字符串是否匹配, 如:

function isMatch(str1, str2) {
  // ...
}
isMatch('something', 'ginhtemos')  // true
isMatch('aaa', 'aa')  //false
isMatch('abb', 'baa')  //false
isMatch('hello', 'olelh')  //true

题目来源——饥人谷大前端群前端爱好者尐

两个js数组相关题目

来自xx公司面试题
1.如何随机打乱一个js数组（使用原生代码）
2.现在有一个二维数组，数组长度和子数组长度均不可知，问：从每一个子数组里面取一个数成一个数组，要求组合不能重复，问一共有多少个组合，请设计一个函数把所有可能出现的组合以数组的形式输出。
（由于解题时间花费比较长，代码也有一点小失误，很遗憾没有通过，表示自己的代码很捞，希望看到这两个问题的的同学能想出比较实用且高大上的想法一起讨论）

前端性能优化

老生常谈的话题，前端面试基本都会问到。回答应该从减少http请求，利用缓存以及资源加载方式切入，但前端+后端性能优化也并不局限于这些方式，更全面的回答能体现面试者的经验以及对技术的理解。不应该以生搬的套路进行回答，结合自己实际研发经验才是面试官想要的答案。问题如下：

你在前端性能优化方面有什么心得？
在类似webpack／gulp的自动化工具使用上，你有什么优化经验／心得？
如果网站首页加载速度很慢，你会怎样定位问题？

JS面试题求解

一、从某数据库接口得到如下值：

{
 rows: [
  ["Lisa", 16, "Female", "2000-12-01"],
  ["Bob", 22, "Male", "1996-01-21"]
 ],
 metaData: [
  {name: "name", note: ''},
  {name: "age", note: ''},
  {name: "gender", note: ''},
  {name: "birthday", note: ''}
 ]
}

rows是数据，metaData是对数据的说明。现写一个函数，将上面的Object转化为期望的数组：

[
 {name: "Lisa", age: 16, gender: "Female", birthday: "2000-12-01"},
 {name: "Bob", age: 22, gender: "Male", birthday: "1996-01-21"},
]

二、写一个函数，判断给定的日期是几月的第几周，当月1日属于上一月的，该周计入上一月。例如：
1）输入日期2016-02-01，返回结果为2-1，表示2016年2月1日属于2月的第一周；
2）输入日期2016-09-01，返回结果为8-5，表示2016年9月1日属于8月的第五周。

三、数组

a = [
{id: 10001, name: "Lisa", age: 16},
{id: 10002, name: "Bob", age: 22},
{id: 10003, name: "Alice", age: 20},
];

数组

b = [
{id: 10001, gender: "Female"},
{id: 10002, name: "Bob King", birthday: "1996-01-22"},
{id: 10005, name: "Tom", birthday: "2000-01-01"},
];

写一个函数按id用b更新a,期望得到的结果为：

[
{id: 10001, name: "Lisa", age: 16, gender: "Female"},
{id: 10002, name: "Bob King", birthday: "1996-01-22", age: 22},
{id: 10003, name: "Alice", age: 20},
{id: 10005, name: "Tom", birthday: "2000-01-01"},
]

JS 类型判断相关问题

写一个函数 isEmptyObject，判断一个对象是不是空对象

function isEmptyObject(obj){
  // todo...
}
isEmptyObject( {} ); //true
isEmptyObject( {a:1} ) ; //false

如果可以用 ES5，那么你会如何写这个函数？

一个淘宝页面，你如何取得这个页面用到哪几种标签？

考点Dom基础，来自贺老知乎live

实现一个深拷贝

自适应和响应式有什么区别和联系

某公司笔试题
https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
https://www.zhihu.com/question/20628050

循环/闭包/setTimeout/Promise 综合

控制台显示内容为?

for (var i = 0; i < 5; i++) {
  console.log(i);
}

控制台显示内容为?

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

控制台显示内容为?

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

控制台显示内容为?

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

控制台显示内容为?

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

控制台显示内容为?

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

知乎上看到的文章,六道题循序渐进的考察了很多东西.

做完了感觉有用就去原作者处点个赞吧.
作者:Liril

JS 函数 this 相关题目

下面这段代码输出结果是？

var length=10;
function fn(){
    console.log(this.length);
}
var obj = {
    length:5,
    method: function (fn) {

        fn(); 
        arguments[0](); 
    }
};
obj.method(fn);
obj.method(fn, 123);

重复声明两个函数会怎样？

<script> 
    var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
　 } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
</script> 
y和z的最终结果为:

jrg interview questions

题目1

写一个函数tree,实现如下功能

function tree(list) {
  //todo...
}

let list = [
  {
    code: '1001',
    parentCode: '',
    name: '北京'
  },
  {
    code: '10011',
    parentCode: '1001',
    name: '海淀'
  },
  {
    code: '10012',
    parentCode: '1001',
    name: '大兴'
  },
  {
    code: '100112',
    parentCode: '10011',
    name: '五道口'
  },
  {
    code: '1002',
    parentCode: '',
    name: '上海'
  },
  {
    code: '10022',
    parentCode: '1002',
    name: '徐汇'
  },
  {
    code: '1003',
    parentCode: '',
    name: '武汉'
  }

]


let newList = tree(list)
console.log(newList)

/*
[
  {
    code: '1001',
    parentCode: '',
    name: '北京',
    children: [
      {
        code: '10011',
        parentCode: '1001',
        name: '海淀',
        children: [
          {
            code: '100112',
            parentCode: '10011',
            name: '五道口',
            children: []
          }
        ]
      },
      {
        code: '10012',
        parentCode: '1001',
        name: '大兴',
        children: []
      }
    ]
  },
  {
    code: '1002',
    parentCode: '',
    name: '上海',
    children: [
      {
        code: '10022',
        parentCode: '1002',
        name: '徐汇',
        children: []
      }
    ]
  },
  {
    code: '1003',
    parentCode: '',
    name: '武汉',
    children: []
  }

]

*/

题目2

补充如下代码实现一个简单的jQuery

function $(selector) {
  //todo..
}
$.prototype = {
  init: function(selector) {
    let nodes = document.querySelectorAll(selector)
    nodes.forEach((node, index) => this[index] = node)
    this.length = nodes.length    
  },
  
  addClass: function(cls) {
    // todo...
  }
}
//todo ...

$.get = function(url, data) {
    function done() { 
       //todo... 
    }
    function fail() {
      //todo...
    }
    function always() {
       //todo...
    }
  
    return { done, fail, always }
  }



$('p').addClass('ok')
$.get('http://api.jirengu.com/getWeather.php', { city: '北京' })
  .done(data => console.log(data))
 .fail(()=>console.log('get data error'))

JS 作用域、原型链

在社区发现一道题，已授权，在此分享给大家，随后附作者链接，有什么问题还望指正: ^_^

function Foo() {
    getName = function () { 
    	console.log('1');
    };
    return this;
}
Foo.getName = function () {
	console.log('2');
};
Foo.prototype.getName = function () { 
	console.log('3');
};
var getName = function () { 
	console.log('4');
};
function getName() { 
	console.log(5);
}

Foo.getName();  
getName();	
Foo().getName(); 
getName();  
new Foo.getName(); 
new Foo().getName();   
new new Foo().getName();		

请问上述代码在浏览器环境下，输出结果是多少？

「你最近做了什么」类似问题

你最近看了什么书？
你最近了解了哪些新技术？

Tips:

平时开买两本圈子里流行的书放手边，偶尔翻一翻，至少在这个时候能以备不时之需

在夯实基础的同时关注一两个流行的框架，茶余饭后看看知乎里的"撕逼大战"了解点新名词。有个入门和了解比两眼一抹黑强。"勤奋好学"、"有技术激情"、"有技术视野"的同学谁不喜欢呢

面试题汇总

在线电子书阅读前端常见面试题汇总

扫码阅读

JS-作用域链相关问题

如下代码的输出是什么? 为什么？

var a = 1;

function fn(){
	console.log(a); 
	var a = 5;
	console.log(a);  
	a++;
        var a;
	fn2();
	console.log(a);
	function fn2(){
		console.log(a); 
		a = 20;
		b = 100;
	}
}
fn();
console.log(a); 
a = 10;
console.log(a); 
console.log(b);

什么是FP？与OOP的关系？

开放性问题。

JS this 相关问题

以下代码输出什么？为什么

    var number = 50;
    var obj = {
        number: 60,
        getNum: function () {
	    var number = 70;
	    return this.number;
	}
    }; 

    alert(obj.getNum());
    alert(obj.getNum.call());
    alert(obj.getNum.call({number:20}));

ES5中“严格模式”与“非严格模式”的区别？

范围比较大，很适合用来快速打开话题。

JS运算符小数点相关问题

以下代码会报错吗？如果不报错输出什么?为什么

var result = (2..valueOf() + ({z : 10, x : 20}).x);
alert(result);