面试是个漫长的过程, 从海投到收获电话面试, 一面, 二面, 三面, 一个步骤出错那么后面就宣告终结. 同时, 面试过程中你也可能会遇到一些面试官的刁难, 甚至部分面试官会说些比较打击你的话, 但是大部分面试官都是很棒的!
前端面试题目汇总
必须有牢固的基础知识, 足够丰富的项目经历.
一, 基础 JavaScript
get 请求传参长度的误区
误区: 我们经常说 get 请求参数的大小存在限制, 而 post 请求的参数大小是无限制的.
实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少. 对 get 请求参数的限制是来源与浏览器或 Web 服务器, 浏览器或 Web 服务器限制了 url 的长度. 为了明确这个概念, 我们必须再次强调下面几点:
HTTP 协议 未规定 GET 和 POST 的长度限制
GET 的最大长度显示是因为 浏览器和 Web 服务器限制了 URI 的长度
不同的浏览器和 Web 服务器, 限制的最大长度不一样
要支持 IE, 则最大长度为 2083byte, 若只支持 Chrome, 则最大长度 8182byte
补充 get 和 post 请求在缓存方面的区别
post/get 的请求区别, 具体不再赘述.
补充补充一个 get 和 post 在缓存方面的区别:
get 请求类似于查找的过程, 用户获取数据, 可以不用每次都与数据库连接, 所以可以使用缓存.
post 不同, post 做的一般是修改和删除的工作, 所以必须与数据库交互, 所以不能使用缓存. 因此 get 请求适合于请求缓存.
闭包
一 句话可以概括: 闭包就是能够读取其他函数内部变量的函数, 或者子函数在外调用, 子函数所在的父函数的作用域不会被释放.
类的创建和继承
(1)类的创建(es5):new 一个 function, 在这个 function 的 prototype 里面增加属性和方法.
下面来创建一个 Animal 类:
- // 定义一个动物类
- function Animal (name) {
- // 属性
- this.name = name || 'Animal';
- // 实例方法
- this.sleep = function(){
- console.log(this.name + '正在睡觉!');
- }
- }
- // 原型方法
- Animal.prototype.eat = function(food) {
- console.log(this.name + '正在吃:' + food);
- };
这样就生成了一个 Animal 类, 实力化生成对象后, 有方法和属性.
- function Cat(){
- }
- Cat.prototype = new Animal();
- Cat.prototype.name = 'cat';
- // Test Code
- var cat = new Cat();
- console.log(cat.name);
- console.log(cat.eat('fish'));
- console.log(cat.sleep());
- console.log(cat instanceof Animal); //true
- console.log(cat instanceof Cat); //true
- function Cat(name){
- Animal.call(this);
- this.name = name || 'Tom';
- }
- // Test Code
- var cat = new Cat();
- console.log(cat.name);
- console.log(cat.sleep());
- console.log(cat instanceof Animal); // false
- console.log(cat instanceof Cat); // true
- function Cat(name){
- Animal.call(this);
- this.name = name || 'Tom';
- }
- Cat.prototype = new Animal();
- Cat.prototype.constructor = Cat;
- // Test Code
- var cat = new Cat();
- console.log(cat.name);
- console.log(cat.sleep());
- console.log(cat instanceof Animal); // true
- console.log(cat instanceof Cat); // true
- function Cat(name){
- Animal.call(this);
- this.name = name || 'Tom';
- }
- (function(){
- // 创建一个没有实例方法的类
- var Super = function(){
- };
- Super.prototype = Animal.prototype;
- // 将实例作为子类的原型
- Cat.prototype = new Super();
- })();
- // Test Code
- var cat = new Cat();
- console.log(cat.name);
- console.log(cat.sleep());
- console.log(cat instanceof Animal); // true
- console.log(cat instanceof Cat); //true
- var a="hello world";
- var b="world";
- var a=b;
- // 这时, 会释放掉 "hello world", 释放内存以便再引用
- function problem() {
- var objA = new Object();
- var objB = new Object();
- objA.someOtherObject = objB;
- objB.anotherObject = objA;
- }
- var element=document.getElementById('');
- var myObj=new Object();
- myObj.element=element;
- element.someObject=myObj;
- // 定义模块
- define(['dependency'], function(){
- var name = 'Byron';
- function printName(){
- console.log(name);
- }
- return {
- printName: printName
- };
- });
- // 加载模块
- require(['myModule'], function (my){
- my.printName();
- }
- function deepClone(obj){
- var newObj= obj instanceof Array ? []:{
- };
- for(var item in obj){
- var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
- newObj[item] = temple;
- }
- return newObj;
- }
- function ones(func){
- var tag=true;
- return function(){
- if(tag==true){
- func.apply(null,arguments);
- tag=false;
- }
- return undefined
- }
- }
- var myNewAjax=function(url){
- return new Promise(function(resolve,reject){
- var xhr = new XMLHttpRequest();
- xhr.open('get',url);
- xhr.send(data);
- xhr.onreadystatechange=function(){
- if(xhr.status==200&&readyState==4){
- var JSON=JSON.parse(xhr.responseText);
- resolve(JSON)
- }else if(xhr.readyState==4&&xhr.status!=200){
- reject('error');
- }
- }
- })
- }
- Object.defineProperty(user,'name',{
- set:function(key,value){
- }
- })
- var user = new Proxy({
- },{
- set:function(target,key,value,receiver){
- }
- })
- obj={
- name:yuxiaoliang,
- getName:function(){
- return this.name
- }
- }
- object.defineProperty(obj,"name",{
- // 不可枚举不可配置
- });
- function product(){
- var name='yuxiaoliang';
- this.getName=function(){
- return name;
- }
- }
- var obj=new product();
- ""==0 //true"0"==0 //true" "!="0" //true
- 123=="123" //true
- null==undefined //true
- (2)Object.JS
- Function.prototype.bind=function(obj,arg){
- var arg=Array.prototype.slice.call(arguments,1);
- var context=this;
- return function(newArg){
- arg=arg.concat(Array.prototype.slice.call(newArg));
- return context.apply(obj,arg);
- }
- }
- Function.prototype.bind=function(obj,arg){
- var arg=Array.prototype.slice.call(arguments,1);
- var context=this;
- var bound=function(newArg){
- arg=arg.concat(Array.prototype.slice.call(newArg));
- return context.apply(obj,arg);
- }
- var F=function(){
- }
- // 这里需要一个寄生组合继承
- F.prototype=context.prototype;
- bound.prototype=new F();
- return bound;
- }
- function say(){
- //something
- setTimeout(say,200);
- }
- setTimeout(say,200)
- setTimeout(function(){
- //do something
- setTimeout(arguments.callee,200);
- },200);
- <script type="text/JavaScript">
- var obj = new Image();
- obj.src = "http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";;
- obj.onload = function() {
- alert('图片的宽度为:' + obj.width + '; 图片的高度为:' + obj.height);
- document.getElementById("mypic").innnerHTML = "<img src='" + this.src + "'/>";
- }
- </script>
- <div id="mypic">
- onloading......
- </div>
- <script type="text/JavaScript">
- var obj = new Image();
- obj.src = "http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";;
- obj.onreadystatechange = function() {
- if (this.readyState == "complete") {
- alert('图片的宽度为:' + obj.width + '; 图片的高度为:' + obj.height);
- document.getElementById("mypic").innnerHTML = "<img src='" + this.src + "'/>";
- }
- }
- </script>
- <div id="mypic">
- onloading......
- </div>
- setTimeout(function(){
- console.log(1)
- },0);
- new Promise(function(resolve,reject){
- console.log(2);
- resolve();
- }).then(function(){
- console.log(3)
- }).then(function(){
- console.log(4)
- });
- process.nextTick(function(){
- console.log(5)
- });
- console.log(6);
- // 输出 2,6,5,3,4,1
- function sleep(ms){
- var start=Date.now(),expire=start+ms;
- while(Date.now()<expire);
- console.log('1111');
- return;
- }
- function sleep(ms){
- var temple=new Promise(
- (resolve)=>{
- console.log(111);setTimeout(resolve,ms)
- });
- return temple
- }
- sleep(500).then(function(){
- //console.log(222)
- })
- // 先输出了 111, 延迟 500ms 后输出 222
- function sleep(ms){
- return new Promise((resolve)=>setTimeout(resolve,ms));
- }
- async function test(){
- var temple=await sleep(1000);
- console.log(1111)
- return temple
- }
- test();
- // 延迟 1000ms 输出了 1111
- function* sleep(ms){
- yield new Promise(function(resolve,reject){
- console.log(111);
- setTimeout(resolve,ms);
- })
- }
- sleep(500).next().value.then(function(){
- console.log(2222)
- })
- Function.proto==Object.prototype //false
- Function.proto==Function.prototype//true
- function deepClone(obj){
- var newObj= obj instanceof Array?[]:{
- };
- for(var i in obj){
- newObj[i]=typeof obj[i]=='object'?
- deepClone(obj[i]):obj[i];
- }
- return newObj;
- }
- var arr=[1,2,3];
- var newArr=deepClone(arr);
- // newArr->[1,2,3]
- var obj={
- x:1,
- y:2
- }
- var newObj=deepClone(obj);
- // newObj={
- x:1,y:2
- }
- //Number 包装对象
- var num=new Number(1);
- typeof num // "object"
- var newNum=deepClone(num);
- //newNum -> {
- } 空对象
- //String 包装对象
- var str=new String("hello");
- typeof str //"object"
- var newStr=deepClone(str);
- //newStr-> {
- 0:'h',1:'e',2:'l',3:'l',4:'o'
- };
- //Boolean 包装对象
- var bol=new Boolean(true);
- typeof bol //"object"
- var newBol=deepClone(bol);
- // newBol ->{
- } 空对象
- ....
- function baseClone(base){
- return base.valueOf();
- }
- //Number
- var num=new Number(1);
- var newNum=baseClone(num);
- //newNum->1
- //String
- var str=new String('hello');
- var newStr=baseClone(str);
- // newStr->"hello"
- //Boolean
- var bol=new Boolean(true);
- var newBol=baseClone(bol);
- //newBol-> true
- Date.prototype.clone=function(){
- return new Date(this.valueOf());
- }
- var date=new Date('2010');
- var newDate=date.clone();
- // newDate-> Fri Jan 01 2010 08:00:00 GMT+0800
- RegExp.prototype.clone = function() {
- var pattern = this.valueOf();
- var flags = '';
- flags += pattern.global ? 'g' : '';
- flags += pattern.ignoreCase ? 'i' : '';
- flags += pattern.multiline ? 'm' : '';
- return new RegExp(pattern.source, flags);
- };
- var reg=new RegExp('/111/');
- var newReg=reg.clone();
- //newReg-> //111//
- var events=require('events');
- var eventEmitter=new events.EventEmitter();
- eventEmitter.on('say',function(name){
- console.log('Hello',name);
- })
- eventEmitter.emit('say','Jony yu');
- function Events(){
- this.on=function(eventName,callBack){
- if(!this.handles){
- this.handles={
- };
- }
- if(!this.handles[eventName]){
- this.handles[eventName]=[];
- }
- this.handles[eventName].push(callBack);
- }
- this.emit=function(eventName,obj){
- if(this.handles[eventName]){
- for(var i=0;o<this.handles[eventName].length;i++){
- this.handles[eventName]i;
- }
- }
- }
- return this;
- }
- var events=new Events();
- events.on('say',function(name){
- console.log('Hello',nama)
- });
- events.emit('say','Jony yu');
- // 结果就是通过 emit 调用之后, 输出了 Jony yu
- var event1=new Events();
- var event2=new Events();
- event1.on('say',function(){
- console.log('Jony event1');
- });
- event2.on('say',function(){
- console.log('Jony event2');
- })
- event1.emit('say');
- event2.emit('say');
- //event1,event2 之间的事件监听互相不影响
- // 输出结果为'Jony event1' 'Jony event2'
- var a=11;
- function test2(){
- this.a=22;
- let b=()=>{
- console.log(this.a)
- }
- b();
- }
- var x=new test2();
- // 输出 22
- GET /chat HTTP/1.1
- Host: server.example.com
- Upgrade: websocket
- Connection: Upgrade
- Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
- Sec-WebSocket-Protocol: chat, superchat
- Sec-WebSocket-Version: 13
- Origin: http://example.com/
- Upgrade:webSocket
- Connection:Upgrade
- Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
- Sec-WebSocket-Protocol: chat, superchat
- Sec-WebSocket-Version: 13
- x-oss-object-type:
- Normal
- x-oss-request-id:
- 598D5ED34F29D01FE2925F41
- x-oss-storage-class:
- Standard
- 7.Web Quality (无障碍)
- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.HTML?utm_source=tuicool(语法篇)
- http://www.ruanyifeng.com/blog/2015/07/flex-examples.HTML(实例篇)
- .box {
- flex-direction: row | row-reverse | column | column-reverse;
- }
- .box{
- flex-wrap: nowrap | wrap | wrap-reverse;
- }
- flex-flow:
- .box {
- flex-flow: <flex-direction> || <flex-wrap>;
- }
- div{
- width: 400px;
- height: 400px;
- position: relative;
- border: 1px solid #465468;
- }
- img{
- position: absolute;
- margin: auto;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- <div>
- <img src="mm.jpg">
- </div>
- .container{
- width: 500px;
- height: 400px;
- border: 2px solid #379;
- position: relative;
- }
- .inner{
- width: 480px;
- height: 380px;
- background-color: #746;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -190px; /height 的一半 /
- margin-left: -240px; /width 的一半 /
- }
- div{
- width: 300px;
- height: 300px;
- border: 3px solid #555;
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
- img{
- vertical-align: middle;
- }
- .container{
- width: 300px;
- height: 200px;
- border: 3px solid #546461;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
- .inner{
- border: 3px solid #458761;
- padding: 20px;
- }
- display: -webkit-box
- -webkit-box-orient:vertical
- -Web-line-clamp:3
- overflow:hidden
- 11.visibility=hidden, opacity=0,display:none
来源: http://www.qdfuns.com/article/51117/3962d3b06b9369904c30c68e94f6e0a8.html