js、jQuery面試題大全

今天就跟大家聊聊有關js、jQuery面試題大全，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

js、jQuery面試題整理

1.數據類型

基本類型：除Object、String、Number、boolean、null、undefined。

引用類型：object。里面包含的 function、Array、Date。

2.數組方法

join()：數組轉為字符串，可帶中間符號

push()：數組尾部添加內容，返回新長度

pop()：數組尾部刪除一條內容，返回長度

unshift()：數組頭部添加內容，返回新長度

shift()：數組頭部刪除一條內容，返回刪除內容

sort()：數組內容從大到小排序

reverse()：反轉數組內容項

concat()：拼接數組，若無內容復制數組內容

slice()：截取數組，從指定下標開始

splice()：刪除、插入、替換；

• 刪除：2 個參數：要刪除的第一項的位置和要刪除的項數。
• 插入：3 個參數：起始位置、 0（要刪除的項數）和要插入的項。
• 替換：3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。

3.字符串方法

charAt()：根據下標找到對應值

charCodeAt()：通過下標值找到對應字符Unicode編碼

indexOf()：通過字符查找對應下標（首次出現）

lastIndexOf()：通過字符找最后一次出現的下標值

slice()：截取字符串，2個參數，（起始位置，結束位置）

split()：把字符串按分隔符分割成數組

substring()：截取字符串，（起始位置，結束位置）

substr()：截取指定位置和長度的字符串，（起始位置，長度）

toLowerCase()：字符串轉為小寫

toUpperCase()：字符串轉成大寫

trim()：去掉字符串前后所有空格

4.阻止冒泡，阻止默認事件

阻止冒泡：

e.stopPropagation
e.cancleBubble=true（IE）
return false；

阻止默認事件：

e.preventDefault();
e.returnValue=false;（IE）
return false;

5.函數作用域

函數作用域是指在函數內聲明的所有變量在函數體內始終是可見的，可以在整個函數的范圍內使用及復用.

全局變量：聲明在函數外部的變量，在代碼中任何地方都能訪問到的對象擁有全局作用域（所有沒有var直接賦值的變量都屬于全局變量）

局部變量：聲明在函數內部的變量，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域稱為函數作用域。

6.閉包

外部函數訪問內部函數，能夠讀取其他函數內部變量的函數。在本質上，閉包是將函數內部和函數外部連接起來的橋梁。

7.原型鏈

每個對象都有一個原型_proto_，這個原型還可以有它自己的原型，以此類推，形成一個原型鏈。

• prototype屬性，函數的原型對象，它是函數所獨有的，它是從一個函數指向一個對象。
• __proto__是指向構造函數的原型對象，它是對象獨有的。

8.繼承的幾種方式

• 構造函數繼承：在Child里面,把Parent的this指向改為是Child的this指向,從而實現繼承
  缺點:只能解決屬性的繼承,使用屬性的值不重復,但是父級類別的方法不能繼承
• 原型鏈繼承：把Child的原型改為是Parent的實例,從而實現繼承
  缺點:因為Child的原型對象都是New Parent,所以實例化出來的對象的屬性都是一樣的,而且Parent上面的引用類型只要有一個實例對象修改了,其他也會跟著修改.因為他們原型對象都是共用的
• 組合方式繼承（組合前兩種）：
  缺點:父類的原型對象調用了兩次,沒有必要,而且student實例的構造函數是來自于Person
• 還有兩種組合式繼承優化

9.函數創建的方式

函數聲明：

function Fn(){}

字面量/函數表達式：

var m = function(){}

構造函數：

var sum =new Function(“n1”,”n2”,”return n1+n2”)

10.如何解決異步回調地獄

promise、generator、async/await

• promise

let getStuPromise = new Promise((resolve,reject)=>{
	getStu(function(res){
		resolve(res.data);
	});});getStuPromise.then((data)=>{
	// 得到每個學生的課程
	getCourse();
	// 還可以繼續返回promise 對象})

• generator

function *generatorGetStu(){
	let stus = yield getStu();
	// 等到getStu異步執行完才會執行getCourse
	let course = yield getCourse();}

• async/await
  async函數是Generator函數的語法糖。使用 關鍵字async來表示，在函數內部使用await來表示異步

11.事件委托理解

通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件.
原理: 利用冒泡的原理，把事件加到父級上，觸發執行效果。
target 事件屬性可返回事件的目標節點（觸發 該事件的節點）

oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeeName.toLowerCase() == "li"){
        target.style.background = "red";
    }}

12.圖片的懶加載和預加載

• 預加載：常用的是new Image();，設置其src來實現預載，再使用onload方法回調預載完成事件。

function loadImage(url, callback){
	var img = new Image(); //創建一個Image對象，實現圖片預下載
	img.src = url;
	if (img.complete){
		 // 如果圖片已經存在于瀏覽器緩存，直接調用回調函數
		callback.call(img);
		return; // 直接返回，不用再處理onload事件
	}
	img.onload = function (){ 
	//圖片下載完畢時異步調用callback函數。
	callback.call(img);//將回調函數的this替換為Image對象 ，如果你直接用img.width的時候，圖片還沒有完全下載下來
	};}

懶加載：主要目的是作為服務器前端的優化，緩解服務器前端壓力，一次性請求次數減少或延遲請求。
實現方式：

• 1.第一種是純粹的延遲加載，使用setTimeOut、setInterval進行加載延遲.

• 2.第二種是條件加載，符合某些條件，或觸發了某些事件才開始異步下載。

• 3.第三種是可視區加載，即僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。

13.bind,apply,call的區別

都可以改變函數內部this指向
區別：

• callcall傳遞參數aru1， aru2… 形式
• apply傳遞參數必須數組形式[arg]
• bind不會調用函數，可以改變函數內部this指向
• 主要應用場景：
  1、call經常做繼承。
  2、apply經常跟數組有關系。比如借助于數學對象實現數組最大值最小值。
  3、bind不會調用函數，可以改變函數內部this指向。

14.js的節流和防抖

• 防抖：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定時間到來之前，又觸發了事件，就重新開始延時。也就是說當一個用戶一直觸發這個函數，且每次觸發函數的間隔小于既定時間，那么防抖的情況下只會執行一次。
• 節流：當持續觸發事件時，保證在一定時間內只調用一次事件處理函數，意思就是說，假設一個用戶一直觸發這個函數，且每次觸發小于既定值，函數節流會每隔這個時間調用一次。時間戳和定時器
• 區別：防抖是將多次執行變為最后一次執行，節流是將多次執行變為每隔一段時間執行。

15.前端模塊化和組件化

• 模塊化：可復用，側重的功能的封裝，主要是針對Javascript代碼，隔離、組織復制的javascript代碼，將它封裝成一個個具有特定功能的的模塊。
• 組件化：可復用，更多關注的UI部分，頁面的每個部件，比如頭部，彈出框甚至確認按鈕都可以成為一個組件，每個組件有獨立的HTML、css、js代碼。

16.js單線程怎么執行異步操作

Js作為瀏覽器腳本語言，它的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。

js怎么異步：瀏覽器只分配給js一個主線程，用來執行任務（函數），但一次只能執行一個任務，這些任務形成一個任務隊列排隊等候執行，但前端的某些任務是非常耗時的，比如網絡請求，定時器和事件監聽，如果讓他們和別的任務一樣，執行效率會非常的低，甚至導致頁面的假死。

所以，瀏覽器為這些耗時任務開辟了另外的線程，主要包括http請求線程，瀏覽器定時觸發器，瀏覽器事件觸發線程，這些任務是異步的。這些異步任務完成后通過回調函數讓主線程知道。

17.手寫promise函數

三種狀態：pending（過渡）fulfilled（完成）rejected（失?。?/p>

function Promise(exector){
	let _this = this;
	//status表示一種狀態
	let status = “pending”;
	let value = undefined;
	let reason = undefined;
	//成功
	function resolve(value){
		if(status == “pending”){
			_this.value = value;
			_this.status = “resolve”;
		}
	}
	//執行失敗
	function reject(value){
		if(status == “pending”){
			_this.value = value;
			_this.status = “reject”		}
	}
	//異步操作
	try{
		exector(resolve,reject)
	}catch(e){
		reject(e)
	}
	//測試then
	Promise.prototype.then = function(reject,resolve){
		let _this = this;
		if(this.status == “resolve”){
			reject(_this.value)
		}
		if(this.status == “reject”){
			resolve(_this.reason)
		}
	}}//new Promise測試let promise = new Promise((reject,resolve)=>{
	resolve(“return resolve”);});promise.then(data=>{
	console.log(`success${data}`);},err=>{
	console.log(`err${data}`);})

18.數組去重

1.遍歷并兩個對比，splice刪除重復的第二個

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一個等同于第二個，splice方法刪除第二個
                    arr.splice(j,1);
                    j--;
                }
            }
        }return arr;}

2.indexOf

function unique(arr) {
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;}

3.sort

function unique(arr) {
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;}

4.includes （ES6）

function unique(arr) {
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 檢測數組是否有某個值
                    array.push(arr[i]);
              }
    }
    return array}

19.數組排序

• 冒泡排序：

var arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,總共比較次數為arr.length-1次,每次的比較次數為arr.length-1次，依次遞減var temp;for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-1;j++){
        if(arr[j]>arr[j+1]){
            temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }}

• 選擇排序：（相鄰對比）

var arr=[1,23,5,8,11,78,45];var temp;for(var i=0;i<arr.length-1;i++){
    for(var j=i+1;j<arr.length;j++){
        if(arr[i]>arr[j]){
            temp=arr[i];
            arr[i]=arr[j];
            arr[j]=temp;
        }
    }}

• sort()：

var arr=[1,5,7,9,16,2,4];arr.sort(function(a,b){
    return b-a;  //降序排列，return a-b; —>升序排列})  
    //括號里不寫回調函數，則默認按照字母逐位升序排列，結果為[1,16,2,4,5,7,9]

20.去除首尾空格

JavaScript 本身并不提供 trim() 方法，不過可以用正則表達式（其中一種）

if(typeof(String.prototype.trim) === "undefined"){
    String.prototype.trim = function() 
    {
        return String(this).replace(/^\s+|\s+$/g, '');
    };}
 if(" dog  ".trim() === "dog") {
    document.write("去除首尾空格成功");    }

21.解決跨域方案

• jsonp：包含回調函數和數據

//1、使用JS動態生成script標簽，進行跨域操作function handleResponse(response){
    console.log('The responsed data is: '+response.data);
    //處理獲得的Json數據}var script = document.createElement('script');script.src = 'http://www.example.com/data/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);//2、手動生成script標簽function handleResponse(response){
    console.log('The responsed data is: '+response.data);
    //處理獲得的Json數據}<script src="http://www.example.com/data/?callback=handleResponse"></script>//3、使用jQuery進行jsonp操作//jquery會自動生成一個全局函數來替換callback=?中的問號，之后獲取到數據后又會自動銷毀//$.getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。<script>
    $.getJson('http://www.example.com/data/?callback=?',function(jsondata){
    //處理獲得的Json數據});</script>

• window.name + iframe
• location.hash+iframe
• window.postMessage（HTML5中的XMLHttpRequest Level 2中的API）
• 通過document.domain+iframe來跨子域(只有在主域相同的時候才能使用該方法)
• 使用跨域資源共享（CORS）來跨域
• 使用Web sockets來跨域
• 使用flash URLLoader來跨域

22.手寫ajax

ajax的技術核心是 XMLHttpRequest 對象；
ajax 請求過程：創建 XMLHttpRequest 對象、連接服務器、發送請求、接收響應數據；

（理解）<script type="text/javascript">//通過createXHR()函數創建一個XHR對象：function createXHR() {
    if (window.XMLHttpRequest) {    //IE7+、Firefox、Opera、Chrome 和Safari
         return new XMLHttpRequest();
    } else if (window.ActiveXObject) {   //IE6 及以下
        var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
        for (var i = 0,len = versions.length; i<len; i++) {
            try {
                return new ActiveXObject(version[i]);
                break;
            } catch (e) {
                //跳過
            }  
        }
    } else {
        throw new Error('瀏覽器不支持XHR對象！');
    }}//封裝ajax，參數為一個對象function ajax(obj) {
    var xhr = createXHR();  //創建XHR對象
    //通過使用JS隨機字符串解決IE瀏覽器第二次默認獲取緩存的問題
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);  //通過params()將名值對轉換成字符串
    //若是GET請求，則將數據加到url后面
    if (obj.method === 'get') {
        obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
    }
    if (obj.async === true) {   //true表示異步，false表示同步
        //使用異步調用的時候，需要觸發readystatechange 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {   //判斷對象的狀態是否交互完成
                callback();      //回調
            }
        };
    }
    //在使用XHR對象時，必須先調用open()方法，
    //它接受三個參數：請求類型(get、post)、請求的URL和表示是否異步。
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === 'post') {
        //post方式需要自己設置http的請求頭，來模仿表單提交。
        //放在open方法之后，send方法之前。
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);     //post方式將數據放在send()方法里
    } else {
        xhr.send(null);     //get方式則填null
    }
    if (obj.async === false) {  //同步
        callback();
    }
    function callback() {
        if (xhr.status == 200) {  //判斷http的交互是否成功，200表示成功
            obj.success(xhr.responseText);          //回調傳遞參數
        } else {
            alert('獲取數據錯誤！錯誤代號：' + xhr.status + '，錯誤信息：' + xhr.statusText);
        }  
    }}//名值對轉換為字符串function params(data) {
    var arr = [];
    for (var i in data) {
        //特殊字符傳參產生的問題可以使用encodeURIComponent()進行編碼處理
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');}</script>

實例：

ajax({
    method : 'het/post',
    url : '...',
    data : {
    },
    success : function (res) {
    },
    error : function(err){
    },
    async : true});

23.ES6

簡述，具體請參考https://blog.csdn.net/Juliet_xmj/article/details/103940173

• 字符串擴展
• 解構表達式
• 函數優化
• 函數參數默認值
• 箭頭函數
• 對象的函數屬性簡寫
• 箭頭函數結合解構表達式
• map：接收一個函數，將原數組中的所有元素用這個函數處理后放入新數組返回。
• reduce：接收一個函數（必須）和一個初始值（可選），該函數接收兩個參數：（上一次reduce處理的結果，數組中要處理的下一個元素）
• promise

const promise = new Promise(function(resolve, reject) {
  // ... 執行異步操作
  if (/* 異步操作成功 */){
    resolve(value);// 調用resolve，代表Promise將返回成功的結果
  } else {
    reject(error);// 調用reject，代表Promise會返回失敗結果  }});promise.then(function(value){
    // 異步執行成功后的回調}).catch(function(error){
    // 異步執行失敗后的回調
	})

• set：本質與數組類似。不同在于Set中只能保存不同元素，如果元素相同會被忽略。
• map：本質是與Object類似的結構。不同在于，Object強制規定key只能是字符串。而 Map結構的key可以是任意對象。
• 模塊化：把代碼進行拆分，方便重復利用
• 對象擴展
• 數組擴展

24.BOM，DOM

• BOM:指的是瀏覽器對象模型，它使JavaScript有能力與瀏覽器進行“對話”
• DOM:是指文檔對象模型，通過它，可以范文HTLM文檔的所有元素
• window對象：是客戶端JavaScript最高層對象之一，由于window對象是其他大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的應用。

25.jQuery選擇器

• 元素選擇器：$("p.intro")選取所有 class=“intro” 的<p>元素。
• 屬性選擇器：$("[href='#']")選取所有帶有 href 值等于 “#” 的元素。
• css選擇器：$("p").css("background-color","red");

26.隱式迭代

遍歷內部DOM元素（偽數組形式存儲）的過程，給匹配到的所有元素進行循環遍歷，執行相應的方法，而不需要我們自己進行循環遍歷

<ul>
	<li>web</li>
    <li>前端</li></ul>//js$("li").html("WEB前端夢之藍");
    //將所有的li標簽html內容全部換成“WEB前端夢之藍”,這個就屬于隱式迭代

看完上述內容，你們對js、jQuery面試題大全有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。