（答案持續(xù)更新...）

1.簡述同步和異步的區(qū)別

js是一門單線程語言，所謂"單線程"，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執(zhí)行后面一個任務，以此類推。如果一個任務耗時過長，那么后面的任務就必須一直等待下去，會拖延整個程序，常見瀏覽器無反應，可能就是一段代碼死循環(huán)，造成程序卡住在這個位置，無法繼續(xù)
為了解決這個問題，js的執(zhí)行模式分為兩種：同步和異步。
"同步模式"就是上一段的模式，后一個任務等待前一個任務結束，然后再執(zhí)行，程序的執(zhí)行順序與任務的排列順序是一致的、同步的；

"異步模式"則完全不同，每一個任務有一個或多個回調函數（callback），前一個任務結束后，不是執(zhí)行后一個任務，而是執(zhí)行回調函數，后一個任務則是不等前一個任務結束就執(zhí)行，所以程序的執(zhí)行順序與任務的排列順序是不一致的、異步的。

具體來說，異步運行機制如下： （1）所有同步任務都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。 （2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。 （3）一旦"執(zhí)行棧"中的所有同步任務執(zhí)行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。 （4）主線程不斷重復上面的第三步

2.怎么添加、移除、復制、創(chuàng)建、和查找節(jié)點

（1）創(chuàng)建新節(jié)點

createDocumentFragment() //創(chuàng)建一個DOM片段

createElement() //創(chuàng)建一個具體的元素

createTextNode() //創(chuàng)建一個文本節(jié)點

var para=document.createElement("p"); //創(chuàng)建新的 <p> 元素 var node=document.createTextNode("這是新段落。"); //創(chuàng)建了一個文本節(jié)點 para.appendChild(node); //向 <p> 元素追加這個文本節(jié)點 var element=document.getElementById("div1");//向一個已有的元素追加這個新元素 element.appendChild(para); //向這個已有的元素追加新元素

（2）添加、移除、替換、之前插入、之后插入、復制

appendChild()、removeChild()、replaceChild()、insertBefore()、insertAfter()、cloneNode()

（3）查找

document.getElementsByTagName("") //通過標簽名稱

document.getElementsByName("") //通過元素的Name屬性的值

document.getElementById("") //通過元素Id，唯一性

document.getElementsByClassName(""); //通過類查找

document.querySelector("")

3.實現一個函數clone 可以對Javascript中的五種主要數據類型（Number、string、Object、Array、Boolean）進行復制

function clone(obj) {var o;switch (typeof obj) {case 'undefined':break;case 'string':o = obj + '';break;case 'number':o = obj - 0;break;case 'boolean':o = obj;break;case 'object': //object分為兩種，一種為Object，一種為Arrayif (obj === null) {o = null} else {if (Object.prototype.toString.call(obj).slice(8, -1) === 'Array') {o = [];for (var i = 0; i < obj.length; i++) {o.push(clone(obj[i]))}} else {o = {};for (var k in obj) {o[k] = clone(obj[k])}}}break;default:o = obj;break;}return o;}

4.如何消除一個數組里面重復的元素

// 方法一：Array.prototype.clearRepeat = function () {var arr = []; //定義一個臨時數組for (var i = 0; i < this.length; i++) {//通過遍歷判斷當前數組下標為i的元素是否保存到臨時數組中//如果保存，則跳過，否則保存到臨時數組if (arr.indexOf(this[i]) == -1) {arr.push(this[i]);}}return arr;};var test = [1, 6, 8, 8, 9, 9, 9, "a", "a"];test.clearRepeat(); //結果為[1, 6, 8, 9, "a"]// 方法二：Array.prototype.clearRepeat = function () {var arr = [this[0]]; //直接定義結果數組for (var i = 1; i < this.length; i++) { //從第二項開始遍歷當前數組//對元素進行判斷://如果當前數組元素在此數組中第一次出現的位置不是i//則第i項是重復的，否則直接存入結果數組if (this.indexOf(this[i]) == i) {arr.push(this[i]);}}return arr;};var test = [1, 6, 8, 8, 9, 9, 9, "a", "a"];test.clearRepeat(); //結果為[1, 6, 8, 9, "a"] // 上面兩種方法不推薦使用，因為indexOf()這個函數在執(zhí)行的時候每次都會遍歷一次數組， //對性能影響比較大。比較適合小數據量的數組。//第三種使用的是hash表，把已經出現過的元素通過下標形式寫入一個Object中， //下標的引用要比數組的indexOf()方法搜索節(jié)省時間Array.prototype.clearRepeat = function() {var h = {}; //定義一個hash表var arr = []; //定義一個臨時數組for (var i = 0; i < this.length; i++) {if (!h[this[i]]) {h[this[i]] = true;arr.push(this[i]);}}return arr;};var test = [1, 6, 8, 8, 9, 9, 9, "1", "a"];console.log(test.clearRepeat()) //結果為[1, 6, 8, 9, "a"] //此方法有缺陷，作為下標在轉換后會變成字符串， //那么對于1和“1”這樣不同類型的值會對應到同一個下標而被去重。例如obj[1]和obj['1'],是相同的Array.prototype.clearRepeat = function() {var h = {}; //定義一個hash表var arr = []; //定義一個臨時數組for (var i = 0; i < this.length; i++) {var type = typeof this[i];if (!h[this[i] + type]) {h[this[i] + type] = true;arr.push(this[i]);}}return arr;};//不用hash表的解決辦法嗎，使用原始sort()排序后相鄰兩個數值進行比較Array.prototype.clearRepeat = function() {this.sort(); //數組排序var arr = [this[0]]; //定義結果數組for (var i = 1; i < this.length; i++) { //從第二項開始遍歷當前數組//判斷兩個相鄰元素是否相等，如果相等說明數據重復，否則將元素寫入結果數組if (this[i] !== arr[arr.length - 1]) {arr.push(this[i])}}return arr}var test = [1, 6, 8, 8, 9, 9, 9, "1", "a"];

5.寫一個返回閉包的函數

1.閉包函數是指有權訪問另一個函數作用域中的變量的函數 2.創(chuàng)建閉包函數最常見的方式是在一個函數內創(chuàng)建另一個函數，通過另一個函數訪問這個函數的局部變量 3.閉包的特點：1函數嵌套函數，2 函數內部可以引用外部的參數和變量 3 參數和變量不會被垃圾回收機制回收4.閉包的優(yōu)點：1 希望一個變量長期駐扎在內存中 * 2 避免全局變量的污染 * 3 私有變量存在5.閉包的實現 1：函數嵌套函數 * 2 外層函數返回內層函數 * 3 外面有一全局變量接受外層函數6.缺點： 閉包使用不當，會造成內存污染，正常無法被垃圾回收機制清掉，IE低版本會造成內存泄漏function fun1() {var num = 1;return function () {num++;return num;}}var s = fun1()// console.log(s());// // 自執(zhí)行函數 的閉包var fun3 = function () {var num = 1;return {b: 6,sum: function () {return num + this.b}}}();// console.log(fun3.sum());/** 把函數名當參數調用* 回調函數** */function a() {console.log('a');}function b() {console.log('b');}function c(fun) {fun()}// c(a), c(b)// 循環(huán)var num = 0;function a(fun) {console.log(123);fun(fun)}function a2(fun) {num++;console.log(num);if (num > 10) return;fun(a2)}a(a2)

6.使用遞歸完成1到100的累加

function add(num) {if (num == 1) {return num;} else {return num + add(num - 1)}}console.log(add(100));

7.Javascript有哪幾種數據類型

1，基本類型：字符串類型（string），數字類型（number），布爾類型（boolean）
2，復雜類型：數組類型（array），對象類型（object），函數類型（function），正則類型（regexp）
3，空類型：undefine 和 null

8.如何判斷數據類型

1、typeof

typeof 123, //"number"typeof 'dsfsf', //"string"typeof false, //"boolean"typeof [1,2,3], //"object"typeof {a:1,b:2,c:3}, //"object"typeof function(){console.log('aaa');}, //"function"typeof undefined, //"undefined"typeof null, //"object"typeof new Date(), //"object"typeof /^[a-zA-Z]{5,20}$/, //"object"typeof new Error() //"object"

Array，Object，null，Date，RegExp，Error這幾個類型都被typeof判斷為object，所以如果想要判斷這幾種類型，就不能使用typeof了。

Number，String，Boolean，Function，undefined，如果想判斷這幾種類型，那就可以使用typeof。

2、instanceof

123 instanceof Number, //false'dsfsf' instanceof String, //falsefalse instanceof Boolean, //false[1,2,3] instanceof Array, //true{a:1,b:2,c:3} instanceof Object, //truefunction(){console.log('aaa');} instanceof Function, //trueundefined instanceof Object, //falsenull instanceof Object, //falsenew Date() instanceof Date, //true/^[a-zA-Z]{5,20}$/ instanceof RegExp, //truenew Error() instanceof Error //true

instanceof運算符需要指定一個構造函數，或者說指定一個特定的類型，它用來判斷這個構造函數的原型是否在給定對象的原型鏈上

Number，String，Boolean沒有檢測出他們的類型，但是如果使用下面的寫法則可以檢測出來

var num = new Number(123); var str = new String('dsfsf'); var boolean = new Boolean(false);

還需要注意null和undefined都返回了false，這是因為它們的類型就是自己本身，并不是Object創(chuàng)建出來它們，所以返回了false。

3、constructor

constructor是prototype對象上的屬性，指向構造函數。根據實例對象尋找屬性的順序，若實例對象上沒有實例屬性或方法時，就去原型鏈上尋找，因此，實例對象也是能使用constructor屬性的。

var num = 123; var str = 'abcdef'; var bool = true; var arr = [1, 2, 3, 4]; var json = {name:'wenzi', age:25}; var func = function(){ console.log('this is function'); } var und = undefined; var nul = null; var date = new Date(); var reg = /^[a-zA-Z]{5,20}$/; var error= new Error();function Person(){} var tom = new Person();// undefined和null沒有constructor屬性 console.log(tom.constructor==Person,num.constructor==Number,str.constructor==String,bool.constructor==Boolean,arr.constructor==Array,json.constructor==Object,func.constructor==Function,date.constructor==Date,reg.constructor==RegExp,error.constructor==Error ); //所有結果均為true

除了undefined和null之外，其他類型都可以通過constructor屬性來判斷類型。

4、toString()

可以通過toString() 來獲取每個對象的類型。為了每個對象都能通過 Object.prototype.toString() 來檢測，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象作為第一個參數，稱為thisArg。

var toString = Object.prototype.toString;toString.call(123); //"[object Number]" toString.call('abcdef'); //"[object String]" toString.call(true); //"[object Boolean]" toString.call([1, 2, 3, 4]); //"[object Array]" toString.call({name:'wenzi', age:25}); //"[object Object]" toString.call(function(){ console.log('this is function'); }); //"[object Function]" toString.call(undefined); //"[object Undefined]" toString.call(null); //"[object Null]" toString.call(new Date()); //"[object Date]" toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]" toString.call(new Error()); //"[object Error]"

總結以上的案例封裝個方法

function gettype(obj) {var type = typeof obj;if (type !== 'object') {return type;}//如果不是object類型的數據，直接用typeof就能判斷出來//如果是object類型數據，準確判斷類型必須使用Object.prototype.toString.call(obj)的方式才能判斷return Object.prototype.toString.call(obj).replace(/^[object (S+)]$/, '$1'); }

5、jQuery中判斷的方法

jQuery.isArray(object) jQuery.isFunction(value) jQuery.isNumeric(value) jQuery.isEmptyObject(obj) jQuery.isPlainObject(value)

9.console.log(1+'2')和console.log(1-'2')的打印結果

‘12’和-1，第一個是因為是字符串拼接，第二種減法運算將2強制轉化為數值類型進行的運算

10.Js的事件委托是什么，原理是什么

事件委托，通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。

事件流包括三個階段：

• 事件捕獲：和冒泡類似，只不過事件的順序相反。即是從上級節(jié)點傳遞到下級節(jié)點
• 目標階段
• 事件冒泡：當下級節(jié)點觸發(fā)某個事件的時候，該事件會逐級向上觸發(fā)上級節(jié)點的同類事件

事件委托就是利用事件冒泡機制實現的

事件委托的優(yōu)點：

• 只需要將同類元素的事件委托給父級或者更外級的元素，不需要給所有元素都綁定事件，減少內存空間占用，提升性能
• 使用事件委托可以自動綁定動態(tài)添加的元素,即新增的節(jié)點不需要主動添加也可以一樣具有和其他元素一樣的事件

11.如何改變函數內部的this指針的指向

常用變量取代: var _this = this

call()的用法

var obj = {text: '我的兩個愛好：' }function getHobby(a, b) {console.log(this.text + a + '和' + b) }getHobby.call(obj, '足球', '羽毛球') // 我的兩個愛好：足球和羽毛球

apply()的用法

var obj = {text: '我的兩個愛好：' }function getHobby(a, b) {console.log(this.text + a + '和' + b) }getHobby.apply(obj, ['足球', '羽毛球']) // 我的兩個愛好：足球和羽毛球

bind()的用法

var obj = {text: '我的兩個愛好：' }function getHobby(a, b) {console.log(this.text + a + '和' + b) }getHobby.bind(obj, '足球', '羽毛球')() // 我的兩個愛好：足球和羽毛球

對比

getHobby.call(obj, '足球', '羽毛球')

getHobby.apply(obj, ['足球', '羽毛球'])

getHobby.bind(obj, '足球', '羽毛球')()

12.列舉幾種解決跨域問題的方式，且說明原理

1.什么是同源策略及其限制內容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。常見跨域場景如下圖所示：

特別說明兩點：

第一：如果是協議和端口造成的跨域問題“前臺”是無能為力的。

第二：在跨域問題上，僅僅是通過“URL的首部”來識別而不會根據域名對應的IP地址是否相同來判斷。“URL的首部”可以理解為“協議, 域名和端口必須匹配”。

這里你或許有個疑問：請求跨域了，那么請求到底發(fā)出去沒有？

跨域并不是請求發(fā)不出去，請求能發(fā)出去，服務端能收到請求并正常返回結果，只是結果被瀏覽器攔截了。你可能會疑問明明通過表單的方式可以發(fā)起跨域請求，為什么 Ajax 就不會?因為歸根結底，跨域是為了阻止用戶讀取到另一個域名下的內容，Ajax 可以獲取響應，瀏覽器認為這不安全，所以攔截了響應。但是表單并不會獲取新的內容，所以可以發(fā)起跨域請求。同時也說明了跨域并不能完全阻止 CSRF，因為請求畢竟是發(fā)出去了。

2、跨域解決方案

1.jsonp

2.cors

3.postMessage

4.websocket

5. Node中間件代理(兩次跨域)

6.nginx反向代理

7.window.name + iframe

8.location.hash + iframe

9.document.domain + iframe

webpack解決跨域

// 后端沒設置跨域時，可使用webpack進行配置// devServer: {// // 代理// proxy: {// // 只要請求地址有'api'都會匹配上// "/api": {// target: "http://132.232.94.151:3005",// ws: true,// // 允許跨域// changeOrigin: true,// pathRewrite: {// "^/api": "" //通過pathRewrite重寫地址，將前綴/api轉為/// }// }// }// }

13.談談垃圾回收機制的方式及內存管理

14.寫一個function ，清除字符串前后的空格

function trim(str) {if (str && typeof str === "string") {return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符} }

15.js實現繼承的方法有哪些

16.判斷一個變量是否是數組，有哪些辦法

17.let ，const ，var 有什么區(qū)別

一）var聲明變量存在變量提升，let和const不存在變量提升

console.log(a); // undefined ===> a已聲明還沒賦值，默認得到undefined值 var a = 100; console.log(b); // 報錯：b is not defined ===> 找不到b這個變量 let b = 10; console.log(c); // 報錯：c is not defined ===> 找不到c這個變量 const c = 10;

二）let、const都是塊級局部變量

{let a = 1 } console.log(a) // undefined

const 的特性和 let 完全一樣，不同的只是

1）聲明時候必須賦值

const a 控制臺報錯

2）只能進行一次賦值，即聲明后不能再修改

const a=1 a=2 控制臺報錯

3）如果聲明的是復合類型數據，可以修改其屬性

18.箭頭函數與普通函數有什么區(qū)別

那么箭頭函數有哪些特點？

• 更簡潔的語法
• 沒有this
• 不能使用new 構造函數
• 不綁定arguments，用rest參數...解決
• 使用call()和apply()調用
• 捕獲其所在上下文的 this 值，作為自己的 this 值
• 箭頭函數沒有原型屬性
• 不能簡單返回對象字面量
• 箭頭函數不能當做Generator函數,不能使用yield關鍵字
• 箭頭函數不能換行

19.隨機取1-10之間的整數

<script> document.write(parseInt(10*Math.random())); 　//輸出0～10之間的隨機整數 document.write(Math.floor(Math.random()*10+1)); 　//輸出1～10之間的隨機整數 function RndNum(n){ var rnd=""; for(var i=0;i<n;i++) rnd+=Math.floor(Math.random()*10); return rnd; } document.write(RndNum(4));　　//輸出指定位數的隨機數的隨機整數引用部分: 1. 從1開始 至 任意值parseInt(Math.random()*上限+1); 2. 從任意值開始 至 任意值parseInt(Math.random()*(上限-下限+1)+下限); function fRandomBy(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()*under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } } document.write(fRandomBy(1,100));　　//輸出指定范圍內的隨機數的隨機整數

20.new操作符具體干了什么

21.Ajax原理

22.模塊化開發(fā)怎么做

23.異步加載Js的方式有哪些

24.xml和 json的區(qū)別

25.webpack如何實現打包的

26.常見web安全及防護原理

27.用過哪些設計模式

28.為什么要同源限制

29.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別

30.javascript有哪些方法定義對象

31.說說你對promise的了解

32.談談你對AMD、CMD的理解

33.web開發(fā)中會話跟蹤的方法有哪些

34.介紹js有哪些內置對象？

35.說幾條寫JavaScript的基本規(guī)范？

36.javascript創(chuàng)建對象的幾種方式？

37.eval是做什么的？

38.null，undefined 的區(qū)別？

39.[“1”, “2”, “3”].map(parseInt) 答案是多少？

40.javascript 代碼中的”use strict”;是什么意思 ? 使用它區(qū)別是什么？

41.js延遲加載的方式有哪些？

42.defer和async

43.說說嚴格模式的限制

44.attribute和property的區(qū)別是什么？

45.ECMAScript6 怎么寫class么，為什么會出現class這種東西?

46.常見兼容性問題

47.函數防抖節(jié)流的原理

48.原始類型有哪幾種？null是對象嗎？

49.為什么console.log(0.2+0.1==0.3) //false

50.說一下JS中類型轉換的規(guī)則？

51.深拷貝和淺拷貝的區(qū)別？如何實現

52.如何判斷this？箭頭函數的this是什么

53.== 和 ===的區(qū)別

54.什么是閉包

55.JavaScript原型，原型鏈 ? 有什么特點？

56.typeof()和instanceof()的用法區(qū)別

57.什么是變量提升

58.all、apply以及bind函數內部實現是怎么樣的

59.為什么會出現setTimeout倒計時誤差？如何減少

60.談談你對JS執(zhí)行上下文棧和作用域鏈的理解

61.new的原理是什么？通過new的方式創(chuàng)建對象和通過字面量創(chuàng)建有什么區(qū)別？

62.prototype 和 proto 區(qū)別是什么？

63.使用ES5實現一個繼承？

64.取數組的最大值（ES5、ES6）

65.ES6新的特性有哪些？

66.promise 有幾種狀態(tài), Promise 有什么優(yōu)缺點 ?

67.Promise構造函數是同步還是異步執(zhí)行，then呢 ?promise如何實現then處理 ?

68.Promise和setTimeout的區(qū)別 ?

69.如何實現 Promise.all ?

70.如何實現 Promise.finally ?

71.如何判斷img加載完成

72.如何阻止冒泡？

73.如何阻止默認事件？

74.ajax請求時，如何解釋json數據

75.json和jsonp的區(qū)別?

76.如何用原生js給一個按鈕綁定兩個onclick事件？

77.拖拽會用到哪些事件

78.document.write和innerHTML的區(qū)別

79.jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？

80.瀏覽器是如何渲染頁面的？

81.$(document).ready()方法和window.onload有什么區(qū)別？

82.jquery中.get()提交和post()提交有區(qū)別嗎？

83.對前端路由的理解？前后端路由的區(qū)別？

84.手寫一個類的繼承

85.XMLHttpRequest：XMLHttpRequest.readyState;狀態(tài)碼的意思

總結

以上是生活随笔為你收集整理的js 数组移除_2020前端面试--常见的js面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。