1. 高級前端面試題目大全(三)
解析： 第 41題
比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實現
解析： 第 42 題
解析： 第 43 題
1、客戶端使用https的url訪問web伺服器,要求與伺服器建立ssl連接
2、web伺服器收到客戶端請求後, 會將網站的證書(包含公鑰)傳送一份給客戶端
3、客戶端收到網站證書後會檢查證書的頒發機構以及過期時間, 如果沒有問題就隨機產生一個秘鑰
4、客戶端利用公鑰將會話秘鑰加密, 並傳送給服務端, 服務端利用自己的私鑰解密出會話秘鑰
5、之後伺服器與客戶端使用秘鑰加密傳輸
解析： 第 44 題
解析： 第 45 題
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1
2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1
3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印
4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
解析： 第 46 題
解析： 第 47 題
1、Function.prototype.apply和Function.prototype.call 的作用是一樣的，區別在於傳入參數的不同；
2、第一個參數都是，指定函數體內this的指向；
3、第二個參數開始不同，apply是傳入帶下標的集合，數組或者類數組，apply把它傳給函數作為參數，call從第二個開始傳入的參數是不固定的，都會傳給函數作為參數。
4、call比apply的性能要好，平常可以多用call, call傳入參數的格式正是內部所需要的格式
解析： 第 48 題
解析： 第 49 題
解析： 第 50 題
為什麼在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？
解析： 第 51 題
解析： 第 52 題
解析： 第 53 題
解析： 第 54 題
如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 題
解析： 第 56 題
解析： 第 57 題
解析： 第 58 題
解析： 第 59 題
解析： 第 60 題
解析： 第 61 題
解析： 第 62 題
解析： 第 63 題
解析： 第 64 題
解析： 第 65 題
解析： 第 66 題
隨機生成一個長度為 10 的整數類型的數組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，將其排列成一個新數組，要求新數組形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 題
解析： 第 68 題
解析： 第 69 題
解析： 第 70 題
解析： 第 71 題
[圖片上傳失敗...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 題
解析： 第 73 題
解析： 第 74 題
解析： 第 75 題
解析： 第 76 題
示例 1：
示例 2：
解析： 第 77 題
解析： 第 78 題
解析： 第 79 題
解析： 第 80 題
解析： 第 81 題
解析： 第 82 題
解析： 第 83 題
習題： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 題
解析： 第 85 題
給定一個整數數組和一個目標值，找出數組中和為目標值的兩個數。
你可以假設每個輸入只對應一種答案，且同樣的元素不能被重復利用。
示例：
解析： 第 86 題
解析： 第 87 題
以下數據結構中，id 代表部門編號，name 是部門名稱，parentId 是父部門編號，為 0 代表一級部門，現在要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 為多少就掛載在該 id 的屬性 children 數組下，結構如下：
解析： 第 88 題
解析： 第 89 題
[圖片上傳失敗...(image-aea64e-1575446538470)]
解析： 第 90 題
解析： 第 91 題
[圖片上傳失敗...(image-21d53f-1575446538470)]
解析： 第 92 題
示例 1：
中位數是 2.0
示例 2：
中位數是(2 + 3) / 2 = 2.5
解析： 第 93 題
解析： 第 94 題
解析： 第 95 題
解析： 第 96 題
解析： 第 97 題
解析： 第 98 題
解析： 第 99 題
解析：[第 100 題]( https://github.com/Advanced-Frontend/Daily-
2. 有沒有前端的大神解釋一下原理
objs.print()：由於這個方法用的是箭頭函數，箭頭函數沒有屬於自己的 this 指向，所以 this 會像變數一樣來查找，全局下的 this 的指向 window
objs.print.call(obj2)：由於箭頭函數中的 this 是被靜態作用域設置，箭頭函數被定義的時候就決定了指向，所以，就算怎麼改變this的指向，它還是會指向全局，除了call()方法外，apply()和 bind() 方法也同樣改變不了箭頭函數的 this 指向，所以 this 指向 window
其他的 this 指向問題
函數調用模式：this 指向 window
構造函數調用模式：this 指向新創建的實例對象
方法調用模式：this 指向調用方法的那個對象
上下文調用模式：call 和 apply 方法中, this指向方法內的第一個參數，bind方法中, bind創建的新函數的 this 綁定為 bind 方法中新的函數
在事件處理函數中, this 指向觸發事件的當前元素
定時器中,this 指向 window
箭頭函數中沒有 this 指向問題,它的this和外層作用域的this保持一致
匿名函數中的 this 總是指向 window
3. 如何理解JavaScript中的caller，callee，call，apply 前端設計
在提到上述的概念之前，首先想說說javascript中函數的隱含參數：arguments
Arguments —— 該對象代表正在執行的函數和調用它的函數的參數。
[function.]arguments[n]
參數
function ：選項。當前正在執行的 Function 對象的名字。
n ：選項。要傳遞給 Function 對象的從0開始的參數值索引。
說明
Arguments是進行函數調用時，除了指定的參數外，還另外創建的一個隱藏對象。Arguments是一個類似數組但不是數組的對象，說它類似數組是因為其具有數組一樣的訪問性質及方式，可以由arguments[n]來訪問對應的單個參數的值，並擁有數組長度屬性length。
還有就是arguments對象存儲的是實際傳遞給函數的參數，而不局限於函數聲明所定義的參數列表，而且不能顯式創建 arguments 對象。
arguments 對象只有函數開始時才可用。
下邊例子詳細說明了這些性質:
//arguments 對象的用法。
function ArgTest(a, b){
var i, s = "The ArgTest function expected ";
var numargs = arguments.length; // 獲取被傳遞參數的數值。
var expargs = ArgTest.length; // 獲取期望參數的數值。
if (expargs < 2)
s += expargs + " argument. ";
else
s += expargs + " arguments. ";
if (numargs < 2)
s += numargs + " was passed.";
else
s += numargs + " were passed.";
s += "\n\n"
for (i =0 ; i < numargs; i++){ // 獲取參數內容。
s += " Arg " + i + " = " + arguments[i] + "\n";
}
return(s); // 返回參數列表。
}
在此添加了一個說明arguments不是數組(Array類)的代碼:
Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
alert(arguments.selfvalue);
}
運行代碼你會發現第一個alert顯示1，這表示數組對象擁有selfvalue屬性，值為1，而當你調用函數testAguments時，你會發現顯示的是「undefined」，說明了不是arguments的屬性，即arguments並不是一個數組對象。
現在開始caller，callee，call，apply：
caller：返回一個對函數的引用，該函數調用了當前函數。
functionName.caller functionName 對象是所執行函數的名稱。
說明
對於函數來說，caller屬性只有在函數執行時才有定義。如果函數是由頂層調用的，那麼 caller 包含的就是 null 。
如果在字元串上下文中使用 caller 屬性，那麼結果和functionName.toString 一樣，也就是說，顯示的是函數的反編譯文本。
下面的例子說明了 caller 屬性的用法：
// caller demo {
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
//輸出結果：
function handleCaller() {
callerDemo();
}
callee —— 返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。
[function.]arguments.callee
可選項 function 參數是當前正在執行的 Function對象的名稱。
說明
callee屬性的初始值就是正被執行的 Function 對象。
callee屬性是 arguments 對象的一個成員，它表示對函數對象本身的引用，這有利於匿名
函數的遞歸或者保證函數的封裝性，例如下邊示例的遞歸計算1到n的自然數之和。而該屬性
僅當相關函數正在執行時才可用。還有需要注意的是callee擁有length屬性，這個屬性有時候
用於驗證還是比較好的。arguments.length是實參長度，arguments.callee.length是
形參長度，由此可以判斷調用時形參長度是否和實參長度一致。
示例
//callee可以列印其本身
function calleeDemo() {
alert(arguments.callee);
}
//用於驗證參數
function calleeLengthDemo(arg1, arg2) {
if (arguments.length==arguments.callee.length) {
window.alert("驗證形參和實參長度正確！");
return;
} else {
alert("實參長度：" +arguments.length);
alert("形參長度： " +arguments.callee.length);
}
}
//遞歸計算
var sum = function(n){
if (n <= 0)
return 1;
else
return n ＋arguments.callee(n - 1)
}
比較一般的遞歸函數：
var sum = function(n){
if (1==n) return 1;
elsereturn n + sum (n-1);
調用時：alert(sum(100));
其中函數內部包含了對sum自身的引用，函數名僅僅是一個變數名，在函數內部調用sum即相當於調用一個全局變數，不能很好的體現出是調用自身，這時使用callee會是一個比較好的方法。
apply and call：它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數方式有所區別：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函數內部的this指針都會被賦值為thisArg，這可實現將函數作為另外一個對象的方法運行的目的
apply的說明：
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisArg任何一個參數，那麼 Global 對象將被用作 thisArg，
並且無法被傳遞任何參數。
call的說明：
call方法可將一個函數的對象上下文從初始的上下文改變為由 thisArg指定的新對象。
如果沒有提供 thisArg參數，那麼 Global 對象被用作 thisArg
相關技巧：
應用call和apply還有一個技巧在裡面，就是用call和apply應用另一個函數（類）以後，當前的函數（類）就具備了另一個函數（類）的方法或者是屬性，這也可以稱之為「繼承」。
看下面示例:
// 繼承的演示
function base() {
this.member = " dnnsun_Member";
this.method = function() {
window.alert(this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.method);
}
上面的例子可以看出，通過call之後，extend可以繼承到base的方法和屬性。
順便提一下，在javascript框架prototype里就使用apply來創建一個定義類的模式，
其實現代碼如下：
var Class = {
create: function() {
returnfunction() {
this.initialize.apply(this, arguments);
}
}
}
解析：從代碼看,該對象僅包含一個方法：Create，其返回一個函數，即類。但這也同時是類的
構造函數，其中調用initialize，而這個方法是在類創建時定義的初始化函數。通過如此途徑，
就可以實現prototype中的類創建模式
示例：
var vehicle=Class.create();
vehicle.prototype.initialize= function(type)
{
this.type=type;
}
vehicle.prototype.showSelf= function()
{
alert("this vehicle is "+ this.type);
}
var moto=new vehicle("Moto");
moto.showSelf();
你自己看看吧，此文章轉自：http://www.cnblogs.com/ghost-draw-sign/articles/1530108.html
4. Web前端學習之Javascript繼承的常用4種方法
今天小編要跟大家分享的文章是關於Javascript繼承的常用4種方法。相信很多學習web前端開發技術的小夥伴在學習前端開發的javascript部分的時候，在面向對象的部分就很難走下去了，主要的原因還是邏輯更加復雜了，需要理解的內容比直觀的開發布局難一點。
在面向對象編程里，封裝和繼承是比較重要的，這中間，繼承是相對而言比較難理解的，因為javascript的繼承方式比較多，也有不同的優缺點。今天小編為大家帶來這篇文章就是來和大家一起說一說Javascript繼承的常用4種方法，希望能夠對你有所幫助。
1、原型鏈繼承
核心：將父類的實例作為子類的原型
缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了
2、構造繼承
基本思想
借用構造函數的基本思想就是利用call或者apply把父類中通過this指定的屬性和方法復制(借用)到子類創建的實例中。
因為this對象是在運行時基於函數的執行環境綁定的。也就是說，在全局中，this等於window，而當函數被作為某個對象的方法調用時，this等於那個對象。
call、apply方法可將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象。
所以，這個借用構造函數就是，new對象的時候(new創建的時候，this指向創建的這個實例)，創建了一個新的實例對象，並且執行Parent裡面的代碼，而Parent裡面用call調用了Person，也就是說把this指向改成了指向新的實例，所以就會把Person裡面的this相關屬性和方法賦值到新的實例上，而不是賦值到Person上面,所以所有實例中就擁有了父類定義的這些this的屬性和方法。
因為屬性是綁定到this上面的，所以調用的時候才賦到相應的實例中，各個實例的值就不會互相影響了。
核心：使用父類的構造函數來增強子類實例，等於是復制父類的實例屬性給子類(沒用到原型)
缺點：方法都在構造函數中定義，
只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法，無法實現函數復用，每個子類都有父類實例函數的副本，影響性能
3、組合繼承
組合繼承(所有的實例都能擁有自己的屬性，並且可以使用相同的方法，組合繼承避免了原型鏈和借用構造函數的缺陷，結合了兩個的優點，是最常用的繼承方式)
核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後再通過將父類實例作為子類原型，實現函數復用
缺點：調用了兩次父類構造函數，生成了兩份實例(子類實例將子類原型上的那份屏蔽了)
4、寄生組合繼承
核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點
缺點：堪稱完美，但實現較為復雜
以上就是小編今天為大家分享的關於web前端學習之Javascript繼承的常用4種方法的文章，希望本篇文章能夠對正在學習web前端技術的小夥伴們有所幫助。想要了解更多web前端知識記得關注北大青鳥web培訓官網。
文章轉載自公眾號：前端研究所
5. 那些陌生又熟悉的前端面試題
過完年需要跳槽的小夥伴還是挺多的，又要開始刷前端面試題了！會不會有一種錯覺，看著這道面試題很熟，但是不知道該如何做？或者有答案又不知道是否正確？或者使用編輯器可以運行出來正確的答案，但是不知道怎麼得來的，這些你都中招了嗎？
JavaScript 語言是一門弱類型語言，存在許多類型錯誤，因此 ES6 引入了嚴格模式概念。
如果不加 『use strict』 常規模式下就是屬於非嚴格模式。
嚴格模式
在 js 文件頂部添加 『use strict』 就屬於嚴格模式，嚴格模式也可以指定在函數內部。
嚴格模式，是為 js 定義來了一種不同的解析與執行模型，在嚴格模式下，ECMAScipt 3 中一些不解和不確定的行為將得到處理，而且會對不安全的操作會拋出異常。『use strict』 會告訴瀏覽器引擎可以切換到嚴格模式執行。
嚴格模式與非嚴格模式區別
常見筆試題：
試試這道筆試題你會做嗎？
要說 js 的深淺拷貝，就不得不提 js 的兩大數據類型：基本數據類型和引用類型。
基本數據類型的變數名和值都存儲在棧中，對於引用類型的變數名存儲在棧中，而值存儲在堆中。由於存儲方式不同，所以導致了他們復制的時候方式不同。
賦值
基本數據類型賦值的時候，創建的基本數據類型會在內存中開辟一個新空間把值復制過來，而引用類型採用的是地址存儲，如果直接把一個引用數據直接賦值給另外一個數據，就相當於直接把自己存儲值的地址給了另外一個變數，所以改變一個的值，也會改變另外一個的值。
深淺拷貝是如何定義的？
假設有 p 和 P 兩個變數，如果P 是拷貝了 p 的，我們通過修改 P 來觀察 p 是否發生改變，如果跟著改變，就是淺拷貝，如果是不改變，就說明是深拷貝。
基本類型復制的時候會開辟新的內存空間，所以兩個值是相互獨立的，引用類型復制的時候就要看是復制的內存地址還是復制一個新的堆。所以深拷貝主要針對的是引用類型的數據。
淺拷貝的常見的方式：
1、直接賦值
2、Object.assign
深拷貝的常見方式：
引用數據類型最常用的就是 Object 和 Array ，引用數據內部的數據也可以是多樣化的，進行深拷貝時，也要適當地根據數據結構進行合適的復制方式，具體的深拷貝方法分別有：
1、數組中只包含基本數據類型
2、對象中只包含基本數據類型
3、對象或數組里含有一層或多層引用數據類型時
深淺拷貝的常見應用主要是數據的增刪改操作。
大廠筆試題：
這是一道關於 this 指向的面試題，接下來我們就說說 this 是如何指向的？
this 對象是運行時基於函數的執行環境綁定的：
看完上述 this 指向解釋，你就可以做上邊的那道面試題了。
如何改變 this 的指向？
call 、bind 和 apply 這三個函數都是用來改變 this 指向的，就是改變函數執行時的上下文。
修改上述面試題：
call 、bind 和 apply 改變 this 指向，最大作用就是實現代碼復用。
至於 call、bind 和 apply 的區別，可以自行去了解下。
有了上邊那個表，事情就變得簡單了！
關系運算符進行運算時，不同類型的值會自動轉化為相同類型值，然後進行
1、兩邊有一個是字元串一個是是數字時，字元串調用 Number 方法，將字元串轉為數字，所以：
2、如果兩邊都是字元串時，按照字元串的 unicode 編碼來轉換的，所以：
3、字元串進項比較時，先比較第一位，如果不相等直接得出結果，如果第一項相等，會繼續使用第二項進行比較。
4、轉為布爾值都為 false 的類型分別有：undefined 、null 、0、NaN、false、『』
5、NaN表示的是非數字，但是這個非數字也是不同的，因此 NaN 不等於 NaN，兩個NaN永遠不可能相等。
6、關系運算有一個數值，將另外一個值也轉為 number 類型。
7、有邏輯運算的，將其他數據類型轉為 boolean 值。
8、直接使用兩個空數組比較，數組地址不同，所以不相等。
評論區可以留下最近你想學習的知識點，或面試題類型！
6. javascript中apply，call和bind的區別
有點繞的，下面用代碼說明一下這三個函數的區別吧：
varname='global';
varperson={
name:'zero'
};
//輸出姓名、年齡和職業
functionprintInfo(age,job){
console.log(this.name,age,job);
}
//直接調用
printInfo(20,'前端工程師');
//列印：global20前端工程師
//因為默認的上下文是window，所以this.name是全局定義的global，如果我們想列印出來zero的話，就需要改變函數執行的上下文
printInfo.call(person,20,'前端工程師');
printInfo.apply(person,[20,'前端工程師']);
//這兩種方式是一樣的，第一個參數都是傳進去的上下文，this.name取的是person.name，所以列印出來的名字就是zero了，後面的為age和job，只是參數傳遞的方式不一樣，apply比較特殊，把要傳的參數放在數組裡面
//而bind和以上兩種有區別，bind是es5定義的新方法，用來返回一個有自己上下文的函數，用法也比較類似：
printInfo.bind(person)(20,'前端工程師');
//printInfo.bind(person)這一塊是返回的以peron為上下文的函數，後面的(20,'前端工程師')是函數調用
7. 前端為什麼用call方法
因為是公用的方法。
js中call是調用一個對象的一個方法，以另一個對象替換當前對象。call方法是Function類原型上的一個公共方法，所以要用這個。