2019Interview-summary

如下題目包括筆試和部分機試題目！

有些公司名字可能不記得了，當時面試完了，就立馬開始總結，主要是記錄了一些印象比較深入的題目，個人答案可能不是那麼準確,若是各位夥伴有更好的答案,歡迎你們一塊兒分享討論！

什麼是閉包?

個人答案是:閉包其實就是做用域內的函數,就是連接內部函數和外部函數之間的橋樑.

閉包的官方解釋是： 閉包是指有權訪問另外一個函數做用域中的變量的函數。

js爲何是單線程的?

個人答案是:js最初設計的時候,就是作瀏覽器頁面交互的,若是是多線程的,可能存在同一時間,兩個進程同時操做同一個dom的狀況,一個操做對這個dom進行編輯,另外一個進程同時進行刪除,同時下發兩個指令,那麼瀏覽器應該怎麼操做,聽誰的? 連接

當一個頁面數據比較多的時候,出現滾動條的時候,你怎麼優化這個頁面?

個人答案是:面試官的答案是:當頁面數據比較多會出現滾輪的時候,你要考慮的是,當用戶滾動滾輪,你應該想獲得,哪些數據我要立馬向後臺請求過來的,或者說提早緩存過來的,哪些事件須要馬上綁定上去的,以及對於已經滾動出去的頁面,怎樣清理內存空間,取消綁定事件等操做. 個人答案是:把多個http請求概括爲一個,以便減小通信消耗的時間.重寫請求數據的方法,去除無用的操做;分發異步執行多個任務,而後統一返回,去除同步執行代碼消耗的時間;對於一些耗時較長的邏輯加緩存; 總結:請求優化,資源優化,以及緩存;

CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和!important哪一個優先級高?

個人答案是:通用(*),id(#),類別(.),標籤(tag),後代(>),子代(div p),羣組(ul,ul),相鄰同胞(p+span),僞類(a:hover),屬性([attr]);

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些?

個人答案是:行內元素有 a b i input img label textarea span strong select;

塊級元素:div dir dl form h1-h6 hr menu ol ul p

空元素:br hr input img link meta

繼承:css繼承通常是指文本方面的繼承 ,盒子模型相關的基本上沒有繼承的;

塊級元素能夠繼承的:text-indent;text-aline;

行級別元素能夠繼承的:lettter-spacing,world-spacing,line-height,color,font相關

什麼是doctype?

個人答案是:百度百科:doctype標籤是一種標準通用標記語言的文檔類型申明,它的目的是告訴通用標準語言解析器,它應該使用什麼樣的文檔類型定義來解析文檔.

至少寫2種css hack

個人答案是:只有IE6能識別的_例如:_background-color:red;;*IE6和IE7能識別,IE8和Firefox不能識別;

lt   小於
   gt  大於
   gte  大於或等於
   lte  小於或等於
   ！   非
複製代碼

1.條件hack:

<!--[if lt IE 7]>    // 小於IE7的
html代碼
<![endif]-->
複製代碼

2.屬性級別的hack:

#test{
    color:#c30; /* For Firefox */
    color:red\0; /* For Opera */
    color:yellow\9; /* For IE8+ */
    *color:blue; /* For IE7 */
    _color:#ccc; /* For IE6 */
  }
複製代碼

3.選擇符級別的hack

* html .test{ color:red; /* For IE6 and earlier */ }

* + html .test{ color:red; // For IE7 } .test:lang(zh-cn){ color:red; // for IE8+ and not IE } .test:nth-child(1){ color:red; // for IE9+ and not IE } **

如何讓一個div水平垂直居中?

<div class='outer'>
    <div class='inner'></div>
  </div>
複製代碼

css:

方法一 // div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】

.outer{
      width:300px;
      height:300px;
      position:relative;
      overflow:auto
    }
    .inner{
      width:130px;
      height:130px;
      position:absolute;
      maigin:auto;
      top:0;
      right:0;
      left:0;
      bottom:0;
    }
複製代碼

方法二 // 不支持IE

.outer {
      width:300px;
      height:300px;
      background-color: blueviolet;
      display:flex;
    }
    .inner {
      width:120px;
      height:120px;
      background-color: aquamarine;
      margin:auto;
      flex:0 0 auto;
    }
複製代碼

方案三 div絕對定位水平垂直居中【margin 負間距】

.outer {
     width: 300px;
     height: 300px;
     background-color: blueviolet;
     position: relative;
 }

 .inner {
     height: 120px;
     width: 120px;
     background-color: aquamarine;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -60px;
     margin-left: -60px;
 }
複製代碼

方案四 // div絕對定位水平垂直居中【Transforms 變形】

.outer {
     width: 300px;
     height: 300px;
     background-color: blueviolet;
     position: relative;
 }

 .inner {
     height: 120px;
     width: 120px;
     background-color: aquamarine;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%)
 }
複製代碼

方案五

.outer {
      width: 300px;
      height: 300px;
      background-color: rgb(43, 198, 226);
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .inner {
      height: 120px;
      width: 120px;
      background-color: rgb(40, 119, 109);
  }
複製代碼

方案六 // 支持IE

.outer {
      width: 300px;
      height: 300px;
      background-color: rgb(43, 198, 226);
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }

  .inner {
      display: inline-block;
      height: 120px;
      width: 120px;
      background-color: rgb(63, 19, 221);
  }
複製代碼

方法七

.outer {
    position: relative;
    border: 1px solid rgb(240, 14, 82);
    width: 400px;
    height: 160px;
}

.inner {
    position: absolute;
    width: 200px;
    height: 50px;
    border: 1px solid rgb(24, 13, 177);
    left: -webkit-calc((400px - 200px)/2);
    top: -webkit-calc((160px - 50px)/2);
    left: -moz-calc((400px - 200px)/2);
    top: -moz-calc((160px - 50px)/2);
    left: calc((400px - 200px)/2);
    top: calc((160px - 50px)/2)
}
複製代碼

如下代碼執行後,彈窗中依次彈出的內容是什麼?請說明爲何?

+
      function () {
        alert(a)
        a()
        var a = function () {
            console.log('1')
        }

        function a() {
            console.log('2')
        }
        alert(a)
        a()
        var d = c = a
      }()
      alert(d)
      alert(c)
複製代碼

個人答案是:考察閉包和變量的提高的,依次出現的內容是:

==> function a (){ console.log('2') }

==> 2

==> function (){ console.log('1') }

==> 1

==> VM49:16 Uncaught ReferenceError: d is not defined at :16:17

注意:其中變量c是全局變量,若將alert(d)註釋掉,alert(c)將會打印出函數1

如下代碼有什麼問題,請說出改進的方法?

for (var i = 0; i < 10; i++) {
    document.body.innerHTML += '<li></li>'
}
複製代碼

個人答案是:

var html = ''
for (var i = 0; i < 10; i++) {
    html += '<li></li>'
}
document.body.innerHTML = html
複製代碼

或者

var oFragment = document.createDocumentFragment()
  for (var i = 0; i < 10; i++) {
      html += '<li></li>'
  }
  document.body.innerHTML = oFragment
複製代碼

迴流和重繪技巧

如下代碼執行的時候只會迴流2次,固然這個是在操做樣式的時候.

var box = document.getElementsByClassName('box')[0],
boxStyle = box.style;   // 先用變量保存一次,避免屢次操做樣式,優化技巧.
像操做 width height,offset ,client ,scroll,等能夠先用變量保存,下次一樣操做的時候,系統會直接用變量.
特別是在作動畫或者定時器的時候,要用position:absolute;將動畫脫離文檔流.避免在每次動畫執行的時候,
儘可能避免操做margin-top,不然會影響父級標籤,都會執行一次迴流和重繪產生的性能問題.
box.onmoseover = function(){
  boxSty.display = 'none';
  boxSty.border = '5px solid #ccc';
  boxSty.weigh = '50px';
  boxSty.height = '50px';
  boxSty.display = 'block';
}
複製代碼

請說出一下程序的執行結果

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();

異步加載的方法?

在script標籤中:

(function (){
  function ascyncLoad(){
  var script = document.createElement('script'),
  firstScript =  document.getElementsByTagName('script')[0];
    script.type = 'text/javascript';
    script.src = './util.js';
    script.async = true;
    firstScript.parentNode.insertBefore(script,firstScript);
  }
  if (script.attachEvent) {
    window.attachEvent('onload',ascyncLoad)
  } else {
    window.addEventListener('onload',asyncLoad,true)
  }
})()
複製代碼

什麼是CDN,請說明使用CDN的好處?

答案:CDN的全稱是 content delivery network 內容分發網絡.

優點在於:

(1)解決了誇運營商和誇地域訪問的問題,使得訪問延遲大大下降;

(2)大部分請求內容在CDN內容邊緣完成,CDN起到了分流的做用,減輕了源站的負載.

css是什麼?css盒子模型有哪些屬性?

個人答案是::css中文叫作層疊樣式表,盒子模型分爲IE模型和標準w3模型兩種,W3盒子模型中的屬性width,height 不包括:border和padding,而IE盒子模型中的width和height包括了 border和padding

box-sizing相關:

標準w3盒模型: content-box
IE盒模型:border-box
複製代碼

你開發的項目通常是在哪一個瀏覽器上,他們的內核是什麼?你是如何優化的?

個人答案是:通常是在chrome和IE瀏覽器上比較多;

IE瀏覽器 內核 : trident  -ms- ;
  Firefox 內核 : gecko    -moz- ;
  Safari 內核 : webkit    -webkit- ;
  Opera  內核 : Blink     -o- ;
  Chrome 內核 : Blink    -webkit- ;
複製代碼

px和em的區別?

基本類型和引用類型的區別簡單介紹

js typeof 的值有哪些?

個人答案是:undefined, boolean, string, number, symbol,function ,object,

基本類型有6種基本類型,undefined,null,string,number,boolean,symbol,

var a = 3;
  var b = a;
  a = 1;
複製代碼

字符串爲何是不可變的?

當第一步var a = 3的時候,將地址中的1008改成a,而後存放3進去,以後var b = 3也是相似的
當再次賦值 a = 1 的時候,並非將以前的1008地址覆蓋了,而是將a重新放入1006的地址位置,而後放如1,
而後地址1008又返回爲以前的了,可是其中的存放的值3 仍是不變的,因此字符串是不變的的;
複製代碼

簡單說下內存中的堆和棧?

var arr1 = [1,2,3,4];
var arr2 = arr1; // 在棧內存中開闢一塊空間,存放的是堆內存的地址,指向對應的堆內存.
arr1.push(5);  // 此時的數組 arr1 和arr2 中都是[1,2,3,4,5],由於他們都指向同一個地址.
複製代碼

如圖所示:

var arr1 = [1,2,3,4];
var arr2 = arr1; // 在棧內存中開闢一塊空間,存放的是堆內存的地址,指向對應的堆內存.
arr1.push(5);  // 此時的數組 arr1 和arr2 中都是[1,2,3,4,5],由於他們都指向同一個地址
arr1 = [1,2];  //這個時候,改變arr1的值,那麼在棧內存中(地址爲1003)又會從新開啓一個新空間
用於存放arr1,存放的是堆內存的地址,將指針指向新的棧內存空間;
複製代碼

如圖所示:

src和href的區別?

++a a++以及--a 和a--的區別?

個人答案:

能夠理解成：

++i，增長變量，返回一個新的值
i++，增長變量，返回舊的值
--i，減小變量，返回一個新的值
i--，減小變量，返回舊的值
複製代碼

詳情參考這裏

如下代碼執行的結果是什麼?

function test(){ var a = b = 3; } console.log(b) // test()未執行的問題

函數中的AO和GO的預編譯狀況

個人答案是:

function test(a){
  console.log(a)
  var a = 1 ;
  console.log(a)
  function a() {}
  console.log(a)
  var b = function () {}
  console.log(b)
  function d() {}
}
test(2)
複製代碼

分析: AO:activation object 活躍對象,函數上下文.

執行步驟以下:

      一、找到形參和變量聲明，將變量和形參名做爲AO屬性名，值爲underfined
      二、將實參值賦值給形參,將實參值和形參值統一
      三、找函數申明,在函數體裏面找到函數聲明，值做爲跟AO屬性對應的值
      四、給變量賦值,
      五、執行函數

AO = {
  a:undefined-->
    2-->
    function a() {}-->
    1
  b:undefined-->
    function () {}-->

  d:undefined-->
    function d() {}
}
複製代碼

結果是:

function a() {}
1
1
function () {}
複製代碼

GO:global object 全局上下文 執行步驟是:

1.找變量----> 2.找函數申明----->3.給變量賦值----->4.執行函數

如下代碼的執行結果是什麼?

(一)

function test() {
  a = 1 ;
  function a() {}
  var a = 2;
  return a;
}
console.log(test())    //  2

function demo() {
  return a;
  a = 1 ;
  function a() {}
  var a = 2;
}
console.log(demo())  // ƒ a() {}
複製代碼

(二)

a = 1;
function test(e) {
  function e() {}
  arguments[0] = 2;
  console.log(e)   //  2
  if (a) {
    var b = 3
  }
  var c;
  a = 4;
  var a;
  console.log(b)  // undefined
  f = 5;
  console.log(c)  // undefined
  console.log(a)  // 4
}
var a;
test(1);
console.log(a) // 1
console.log(f) // 5
console.log(d) // Uncaught ReferenceError: d is not defined
複製代碼

AO再被執行的前一刻就會生成,GO在被聲明的時候就生成.

手寫一個閉包

function test1(){
    function test2(){
      var b = 2
      console.log(a)
    }
    var a = 1;
    return test2;
}
var c = 3
test3 = test1()
複製代碼

分析(一):

當函數test1聲明的時候,就會產生它的全局做用域GO,當test1()執行的時候,就會產生它的執行期上下文AO, 此時test2也在同時聲明,這時候,test2的做用域鏈中就有GO(全局的)和AO(test1函數的).也就是說此時test1的做用域鏈的指向和test2做用域鏈的指向相同 ,都指向同一個地方; 當test1執行完了return 出test2的時候,也就意味着test1執行完了,按理來講這個時候test1的執行上下文AO就應該銷燬了,可是,此時test2仍是在test1的AO中(他們都指向同一個AO), 因此AO是不會被銷燬,只是指向test1的AO的指針銷燬了(看下圖所示),沒有指向AO了.可是此時test2的指向仍是AO.此時就造成了閉包!

分析(二):

執行test3就至關於執行test2,此時,做用域鏈中test2就產生本身的AO此時test2的AO排第一位(下標爲0的), test1的AO排第二位,全局GO排第三位.(看下圖)當執行test2的時候,會先從本身的做用域第一位中找,而後若是找不到 就會從第二位依次找,此時找到了a,輸入1.

分析(三):

當test3執行完成後,也就是test2執行完了,這時候,test2的AO被銷燬,可是以前test1的AO被test2緊緊抓住,始終沒法釋放,這樣就容易造成內存泄露.

如何防止表單重複提交?

display:none和visibility: hidden的區別?

同步和異步的區別,他們的做用是什麼?

如何截取一個URL = www.baidu.com/index.php?i…?

function splitUrl(url){ let obj = {} url.split('?')[1].split('&').map(it=>{ obj[it.split('=')[0]] = obj[it.split('=')[1]] }) return obj }

什麼是ajax,交互是什麼?手寫一個ajxa

個人答案是:

function AJAX(method,url,pragram){
  return new Promise((resolve,reject)=>{
    var xhr = new ActiveXObject('Microsoft.XMLHTTP')||new XMLHttpRequest()
    if (method.toUpperCase() === 'POST') {
      this.open(method,url,true)
      this.responseType = 'json'
      this.setRequestHeader('Content-Type','application/x-www-form-urlencode;charset=utf-8')
      this.send(pragram)
    }else{
      this.open(method,url,true)
      this.send()
    }
    xhr.onreadystatechange = function(){
      if (this.readyState === 4) {
        if(this.status === 200||this.status ===304){
          resolve(this.responseText)
        }else{
          reject(this.response)
        }
      }
    }
  })
}
複製代碼

如下代碼容許的結果是什麼?

let num = (2 + 4, 9 - 1)

個人答案是: 8 ,只會打印出最後的一個數;

call,apply,bind以及apply()的使用拓展

call()和apply()都能改變this的指向而且當即執行,而bind返回一個新的函數,可是不執行,並且當綁定的這個構造函數實例化的時候就失效了.

當一個構造函數A中的方法和一個構造函數B中的方法想要融合的時候(相似借用屬性),可使用apply(this).

簡述一下arguments.callee和caller的用法.

就是調用自身的函數,當在匿名函數或者當即執行函數中使用很是有效.

補充:caller在當嚴格模式下會報錯.

test1()
function test1(){
  test2()
}
test2 function(){
  console.log(test2.caller);  // 返回當前被調用函數的函數引用,即檢查哪一個函數調用了test2.
}
複製代碼

js聖盃模式?

補充:

對原型的一些補充

Car.prototype.name = 'Benz'; function Car(){} var car = new Car(); Car.prototype = { name:'Mazda' // 這個是直接重寫原型,將破壞原型鏈. }

console.log(car.name); // Benz Car.prototype.name = 'Mazda';//若是將Car的原型改爲這樣 結果爲Mazda 這個是修改值

什麼叫作模塊化開發?

以封裝聖盃模式爲例:

var inher = (function(){
  var Buffer = function(){}
  return function(Target,Origin){
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    Target.prototype.construct = Target;
    Target.prototype.sup_class = Origin;
  }
})()
複製代碼

以上代碼稱之爲模塊化開發,防止代碼污染,利與開發!

是否知道vue插件的寫法

;(function(){ var Test = function(){} Test.prototype = {} window.Test = Test })()

請寫出三種判斷是否爲數組的方法？

1:

var a = [], str = Object.prototype.toString.call(a), trueTip = '[object Array]',

if(str === trueTip){ return '是數組' }else{ return '不是數組' }

2:a.construct

3:a instanceof Array // 少用

什麼是類數組對象?

1.能夠利用屬性名,模擬數組的特性;

2.能夠動態的增加length屬性;

3.若是強行讓數組調用push方法,會根據length的屬性值的index進行屬性的擴充

var obj = {
    '0': 1,
    '1': 2,
    '2': 3,
    '3': 4,
    '4': 5,
    '5': 6,
    'length': 6
    // 'push': Array.prototype.push
  }
  Object.prototype.push = Array.prototype.push
  Object.prototype.splice = Array.prototype.splice
原理:
  Array.prototype.push = function (elem) {
    this[this.length] = elem
    this.length++
  }
  obj.push(7)
  console.log(obj)
複製代碼

網上看到的一道阿里的面試題:

var obj = {
      '2': 3,
      '3': 4,
      'length': 2,
      'splice': Array.prototype.splice,
      'push': Array.prototype.push
    }
    obj.push(1)
    obj.push(2)
    console.log(obj)
複製代碼

答案:

Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]
  2: 1
  3: 2
  length: 4
  push: ƒ push()
  splice: ƒ splice()
  __proto__: Object
複製代碼

分析:

先要能看懂這個push的原理:
Array.prototype.push = function (elem) {
  this[this.length] = elem
  this.length++
}
當開始的時候,從obj[obj.length]開始push,執行push(2),即obj[2] = 1(那麼obj.2 = 1),
而後length自增長1成爲3,執行push(3),即obj[3] = 2(那麼obj.3 = 3),而後length自增長1,成爲4.
以前的key爲2,3就被替換成爲了如今的1,2所對應的值.

obj[2] = 1
obj[3] = 2
複製代碼

這句話的意思是什麼?

個人答案:這意味着,系統將強制瀏覽器按照最高標準去渲染,添加chrome=1,將容許站點在使用了谷歌瀏覽器內嵌框架(Chrome Frame)的客戶端渲染.

jQuery如何增長 刪除 修改 移動元素或者屬性?

個人答案:

$('div').appendChild('span')
$('div').removeChild('span')
$('div').setAttribute('title','this is a title')
複製代碼

js中symbol的原理是什麼?

Symbol 是一種特殊的、不可變的數據類型，能夠做爲對象屬性的標識符使用，表示獨一無二的值。Symbol 對象是一個 symbol primitive data type 的隱式對象包裝器。

它是JavaScript語言的第七種數據類型，前6種分別是：Undefined、Null、Boolean、String、Number、Object

參考!(這裏)[www.infoq.cn/article/es6…]

你經常使用的庫有哪些?他們有哪些特色?

個人答案: vue和jQuery偏多,vue的優勢是,(1)雙向數據綁定,(2)vue經過對虛擬dom技術,減小了對dom的操做. 什麼是虛擬dom?就是使用js對象模擬dom,在操做過程當中,不會操做真實的dom,等待虛擬dom操做完成, 僅僅對比開始狀態的虛擬dom和結束狀態的dom之間的差距(diff算法),最後根據結束狀態的dom去操做dom.

什麼是雙向數據綁定?

vue是一個mvvm框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化。這也算是vue的精髓之處了
複製代碼

對稱加密和非對稱加密的區別,以及用到的場景?

個人答案:

對稱加密:就是加密的祕鑰和解密的祕鑰是同樣的,利用某種方法是能夠推到出來的; 非對稱加密:就是加密的祕鑰和解密的祕鑰不相同,並且哪怕你知道了其中的一個祕鑰,你也沒法推導出另一個祕鑰,非對稱加密是用一種特殊的算法進行加密的,他是由三個數學家發明的,他們的名字的首字母分別是RSA,因此運用最先的最普遍的非對稱算法是 RSA算法,可是如今不少專業的算法人員已經不用RSA算法了(不是很可靠),以前是幾百位,如今是一千位.專業的算法有ECC算法. 用到的場景 https 比特幣 區塊連中的算法等

js的基本類型有哪些?

若是你的工程會在不一樣分辨率上顯示,你會怎麼處理?

setTimeout 和setInterval 的區別?

個人答案是:

setTimeout只會執行傳入函數一次,並且是在異步隊列中執行的,而setInterval是隻會執行一次傳入的函數,並且這函數是在主線程的執行棧上執行的.
複製代碼

什麼是跨域,爲何會發生跨域,如何解決?

cookie有哪些優勢?

`優勢：`

  極高的擴展性和可用性,經過良好的編程，控制保存在cookie中的session對象的大小。
  經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
  只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
  控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

  `缺點：`

  Cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
  安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
  有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。  
複製代碼

頁面中，點擊一個ul中的某個li，如何獲取被點擊的li的index？

用css寫出以下的樣式?

答案:

<div class="waper">
    <div class="waper-inner">
      <span>姓名</span>
    </div>
  </div>

.waper {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ccc;
    overflow: hidden;
}

.waper .waper-inner {
    width: 100px;
    height: 100px;
    position: absolute;
    background: yellow;
    top: -50px;
    right: -50px;
    transform: rotate(45deg);
}

.waper .waper-inner span {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100px;
    text-align: center;
}
複製代碼

vue中,子組件爲何不能修改父組件傳遞的props,若是修改了vue是如何監聽到屬性的修改併發出警告的?

vue中 this.$emit()的返回值是什麼?

vue中 同名插槽是替換仍是覆蓋呢?

Promise相關

Promise的構造函數中的代碼是同步的,可是then中的是異步的.並且狀態是不可逆的,若是前面是resolve(res),而後又reject(err),

new Promise((resolve,reject)=>{
    resolve('success')
    reject('error')   // 會執行 可是狀態不可逆轉
  }).then(
    res =>{
      console.log('then===>',res)
    }
  ).catch(err =>{
    console.log(err)
  })
複製代碼

面試:

var a = new Promise( function(resolve,reject){ setTimeout(function(){ resolve(b) // b的執行結果是reject,因此哪怕a是resolve,返回的仍是b的結果 },2000) })

var b = new Promise( function(resolve,reject){ setTimeout(function(){ reject(4) },1000) })

a.then(function(){ console.log('resovle'); }).catch(function(){ console.log('reject'); })

防抖與節流的做用?

減小沒必要要的計算,不浪費資源,只在合適的時間作合適的事情,合適的時間觸發計算!

原型高級寫法拓展

function Human(){}
  function Chinese(){}
  Chinese.prototype = Object.setPrototypeOf({
    constructor:Chinese,
    say:function say(){}
  },Human.prototype)
複製代碼

http狀態碼

1xx (臨時響應)表示臨時響應,並須要請求者繼續執行操做的狀態碼.

代碼說明:

100 繼續 ,請求者當繼續提交請求.服務器返回此狀態碼錶示已經收到請求的一部分,正在等待其他的部分.

101 切換協議,請求者已經要求服務器求換協議,服務器已經確認,而且準備切換.

*2xx: * (成功)

200 成功=>服務器已經成功處理了請求,一般,這表示服務器提供了請求的網頁.

201 已建立=>請求成功,而且服務器建立了新的資源.

202 已接受=>服務器已經接受請求,但還沒有處理.

203 非受權信息=>服務器已經成功處理了請求,可是返回的信息可能來自另一個來源.

204 無內容=>服務器成功處理了請求,可是沒有返回任何內容.

205 重置內容=>服務器成功處理了請求,可是沒有返回任何內容.

206 部份內容=>服務器成功處理了部分get請求.

*3xx *(重定向)表示要完成請求,須要進一步操做,一般這些狀態碼用來重定向.

300 多種選擇=>針對請求, 服務器可執行多種操做,服務器可根據請求者選擇一項操做,或提供操做列表供請求這選擇.

301 永久移動=>請求的網站已經永久移動到新位置,服務器返回此相應(get/head請求的響應)的時候,會自動將請求者轉移到新位置.

302 臨時移動=>服務器目前從不一樣位置的網頁響應請求,但請求者應繼續使用原有位置來進行之後的請求.

303 查看其餘位置=>請求者應當對不一樣的位置,使用單獨的get請求來檢索響應時,服務器返回此代碼.

304 爲修改=>自從上次請求後,請求的網址未修改過,服務器返回此響應,不會返回網頁的內容.

305 使用代理=>請求者只能使用代理訪問請求的頁面,表示請求者應使用代理.

307 臨時重定向=>服務器目前從不一樣位置的網頁響應請求,但請求這應當繼續使用原有的位置進行之後的請求.

*4xx *(請求錯誤)這些狀態碼錶示請求可能出錯,妨礙了服務器的處理.

400 請求錯誤=>服務器不理解請求的語法.

401 未受權=>請求要求身份驗證,對於須要登錄的網頁,服務器可能返回此響應.

403 禁止=>服務器拒絕請求.

404 未找到=>服務器未找到請求的頁面.

405 方法禁用=>禁用請求中指定的方法

406 不接受=>沒法使用請求的內容特性,響應請求的網頁.

407 須要代理受權=>此狀態碼與401相似,但指定請求者應當受權使用代理.

408 請求超時=>服務器等候請求時發生超時.

409 衝突=>服務器在完成請求時,發生衝突.服務器必須在響應中,包含有關衝突的信息.

410 已刪除=>若是請求的資源已經永久刪除,服務器就會返回此響應.

411 須要有效長度 服務器不接受不含有效內容長度標頭字段的請求.

以下輸出的結果是什麼?

try {
    let res = new Promise((resolve,reject)=>{
      throw new Error('001')
    }).catch(error=>{
      console.log('002')    // 
    })
  } catch (error) {
    console.log('003')
  }
複製代碼

手寫apply的實現

簡單說下什麼是js原型鏈

每一個對象都有一個原型對象,經過__proto__ 指針,指向上一個原型,並從上一個原型對象中繼承它的屬性和方法,同時原型 原型對象也可能擁有原型,這樣一層一層的最終指向null,這種關係被稱做原型鏈.

機試，移動端適配rem.js怎麼使用？

機試，給一個原型圖，實現一個點擊輪盤指針轉動，5秒以後中止的一個抽獎頁面，要求適配全部移動端機型。

請寫出幾種能將string 類型的 '23424'轉成number類型的 1234 的方法

答案： parseInt('23443') parseFloat('2342') Number('234') '12424'*1

算法題目:

請寫一個冒泡排序

Array.prototype.bubble = function(){ for(let i = 0 ;i<this.length-1;i++){ for(let j = i+1;j<this.length;j++){ if(this[i]>this[j]){ [this[i],this[j]] = [this[j],this[i]]

}
}
複製代碼

} return this }

function bubble(array){ let length = array.length while(length--){ for(let i=0;i<length;i++){ if(array[i]>array[i+1]){ [this[i], this[i + 1]] = [this[i + 1], this[i]] } } } return array }

請寫一個斐波那契數列

function fb(n){
  if(0<n) return '輸入的數不能小於0'
  if (n==0||n==1) return n
  return fb(n-1)+fb(n-2)
}
複製代碼

選擇排序

function selectSort(){}

用push手寫一個快速排序

分析:快速排序的優勢就是速度快，爲何速度快呢？我先介紹一下快速排序的原理。 選擇一個基準值，通常選擇數組的一個值，遍歷數組，大的放右邊，小的放左邊，同樣大的放中間，利用遞歸重複對大的數組和小的數組進行拆分，最後得出排序後的數組。

統計一個字符串出現最多的字母

list是一個1~100之間的數組,如何讓他依次打印出來?若是list是無序的如何讓他有序排列?（智淘）

邏輯題

<壹> 有2個桶,第一個桶中裝的是藍色油漆,第二個桶裝的是紅色油漆,假設這兩個桶中的油漆,除了顏色不同,其餘的都同樣,如今我用勺子,從藍色桶中舀一勺藍色油漆,放入裝有紅色油漆的桶中,而後攪拌,讓他們充分混合均勻,而後再用勺子從紅色油漆桶中舀一勺混合後的油漆,放入裝有藍色油漆的桶中,最後

問:

1. 是藍色油漆桶中的藍色油漆多,仍是紅色油漆桶中的紅色油漆多,爲何?
2. 藍色油漆桶中: blue = 藍色油漆/紅色油漆 , 紅色油漆桶中:red = 紅色油漆/藍色油漆,最後blue和red的值相比較,結果是什麼?

分析:

根據題目中的信息可知:剛開始的時候,兩桶油漆除了顏色不一樣,其餘的都同樣,可知:

假設初始的時候,藍色油漆桶和紅色油漆桶的中容量都是 i

從藍色油漆桶中舀一勺藍色油漆,假設這一勺藍色油漆的容量爲x,放入紅色油漆桶中,混合均勻後:

此時,藍色油漆桶中的藍色油漆爲: i-x

紅色油漆桶中的油漆是紅藍混合的: i + x

此時:又從紅色油漆桶(這時候裏面的油漆是紅藍混合的)中舀一勺油漆,容量也是i,放入藍色油漆桶中,混合後:

此時: 藍色油漆桶中的油漆(也是紅藍混合的)爲:(i-x) + x

紅色油漆桶中的油漆(也是紅藍混合的)爲: i+x - x

其餘