14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第五部分 371-424題)
「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」javascript
原本今天上午能夠更新完成全部面試題，可是上午實在是太忙，一直到如今纔有時間，還請你們見諒html
14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第一部分 1-100題)前端
14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第二部分 101-200題)java
14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第三部分 201-300題)node
14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第四部分 301-370題)git
14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第五部分 371-424題)github
371.是否能夠在控制檯中調試 HTML 元素？
是的，能夠像檢查元素同樣在控制檯中獲取和調試 HTML 元素。web
const element = document.getElementsByTagName("body")[0];
console.log(element);
複製代碼
它在控制檯中打印 HTML 元素，面試
372.如何使用控制檯對象以表格格式顯示數據？
所述console.table()用於以表格形式顯示在控制檯的數據可視化複雜的數組或對象。
const users = [{ "name":"Haiyong", "id": 1, "city": "Beijing"}, { "name":"Max", "id": 2, "city": "London"}, { "name":"CSDN", "id": 3, "city": "Paris"} ];
console.table(users);
複製代碼
以表格形式可視化的數據，
==注意==：請記住，
console.table()IE 不支持。
373.你如何驗證參數是否爲數字？
IsNaN 和 isFinite 方法的組合用於確認參數是否爲數字。
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
複製代碼
374.你如何建立複製到剪貼板按鈕？
您須要選擇輸入元素的內容（使用 .select() 方法）並使用 execCommand 執行復制命令（即 execCommand('copy')）。您還能夠執行其餘系統命令，如剪切和粘貼。
document.querySelector("#copy-button").onclick = function() {
// 選擇內容
document.querySelector("#copy-input").select();
// 複製到剪貼板
document.execCommand('copy');
};
複製代碼
375.獲取時間戳的快捷方式是什麼？
您可使用new Date().getTime()來獲取當前時間戳。有一個替代的快捷方式來獲取值。
console.log(+new Date());
console.log(Date.now());
複製代碼
376.你如何展平多維數組？
使用 Spread 運算符展平二維數組是微不足道的。
const biDimensionalArr = [11, [22, 33], [44, 55], [66, 77], 88, 99];
const flattenArr = [].concat(...biDimensionalArr); // [11, 22, 33, 44, 55,
複製代碼
可是您能夠經過遞歸調用使其適用於多維數組，
function flattenMultiArray(arr) {
const flattened = [].concat(...arr);
return flattened.some(item => Array.isArray(item)) ? flattenMultiArray(flattened) : flattened;
}
const multiDimensionalArr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenMultiArray(multiDimensionalArr); // [11, 22, 33, 44, 55, 66, 77, 88, 99]
複製代碼
377.什麼是最簡單的多條件檢查？
您可使用indexOf將輸入與多個值進行比較，而不是將每一個值都做爲一個條件進行檢查。
// Verbose approach
if (input === 'first' || input === 1 || input === 'second' || input === 2) {
someFunction();
}
// Shortcut
if (['first', 1, 'second', 2].indexOf(input) !== -1) {
someFunction();
}
複製代碼
378.你如何捕獲瀏覽器後退按鈕？
該window.onbeforeunload方法用於捕獲瀏覽器後退按鈕事件。這有助於警告用戶丟失當前數據。
window.onbeforeunload = function() {
alert("You work will be lost");
};
複製代碼
379.如何禁用網頁中的右鍵單擊？
能夠經過從oncontextmenubody 元素上的屬性返回 false 來禁用頁面上的右鍵單擊。
<body oncontextmenu="return false;">
複製代碼
380.什麼是包裝對象？
像字符串、數字和布爾值這樣的原始值沒有屬性和方法，可是當您嘗試對它們執行操做時，它們會被臨時轉換或強制轉換爲對象（包裝對象）。例如，若是對原始字符串值應用 toUpperCase() 方法，它不會拋出錯誤而是返回字符串的大寫。
let name = "csdn";
console.log(name.toUpperCase()); // 在後臺處理爲 console.log(new String(name).toUpperCase());
複製代碼
即，除 null 和 undefined 以外的每一個原語都有包裝對象，包裝對象列表是 String、Number、Boolean、Symbol 和 BigInt。
381.什麼是 AJAX？
AJAX 表明 Asynchronous JavaScript and XML，它是一組用於異步顯示數據的相關技術（HTML、CSS、JavaScript、XMLHttpRequest API 等）。即咱們能夠在不從新加載網頁的狀況下向服務器發送數據並從服務器獲取數據。
382.處理異步代碼的不一樣方式有哪些？
下面是處理異步代碼的不一樣方法的列表。
1.回調 2.承諾 3.異步/等待 4.第三方庫，如 async.js、bluebird 等
383.如何取消提取請求？
直到幾天前，原生 promise 的一個缺點是沒法直接取消 fetch 請求。可是新AbortController的 js 規範容許您使用信號來停止一個或多個 fetch 調用。
取消獲取請求的基本流程以下，
1.建立AbortController實例 2.獲取實例的信號屬性並將信號做爲信號的獲取選項傳遞 3.調用 AbortController 的 abort 屬性來取消全部使用該信號的獲取 例如，讓咱們將相同的信號傳遞給多個 fetch 調用將取消全部使用該信號的請求，
const controller = new AbortController();
const { signal } = controller;
fetch("http://localhost:8000", { signal }).then(response => {
console.log(`Request 1 is complete!`);
}).catch(e => {
if(e.name === "AbortError") {
// 咱們知道它已被取消！
}
});
fetch("http://localhost:8000", { signal }).then(response => {
console.log(`Request 2 is complete!`);
}).catch(e => {
if(e.name === "AbortError") {
// 咱們知道它已被取消！
}
});
// 等待 2 秒以停止兩個請求
setTimeout(() => controller.abort(), 2000);
複製代碼
384.什麼是網絡語音API？
Web 語音 API 用於使現代瀏覽器可以識別和合成語音（即，將語音數據轉換爲 Web 應用程序）。該 API 由 W3C 社區於 2012 年引入。它有兩個主要部分，
SpeechRecognition（異步語音識別或 Speech-to-Text）：它提供了從音頻輸入中識別語音上下文並作出相應響應的能力。這是經過SpeechRecognition接口訪問的。下面的例子展現瞭如何使用這個 API 從語音中獲取文本，
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; // webkitSpeechRecognition for Chrome and SpeechRecognition for FF
const recognition = new window.SpeechRecognition();
recognition.onresult = (event) => { // SpeechRecognitionEvent type
const speechToText = event.results[0][0].transcript;
console.log(speechToText);
}
recognition.start();
複製代碼
在此 API 中，瀏覽器將要求您授予使用麥克風的權限
SpeechSynthesis（文本到語音）：它提供了從音頻輸入中識別語音上下文並作出響應的能力。這是經過SpeechSynthesis接口訪問的。例如，下面的代碼用於從文本中獲取語音/語音，
if('speechSynthesis' in window){
var speech = new SpeechSynthesisUtterance('Hello World!');
speech.lang = 'en-US';
window.speechSynthesis.speak(speech);
}
複製代碼
上面的例子能夠在 chrome(33+) 瀏覽器的開發者控制檯上進行測試。
==注意==： 這個 API 仍然是一個工做草案，只在 Chrome 和 Firefox 瀏覽器中可用（固然 Chrome 只實現了規範）
385.什麼是最小超時限制？
瀏覽器和 NodeJS javascript 環境都會以大於 0 毫秒的最小延遲進行節流。這意味着即便設置 0 毫秒的延遲也不會當即發生。
瀏覽器：它們的最小延遲爲 4 毫秒。當因爲回調嵌套（特定深度）或在必定數量的連續間隔後觸發連續調用時，會發生此限制。
==注意==：舊版瀏覽器的最小延遲爲 10 毫秒。
Nodejs：它們的最小延遲爲 1 毫秒。當延遲大於 2147483647 或小於 1 時會發生 此限制。解釋此超時限制行爲的最佳示例是如下代碼片斷的順序。
function runMeFirst() {
console.log('My script is initialized');
}
setTimeout(runMeFirst, 0);
console.log('Script loaded');
複製代碼
而且輸出將在
Script loaded
My script is initialized
複製代碼
若是不使用setTimeout，日誌的順序將是順序的。
function runMeFirst() {
console.log('My script is initialized');
}
runMeFirst();
console.log('Script loaded');
複製代碼
輸出是，
My script is initialized
Script loaded
複製代碼
386.你如何在現代瀏覽器中實現零超時？
因爲大於 0ms 的最小延遲，您不能使用 setTimeout(fn, 0) 當即執行代碼。可是您可使用 window.postMessage() 來實現此行爲。
387.事件循環中的任務是什麼？
任務是任何 javascript 代碼/程序，它被安排經過標準機制運行，例如最初開始運行程序、運行事件回調或觸發間隔或超時。全部這些任務都安排在一個任務隊列中。
如下是將任務添加到任務隊列的用例列表，
1.當一個新的 javascript 程序直接從控制檯執行或由 <script> 元素運行時，該任務將被添加到任務隊列中。 2.當事件觸發時，事件回調添加到任務隊列 3.當達到 setTimeout 或 setInterval 時，將相應的回調添加到任務隊列中
388.什麼是微任務？
微任務是須要在當前正在執行的任務/微任務完成後當即執行的 javascript 代碼。它們本質上是一種阻塞。即，主線程將被阻塞，直到微任務隊列爲空。
微任務的主要來源是 Promise.resolve、Promise.reject、MutationObservers、IntersectionObservers 等
==注意==：全部這些微任務都在事件循環的同一輪中處理。
389.什麼是不一樣的事件循環？
390.queueMicrotask 的目的是什麼？
391.你如何在 typescript 文件中使用 javascript 庫？
衆所周知，並不是全部 JavaScript 庫或框架都有 TypeScript 聲明文件。可是若是你仍然想在咱們的 TypeScript 文件中使用庫或框架而不會出現編譯錯誤，惟一的解決方案是declare關鍵字和變量聲明。例如，假設您有一個名爲的庫customLibrary，它沒有 TypeScript 聲明，而且customLibrary在全局命名空間中調用了一個命名空間。您能夠在打字稿代碼中使用這個庫，以下所示，
declare var customLibrary;
複製代碼
在運行時，typescript 會將類型customLibrary做爲any類型提供給變量。不使用聲明關鍵字的另外一種選擇以下
var customLibrary: any;
複製代碼
392.promises 和 observables 有什麼區別？
表格形式的一些主要區別
| promises | observables |
|---|---|
| 一次只發出一個值 | 在一段時間內發出多個值（從 0 到多個的值流） |
| 天生渴望；他們將被當即調用 | 天性懶惰；他們須要調用訂閱 |
| Promise 老是異步的，即便它當即解決了 | Observable 能夠是同步的也能夠是異步的 |
| 不提供任何操做符 | 提供map、forEach、filter、reduce、retry、retryWhen等操做符 |
| 不能取消 | 使用 unsubscribe() 方法取消 |
393.什麼是堆？
堆（或內存堆）是咱們定義變量時存放對象的內存位置。即，這是全部內存分配和取消分配發生的地方。堆和調用棧都是 JS 運行時的兩個容器。
每當運行時遇到代碼中的變量和函數聲明時，它都會將它們存儲在堆中。
394.什麼是事件表？
事件表是一種 數據結構，用於存儲和跟蹤將在一段時間間隔後或在某些 API 請求解析後異步執行的全部事件。即，每當您調用 setTimeout 函數或調用異步操做時，它都會被添加到事件表中。
它不會自行執行功能。事件表的主要目的是跟蹤事件並將它們發送到事件隊列，以下圖所示。
395.什麼是微任務隊列？
Microtask Queue 是一個新的隊列，全部由 promise 對象發起的任務都在回調隊列以前獲得處理。
微任務隊列在下一個渲染和繪製做業以前處理。可是，若是這些微任務運行很長時間，則會致使視覺質量降低。
396.shim 和 polyfill 有什麼區別？
shim 是一個庫，它爲舊環境帶來新的 API，僅使用該環境的手段。它不必定限於 Web 應用程序。例如，es5-shim.js 用於在舊瀏覽器（主要是 IE9 以前）上模擬 ES5 功能。
而 polyfill 是一段代碼（或插件），它提供您（開發人員）但願瀏覽器本地提供的技術。
簡單來講，polyfill 是瀏覽器 API 的墊片。
397.你如何檢測原始或非原始值類型？
在 JavaScript 中，原始類型包括 boolean、string、number、BigInt、null、Symbol 和 undefined。而非原始類型包括對象。可是您可使用如下功能輕鬆識別它們，
var myPrimitive = 30;
var myNonPrimitive = {};
function isPrimitive(val) {
return Object(val) !== val;
}
isPrimitive(myPrimitive);
isPrimitive(myNonPrimitive);
複製代碼
若是該值是原始數據類型，則 Object 構造函數爲該值建立一個新的包裝器對象。可是若是該值是非原始數據類型（一個對象），則 Object 構造函數將給出相同的對象。
398.什麼是Babel ？
Babel 是一個 JavaScript 轉譯器，用於在當前和舊瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換爲向後兼容的 JavaScript 版本。下面列出了一些主要功能，
1.轉換語法 2.目標環境中缺乏的 Polyfill 功能（使用@babel / polyfill） 3.源代碼轉換（或 codemods）
399.Node.js 是徹底單線程的嗎？
Node 是單線程的，可是 Node.js 標準庫中包含的一些函數（例如 fs 模塊函數）不是單線程的。即，它們的邏輯在 Node.js 單線程以外運行，以提升程序的速度和性能。
400.可觀察對象的常見用例是什麼？
一些最多見的 observable 用例是帶有推送通知、用戶輸入更改、重複間隔等的網絡套接字
401.什麼是 RxJS？
RxJS (Reactive Extensions for JavaScript) 是一個使用 observables 實現反應式編程的庫，它能夠更容易地編寫異步或基於回調的代碼。它還提供了用於建立和使用 observable 的實用函數。
402.函數構造函數和函數聲明有什麼區別？
建立的函數Function constructor不會爲其建立上下文建立閉包，但它們始終在全局範圍內建立。即，函數只能訪問它本身的局部變量和全局範圍變量。而函數聲明也能夠訪問外部函數變量（閉包）。
讓咱們經過一個例子來看看這種差別，
函數構造器：
var a = 100;
function createFunction() {
var a = 200;
return new Function('return a;');
}
console.log(createFunction()()); // 100
複製代碼
函數聲明：
var a = 100;
function createFunction() {
var a = 200;
return function func() {
return a;
}
}
console.log(createFunction()()); // 200
複製代碼
403.什麼是短路狀態？
短路條件適用於編寫簡單 if 語句的精簡方式。讓咱們用一個例子來演示這個場景。若是您想登陸帶有身份驗證條件的門戶，則表達式以下，
if (authenticate) {
loginToPorta();
}
複製代碼
因爲 javascript 邏輯運算符從左到右計算，所以可使用 && 邏輯運算符簡化上述表達式
authenticate && loginToPorta();
複製代碼
404.調整數組大小的最簡單方法是什麼？
數組的長度屬性可用於快速調整數組大小或清空數組。讓咱們在數字數組上應用 length 屬性以將元素數量從 5 調整爲 2，
var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
array.length = 2;
console.log(array.length); // 2
console.log(array); // [1,2]
複製代碼
數組也能夠清空
var array = [1, 2, 3, 4, 5];
array.length = 0;
console.log(array.length); // 0
console.log(array); // []
複製代碼
405.什麼是可觀察的？
Observable 基本上是一個函數，它能夠隨着時間的推移同步或異步地將值流返回給觀察者。消費者能夠經過調用subscribe()方法獲取值。
讓咱們看一個 Observable 的簡單例子
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
setTimeout(() => {
observer.next('Message from a Observable!');
}, 3000);
});
observable.subscribe(value => console.log(value));
複製代碼
注意： Observable 還不是 JavaScript 語言的一部分，但建議將它們添加到語言中
406.函數聲明和類聲明有什麼區別？
函數聲明和類聲明之間的主要區別是hoisting. 函數聲明被提高，但不是類聲明。
Classes:
const user = new User(); // ReferenceError
class User {}
複製代碼
構造函數：
const user = new User(); // No error
function User() {
}
複製代碼
407.什麼是異步函數？
異步函數是一個用async關鍵字聲明的函數，它能夠經過避免承諾鏈以更簡潔的風格編寫異步的、基於承諾的行爲。這些函數能夠包含零個或多個await表達式。
讓咱們看一個下面的異步函數示例，
async function logger() {
let data = await fetch('http://someapi.com/users'); // 暫停直到 fetch 返回
console.log(data)
}
logger();
複製代碼
它基本上是 ES2015 承諾和生成器的語法糖。
408.你如何防止 promises swallowing errors?
在使用異步代碼時，JavaScript 的 ES6 承諾可讓您的生活變得更輕鬆，而無需每兩行都有回調金字塔和錯誤處理。可是 Promises 有一些陷阱，最大的一個是默認吞下錯誤。
假設您但願在如下全部狀況下向控制檯打印錯誤，
Promise.resolve('promised value').then(function() {
throw new Error('error');
});
Promise.reject('error value').catch(function() {
throw new Error('error');
});
new Promise(function(resolve, reject) {
throw new Error('error');
});
複製代碼
可是有許多現代 JavaScript 環境不會打印任何錯誤。你能夠用不一樣的方式解決這個問題，
1.在每一個鏈的末尾添加 catch 塊：您能夠在每一個承諾鏈的末尾添加 catch 塊
Promise.resolve('promised value').then(function() {
throw new Error('error');
}).catch(function(error) {
console.error(error.stack);
});
複製代碼
可是很難爲每一個承諾鏈打字，並且也很冗長。
2.添加完成方法：您能夠用完成方法替換第一個解決方案的 then 和 catch 塊
Promise.resolve('promised value').done(function() {
throw new Error('error');
});
複製代碼
假設您想使用 HTTP 獲取數據，而後異步處理結果數據。您能夠編寫done以下塊，
getDataFromHttp()
.then(function(result) {
return processDataAsync(result);
})
.done(function(processed) {
displayData(processed);
});
複製代碼
未來，若是處理庫 API 更改成同步，則能夠刪除done塊，以下所示，
getDataFromHttp()
.then(function(result) {
return displayData(processDataAsync(result));
})
複製代碼
而後您忘記添加done塊到then塊會致使無提示錯誤。
3.經過 Bluebird 擴展 ES6 Promises： Bluebird 擴展了 ES6 Promises API 以免第二個解決方案中的問題。這個庫有一個「默認」的 onRejection 處理程序，它將把全部錯誤從被拒絕的 Promise 打印到 stderr。安裝後，您能夠處理未處理的拒絕
Promise.onPossiblyUnhandledRejection(function(error){
throw error;
});
複製代碼
並丟棄拒絕，只需用空捕獲處理它
Promise.reject('error value').catch(function() {});
複製代碼
409.什麼是 deno ？
Deno 是一個簡單、現代且安全的 JavaScript 和 TypeScript 運行時，它使用 V8 JavaScript 引擎和 Rust 編程語言。
410.你如何在javascript中使對象可迭代？
默認狀況下，普通對象不可迭代。可是您能夠經過Symbol.iterator在其上定義屬性來使對象可迭代。
讓咱們用一個例子來證實這一點，
const collection = {
one: 1,
two: 2,
three: 3,
[Symbol.iterator]() {
const values = Object.keys(this);
let i = 0;
return {
next: () => {
return {
value: this[values[i++]],
done: i > values.length
}
}
};
}
};
const iterator = collection[Symbol.iterator]();
console.log(iterator.next()); // → {value: 1, done: false}
console.log(iterator.next()); // → {value: 2, done: false}
console.log(iterator.next()); // → {value: 3, done: false}
console.log(iterator.next()); // → {value: undefined, done: true}
複製代碼
可使用生成器函數簡化上述過程，
const collection = {
one: 1,
two: 2,
three: 3,
[Symbol.iterator]: function * () {
for (let key in this) {
yield this[key];
}
}
};
const iterator = collection[Symbol.iterator]();
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
複製代碼
411.什麼是正確的尾調用？
首先，在談論「正確的尾調用」以前，咱們應該先了解尾調用。尾調用是做爲調用函數的最終動做執行的子例程或函數調用。而適當的尾調用 (PTC)是一種技術，當函數調用是尾調用時，程序或代碼不會爲遞歸建立額外的堆棧幀。
例如，下面的經典或階乘函數的頭遞歸依賴於每一個步驟的堆棧。每一步都須要處理到n * factorial(n - 1)
function factorial(n) {
if (n === 0) {
return 1
}
return n * factorial(n - 1)
}
console.log(factorial(5)); //120
複製代碼
可是，若是您使用尾遞歸函數，它們會在不依賴堆棧的狀況下繼續將所需的全部數據傳遞到遞歸中。
function factorial(n, acc = 1) {
if (n === 0) {
return acc
}
return factorial(n - 1, n * acc)
}
console.log(factorial(5)); //120
複製代碼
上述模式返回與第一個相同的輸出。可是累加器將 total 做爲參數進行跟蹤，而無需在遞歸調用中使用堆棧內存。
412.你如何檢查一個對象是不是一個承諾？
若是你不知道一個值是不是一個承諾，包裝該值做爲Promise.resolve(value)它返回一個承諾
function isPromise(object){
if(Promise && Promise.resolve){
return Promise.resolve(object) == object;
}else{
throw "Promise not supported in your environment"
}
}
var i = 1;
var promise = new Promise(function(resolve,reject){
resolve()
});
console.log(isPromise(i)); // false
console.log(isPromise(p)); // true
複製代碼
另外一種方法是檢查.then()處理程序類型
function isPromise(value) {
return Boolean(value && typeof value.then === 'function');
}
var i = 1;
var promise = new Promise(function(resolve,reject){
resolve()
});
console.log(isPromise(i)) // false
console.log(isPromise(promise)); // true
複製代碼
413.如何檢測函數是否被調用爲構造函數？
您可使用new.target僞屬性來檢測函數是做爲構造函數（使用 new 運算符）仍是做爲常規函數調用調用的。
若是使用 new 運算符調用構造函數或函數，則 new.target 返回對構造函數或函數的引用。 對於函數調用，new.target 是未定義的。
function Myfunc() {
if (new.target) {
console.log('called with new');
} else {
console.log('not called with new');
}
}
new Myfunc(); // called with new
Myfunc(); // not called with new
Myfunc.call({}); not called with new
複製代碼
414.arguments 對象和rest 參數之間有什麼區別？
arguments 對象和 rest 參數之間有三個主要區別
1.arguments 對象是一個相似數組的對象，但不是一個數組。而rest 參數是數組實例。 2.arguments 對象不支持 sort、map、forEach 或 pop 等方法。而這些方法可用於rest 參數。 3.rest 參數只是那些沒有被賦予單獨名稱的參數，而參數對象包含傳遞給函數的全部參數
415.擴展運算符和rest 參數之間有什麼區別？
Rest 參數將全部剩餘元素收集到一個數組中。而Spread運算符容許將可迭代對象（數組/對象/字符串）擴展爲單個參數/元素。即，Rest 參數與擴展運算符相反。
416.有哪些不一樣種類的 generators(生成器)？
有五種生成器，
1.生成器函數聲明：
function* myGenFunc() {
yield 1;
yield 2;
yield 3;
}
const genObj = myGenFunc();
複製代碼
2.生成器函數表達式：
const myGenFunc = function* () {
yield 1;
yield 2;
yield 3;
};
const genObj = myGenFunc();
複製代碼
3.對象字面量中的生成器方法定義：
const myObj = {
* myGeneratorMethod() {
yield 1;
yield 2;
yield 3;
}
};
const genObj = myObj.myGeneratorMethod();
複製代碼
4.class 中的生成器方法定義：
class MyClass {
* myGeneratorMethod() {
yield 1;
yield 2;
yield 3;
}
}
const myObject = new MyClass();
const genObj = myObject.myGeneratorMethod();
複製代碼
5.生成器做爲計算屬性：
const SomeObj = {
*[Symbol.iterator] () {
yield 1;
yield 2;
yield 3;
}
}
console.log(Array.from(SomeObj)); // [ 1, 2, 3 ]
複製代碼
417.什麼是內置可迭代對象？
下面是 javascript 中內置的可迭代對象列表，
1.數組和類型數組 2.字符串：迭代每一個字符或 Unicode 代碼點 3.Maps：迭代其鍵值對 4.集合：迭代它們的元素 5.參數：函數中相似數組的特殊變量 6.NodeList 等 DOM 集合
418.for…of 和 for…in 語句之間有什麼區別？
for...in 和 for...of 語句都遍歷 js 數據結構。惟一的區別在於它們迭代的內容：
for..in 迭代對象的全部可枚舉屬性鍵 for..of 迭代可迭代對象的值。 讓咱們用一個例子來解釋這種差別，
let arr = ['a', 'b', 'c'];
arr.newProp = 'newVlue';
// key 是屬性鍵
for (let key in arr) {
console.log(key);
}
// value 是屬性值
for (let value of arr) {
console.log(value);
}
複製代碼
因爲 for..in 循環遍歷對象的鍵，第一個循環在遍歷數組對象時記錄 0、一、2 和 newProp。for..of 循環遍歷 arr 數據結構的值並在控制檯中記錄 a、b、c。
419.如何定義實例和非實例屬性？
Instance 屬性必須在類方法中定義。例如，名稱和年齡屬性定義的內部構造函數以下，
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
複製代碼
可是必須在 ClassBody 聲明以外定義 Static(class) 和原型數據屬性。讓咱們爲 Person 類分配年齡值，以下所示，
Person.staticAge = 30;
Person.prototype.prototypeAge = 40;
複製代碼
420.isNaN 和 Number.isNaN 有什麼區別？
1.isNaN：全局函數isNaN將參數轉換爲數字，若是結果值爲 NaN，則返回 true。 2.Number.isNaN：此方法不轉換參數。但當類型爲 Number 且值爲 NaN 時，它返回 true。 讓咱們經過一個例子來看看區別，
isNaN(‘hello’); // true
Number.isNaN('hello'); // false
複製代碼
421.如何在沒有任何額外括號的狀況下調用 IIFE？
當即調用函數表達式（IIFE）須要一對括號來包裝包含語句集的函數。
(function(dt) {
console.log(dt.toLocaleTimeString());
})(new Date());
複製代碼
因爲 IIFE 和 void 運算符都會丟棄表達式的結果，所以您能夠避免使用void operatorfor IIFE的額外括號，以下所示，
void function(dt) {
console.log(dt.toLocaleTimeString());
}(new Date());
複製代碼
422.能夠在 switch case 中使用表達式嗎？
您可能已經看到在 switch 條件中使用的表達式，但也能夠經過爲 switch 條件分配真值來用於 switch case。讓咱們以基於溫度的天氣情況爲例，
const weather = function getWeather(temp) {
switch(true) {
case temp < 0: return 'freezing';
case temp < 10: return 'cold';
case temp < 24: return 'cool';
default: return 'unknown';
}
}(10);
複製代碼
423.忽略promise 錯誤的最簡單方法是什麼？
忽略promise 錯誤的最簡單和最安全的方法是使該錯誤無效。這種方法也是 ESLint 友好的。
await promise.catch(e => void e);
複製代碼
424.如何使用 CSS 設置控制檯輸出的樣式？
您可使用 CSS 格式內容說明符 %c 將 CSS 樣式添加到控制檯輸出。控制檯字符串消息能夠附加在另外一個參數中的說明符和 CSS 樣式以後。讓咱們使用 console.log 和 CSS 說明符打印紅色文本，以下所示，
console.log("%cThis is a red text", "color:red");
複製代碼
還能夠爲內容添加更多樣式。好比上面的文字能夠修改font-size
console.log("%cThis is a red text with bigger font", "color:red; font-size 複製代碼
我已經寫了很長一段時間的技術博客，這是個人一篇面試題文章。但願大家會喜歡！
更多相關文章及個人聯繫方式我放在這裏：
github.com/wanghao221
gitee.com/haiyongcsdn…
若是你真的從這篇文章中學到了一些新東西，喜歡它，收藏它並與你的小夥伴分享。🤗最後，不要忘了❤或📑支持一下哦
- 1. 14萬字 | 400 多道 JavaScript 面試題 🎓 有答案 🌠(第一部分 1-100題)
- 2. 208道面試題，答案
- 3. 95道MongoDB面試題（含答案），1萬字詳細解析！
- 4. 轉 Java 208道面試題及部分答案 補充部分答案
- 5. 32道PHP面試題（附答案）
- 6. Java基礎40道面試題答案
- 7. SQL面試題與答案
- 8. 315道Python面試題答案
- 9. 【面試】web前端經典面試題試題及答案-javaScript
- 10. 315面試題+答案
- 更多相關文章...
- • jQuery Mobile 主題 - jQuery Mobile 教程
- • Markdown 標題 - Markdown 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • PHP Ajax 跨域問題最佳解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用