前端100問

詳情請參考： https://github.com/SongMengyao/notes/blob/master/%E5%89%8D%E7%AB%AF100%E9%97%AE/100questions.md

 

1. 寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？

2. `['1', '2', '3'].map(parseInt)` what & why ?

3. 什麼是防抖和節流？有什麼區別？如何實現？

4. 介紹下 Set、Map、WeakSet 和 WeakMap 的區別？

5. 介紹下深度優先遍歷和廣度優先遍歷，如何實現？

6. 請分別用深度優先思想和廣度優先思想實現一個拷貝函數？

7. ES5/ES6 的繼承除了寫法之外還有什麼區別？

8. setTimeout、Promise、Async/Await 的區別

9. Async/Await 如何經過同步的方式實現異步

10. 請寫出下面代碼的運行結果(異步):

```

async function async1() {

console.log('async1 start');

await async2();

console.log('async1 end');

}

async function async2() {

console.log('async2');

}

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

```

11. 已知以下數組：(算法手寫題)

```

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

```

編寫一個程序將數組扁平化並去除其中重複部分數據，最終獲得一個升序且不重複的數組

 

12. JS 異步解決方案的發展歷程以及優缺點。

13. Promise 構造函數是同步執行仍是異步執行，那麼 then 方法呢？

14. 如何實現一個 new ？

15. 簡單講解一下http2的多路複用

16. 談談你對TCP三次握手和四次揮手的理解

17. A、B 機器正常鏈接後，B 機器忽然重啓，問 A 此時處於 TCP 什麼狀態？

 

(若是A 與 B 創建了正常鏈接後，從未相互發過數據，這個時候 B 忽然機器重啓，問 A 此時處於 TCP 什麼狀態？如何消除服務器程序中的這個狀態？（超綱題，瞭解便可）)

 

18. React 中 setState 何時是同步的，何時是異步的？

19. 下面的代碼輸出什麼？(React setState 筆試題)

```

class Example extends React.Component {

constructor() {

super();

this.state = {

val: 0

};

}

 

componentDidMount() {

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 1 次 log

 

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 2 次 log

 

setTimeout(() => {

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 3 次 log

 

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 4 次 log

}, 0);

}

 

render() {

return null;

}

};

```

20. 介紹下 npm 模塊安裝機制，爲何輸入 npm install 就能夠自動安裝對應的模塊？

21. 有如下 3 個判斷數組的方法，請分別介紹它們之間的區別和優劣

```

Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

```

22. 介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化

23. 介紹下觀察者模式和訂閱-發佈模式的區別，各自適用於什麼場景

24. 聊聊 Redux 和 Vuex 的設計思想

25. 說說瀏覽器和 Node 事件循環的區別

26. 介紹模塊化發展歷程

```

(提示：可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type='module'> 這幾個角度考慮。)

```

27. 全局做用域中，用 const 和 let 聲明的變量不在 window 上，那到底在哪裏？如何去獲取？

28. cookie 和 token 都存放在 header 中，爲何不會劫持 token？

29. 聊聊 Vue 的雙向數據綁定，Model 如何改變 View，View 又是如何改變 Model 的

30. 兩個數組合併成一個數組:

```

請把兩個數組 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，

合併爲 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

```

31. 改造下面的代碼，使之輸出0 - 9，寫出你能想到的全部解法。

```

for (var i = 0; i< 10; i++){

setTimeout(() => {

console.log(i);

}, 1000)

}

```

32. Virtual DOM 真的比操做原生 DOM 快嗎？談談你的想法。

33. 下面的代碼打印什麼內容，爲何？

```

var b = 10;

(function b(){

b = 20;

console.log(b);

})();

```

34. 簡單改造下面的代碼，使之分別打印 10 和 20

```

var b = 10;

(function b(){

b = 20;

console.log(b);

})();

```

35. 瀏覽器緩存讀取規則: 能夠分紅 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那請求的時候 from memory cache 和 from disk cache 的依據是什麼，哪些數據何時存放在 Memory Cache 和 Disk Cache中？

36. 使用迭代的方式實現 flatten 函數。

37. 爲何 Vuex 的 mutation 和 Redux 的 reducer 中不能作異步操做？

38. 下面代碼中 a 在什麼狀況下會打印 1？

```

var a = ?;

if(a == 1 && a == 2 && a == 3){

console.log(1);

}

```

39. 介紹下 BFC 及其應用。(塊格式化上下文 Block Formatting Context)

40. 在 Vue 中，子組件爲什麼不能夠修改父組件傳遞的 Prop。若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

41. 下面代碼輸出什麼:

```

var a = 10;

(function () {

console.log(a)

a = 5

console.log(window.a)

var a = 20;

console.log(a)

})()

```

42. 實現一個 sleep 函數。好比 sleep(1000) 意味着等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實現

43. 使用 sort() 對數組 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果

44. 介紹 HTTPS 握手過程

45. HTTPS 握手過程當中，客戶端如何驗證證書的合法性

46. 輸出如下代碼執行的結果並解釋爲何？

```

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)

```

47. 雙向綁定和 vuex 是否衝突

48. call 和 apply 的區別是什麼，哪一個性能更好一些？

49. 爲何一般在發送數據埋點請求的時候使用的是 1x1 像素的透明 gif 圖片？

50. 實現 (5).add(3).minus(2) 功能。例：5 + 3 - 2，結果爲 6

51. Vue 的響應式原理中 Object.defineProperty 有什麼缺陷？爲何在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？

52. 怎麼讓一個 div 水平垂直居中

53. 輸出如下代碼的執行結果並解釋爲何？

```

var a = {n: 1};

var b = a;

a.x = a = {n: 2};

 

console.log(a.x)

console.log(b.x)

```

54. 冒泡排序如何實現，時間複雜度是多少， 還能夠如何改進？

55. 某公司 1 到 12 月份的銷售額存在一個對象裏面，以下：{1:222, 2:123, 5:888}，請把數據處理爲以下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

56. 要求設計 LazyMan 類，實現如下功能。

```

LazyMan('Tony');

// Hi I am Tony

 

LazyMan('Tony').sleep(10).eat('lunch');

// Hi I am Tony

// 等待了10秒...

// I am eating lunch

 

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');

// Hi I am Tony

// I am eating lunch

// 等待了10秒...

// I am eating diner

 

LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');

// Hi I am Tony

// 等待了5秒...

// I am eating lunch

// I am eating dinner

// 等待了10秒...

// I am eating junk food

```

57. 分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景。

58. 箭頭函數與普通函數（function）的區別是什麼？構造函數（function）可使用 new 生成實例，那麼箭頭函數能夠嗎？爲何？

59. 給定兩個數組，寫一個方法來計算它們的交集。例如：給定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。

60. 已知以下代碼，如何修改才能讓圖片寬度爲 300px ？注意下面代碼不可修改。

```

<img src="1.jpg" style="width:480px! important;」>

```

61. 介紹下如何實現 token 加密

62. redux 爲何要把 reducer 設計成純函數？

63. 如何設計實現無縫輪播？

64. 模擬實現一個 Promise.finally

65. `a.b.c.d` 和 `a['b']['c']['d']`，哪一個性能更高？

66. ES6 代碼轉成 ES5 代碼的實現思路是什麼

67. 數組編程題：隨機生成一個長度爲 10 的整數類型的數組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20]，將其排列成一個新數組，要求新數組形式以下，例如 [[2, 3, 4, 5], [10, 11], [20]]。

68. 如何解決移動端 Retina 屏 1px 像素問題

69. 如何把一個字符串的大小寫取反（大寫變小寫小寫變大寫），例如 ’AbC' 變成 'aBc' 。

70. 介紹下 webpack 熱更新原理，是如何作到在不刷新瀏覽器的前提下更新頁面的

71. 實現一個字符串匹配算法，從長度爲 n 的字符串 S 中，查找是否存在字符串 T，T 的長度是 m，若存在返回所在位置。

72. 爲何普通 `for` 循環的性能遠遠高於 `forEach` 的性能，請解釋其中的緣由。

 

73. 介紹下 BFC、IFC、GFC 和 FFC

74. 使用 JavaScript Proxy 實現簡單的數據綁定

75. 數組裏面有10萬個數據，取第一個元素和第10萬個元素的時間相差多少

76. 輸出如下代碼運行結果:

```

// example 1

var a={}, b='123', c=123;

a[b]='b';

a[c]='c';

console.log(a[b]);

 

---------------------

// example 2

var a={}, b=Symbol('123'), c=Symbol('123');

a[b]='b';

a[c]='c';

console.log(a[b]);

 

---------------------

// example 3

var a={}, b={key:'123'}, c={key:'456'};

a[b]='b';

a[c]='c';

console.log(a[b]);

```

77. 算法題「旋轉數組」: 給定一個數組，將數組中的元素向右移動 k 個位置，其中 k 是非負數。

```

eg1:

輸入: [1, 2, 3, 4, 5, 6, 7] 和 k = 3

輸出: [5, 6, 7, 1, 2, 3, 4]

解釋:

向右旋轉 1 步: [7, 1, 2, 3, 4, 5, 6]

向右旋轉 2 步: [6, 7, 1, 2, 3, 4, 5]

向右旋轉 3 步: [5, 6, 7, 1, 2, 3, 4]

 

eg2:

輸入: [-1, -100, 3, 99] 和 k = 2

輸出: [3, 99, -1, -100]

解釋:

向右旋轉 1 步: [99, -1, -100, 3]

向右旋轉 2 步: [3, 99, -1, -100]

```

78. Vue 的父組件和子組件生命週期鉤子執行順序是什麼？

79. input 搜索如何防抖，如何處理中文輸入？

80. 介紹下 Promise.all 使用、原理實現及錯誤處理

81. 打印出 1 - 10000 之間的全部對稱數。例如：12一、1331 等

82. 算法題之「移動零」：給定一個數組 nums，編寫一個函數將全部 0 移動到數組的末尾，同時保持非零元素的相對順序。

```

輸入: [0,1,0,3,12]

輸出: [1,3,12,0,0]

 

說明:

必須在原數組上操做，不能拷貝額外的數組。

儘可能減小操做次數。

```

83. var、let 和 const 區別的實現原理是什麼？

84. 請實現一個 add 函數，知足如下功能。

```

add(1); // 1

add(1)(2); // 3

add(1)(2)(3); // 6

add(1)(2, 3); // 6

add(1, 2)(3); // 6

add(1, 2, 3); // 6

```

85. `react-router 裏的 <Link> 標籤和 <a> 標籤有什麼區別？如何禁掉 <a> 標籤默認事件，禁掉以後如何實現跳轉。`

86. 算法題之「兩數之和」：給定一個整數數組和一個目標值，找出數組中和爲目標值的兩個數。你能夠假設每一個輸入只對應一種答案，且一樣的元素不能被重複利用。

```

eg: 給定 nums = [2, 7, 11, 15], target = 9

 

由於 nums[0] + nums[1] = 2 + 7 = 9

因此返回 [0, 1]

```

87. 在輸入框中如何判斷輸入的是一個正確的網址。

88. 實現 convert 方法，把原始 list 轉換成樹形結構，要求儘量下降時間複雜度。

```

如下數據結構中，id 表明部門編號，name 是部門名稱，parentId 是父部門編號，爲 0 表明一級部門，如今要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 爲多少就掛載在該 id 的屬性 children 數組下，結構以下：

 

// 原始 list 以下

let list =[

{id:1,name:'部門A',parentId:0},

{id:2,name:'部門B',parentId:0},

{id:3,name:'部門C',parentId:1},

{id:4,name:'部門D',parentId:1},

{id:5,name:'部門E',parentId:2},

{id:6,name:'部門F',parentId:3},

{id:7,name:'部門G',parentId:2},

{id:8,name:'部門H',parentId:4}

];

const result = convert(list, ...);

 

// 轉換後的結果以下

let result = [

{

id: 1,

name: '部門A',

parentId: 0,

children: [

{

id: 3,

name: '部門C',

parentId: 1,

children: [

{

id: 6,

name: '部門F',

parentId: 3

}, {

id: 16,

name: '部門L',

parentId: 3

}

]

},

{

id: 4,

name: '部門D',

parentId: 1,

children: [

{

id: 8,

name: '部門H',

parentId: 4

}

]

}

]

},

···

];

```

89. 設計並實現 Promise.race()

90. 實現模糊搜索結果的關鍵詞高亮顯示


91. 介紹下 HTTPS 中間人攻擊

92. 已知數據格式，實現一個函數 fn 找出鏈條中全部的父級 id

```

const value = '112'

const fn = (value) => {

...

}

fn(value) // 輸出 [1， 11， 112]

```


93. 給定兩個大小爲 m 和 n 的有序數組 nums1 和 nums2。請找出這兩個有序數組的中位數。要求算法的時間複雜度爲 O(log(m+n))。

```

eg1:

nums1 = [1, 3]

nums2 = [2]

// 中位數是 2.0

 

eg2:

nums1 = [1, 2]

nums2 = [3, 4]

// 中位數是(2 + 3) / 2 = 2.5

```

94. vue 在 v-for 時給每項元素綁定事件須要用事件代理嗎？爲何？

95. 模擬實現一個深拷貝，並考慮對象相互引用以及 Symbol 拷貝的狀況

96. 介紹下前端加密的常見場景和方法

97. React 和 Vue 的 diff 時間複雜度從 O(n^3) 優化到 O(n) ，那麼 O(n^3) 和 O(n) 是如何計算出來的？

98. 寫出以下代碼的打印結果:

```

function changeObjProperty(o) {

o.siteUrl = "http://www.baidu.com"

o = new Object()

o.siteUrl = "http://www.google.com"

}

let webSite = new Object();

changeObjProperty(webSite);

console.log(webSite.siteUrl);

```

99. 編程算法題：用 JavaScript 寫一個函數，輸入 int 型，返回整數逆序後的字符串。如：輸入整型 1234，返回字符串「4321」。要求必須使用遞歸函數調用，不能用全局變量，輸入函數必須只有一個參數傳入，必須返回字符串。

100. 請寫出以下代碼的打印結果:

```

function Foo() {

Foo.a = function() {

console.log(1)

}

this.a = function() {

console.log(2)

}

}

Foo.prototype.a = function() {

console.log(3)

}

Foo.a = function() {

console.log(4)

}

Foo.a();

let obj = new Foo();

obj.a();

Foo.a();

```