14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第一部分 1-100題)

這是我參與更文挑戰的第27天,活動詳情查看: 更文挑戰javascript

14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第一部分 1-100題)html

14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第二部分 101-200題)java

14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第三部分 201-300題)node

14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第四部分 301-370題)react

14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第五部分 371-424題)web

爲了方便手機閱覽,我在必要位置都放了回頂部或者回對應問題的連接面試

在這裏插入圖片描述

編號 問題
1 在 JavaScript 中建立對象的可行方法有哪些?
2 什麼是原型鏈?
3 call、apply、bind有什麼區別?
4 什麼是 JSON 及其常見操做?
5 數組slice()方法的目的是什麼?
6 數組splice()方法的目的是什麼?
7 slice()和splice()有什麼區別?
8 你如何比較 Object 和 Map
9 == 和 === 運算符有什麼區別?
10 什麼是 lambda 或 箭頭函數?
11 什麼是頭等函數?
12 什麼是一階函數?
13 什麼是高階函數?
14 什麼是一元函數?
15 什麼是柯里化函數?
16 什麼是純函數?
17 let 關鍵字的用途是什麼?
18 let 和 var 有什麼區別?
19 爲何選擇 let 這個名字做爲關鍵字?
20 你如何在沒有錯誤的狀況下從新聲明 switch 塊中的變量?
21 什麼是暫時性死區?
22 什麼是IIFE(當即執行函數表達式)?
23 使用模塊有什麼好處?
24 什麼是memoization(記憶)?
25 什麼是Hoisting(變量提高)?
26 ES6 中的類是什麼?
27 什麼是closures(閉包)?
28 什麼是modules(模塊)?
29 爲何須要模塊?
30 javascript中的做用域是什麼?
31 什麼是Service Worker?
32 如何使用 Service Worker 操做 DOM?
33 你如何在 Service Worker 從新啓動時重用信息?
34 什麼是 IndexedDB?
35 什麼是 web storage?
36 什麼是 post message?
37 什麼是 Cookie ?
38 爲何須要 Cookie ?
39 cookie 中有哪些選項 ?
40 你如何刪除cookie ?
41 cookie、本地存儲和會話存儲有什麼區別 ?
42 localStorage 和 sessionStorage 的主要區別是什麼?
43 你如何訪問web 存儲?
44 會話存儲有哪些可用的方法?
45 什麼是存儲事件及其事件處理程序?
46 爲何須要web 存儲?
47 你如何檢查 Web 存儲瀏覽器支持?
48 你如何檢查web workers瀏覽器支持?
49 舉個 web worker 的例子
50 web worker 對 DOM 的限制是什麼?
51 什麼是promise?
52 爲何須要promise?
53 promise的三種狀態是什麼?
54 什麼是回調函數?
55 爲何咱們須要回調?
56 什麼是回調地獄?
57 什麼是服務器發送事件?
58 你如何接收服務器發送的事件通知?
59 你如何檢查瀏覽器對服務器發送事件的支持?
60 服務器發送的事件有哪些可用的事件?
61 promise的主要規則是什麼?
62 回調中的回調是什麼?
63 什麼是promise chaining?
64 什麼是 promise.all?
65 promise中race方法的目的是什麼?
66 什麼是javascript中的嚴格模式?
67 爲何須要嚴格模式?
68 你如何聲明嚴格模式?
69 雙感嘆號的目的是什麼?
70 刪除運算符的目的是什麼?
71 什麼是typeof運算符?
72 什麼是未定義屬性?
73 什麼是空值?
74 null 和 undefined 有什麼區別?
75 什麼是eval?
76 Window和Document有什麼區別?
77 你如何在 javascript 中訪問歷史記錄?
78 你如何檢測大寫鎖定鍵是否打開?
79 什麼是isNaN?
80 未聲明變量和未定義變量有什麼區別?
81 什麼是全局變量?
82 全局變量有什麼問題?
83 什麼是 NaN 屬性?
84 isFinite 函數的目的是什麼?
85 什麼是event flow(事件流)?
86 什麼是event bubbling(事件冒泡)?
87 什麼是event capturing(事件捕獲)?
88 你如何使用 JavaScript 提交表單?
89 你如何找到操做系統詳細信息?
90 document load 和 DOMContentLoaded 事件有什麼區別?
91 Native 、Host 和User objects之間有什麼區別?
92 用於調試 JavaScript 代碼的工具或技術有哪些?
93 promises相對於回調的優缺點是什麼?
94 attribute 和 property有什麼區別?
95 什麼是 same-origin policy(同源策略)?
96 void 0的目的是什麼?
97 JavaScript 是編譯型語言仍是解釋型語言?
98 JavaScript 是區分大小寫的語言嗎?
99 Java 和 JavaScript 之間有什麼關係嗎?
100 什麼是event?
101 誰創造了 JavaScript ?
102 preventDefault 方法有什麼用?
103 stopPropagation方法有什麼用?
104 return false 涉及哪些步驟?
105 什麼是BOM(瀏覽器對象模型)?
106 setTimeout有什麼用?
107 setInterval有什麼用?
108 爲何 JavaScript 被視爲單線程?
109 什麼是event delegation(事件委託)?
110 什麼是 ECMAScript?
111 什麼是 JSON?
112 JSON的語法規則是什麼?
113 JSON 字符串化的目的是什麼?
114 你如何解析 JSON 字符串?
115 爲何須要 JSON?
116 什麼是 PWA?
117 clearTimeout 方法的目的是什麼?
118 clearInterval 方法的目的是什麼?
119 你如何在javascript中重定向新頁面?
120 你如何檢查一個字符串是否包含一個子字符串?
121 你如何在 javascript 中驗證電子郵件?
122 你如何使用 javascript 獲取當前 url?
123 location對象的各類url屬性是什麼?
124 如何在javascript中獲取查詢字符串值?
125 如何檢查對象中是否存在鍵?
126 你如何循環或枚舉 javascript 對象?
127 你如何測試一個空對象?
128 什麼是參數對象?
129 你如何使字符串的第一個字母大寫?
130 for循環的優缺點是什麼?
131 你如何在javascript中顯示當前日期?
132 你如何比較兩個日期對象?
133 你如何檢查一個字符串是否以另外一個字符串開頭?
134 你如何在javascript中修剪字符串?
135 你如何在javascript中添加一個鍵值對?
136 ‘!–’ 符號是否表示一個特殊運算符?
137 你如何爲變量分配默認值?
138 你如何定義多行字符串?
139 什麼是app shell model?
140 咱們能夠爲函數定義屬性嗎?
141 找到函數指望的參數數量的方法是什麼?
142 什麼是 polyfill?
143 什麼是 break 和 continue 語句?
144 什麼是js標籤?
145 將聲明放在首位有什麼好處?
146 初始化變量有什麼好處?
147 建立新對象的建議是什麼?
148 你如何定義 JSON 數組?
149 你如何生成隨機整數?
150 你能寫一個隨機整數函數來打印範圍內的整數嗎?
151 什麼是tree shaking(搖樹)?
152 tree shaking(搖樹)須要什麼?
153 是否推薦使用 eval?
154 什麼是正則表達式?
155 正則表達式中可用的字符串方法有哪些?
156 正則表達式中的修飾符是什麼?
157 什麼是正則表達式模式?
158 什麼是 RegExp 對象?
159 如何在字符串中搜索模式?
160 exec方法的目的是什麼?
161 如何更改 HTML 元素的樣式?
162 1+2+'3' 的結果是什麼?
163 什麼是調試器語句?
164 調試中斷點的目的是什麼?
165 我可使用保留字做爲標識符嗎?
166 你如何檢測移動瀏覽器?
167 如何在沒有正則表達式的狀況下檢測移動瀏覽器?
168 你如何使用JS獲取圖像的寬度和高度?
169 如何進行同步 HTTP 請求?
170 如何進行異步 HTTP 請求?
171 你如何在javascript中將日期轉換爲另外一個時區?
172 用於獲取窗口大小的屬性是什麼?
173 什麼是javascript中的條件運算符?
174 你能在條件運算符上應用chaining嗎?
175 頁面加載後執行javascript的方式有哪些?
176 proto 和 prototype有什麼區別?
177 舉個例子你真的須要分號
178 什麼是freeze 方法?
179 freeze 方法的目的是什麼?
180 爲何我須要使用freeze 方法?
181 你如何檢測瀏覽器語言首選項?
182 如何使用javascript將字符串轉換爲標題大小寫?
183 你如何檢測頁面中禁用的javascript?
184 javascript支持的各類運算符有哪些?
185 什麼是rest 參數?
186 若是不使用 rest 參數做爲最後一個參數會發生什麼?
187 什麼是 JavaScript 中可用的按位運算符?
188 什麼是spread operator(展開運算符)?
189 你如何肯定對象是否被凍結?
190 你如何肯定兩個值相同或不使用對象?
191 使用Object 的 is方法的目的是什麼?
192 如何將屬性從一個對象複製到另外一個對象?
193 賦值方法有哪些應用?
194 什麼是Proxy(代理)對象?
195 seal 方法的目的是什麼?
196 seal 方法的應用有哪些?
197 freeze 和 seal 方法有什麼區別?
198 如何判斷物體是否 seal?
199 如何得到可枚舉的鍵值對?
200 Object.values 和 Object.entries 方法的主要區別是什麼?
201 如何獲取任何對象的鍵列表?
202 你如何用 prototype 建立一個對象?
203 什麼是WeakSet?
204 WeakSet 和 Set 有什麼區別?
205 列出 WeakSet 上可用的方法集合?
206 什麼是 WeakMap?
207 WeakMap 和 Map 有什麼區別?
208 列出 WeakMap 上可用的方法集合?
209 uneval 的目的是什麼?
210 你如何 encode (編碼)一個 URL?
211 你如何 decode (解碼)一個 URL?
212 你如何打印網頁的內容?
213 uneval 和 eval 有什麼區別?
214 什麼是 anonymous (匿名)函數?
215 局部變量和全局變量的優先順序是什麼?
216 什麼是 javascript 訪問器?
217 你如何在對象構造函數上定義屬性?
218 get 和defineProperty 有什麼區別?
219 Getter 和 Setter 的優勢是什麼?
220 我可使用defineProperty方法添加 getter 和 setter 嗎?
221 switch-case 的目的是什麼?
222 使用 swtich case 須要遵循什麼約定?
223 什麼是原始數據類型?
224 訪問對象屬性的不一樣方式有哪些?
225 什麼是函數參數規則?
226 什麼是錯誤對象?
227 當你收到語法錯誤時
228 錯誤對象有哪些不一樣的錯誤名稱?
229 錯誤處理中的各類語句是什麼?
230 javascript中的兩種類型的循環是什麼?
231 什麼是 nodejs?
232 什麼是 Intl 對象?
233 你如何執行特定於語言的日期和時間格式化?
234 什麼是迭代器?
235 同步迭代是如何工做的?
236 什麼是事件循環?
237 什麼是調用棧?
238 什麼是事件隊列?
239 什麼是裝飾器?
240 Intl 對象的屬性是什麼?
241 什麼是一元運算符?
242 如何對數組中的元素進行排序?
243 排序數組時 compareFunction 的目的是什麼?
244 你如何反轉數組?
245 你如何在數組中找到最小值和最大值?
246 如何在沒有math函數的狀況下找到最小值和最大值?
247 什麼是空語句及其目的?
248 如何獲取模塊的元數據?
249 什麼是逗號運算符?
250 逗號運算符的優勢是什麼?
251 什麼是 typescript ?
252 javascript 和 typescript 有什麼區別?
253 typescript 相對於 javascript 的優點是什麼?
254 什麼是對象初始值設定項?
255 什麼是構造方法?
256 若是在一個類中屢次編寫構造函數會發生什麼?
257 如何調用父類的構造函數?
258 你如何得到一個對象的原型?
259 若是我爲 getPrototype 方法傳遞字符串類型會發生什麼?
260 如何將一個對象的原型設置爲另外一個對象?
261 你如何檢查一個對象是否能夠擴展?
262 如何防止對象擴展?
263 使對象不可擴展的不一樣方法有哪些?
264 如何在一個對象上定義多個屬性?
265 JavaScript 中的 MEAN 是什麼?
266 什麼是 javascript 中的混淆?
267 爲何須要混淆?
268 什麼是Minification(縮小)?
269 縮小有什麼好處?
270 混淆和加密有什麼區別?
271 經常使用的縮小工具備哪些?
272 你如何使用 javascript 執行表單驗證?
273 如何在沒有 javascript 的狀況下執行表單驗證?
274 可用於約束驗證的 DOM 方法有哪些?
275 什麼是可用的約束驗證 DOM 屬性?
276 什麼是有效性屬性列表?
277 舉例使用 rangeOverflow 屬性?
278 javascript 中是否提供枚舉功能?
279 什麼是枚舉?
280 你如何列出一個對象的全部屬性?
281 如何獲取對象的屬性描述符?
282 屬性描述符提供的屬性是什麼?
283 你如何擴展類?
284 如何在不從新加載頁面的狀況下修改 url?
285 如何檢查數組是否包含特定值?
286 你如何比較標量數組?
287 如何從獲取參數中獲取值?
288 你如何用逗號做爲千位分隔符打印數字?
289 java和javascript有什麼區別?
290 javascript是否支持命名空間?
291 你如何聲明命名空間?
292 如何從父頁面調用 iframe 中的 javascript 代碼?
293 如何從日期獲取時區偏移量?
294 如何動態加載 CSS 和 JS 文件?
295 在 DOM 中查找 HTML 元素的不一樣方法有哪些?
296 什麼是jQuery?
297 什麼是 V8 JavaScript 引擎?
298 爲何咱們稱javascript爲動態語言?
299 什麼是空運算符?
300 如何設置光標等待?
301 你如何建立一個無限循環?
302 爲何須要避免 with 語句?
303 如下 for 循環的輸出是什麼?
304 列出 ES6 的一些特性?
305 什麼是 ES6?
306 我能夠從新聲明 let 和 const 變量嗎?
307 是 const 變量使值不可變嗎?
308 什麼是默認參數?
309 什麼是模板字面量?
310 如何在模板文字中編寫多行字符串?
311 什麼是嵌套模板?
312 什麼是標記模板?
313 什麼是原始字符串?
314 什麼是解構賦值?
315 解構賦值中的默認值是什麼?
316 你如何在解構賦值中交換變量?
317 什麼是加強的對象字面量?
318 什麼是動態導入?
319 動態導入的用例是什麼?
320 什麼是typed arrays (類型數組)?
321 模塊加載器的優勢是什麼?
322 什麼是 collation?
323 什麼是...of 語句?
324 下面展開運算符數組的輸出是什麼?
325 PostMessage 安全嗎?
326 postmessage目標源做爲通配符有什麼問題?
327 你如何避免收到來自攻擊者的 postMessages?
328 我能夠徹底避免使用 postMessages 嗎?
329 postMessages 是否同步?
330 Javascript 是什麼範式?
331 內部和外部 javascript有什麼區別?
332 JavaScript 是否比服務器端腳本更快?
333 你如何得到複選框的狀態?
334 雙波浪號運算符的目的是什麼?
335 你如何將字符轉換爲 ASCII 碼?
336 什麼是數組緩衝區?
337 下面的字符串表達式的輸出是什麼?
338 Error對象的目的是什麼?
339 EvalError 對象的目的是什麼?
340 從非嚴格模式到嚴格模式拋出的案例錯誤列表是什麼?
341 是否全部對象都有prototypes(原型)?
342 參數和實參有什麼區別?
343 數組中 some 方法的目的是什麼?
344 你如何組合兩個或多個數組?
345 淺拷貝和深拷貝有什麼區別?
346 你如何建立一個字符串的特定數量的副本?
347 你如何根據正則表達式返回全部匹配的字符串?
348 你如何在開頭或結尾修剪字符串?
349 下面帶有一元運算符的控制檯語句的輸出是什麼?
350 javascript 是否使用 mixins?
351 什麼是 thunk 函數?
352 什麼是異步 thunk?
353 如下函數調用的輸出是什麼?
354 如何從字符串中刪除全部換行符?
355 迴流和重繪有什麼區別?
356 否認數組會發生什麼?
357 若是咱們添加兩個數組會發生什麼?
358 在假值上添加加法運算符的輸出是什麼?
359 如何使用特殊字符建立自字符串?
360 如何從數組中刪除虛假值?
361 你如何得到數組的惟一值?
362 什麼是解構別名?
363 如何在不使用 map 方法的狀況下映射數組值?
364 你如何清空一個數組?
365 你如何將數字四捨五入到某些小數?
366 將數組轉換爲對象的最簡單方法是什麼?
367 你如何用一些數據建立一個數組?
368 控制檯對象的佔位符是什麼?
369 是否能夠將 CSS 添加到控制檯消息?
370 控制檯對象的dir方法的目的是什麼?
371 是否能夠在控制檯中調試 HTML 元素?
372 如何使用控制檯對象以表格格式顯示數據?
373 你如何驗證參數是否爲數字?
374 你如何建立複製到剪貼板按鈕?
375 獲取時間戳的快捷方式是什麼?
376 你如何展平多維數組?
377 什麼是最簡單的多條件檢查?
378 你如何捕獲瀏覽器後退按鈕?
379 如何禁用網頁中的右鍵單擊?
380 什麼是包裝對象?
381 什麼是 AJAX?
382 處理異步代碼的不一樣方式有哪些?
383 如何取消提取請求?
384 什麼是網絡語音API?
385 什麼是最小超時限制?
386 你如何在現代瀏覽器中實現零超時?
387 事件循環中的任務是什麼?
388 什麼是微任務?
389 什麼是不一樣的事件循環?
390 queueMicrotask 的目的是什麼?
391 你如何在 typescript 文件中使用 javascript 庫?
392 promises 和 observables 有什麼區別?
393 什麼是堆?
394 什麼是事件表?
395 什麼是微任務隊列?
396 shim 和 polyfill 有什麼區別?
397 你如何檢測原始或非原始值類型?
398 什麼是Babel ?
399 Node.js 是徹底單線程的嗎?
400 可觀察對象的常見用例是什麼?
401 什麼是 RxJS?
402 函數構造函數和函數聲明有什麼區別?
403 什麼是短路狀態?
404 調整數組大小的最簡單方法是什麼?
405 什麼是可觀察的?
406 函數聲明和類聲明有什麼區別?
407 什麼是異步函數?
408 你如何防止 promises swallowing errors?
409 什麼是 deno ?
410 你如何在javascript中使對象可迭代?
411 什麼是正確的尾調用?
412 你如何檢查一個對象是不是一個承諾?
413 如何檢測函數是否被調用爲構造函數?
414 arguments 對象和rest 參數之間有什麼區別?
415 擴展運算符和rest 參數之間有什麼區別?
416 有哪些不一樣種類的 generators(生成器)?
417 什麼是內置可迭代對象?
418 for...of 和 for...in 語句之間有什麼區別?
419 如何定義實例和非實例屬性?
420 isNaN 和 Number.isNaN 有什麼區別?
421 如何在沒有任何額外括號的狀況下調用 IIFE?
422 能夠在 switch case 中使用表達式嗎?
423 忽略承諾錯誤的最簡單方法是什麼?
424 如何使用 CSS 設置控制檯輸出的樣式?

1.在 JavaScript 中建立對象的可行方法有哪些?

有不少方法能夠在 javascript 中建立對象,以下所示正則表達式

1.對象構造函數:

建立空對象的最簡單方法是使用 Object 構造函數。目前不推薦這種方法。typescript

var object = new Object();
複製代碼

2.對象的建立方法:

Object 的 create 方法經過將原型對象做爲參數傳遞來建立一個新對象shell

var object = Object.create(null);
複製代碼

3.對象字面量語法:

當傳遞 null 做爲參數時,對象字面量語法等效於 create 方法

var object = {};
複製代碼

4.函數構造器:

建立任何函數並應用 new 運算符來建立對象實例,

function Person(name){
     var object = {};
     object.name=name;
     object.age=21;
     return object;
  }
  var object = new Person("Sudheer");
複製代碼

5.帶有原型的函數構造函數:

這相似於函數構造函數,但它使用原型做爲其屬性和方法,

function Person(){}
  Person.prototype.name = "Sudheer";
  var object = new Person();
複製代碼

這等效於使用具備函數原型的對象建立方法建立的實例,而後使用實例和參數做爲參數調用該函數。

function func {};

  new func(x, y, z);
複製代碼

(或者)

// 使用函數原型建立一個新實例。
  var newInstance = Object.create(func.prototype)

  // 調用函數
  var result = func.call(newInstance, x, y, z),

  // 若是結果是非空對象,則使用它,不然只使用新實例。
  console.log(result && typeof result === 'object' ? result : newInstance);
複製代碼

6.ES6 類語法:

ES6 引入類特性來建立對象

class Person {
     constructor(name) {
        this.name = name;
     }
  }

  var object = new Person("Sudheer");
複製代碼

7.單例模式:

Singleton 是一個只能實例化一次的對象。對其構造函數的重複調用返回相同的實例,這樣能夠確保它們不會意外建立多個實例。

var object = new function(){
     this.name = "Sudheer";
  }
複製代碼

⬆ 返回頂部


2.什麼是原型鏈?

原型鏈用於基於現有對象構建新類型的對象。它相似於基於類的語言中的繼承。

對象實例上的原型可經過Object.getPrototypeOf(object)proto屬性得到,而構造函數上的原型可經過Object.prototype 得到。

⬆ 返回頂部


3.call、apply、bind有什麼區別?

Call、Apply 和 Bind 之間的區別能夠用下面的例子來解釋,

call: call() 方法調用一個函數,給定的this值和參數一一提供

var employee1 = {firstName: 'Haiyong', lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy', lastName: 'Baily'};

function invite(greeting1, greeting2) {
    console.log(greeting1 + ' ' + this.firstName + ' ' + this.lastName+ ', '+ greeting2);
}

invite.call(employee1, 'Hello', 'How are you?'); // Hello Haiyong Rodson, How are you?
invite.call(employee2, 'Hello', 'How are you?'); // Hello Jimmy Baily, How are you?
複製代碼

apply:調用具備給定this值的函數,並容許你將參數做爲數組傳入

var employee1 = {firstName: 'Haiyong', lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy', lastName: 'Baily'};

function invite(greeting1, greeting2) {
    console.log(greeting1 + ' ' + this.firstName + ' ' + this.lastName+ ', '+ greeting2);
}

invite.apply(employee1, ['Hello', 'How are you?']); // Hello Haiyong Rodson, How are you?
invite.apply(employee2, ['Hello', 'How are you?']); // Hello Jimmy Baily, How are you?
複製代碼

bind:返回一個新函數,容許你傳遞任意數量的參數

var employee1 = {firstName: 'Haiyong', lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy', lastName: 'Baily'};

function invite(greeting1, greeting2) {
    console.log(greeting1 + ' ' + this.firstName + ' ' + this.lastName+ ', '+ greeting2);
}

var inviteEmployee1 = invite.bind(employee1);
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1('Hello', 'How are you?'); // Hello Haiyong Rodson, How are you?
inviteEmployee2('Hello', 'How are you?'); // Hello Jimmy Baily, How are you?
複製代碼

Call 和 apply 能夠互換。二者都當即執行當前函數。你須要決定是發送數組仍是逗號分隔的參數列表更容易。你能夠經過處理 Call 用於逗號(分隔列表)和 Apply 用於Array來記住。

而 Bind 建立一個新函數,該函數將this設置爲傳遞給 bind() 的第一個參數。

⬆ 返回頂部


4.什麼是 JSON 及其常見操做?

JSON是一種基於文本的數據格式,遵循 JavaScript 對象語法,由道格拉斯·克羅克福德 (Douglas Crockford) 推行。 當你想經過網絡傳輸數據時它頗有用,它基本上只是一個擴展名爲 .json 的文本文件,以及一個 MIME 類型的 application/json

解析:將字符串轉換爲原生對象

JSON.parse(text)
複製代碼

字符串化:將本機對象轉換爲字符串,以即可以經過網絡傳輸

JSON.stringify(object)
複製代碼

⬆ 返回頂部


5. 數組slice()方法的目的是什麼?

所述slice()方法返回在數組做爲新的數組對象中選定的元件。它選擇從給定開始參數開始的元素,並在給定的可選結束參數處結束,不包括最後一個元素。若是省略第二個參數,則它會一直選擇到最後。

這種方法的一些例子是,

let arrayIntegers = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegers.slice(0,2); // returns [1,2]
let arrayIntegers2 = arrayIntegers.slice(2,3); // returns [3]
let arrayIntegers3 = arrayIntegers.slice(4); //returns [5]
複製代碼

==注意==: Slice 方法不會改變原始數組,而是將子集做爲新數組返回。

⬆ 返回頂部


6.數組splice()方法的目的是什麼?

splice() 方法用於向/從數組添加/刪除項目,而後返回被刪除的項目。第一個參數指定插入或刪除的數組位置,而選項第二個參數指示要刪除的元素數。每一個附加參數都添加到數組中。

這種方法的一些例子是,

let arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal2 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal3 = [1, 2, 3, 4, 5];

let arrayIntegers1 = arrayIntegersOriginal1.splice(0,2); // returns [1, 2]; original array: [3, 4, 5]
let arrayIntegers2 = arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array: [1, 2, 3]
let arrayIntegers3 = arrayIntegersOriginal3.splice(3, 1, "a", "b", "c"); //returns [4]; original array: [1, 2, 3, "a", "b", "c", 5]
複製代碼

==注意==: Splice 方法修改原始數組並返回刪除的數組。

⬆ 返回頂部


7.slice()和splice()有什麼區別?

表格形式的一些主要區別

slice() splice()
不修改原始數組(不可變) 修改原始數組(可變)
返回原始數組的子集 將刪除的元素做爲數組返回
用於從數組中選取元素 用於在數組中插入或刪除元素

⬆ 返回頂部


8.你如何比較 Object 和 Map

Object 與Maps 的類似之處在於,它們都容許您將鍵設置爲值、檢索這些值、刪除鍵以及檢測某個鍵是否存儲了某些內容。因爲這個緣由,對象在歷史上被用做地圖。可是在某些狀況下,使用 Map 有一些重要的區別。

  • Object 的鍵是字符串和符號,而它們能夠是 Map 的任何值,包括functions、Object 和任何primitive。
  • Map 中的鍵是有序的,而添加到 Object 的鍵不是。所以,當迭代它時,一個 Map 對象按插入的順序返回鍵。
  • 您可使用 size 屬性輕鬆獲取 Map 的大小,而 Object 中的屬性數量必須手動肯定。
  • Map 是可迭代的,所以能夠直接迭代,而迭代 Object 須要以某種方式獲取其鍵並對其進行迭代。
  • 一個對象有一個原型,因此若是你不當心,地圖中有一些默認的鍵可能會與你的鍵發生衝突。從 ES5 開始,這能夠經過使用 map =Object.create(null) 繞過,但不多這樣作。
  • Map在涉及頻繁添加和刪除密鑰對的場景中可能表現得更好。

⬆ 返回頂部


9.== 和 === 運算符有什麼區別?

JavaScript 提供了嚴格(===, !==) 和類型轉換(==, !=) 相等比較。嚴格運算符考慮變量的類型,而非嚴格運算符根據變量的值進行類型校訂/轉換。嚴格的運算符遵循如下不一樣類型的條件,

  1. 當兩個字符串具備相同的字符序列、相同的長度以及相應位置的相同字符時,它們是嚴格相等的。
  2. 當兩個數字在數值上相等時,它們嚴格相等。即,具備相同的數值。這裏有兩種特殊狀況,

NaN 不等於任何東西,包括 NaN。
正零和負零彼此相等。

  1. 若是兩個布爾操做數都爲真或都爲假,則兩個布爾操做數嚴格相等。
  2. 若是兩個對象引用同一個對象,則它們嚴格相等。
  3. Null 和 Undefined 類型與 === 不相等,但與 == 相等。即, null===undefined --> falsenull==undefined --> true

一些涵蓋上述狀況的例子,

0 == false   // true
0 === false  // false
1 == "1"     // true
1 === "1"    // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[]==[] or []===[] //false, refer different objects in memory
{}=={} or {}==={} //false, refer different objects in memory
複製代碼

⬆ 返回頂部


10.什麼是 lambda 或 箭頭函數?

箭頭函數是函數表達式的較短語法,沒有本身的this、arguments、super 或 new.target。這些函數最適合非方法函數,它們不能用做構造函數。

⬆ 返回頂部


11.什麼是頭等函數?

在 Javascript 中,函數是第一類對象。頭等函數意味着該語言中的函數被視爲任何其餘變量。

例如,在這種語言中,一個函數能夠做爲參數傳遞給其餘函數,能夠由另外一個函數返回,也能夠做爲一個值分配給一個變量。例如,在下面的示例中,分配給偵聽器的處理函數

const handler = () => console.log ('This is a click handler function');
document.addEventListener ('click', handler);
複製代碼

⬆ 返回頂部


12.什麼是一階函數?

一階函數是不接受另外一個函數做爲參數而且不返回函數做爲其返回值的函數。

const firstOrder = () => console.log ('I am a first order function!');
複製代碼

⬆ 返回頂部


13.什麼是高階函數?

高階函數是接受另外一個函數做爲參數或返回一個函數做爲返回值或二者兼而有之的函數。

const firstOrderFunc = () => console.log ('Hello, I am a First order function');
const higherOrder = ReturnFirstOrderFunc => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);
複製代碼

⬆ 返回頂部


14.什麼是一元函數?

一元函數(即 monadic)是一個只接受一個參數的函數。它表明一個函數接受的單個參數。

讓咱們以一元函數爲例,

const unaryFunction = a => console.log (a + 10); // 給給定的參數加 10
複製代碼

⬆ 返回頂部


15.什麼是柯里化函數?

柯里化是將具備多個參數的函數轉換爲每一個只有一個參數的函數序列的過程。Currying 以數學家Haskell Curry 的名字命名。經過應用柯里化,n 元函數將其變成一元函數。

讓咱們舉一個 n-ary 函數的例子,以及它如何變成一個柯里化函數,

const multiArgFunction = (a, b, c) => a + b + c;
console.log(multiArgFunction(1,2,3));// 6

const curryUnaryFunction = a => b => c => a + b + c;
curryUnaryFunction (1); // return a function: b => c => 1 + b + c
curryUnaryFunction (1) (2); // return a function: c => 3 + c
curryUnaryFunction (1) (2) (3); // return 數字 6
複製代碼

Curried 函數對於提升代碼複用性函數組合很是有用。

⬆ 返回頂部


16.什麼是純函數?

一個純函數是在返回值是由它的參數沒有任何反作用只有肯定的函數。即若是您在應用程序中調用具備相同參數 'n' 次和 'n' 個位置的函數,則它將始終返回相同的值。

咱們舉個例子來看看純函數和非純函數的區別,

//不純
let numberArray = [];
const impureAddNumber = number => numberArray.push(number);
//純
const pureAddNumber = number => argNumberArray =>
  argNumberArray.concat([number]);

//顯示結果
console.log (impureAddNumber(6)); // returns 1
console.log (numberArray); // returns [6]
console.log (pureAddNumber(7) (numberArray)); // returns [6, 7]
console.log (numberArray); // returns [6]
複製代碼

根據上面的代碼片斷,經過改變數組並返回一個與參數值無關的推送數字索引,推送函數自己是不純的。而另外一方面,Concat獲取數組並將其與另外一個數組鏈接起來,產生一個沒有反作用的全新數組。此外,返回值是前一個數組的串聯。

請記住,純函數很重要,由於它們簡化了單元測試,沒有任何反作用,也不須要依賴注入。它們還避免了緊密耦合,並經過沒有任何反作用使您的應用程序更難中斷。這些原則經過優先使用const 而不是let與 ES6 的不變性概念結合在一塊兒。

⬆ 返回頂部


17.let 關鍵字的用途是什麼?

let語句聲明瞭一個塊做用域局部變量。所以,使用 let 關鍵字定義的變量的範圍僅限於使用它的塊、語句或表達式。而使用var關鍵字聲明的變量用於定義全局變量或局部變量,而無論塊做用域如何。

咱們舉個例子來演示一下用法,

let counter = 30;
if (counter === 30) {
  let counter = 31;
  console.log(counter); // 31
}
console.log(counter); // 30 (由於這裏不存在 if 塊中的變量)
複製代碼

⬆ 返回頂部


18.let 和 var 有什麼區別?

以表格格式列出差別

var let
它從 JavaScript 開始就可用 做爲 ES6 的一部分引入
它有函數做用域 它有塊做用域
變量將被提高 已提高但未初始化
讓咱們舉個例子看看區別,
function userDetails(username) {
   if(username) {
     console.log(salary); // 因爲變量提高未定義
     console.log(age); // 參考錯誤:初始化前沒法訪問"age"
     let age = 30;
     var salary = 10000;
   }
   console.log(salary); //10000 (可訪問到適當的函數範圍)
   console.log(age); //error:age未定義(因爲塊做用域)
}
userDetails('Haiyong');
複製代碼

⬆ 返回頂部


19. 爲何選擇 let 這個名字做爲關鍵字?

let是一種數學語句,被早期的編程語言如Scheme和Basic 所採用。它是從數十種其餘語言中借用而來的,這些語言let已經儘量地做爲傳統關鍵字使用var。

⬆ 返回頂部


20.你如何在沒有錯誤的狀況下從新聲明 switch 塊中的變量?

若是您嘗試在 a 中從新聲明變量,switch block則會致使錯誤,由於只有一個塊。例如,下面的代碼塊拋出以下語法錯誤,

let counter = 1;
switch(x) {
  case 0:
    let name;
    break;

  case 1:
    let name; // 從新聲明的語法錯誤。
    break;
}
複製代碼

爲避免此錯誤,您能夠在 case 子句中建立一個嵌套塊並建立一個新的塊範圍詞法環境。

let counter = 1;
    switch(x) {
      case 0: {
        let name;
        break;
      }
      case 1: {
        let name; // 沒有用於從新聲明的 SyntaxError。
        break;
      }
    }
複製代碼

⬆ 返回頂部


21.什麼是暫時性死區?

暫時性死區是 JavaScript 中的一種行爲,在使用 let 和 const 關鍵字聲明變量時發生,但不使用 var 聲明變量。在 ECMAScript 6 中,在其聲明以前(在其範圍內)訪問letorconst變量會致使 ReferenceError。發生這種狀況的時間跨度,即變量綁定的建立和聲明之間,稱爲時間死區。

讓咱們用一個例子來看看這個行爲,

function somemethod() {
  console.log(counter1); // undefined
  console.log(counter2); // ReferenceError
  var counter1 = 1;
  let counter2 = 2;
}
複製代碼

⬆ 返回頂部


22.什麼是IIFE(當即執行函數表達式)?

IIFE(當即調用函數表達式)是一個 JavaScript 函數,它在定義後當即運行。它的簽名以下,

(function () {
      // 在這裏寫邏輯
    }
 )
();
複製代碼

使用 IIFE 的主要緣由是爲了得到數據隱私,由於在 IIFE 中聲明的任何變量都不能被外界訪問。即,若是您嘗試使用 IIFE 訪問變量,則會引起以下錯誤,

(function () {
          var message = "IIFE";
          console.log(message);
        }
 )
();
console.log(message); //Error: message is not defined(消息未定義)
複製代碼

⬆ 返回頂部


23.使用模塊有什麼好處?

使用模塊有利於擴展有不少好處。其中一些好處是,

  • 可維護性
  • 可重用性
  • 命名空間

⬆ 返回頂部


24.什麼是memoization(記憶)?

Memoization 是一種編程技術,它試圖經過緩存先前計算的結果來提升函數的性能。每次調用 memoized 函數時,都會使用其參數來索引緩存。若是數據存在,則能夠返回它,而無需執行整個函數。不然執行該函數,而後將結果添加到緩存中。

讓咱們舉一個添加記憶化功能的例子,

const memoizAddition = () => {
  let cache = {};
 return (value) => {
  if (value in cache) {
   console.log('Fetching from cache');
   return cache[value]; // 在這裏, cache.value 不能用做以數字開頭的屬性名稱,該數字不是有效的 JavaScript 標識符。 所以,只能使用方括號表示法訪問。
  }
  else {
   console.log('Calculating result');
   let result = value + 20;
   cache[value] = result;
   return result;
  }
 }
}
// memoizAddition 返回的函數
const addition = memoizAddition();
console.log(addition(20)); //輸出: 40 calculated
console.log(addition(20)); //輸出: 40 cached
複製代碼

⬆ 返回頂部


25.什麼是Hoisting(變量提高)?

Hoisting是一種 JavaScript 機制,其中變量和函數聲明在代碼執行以前被移動到其做用域的頂部。請記住,JavaScript 只提高聲明,而不是初始化。 咱們舉一個簡單的變量提高的例子,

console.log(message); //輸出: undefined
var message = 'The variable Has been hoisted';
複製代碼

上面的代碼看起來像下面的解釋器,

var message;
console.log(message);
message = 'The variable Has been hoisted';
複製代碼

⬆ 返回頂部


26.ES6 中的類是什麼?

在 ES6 中,Javascript 類主要是對 JavaScript 現有的基於原型的繼承的語法糖。

例如,在函數表達式中編寫的基於原型的繼承以下,

function Bike(model,color) {
    this.model = model;
    this.color = color;
}

Bike.prototype.getDetails = function() {
    return this.model + ' bike has' + this.color + ' color';
};
複製代碼

而 ES6 類能夠定義爲替代

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }

  getDetails() {
    return this.model + ' bike has' + this.color + ' color';
  }
}
複製代碼

⬆ 返回頂部


27.什麼是closures(閉包)?

閉包是函數和聲明該函數的詞法環境的組合。即,它是一個內部函數,能夠訪問外部或封閉函數的變量。閉包有三個做用域鏈

  • 本身的範圍,其中在其大括號之間定義變量
  • 外部函數的變量
  • 全局變量

讓咱們舉一個閉包概念的例子,

function Welcome(name){
  var greetingInfo = function(message){
   console.log(message+' '+name);
  }
return greetingInfo;
}
var myFunction = Welcome('Haiyong');
myFunction('Welcome '); //輸出: Welcome Haiyong
myFunction('Hello Mr.'); //輸出: Hello Mr.Haiyong
複製代碼

根據上面的代碼,即便在外部函數返回以後,內部函數(即,greetingInfo)也能夠訪問外部函數做用域(即 Welcome)中的變量。

⬆ 返回頂部


28.什麼是modules(模塊)?

模塊是指獨立、可重用代碼的小單元,也是許多 JavaScript 設計模式的基礎。大多數 JavaScript 模塊導出對象字面量、函數或構造函數

⬆ 返回頂部


29.爲何須要模塊?

如下是在 javascript 生態系統中使用模塊的好處

  • 可維護性
  • 可重用性
  • 命名空間

⬆ 返回頂部


30.javascript中的做用域是什麼?

做用域是在運行時代碼的某些特定部分中變量、函數和對象的可訪問性。換句話說,範圍決定了代碼區域中變量和其餘資源的可見性。

⬆ 返回頂部


31.什麼是Service Worker?

Service Worker 基本上是一個在後臺運行的腳本(JavaScript 文件),與網頁分離並提供不須要網頁或用戶交互的功能。Service Worker 的一些主要功能是豐富的離線體驗(離線第一個 Web 應用程序開發)、按期後臺同步、推送通知、攔截和處理網絡請求以及以編程方式管理響應緩存。

⬆ 返回頂部


32.如何使用 Service Worker 操做 DOM?

Service Worker 不能直接訪問 DOM。可是它能夠經過響應經過postMessage接口發送的消息與它控制的頁面進行通訊,而且這些頁面能夠操做 DOM。

⬆ 返回頂部


33.你如何在 Service Worker 從新啓動時重用信息?

Service Worker 的問題在於它在不使用時會被終止,並在下次須要時從新啓動,所以您不能依賴 Service Worker onfetchonmessage處理程序中的全局狀態。在這種狀況下,服務工做者將有權訪問 IndexedDB API,以便在從新啓動時保持和重用。

⬆ 返回頂部


34.什麼是 IndexedDB?

IndexedDB 是用於客戶端存儲大量結構化數據(包括文件/blob)的低級 API。此 API 使用索引來啓用此數據的高性能搜索。

⬆ 返回頂部


35.什麼是 web storage?

Web 存儲是一種 API,它提供了一種機制,瀏覽器能夠經過該機制以比使用 cookie 更直觀的方式在用戶瀏覽器中本地存儲鍵/值對。Web 存儲提供了兩種在客戶端存儲數據的機制。

  • 本地存儲:它存儲當前來源的數據,沒有到期日期。
  • 會話存儲:存儲一個會話的數據,關閉瀏覽器選項卡時數據丟失。

⬆ 返回頂部


36.什麼是 post message?

post message是一種啓用 Window 對象之間的跨源通訊的方法。(即,在頁面和它產生的彈出窗口之間,或在頁面和嵌入其中的 iframe 之間)。一般,當且僅當頁面遵循同源策略(即頁面共享相同的協議、端口號和主機)時,容許不一樣頁面上的腳本相互訪問。

⬆ 返回頂部


37.什麼是 Cookie ?

你能夠在這篇文章中更詳細地瞭解Cookie :

haiyong.blog.csdn.net/article/det…

cookie 是存儲在您的計算機上以供瀏覽器訪問的一段數據。Cookie 保存爲鍵/值對。

例如,您能夠建立一個名爲 username 的 cookie,以下所示,

document.cookie = "username=Haiyong";
複製代碼

⬆ 返回頂部


38.爲何須要 Cookie ?

Cookie 用於記住有關用戶我的資料的信息(例如用戶名)。它基本上包括兩個步驟,

  • 當用戶訪問網頁時,用戶我的資料能夠存儲在 cookie 中。
  • 下次用戶訪問頁面時,cookie 會記住用戶配置文件。

⬆ 返回頂部


39.cookie 中有哪些選項 ?

如下選項可用於 cookie,

默認狀況下,cookie 會在瀏覽器關閉時被刪除,但您能夠經過設置到期日期(UTC 時間)來更改此行爲。

document.cookie = "username=Haiyong; expires=Sat, 8 Jun 2019 12:00:00 UTC";
複製代碼

默認狀況下,cookie 屬於當前頁面。可是您可使用路徑參數告訴瀏覽器 cookie 所屬的路徑。

document.cookie = "username=Haiyong; path=/services";
複製代碼

⬆ 返回頂部


40.你如何刪除cookie ?

您能夠經過將到期日期設置爲已經過日期來刪除 cookie。在這種狀況下,您不須要指定 cookie 值。 例如,您能夠刪除當前頁面中的用戶名 cookie,以下所示。
document.cookie = "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";
複製代碼

注意:您應該定義 cookie 路徑選項以確保您刪除正確的 cookie。除非您指定路徑參數,不然某些瀏覽器不容許刪除 cookie。

⬆ 返回頂部


41.cookie、本地存儲和會話存儲有什麼區別 ?

如下是 cookie、本地存儲和會話存儲之間的一些區別,

特徵 cookie 本地存儲 會話存儲
在客戶端或服務器端訪問 服務器端和客戶端 僅客戶端 僅客戶端
Lifetime 使用 Expires 選項配置 直到刪除 直到選項卡關閉
SSL 支持 支持的 不支持
最大數據大小 4KB 5 MB 5MB
⬆ 返回頂部

42.localStorage 和 sessionStorage 的主要區別是什麼?

LocalStorage 與 SessionStorage 相同,但即便瀏覽器關閉並從新打開(即它沒有過時時間),它也會保留數據,而在 sessionStorage 中,當頁面會話結束時,數據會被清除。

⬆ 返回頂部


43.你如何訪問web 存儲?

Window 對象實現了WindowLocalStorageWindowSessionStorage對象,它們分別具備localStorage(window.localStorage) 和sessionStorage(window.sessionStorage) 屬性。這些屬性建立 Storage 對象的實例,經過該實例能夠爲特定域和存儲類型(會話或本地)設置、檢索和刪除數據項。 例如,您能夠讀寫本地存儲對象,以下所示

localStorage.setItem('logo', document.getElementById('logo').value);
localStorage.getItem('logo');
複製代碼

⬆ 返回頂部


44.會話存儲有哪些可用的方法?

會話存儲提供了讀取、寫入和清除會話數據的方法

// 將數據保存到 sessionStorage
sessionStorage.setItem('key', 'value');

// 從 sessionStorage 獲取保存的數據
let data = sessionStorage.getItem('key');

// 從 sessionStorage 中刪除保存的數據
sessionStorage.removeItem('key');

// 從 sessionStorage 中刪除全部保存的數據
sessionStorage.clear();
複製代碼

⬆ 返回頂部


45.什麼是存儲事件及其事件處理程序?

StorageEvent 是在另外一個文檔的上下文中更改存儲區域時觸發的事件。而 onstorage 屬性是一個用於處理存儲事件的 EventHandler。 語法以下

window.onstorage = functionRef;
複製代碼

讓咱們以記錄存儲鍵及其值的 onstorage 事件處理程序的示例用法爲例

window.onstorage = function(e) {
  console.log('The ' + e.key +
    ' key has been changed from ' + e.oldValue +
    ' to ' + e.newValue + '.');
};
複製代碼

⬆ 返回頂部


46.爲何須要web 存儲?

Web存儲更安全,能夠在本地存儲大量數據,不影響網站性能。此外,信息永遠不會傳輸到服務器。所以,這是比 Cookie 更推薦的方法。

⬆ 返回頂部


47.你如何檢查 Web 存儲瀏覽器支持?

在使用網絡存儲以前,您須要檢查瀏覽器對 localStorage 和 sessionStorage 的支持,

if (typeof(Storage) !== "undefined") {
  // localStorage/sessionStorage 的代碼。
} else {
  // 對不起! 沒有網絡存儲支持..
}
複製代碼

⬆ 返回頂部


48.你如何檢查web workers瀏覽器支持?

在使用以前,您須要檢查瀏覽器對 Web Worker 的支持

if (typeof(Worker) !== "undefined") {
  // Web worker支持的代碼。
} else {
  // 對不起! 沒有 Web Worker 支持.
}
複製代碼

⬆ 返回頂部


49.舉個 web worker 的例子

您須要按照如下步驟開始使用網絡工做者進行計數示例

建立 Web Worker 文件:您須要編寫一個腳原本增長計數值。咱們將其命名爲 counter.js

let i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();
複製代碼

這裏使用 postMessage() 方法將消息回傳到 HTML 頁面

建立 Web Worker 對象:您能夠經過檢查瀏覽器支持來建立 Web Worker 對象。讓咱們將此文件命名爲 web_worker_example.js

if (typeof(w) == "undefined") {
  w = new Worker("counter.js");
}
複製代碼

咱們能夠接收來自網絡工做者的消息

w.onmessage = function(event){
  document.getElementById("message").innerHTML = event.data;
};
複製代碼

終止 Web Worker:Web Worker 將繼續偵聽消息(即便在外部腳本完成後),直到它被終止。您可使用 terminate() 方法終止對消息的偵聽。

w.terminate();
複製代碼

重用 Web Worker:若是將 worker 變量設置爲 undefined,則能夠重用代碼

w = undefined;
複製代碼

⬆ 返回頂部


50.web worker 對 DOM 的限制是什麼?

WebWorker 無權訪問如下 javascript 對象,由於它們是在外部文件中定義的

  • 窗口對象
  • 文檔對象
  • 父對象

⬆ 返回頂部 回到第50題


51.什麼是promise?

promise是一個對象,它可能會在將來的某個時間產生一個單一的值,其中有一個已解決的值或一個未解決的緣由(例如,網絡錯誤)。它將處於 3 種可能狀態之一:已完成、已拒絕或未決。

Promise 建立的語法以下所示,

const promise = new Promise(function(resolve, reject) {
      // promise description
    })
複製代碼

承諾的用法以下,

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("I'm a Promise!");
  }, 5000);
}, reject => {

});

promise.then(value => console.log(value));
複製代碼

⬆ 返回頂部 回到第50題


52.爲何須要promise?

Promise 用於處理異步操做。它們經過減小回調地獄和編寫更乾淨的代碼爲回調提供了一種替代方法。

⬆ 返回頂部 回到第50題


53.promise的三種狀態是什麼?

Promise 具備三種狀態:

  • Pending:這是操做開始前 Promise 的初始狀態
  • 已完成:此狀態表示指定的操做已完成。
  • Rejected:此狀態表示操做未完成。在這種狀況下,將拋出錯誤值。

⬆ 返回頂部 回到第50題


54.什麼是回調函數?

回調函數是做爲參數傳遞給另外一個函數的函數。這個函數在外部函數內部調用以完成一個動做。

咱們舉一個簡單的例子來講明如何使用回調函數

function callbackFunction(name) {
  console.log('Hello ' + name);
}

function outerFunction(callback) {
  let name = prompt('Please enter your name.');
  callback(name);
}

outerFunction(callbackFunction);
複製代碼

⬆ 返回頂部 回到第50題


55.爲何咱們須要回調?

回調是必需的,由於 javascript 是一種事件驅動的語言。這意味着 javascript 將在偵聽其餘事件的同時繼續執行,而不是等待響應。 讓咱們舉一個例子,第一個函數調用 API 調用(由 setTimeout 模擬)和下一個函數記錄消息。

function firstFunction(){
  // 模擬代碼延遲
  setTimeout( function(){
    console.log('First function called');
  }, 1000 );
}
function secondFunction(){
  console.log('Second function called');
}
firstFunction();
secondFunction();

Output
// Second function called
// First function called
複製代碼

從輸出中能夠看出,javascript 沒有等待第一個函數的響應,而且執行了剩餘的代碼塊。所以,回調用於確保某些代碼在其餘代碼完成執行以前不會執行。

⬆ 返回頂部 回到第50題


56.什麼是回調地獄?

回調地獄是一種具備多個嵌套回調的反模式,這使得在處理異步邏輯時代碼難以閱讀和調試。回調地獄看起來像下面,

async1(function(){
    async2(function(){
        async3(function(){
            async4(function(){
                ....
            });
        });
    });
});
複製代碼

⬆ 返回頂部 回到第50題


57.什麼是服務器發送事件?

服務器發送事件 (SSE) 是一種服務器推送技術,使瀏覽器可以經過 HTTP 鏈接從服務器接收自動更新,而無需求助於輪詢。這些是一種單向通訊通道 - 事件僅從服務器流向客戶端。這已用於CSDN博客更新、股票價格更新、新聞提要等。

⬆ 返回頂部 回到第50題


58.你如何接收服務器發送的事件通知?

EventSource 對象用於接收服務器發送的事件通知。例如,您能夠從服務器接收消息,以下所示,

if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("sse_generator.js");
  source.onmessage = function(event) {
    document.getElementById("output").innerHTML += event.data + "<br>";
  };
}
複製代碼

⬆ 返回頂部 回到第50題


59.你如何檢查瀏覽器對服務器發送事件的支持?

您能夠在使用以前對服務器發送的事件執行瀏覽器支持,以下所示,

if(typeof(EventSource) !== "undefined") {
  // 支持服務器發送的事件。 讓咱們在這裏有一些代碼!
} else {
  // 不支持服務器發送的事件
}
複製代碼

⬆ 返回頂部 回到第50題


60.服務器發送的事件有哪些可用的事件?

如下是可用於服務器發送事件的事件列表

活動 說明
打開 它在打開與服務器的鏈接時使用
留言 收到消息時使用此事件
錯誤 發生錯誤時發生

⬆ 返回頂部 回到第50題


61.promise的主要規則是什麼?

promise必須遵循一組特定的規則,

  • promise是提供符合標準的.then()方法的對象
  • 掛起的promise能夠轉換爲已完成或拒絕狀態
  • 已完成或被拒絕的promise已解決,而且不得轉換爲任何其餘狀態。
  • 一旦promise被解決,價值就不能改變。

⬆ 返回頂部 回到第50題


62.回調中的回調是什麼?

您能夠將一個回調嵌套在另外一個回調中,以依次執行操做。這被稱爲回調中的回調。

loadScript('/script1.js', function(script) {
   console.log('first script is loaded');
  loadScript('/script2.js', function(script) {
    console.log('second script is loaded');
    loadScript('/script3.js', function(script) {
        console.log('third script is loaded');
      // 加載全部腳本後
    });
  })
});
複製代碼

⬆ 返回頂部 回到第50題


63.什麼是promise chaining?

使用 Promise 一個接一個地執行一系列異步任務的過程稱爲 Promise chaining。讓咱們舉一個計算最終結果的promise chaining的例子,

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000);
}).then(function(result) {
  console.log(result); // 1
  return result * 2;
}).then(function(result) {
  console.log(result); // 2
  return result * 3;
}).then(function(result) {
  console.log(result); // 6
  return result * 4;
});
複製代碼

在上述處理程序中,結果經過如下工做流程傳遞給 .then() 處理程序鏈,

1.最初的promise 在 1 秒內解決, 2.在.then經過記錄 result(1) 調用該處理程序以後,而後返回一個值爲 result * 2 的承諾。 3.以後,.then經過記錄 result(2)將值傳遞給下一個處理程序,並返回一個結果爲 * 3 的承諾。 4.最後.then經過記錄 result(6)傳遞給最後一個處理程序的值並返回一個結果爲 * 4 的承諾。

⬆ 返回頂部 回到第50題


64.什麼是 promise.all?

Promise.all 是一個將一系列承諾做爲輸入(可迭代)的承諾,當全部承諾都獲得解決或其中任何一個被拒絕時,它就會獲得解決。例如,promise.all 方法的語法以下,

Promise.all([Promise1, Promise2, Promise3]) .then(result) => {   console.log(result) }) .catch(error => console.log(`Error in promises ${error}`))
複製代碼

==注意==:請記住,承諾的順序(輸出結果)按照輸入順序進行維護。

⬆ 返回頂部 回到第50題


65.promise中race方法的目的是什麼?

Promise.race() 方法將返回首先解決或拒絕的承諾實例。讓咱們舉一個race()方法的例子,其中promise2首先被解析

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value); // "two" // 兩個 promise 都會解決,但 promise2 更快
});
複製代碼

⬆ 返回頂部 回到第50題


66.什麼是javascript中的嚴格模式?

嚴格模式是 ECMAScript 5 中的一項新功能,它容許您將程序或函數置於「嚴格」操做上下文中。經過這種方式,它能夠防止執行某些操做並引起更多異常。文字表達式"use strict";指示瀏覽器在嚴格模式下使用 javascript 代碼。

⬆ 返回頂部 回到第50題


67.爲何須要嚴格模式?

經過將「錯誤語法」通知爲實際錯誤,嚴格模式對於編寫「安全」JavaScript 頗有用。例如,它消除了經過拋出錯誤而意外建立全局變量的狀況,而且還會在分配給不可寫屬性、getter-only 屬性、不存在的屬性、不存在的變量或不存在的變量時引起錯誤。現有的對象。

⬆ 返回頂部 回到第50題


68.你如何聲明嚴格模式?

嚴格模式是經過添加「use strict」來聲明的;到腳本或函數的開頭。 若是在腳本的開頭聲明,則它具備全局做用域。

"use strict";
x = 3.14; // 這將致使錯誤,由於 x 未聲明
複製代碼

若是你在函數內部聲明,它具備局部做用域

x = 3.14;       // 這不會致使錯誤。
myFunction();

function myFunction() {
 "use strict";
  y = 3.14;   // This will cause an error
}
複製代碼

⬆ 返回頂部 回到第50題


69.雙感嘆號的目的是什麼?

雙感嘆號或否認 (!!) 確保結果類型是布爾值。若是它是假的(例如 0、空、未定義等),它將是假的,不然爲真。

例如,您可使用如下表達式測試 IE 版本,

let isIE8 = false;
isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
console.log(isIE8); // returns true or false
複製代碼

若是您不使用此表達式,則它返回原始值。

console.log(navigator.userAgent.match(/MSIE 8.0/));  // 返回一個數組或 null
複製代碼

⬆ 返回頂部 回到第50題


70.刪除運算符的目的是什麼?

delete 關鍵字用於刪除屬性及其值。

var user= {name: "Haiyong", age:20};
delete user.age;

console.log(user); // {name: "Haiyong"}
複製代碼

⬆ 返回頂部 回到第50題


71.什麼是typeof運算符?

您可使用 JavaScript typeof 運算符來查找 JavaScript 變量的類型。它返回變量或表達式的類型。

typeof "Haiyong Abraham"     // Returns "string"
typeof (1 + 2)        // Returns "number"
複製代碼

⬆ 返回頂部 回到第50題


72.什麼是未定義屬性?

undefined 屬性表示一個變量沒有被賦值,或者根本沒有聲明。未定義值的類型也是未定義的。

var user;    // 值未定義,類型未定義
console.log(typeof(user)) //未定義
複製代碼

任何變量均可以經過將值設置爲 undefined 來清空。

user = undefined
複製代碼

⬆ 返回頂部 回到第50題


73.什麼是空值?

值 null 表示有意缺乏任何對象值。它是 JavaScript 的原始值之一。空值的類型是對象。 您能夠經過將值設置爲 null 來清空變量。

var user = null;
console.log(typeof(user)) //object
複製代碼

⬆ 返回頂部 回到第50題


74.null 和 undefined 有什麼區別?

如下是 null 和 undefined 之間的主要區別,

null undefined
它是一個賦值值,表示變量不指向任何對象。 它不是已聲明變量但還沒有賦值的賦值值。
null 的類型是object undefined 的類型是 undefined
空值是一個原始值,表示空、空或不存在的引用。 未定義值是在變量還沒有賦值時使用的原始值。
表示變量沒有值 表示沒有變量自己
執行原始操做時轉換爲零 (0) 執行原始操做時轉換爲 NaN

⬆ 返回頂部 回到第50題

75.什麼是eval?

eval() 函數計算表示爲字符串的 JavaScript 代碼。字符串能夠是 JavaScript 表達式、變量、語句或語句序列。

console.log(eval('1 + 2')); // 3
複製代碼

⬆ 返回頂部 回到第50題


76.Window和Document有什麼區別?

如下是Window和Document之間的主要區別,

Window Document
它是任何網頁中的根級元素 它是 window 對象的直接子級。這也稱爲文檔對象模型(DOM)
默認狀況下,窗口對象在頁面中隱式可用 您能夠經過 window.document 或 document 訪問它。
它有alert()、confirm()等方法和文檔、位置等屬性 它提供了 getElementById、getElementByTagName、createElement 等方法

⬆ 返回頂部 回到第50題


77.你如何在 javascript 中訪問歷史記錄?

window.history 對象包含瀏覽器的歷史記錄。您可使用 back() 和 next() 方法加載歷史記錄中的上一個和下一個 URL。

function goBack() {
  window.history.back()
}
function goForward() {
  window.history.forward()
}
複製代碼

==注意==:您也能夠在沒有窗口前綴的狀況下訪問歷史記錄。

⬆ 返回頂部 回到第50題


78.你如何檢測大寫鎖定鍵是否打開?

所述mouseEvent getModifierState()用於返回一個布爾值,指示指定的修飾鍵是否被激活。CapsLock、ScrollLock 和 NumLock 等修飾符在單擊時激活,再次單擊時停用。

讓咱們以一個輸入元素爲例來檢測 CapsLock 開/關行爲,

<input type="password" onmousedown="enterInput(event)">

<p id="feedback"></p>

<script> function enterInput(e) { var flag = e.getModifierState("CapsLock"); if(flag) { document.getElementById("feedback").innerHTML = "CapsLock activated"; } else { document.getElementById("feedback").innerHTML = "CapsLock not activated"; } } </script>
複製代碼

⬆ 返回頂部 回到第50題


79.什麼是isNaN?

isNaN() 函數用於肯定一個值是否爲非法數字(Not-a-Number)。即,若是該值等於 NaN,則此函數返回 true。不然返回false。

isNaN('Hello') //true
isNaN('100') //false
複製代碼

⬆ 返回頂部 回到第50題


80.未聲明變量和未定義變量有什麼區別?

如下是未聲明和未定義變量之間的主要區別,

undeclared undefined
這些變量不存在於程序中且未聲明 這些在程序中聲明但沒有賦值的變量
若是您嘗試讀取未聲明變量的值,則會遇到運行時錯誤 若是您嘗試讀取未定義變量的值,則會返回未定義值。
⬆ 返回頂部
回到第50題

81.什麼是全局變量?

全局變量是那些在整個代碼長度內均可用的變量,沒有任何做用域。var 關鍵字用於聲明局部變量,但若是省略它,它將成爲全局變量

msg = "Hello" // var 缺失,它成爲全局變量
複製代碼

⬆ 返回頂部 回到第50題


82.全局變量有什麼問題?

全局變量的問題是局部做用域和全局做用域的變量名衝突。調試和測試依賴全局變量的代碼也很困難。

⬆ 返回頂部 回到第50題


83.什麼是 NaN 屬性?

NaN 屬性是一個全局屬性,表示「非數字」值。即,它表示一個值不是一個合法的數字。在程序中不多使用 NaN,但在少數狀況下能夠用做返回值

Math.sqrt(-1)
parseInt("Hello")
複製代碼

⬆ 返回頂部 回到第50題


84.isFinite 函數的目的是什麼?

isFinite() 函數用於肯定一個數是不是一個有限的合法數。若是值爲 +infinity、-infinity 或 NaN(非數字),則返回 false,不然返回 true。

isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false
isFinite(100);         // true
複製代碼

⬆ 返回頂部 回到第50題


85.什麼是event flow(事件流)?

事件流是在網頁上接收事件的順序。當您單擊嵌套在各類其餘元素中的元素時,在您的單擊實際到達其目的地或目標元素以前,它必須首先觸發其每一個父元素的單擊事件,從全局窗口對象的頂部開始。

事件流有兩種方式

  • 從上到下(事件捕獲)
  • 從下到上(事件冒泡)

⬆ 返回頂部 回到第50題


86.什麼是event bubbling(事件冒泡)?

事件冒泡是一種事件傳播,其中事件首先在最內層的目標元素上觸發,而後在同一嵌套層次結構中的目標元素的祖先(父級)上依次觸發,直到到達最外層的 DOM 元素。

⬆ 返回頂部 回到第50題


87.什麼是event capturing(事件捕獲)?

事件捕獲是一種事件傳播,其中事件首先被最外層元素捕獲,而後在同一嵌套層次結構中的目標元素的後代(子級)上連續觸發,直到它到達最內層 DOM 元素。

⬆ 返回頂部 回到第50題


88.你如何使用 JavaScript 提交表單?

您可使用 JavaScript 提交表單,使用 document.form[0].submit()。使用 onsubmit 事件處理程序提交全部表單輸入的信息

function submit() {
    document.form[0].submit();
}
複製代碼

⬆ 返回頂部 回到第50題


89.你如何找到操做系統詳細信息?

window.navigator 對象包含有關訪問者瀏覽器操做系統詳細信息的信息。一些操做系統屬性在平臺屬性下可用,

console.log(navigator.platform);
複製代碼

⬆ 返回頂部 回到第50題


90.document load 和 DOMContentLoaded 事件有什麼區別?

DOMContentLoaded當初始 HTML 文檔徹底加載並解析完畢,無需等待資產(樣式表、圖像和子框架)完成加載時,將觸發該事件。而當整個頁面加載時會觸發 load 事件,包括全部依賴資源(樣式表、圖像)。

⬆ 返回頂部 回到第50題


91.Native 、Host 和User objects之間有什麼區別?

  • Native objects是 ECMAScript 規範定義的 JavaScript 語言的一部分的對象。例如,ECMAScript 規範中定義的 String、Math、RegExp、Object、Function 等核心對象。
  • Host objects是瀏覽器或運行時環境(節點)提供的對象。例如,窗口、XmlHttpRequest、DOM節點等被視爲宿主對象。
  • User objects是在 javascript 代碼中定義的對象。例如,爲配置文件信息建立的用戶對象。

⬆ 返回頂部 回到第50題


92.用於調試 JavaScript 代碼的工具或技術有哪些?

您可使用如下工具或技術來調試 javascript

  • Chrome 開發者工具
  • debugger statement
  • 較老的 console.log 語句

⬆ 返回頂部 回到第50題


93.promises相對於回調的優缺點是什麼?

優勢

1.它避免了不可讀的回調地獄 2.使用 .then() 輕鬆編寫順序異步代碼 3.使用 Promise.all() 輕鬆編寫並行異步代碼 4.解決回調的一些常見問題(回調太晚、太早、屢次和吞下錯誤/異常)

缺點:

1.它編寫了少許的複雜代碼 2.若是不支持 ES6,你須要加載一個 polyfill

⬆ 返回頂部 回到第50題


94.attribute 和 property有什麼區別?

Attributes 在 HTML 標記上定義,而properties 在 DOM 上定義。例如,下面的 HTML 元素有兩個attributes 類型和值,

<input type="text" value="Name:">
複製代碼

您能夠檢索attribute 值以下,

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Good morning
console.log(input.value); // Good morning
複製代碼

將文本字段的值更改成「Good evening」後,它變得像

console.log(input.getAttribute('value')); // Good morning
console.log(input.value); // Good evening
複製代碼

⬆ 返回頂部 回到第50題


95.什麼是 same-origin policy(同源策略)?

同源策略是一種防止 JavaScript 跨域邊界發出請求的策略。源定義爲 URI 方案、主機名和端口號的組合。若是啓用此策略,則它會阻止一個頁面上的惡意腳本使用文檔對象模型 (DOM) 獲取對另外一個網頁上的敏感數據的訪問權限。

⬆ 返回頂部 回到第50題


96.void 0的目的是什麼?

void(0) 用於防止頁面刷新。這將有助於消除不須要的反作用,由於它將返回未定義的原始值。它一般用於使用 href="JavaScript:Void(0);" 的 HTML 文檔。 一個元素內。 即,當您單擊連接時,瀏覽器會加載一個新頁面或刷新同一頁面。 可是使用此表達式將阻止這種行爲。

例如,下面的連接在不從新加載頁面的狀況下通知消息

<a href="JavaScript:void(0);" onclick="alert('Well done!')">Click Me!</a>
複製代碼

⬆ 返回頂部 回到第50題


97.JavaScript 是編譯型語言仍是解釋型語言?

JavaScript 是一種解釋型語言,而不是一種編譯型語言。瀏覽器中的解釋器讀取 JavaScript 代碼,解釋每一行,而後運行它。現在,現代瀏覽器使用一種稱爲即時 (JIT) 編譯的技術,該技術在 JavaScript 即將運行時將其編譯爲可執行的字節碼。

⬆ 返回頂部 回到第50題


98.JavaScript 是區分大小寫的語言嗎?

是的,JavaScript 是一種區分大小寫的語言。語言關鍵字、變量、函數和對象名稱以及任何其餘標識符必須始終使用一致的大寫字母輸入。

⬆ 返回頂部 回到第50題


99.Java 和 JavaScript 之間有什麼關係嗎?

不,它們徹底是兩種不一樣的編程語言,彼此沒有任何關係。可是它們都是面向對象的編程語言,而且像許多其餘語言同樣,它們的基本功能(if、else、for、switch、break、continue 等)遵循相似的語法。

具體區別能夠查看我這篇文章:

haiyong.blog.csdn.net/article/det…

⬆ 返回頂部 回到第50題


100.什麼是event?

event是發生在 HTML 元素上的「事物」。在 HTML 頁面中使用 JavaScript 時,JavaScript 能夠react處理這些事件。HTML 事件的一些示例是,

  • 網頁已完成加載
  • 輸入字段已更改
  • 按鈕被點擊

讓咱們描述一下按鈕元素的點擊事件的行爲,

<!doctype html>
 <html>
  <head>
    <script> function greeting() { alert('Hello! Good morning'); } </script>
  </head>
  <body>
    <button type="button" onclick="greeting()">Click me</button>
  </body>
 </html>
複製代碼

⬆ 返回頂部 回到第100題


我已經寫了很長一段時間的技術博客,而且主要經過CSDN發表,這是個人一篇面試題文章。但願大家會喜歡!

若是你真的從這篇文章中學到了一些新東西,喜歡它,收藏它並與你的小夥伴分享。🤗最後,不要忘了❤或📑支持一下哦

相關文章
相關標籤/搜索