耗时一周整顿的前端面试题，干货为主

2024年2月20日 172次阅读来源: Pseudo

websocket

Websocket同http一样都是是基于tcp的,牢靠性的双向通信协定，是建立在tcp之上的，而且是耐久化的协定。

websocket 和http辨别？

相同点
- 都是应用层的协定
- 都是基于tcp,牢靠的协定
差别点
- websocket是耐久化的协定.
- websocket是双向通信协定，模仿socket协定,可以双向发送信息，而HTTP是单向的
- websocket可以在服务器端主意向客户端发送信息，而http的服务端,只能经由历程客户端主动请求

请形貌一下cookie、sessionStorage和localStorage的辨别？

相同点：都存储在客户端
差别点
1. 存储大小
  cookie数据大小不能超过4k。
  sessionStorage和localStorage 虽然也有存储大小的限定，但比cookie大得多，可以到达5M或更大。
2. 有用时候
  localStorage 存储耐久数据，浏览器封闭后数据不丧失除非主动删除数据；
  sessionStorage 数据在当前浏览器窗口封闭后自动删除。
  cookie 设置的cookie逾期时候之前一向有用，纵然窗口或浏览器封闭
3. 数据与服务器之间的交互体式格局
  cookie的数据会自动的通报到服务器，服务器端也可以写cookie到客户端
  sessionStorage和localStorage不会自动把数据发给服务器，仅在当地保留

JS的范例？

基础范例
- undefined
- null
- Number
- String
- Boolean
庞杂范例
- Object

js变量依据存储体式格局辨别，有哪些范例，并表述其特性

值范例：
- undefined string number Boolean
- 拷贝情势,
援用范例：
- array , function
- 指针指向，共用空间
- 可无穷扩大属性，极大节约定名空间。
特别援用范例：function
- 同援用范例↑
- 特别援用范例只要function，由于function的特别性，使得它有点差别

JS中的typeof能获得的那些范例？ 6种

number
string
undefined
object : null和数组都是object
function
boolean

注重：typeof没法细致辨别援用范例的范例，除了function. 只能正确辨别值范例的范例
比方：

 typeof {} //object
 typeof [] //object
 typeof null //object
 typeof console.log // function

function是一个比较特别的范例，所以typeof可以辨别

什么时候运用===什么时候运用==？

尽量运用 === 缘由以下
- 一致性:运用 ==对一致性没有任何长处，所以提早防备
- 平常来说,===是最简朴的操纵符，由于它不必范例转换，所以相对来说，速率也会更快。
- == 会举行范例转换，很轻易懵逼

== 的运用状况,可参考

推断对象的属性是不是存在

    var obj = {};
    if( obj.a == null ){
        //这里相关于：obj.a === null || obj.a === undefined 的简写情势，JQ源码的引荐写法
    }

推断函数的参数是不是存在

    function fn( a, b){
        if( b == null ){
            //这里相当于 b===null || b === undefined 的简写
        }
    }

怎样明白JSON？

从纯JS的角度看，JSON就是对象，而且只要两个API

   JSON.stringify({a:10,b:30}) //将对象转为字符串
   JSON.parse('{"a":10,"b":30}') //将JSON花样的字符串转为 对象

JSON也是一种轻量级的文本数据交流花样.

js中有哪些内置函数 9 种

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

推断一个变量会被当作 true 照样 false

var a = 100; console.log( !!a ); //true

window.onload和DOMContentLoaded的辨别？

window.onload: 页面中一切数据加载完成后，才会实行，包含图片，css等
DOMContentLoaded: DOM组织加载完成后实行，须要守候图片等其他资本加载完成

简述怎样完成一个模块加载器，完成相似requires.js的基础功能

可参看这篇博文：https://github.com/youngwind/…

完成数组的随机排序

 //该要领最简朴，效果平常，每一个元素依然有很大机率在它本来的位置四周涌现
 arr.sort(function () { 
      return Math.random() - 0.5; 
   });

//Fisher–Yates shuffle费雪耶兹随机置乱算法) ！！！引荐

   
    //算法头脑：从0~i（i的变化为 n-1到0递减）中随机获得一个下标，和末了一个元素（i）交流。
   var arr = [5,8,59,56];
   function shuffle(arr) { 
    var i = arr.length, t, j; 
    while (i) 
    { 
        j = Math.floor(Math.random() * i--);
        t= arr[i];
        arr[i] = arr[j];
        arr[j]= t;
    } 
} 
shuffle(arr)
console.log(arr);//[56, 8, 5, 59]

原型和原型链

什么叫原型链

原型链是针对组织函数的，比方我建立了一个函数并经由历程变量new了一个函数，那这个函数就会继续建立处置惩罚函数的属性，假如接见这个函数的属性时，并没有在new处置惩罚的变量中写该属性，那末就会往上,依据protype逐级向上查找，这个查找的历程就叫原型链。

原型划定规矩

一切的援用范例（数组，对象，函数），都具有对象的特别，即可自在扩大属性（除了Null，纯属不测）
一切的援用范例（数组，对象，函数），都有一个__proto__属性，也可以称为隐式原型，属性值是一个一般的对象
一切的函数，都有一个prototype属性，也可称之为显式原型，属性值是一个一般的对象
一切的援用范例（数组，对象，函数），__proto__属性值指向它的组织函数的prototype属性值
当试图获得一个对象的某个属性时，假如这个对象本身没有这个属性，那末会去它的__proto__中去找。

由于它的隐式原型即是它的显式原型，所以也会去 prototype 中去找。

组织函数

 function Foo(name,age){
    this.name = name;
    this.age = age;
}
var foo = new Foo('h1',25);
var foo2 = new Foo('h1',250);
console.log(foo,foo2);

//轮回对象本身的属性
var item;
for( item in foo)
{
    //只遍历对象本身的属性，过滤掉该对象的显式原型
    if(foo.hasOwnProperty(item))
    {
        console.log(item)
    }

}

形貌new一个对象的历程

建立一个对象
this指向这个新对象
实行代码，即对this赋值
return this。默许有return，不必写

怎样推断一个变量是数组范例

var arr = [1,2,3];
console.log(Array.isArray(arr)); //true

//instanceof运算符用于测试组织函数的prototype属性是不是涌现在对象的原型链中的任何位置
console.log( arr instanceof Array) //true

写一个原型继续的例子

 function Elem(id){
    this.dom = document.getElementById(id);
}

Elem.prototype.html = function(val){
    var dom = this.dom;
    if(val){
        dom.innerHTML = val;
        return this; //用来链式挪用
    }else{
        return dom.innerHTML;
        
    }
}

Elem.prototype.on = function(type ,fn){
    var dom = this.dom;
    dom.addEventListener( type , fn);
    
}
var h1 = new Elem('h1');
h1.html("你被修正了").on('click', function(){
    console.log(this)
})

作用域和闭包

什么叫作用域？

`作用域是针对变量的，比方我建立了一个函数，这个函数中包含了别的一个函数。那末该变量中就有3个作用域
全局作用域》函数作用域》内层函数的作用域
作用域的特性就是，先在本身的变量局限中查找，假如找不到，就会沿着作用域往上找。
`

变量提拔的明白

变量定义
函数声明（注重和函数表达式的辨别）
预剖析

this的运用场景

注重：this要在实行时才确认值，定义时没法确认

作为组织函数实行
作为对象属性实行
作为一般函数实行
call apply bind

 function f1(name,age){
    console.log(name,age)
    console.log(this); //this为x对象
 }

f1.apply({x:'我是this'}, ["seek",20]);
f1.call({x:'我是this'}, "seek",20);


//运用bind转变this时，需用函数表达式
var f1 = function (name,age){
    console.log(name,age)
    console.log(this); //this为x对象
}.bind('我是被绑定的this')

f1("seek",20)

闭包

`当一个函数的返回值是别的一个函数，而返回的谁人函数假如挪用了其父函数内部的别的变量，
假如返回的这个函数在外部被实行，就产生了闭包。
表现情势：使函数外部可以挪用函数内部定义的变量。`

闭包的运用场景

函数作为返回值

 function fn(){
    var a = 10;
    return function(){
        console.log(a); //a是自在变量，从父作用域最先找。
    }
}
var f1 =  fn();
var a = 20;
f1(); //10

函数作为参数来通报

function fn(){
    var a = 10;
    return function(){
        console.log(a); 
        }
}
var fn1 = fn();

function fn2(fn){
    var a =20;
    fn();
}
fn2(fn1); //10

怎样明白作用域？

自在变量
作用域链，即自在变量的查找
闭包的两个场景

JS建立10个a标签，点击时弹出对应的序号（考点：作用域)

var str,a;
for( a=0; a<10;a++){
    str = document.createElement("a");
    str.innerHTML = a + "点我" + "<br/>";
    
    document.body.appendChild(str);
    
    (function(a){
        str.addEventListener("click",function(e){
            e.preventDefault();
            console.log(a)
        })
    })(a)
}

什么叫异步,什么叫同步？

同步是壅塞形式，异步黑白壅塞形式。

异步：不须要等操纵做完，就相应用户请求. 比方：ajax，img的加载，setTimeout,setInterval
同步：必需守候操纵做完，才返回效果.

数组API

 var arr= [2,3,9,0];

forEach 遍历一切元素

  arr.forEach(function(item,index){
        console.log(item) // 2390
        console.log(index) //0123

    })

every 推断一切元素是不是都相符前提

  var result = arr.every(function(item,index){
        if(item < 4)
        {
          return true;
        }
    })
  console.log(result); //false， 由于9并不小于4

some 推断是不是有最少一个元素相符前提

 var result =  arr.some(function(item,index){
        if(item < 4)
        {
          return true;
        }
      })
console.log(result); //true 由于2,3,0小于4

sort 排序

 var result =  arr.sort(function(a,b){
          // return a-b; //正序
          return b-a; // 倒序
        // return return Math.random() - 0.5; //最简朴的随机数组排序，并不引荐

      })
console.log(result); //  [9, 3, 2, 0]

map 对元素从新组装，天生新数组

//map适用局限照样较广的，学会思索
 var result =  arr.map(function(item,index){
            return '<h1>' + item + '</h1>';
      })
console.log(result);   //  ["<h1>2</h1>", "<h1>3</h1>", "<h1>9</h1>", "<h1>0</h1>"]

filter 过滤相符前提的元素,较为经常使用

var result =  arr.filter(function(item,index){
            if(item >=3){
              return true;
            }
      })
console.log(result);   // [3, 9]

猎取 2019-03-23花样的日期

   function formatDate(dt) {
        if (!dt) {
            //假如不传参数，则默许为当前时候
            dt = new Date();
        }

        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var day = dt.getDate();

        if (month <= 10) {
            month = '0' + month;
        }

        if (day <= 10) {
            day = '0' + day;
        }

        return year + '-' + month + '-' + day;
    }

    var date = formatDate();
    console.log(date); //2019-03-23

猎取随机数，请求长度一致的字符串花样

 var random = Math.random();
    random = random + '0'.repeat(10); //repeat 反复10个0, 防备随机数涌现少于10位数的状况
    random = random.slice(0,10)
    console.log(random); //0.70728618  每次返回的只要10位数的字符串

写一个能遍历对象和数组的foreach函数

function foreach(info, fn)
{
        //数组处置惩罚
        if(info instanceof Array)
        {
          info.forEach(fn)
        }else{
           //对象处置惩罚
           for( key in obj){
              fn(key, obj[key])
            }
        }
  
}

//运用要领
  var obj = {x: '我是x',y: '我是y'};
   foreach(obj, function(key,value){
    console.log(value); //我是x,我是y
  })


  var arr = [5,8,9];
  foreach(arr, function(elem,index){
    console.log(elem);//5,8,9
  })

Web_API

编写一个通用的事宜监听函数

 function bindEvent(elem,type,fn){
           elem.addEventListener( type ,fn)
 }
 //运用要领
 bindEvent(id,'click', function(e){
    console.log(e)
 })

 bindEvent(a,'click', function(e){
    e.preventDefault(); //阻挠默许事宜
 })

关于一个无穷加载流的页面，怎样给每一个特定的标签增加事宜

//运用代办，由父级帮助去做

 <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <span>ddd</span>
    <a href="#">a5</a>
    <!-- 动态加载更多 -->
</div>

div1.addEventListener('click', function(e){
    if (e.target.nodeName == "A"){
        alert(e.target.innerHTML)
    }
})

完美通用绑定事宜的函数，包含代办

//HTML组织
 <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <span>ddd</span>
    <a href="#">a5</a>
    <!-- 动态加载更多 -->
</div>

<div id="div2">不运用代办</div>

//
function bindEvent(elem,type,selector, fn){
    if(fn == null){
        fn=selector;
        selector =null;
    }
    elem.addEventListener( type ,function(e){
        var target;
        if(selector){
            target = e.target;
            //matches() 要领用于检测字符串是不是婚配给定的正则表达式。
            if(target.matches(selector)){
                fn.call(target,e);
            }
        }else{
            fn.call(e);
        }
    })
}

//运用代办
bindEvent(div1,'click','a',function(e){
    console.log(this)
})
//不运用代办
bindEvent(div2,'click',function(e){
    //call转变了this指向为e
    console.log(this.toElement.innerHTML)
})

可以跨域的三个标签

<img src="" alt=""> //用于办理统计
<link rel="stylesheet" href=""> //运用CDN
<script></script> // 运用JSONP

3月10日口试

闭包的优瑕玷

JS中，在函数外部没法接见函数内部的值，运用闭包就可以做到。

长处：
1. 运用闭包可以让局部变量模仿全局变量一样,然则，只能被特定函数挪用。
2. 全局变量可能会形成定名争执，运用闭包不必忧郁这个题目，由于它是私有化，加强了封装性。
瑕玷
1. 由于闭包是驻留在内存中的,会增大内存运用量，运用不当很轻易形成内存泄漏,下降顺序的机能。

按需引入，模块引入的完成？

http请求缓存头详解

Expires: http1.0 推出的，指服务器返回的文件有用期，但实在这是有缺点的，假如把当地的时候改成2118年，那Expires的时候怎样都邑逾期。
Last-Modified: http1.0推出的，指服务器文件的末了修正时候，浏览器会带上If-Modified-Since向服务器发送请求，与服务器文件修正时候Last-Modified做对照，假如时候差别，则猎取数据返回200，不然返回304后挪用浏览器当地硬盘的缓存。
Cache-Control: http1.1推出，指文件缓存的有用期。
- .max-age:单元是s，设置文件最大缓存时候，用得最多。
- public:缓存可以被多用户同享，比方360浏览器可以登录差别账号，电脑系统可以切换差别账号
- private:仅单用户私有，不被多用户同享
- no-cache:不会被缓存。
- no-store:不允许被存储
ETag: http1.1推出，该版本号是由服务端随机天生的，浏览器会带上If-None-Match向服务器发送请求，与服务器文件修正版本ETag做对照，假如版本号差别，则猎取数据返回200，不然返回304后挪用浏览器当地硬盘的缓存，这类体式格局比Last-Modified靠谱。

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