史上最も包括的な js および jQuery の面接の質問

js、jQuery の面接質問集

1. データ型

基本型: を除くオブジェクト、文字列、数値、ブール値、null、未定義。

参照タイプ: オブジェクト。関数、配列、日付が含まれます。

おすすめ関連記事:2020年最も充実したjs面接質問集(最新)

2. 配列メソッド

join(): 中間シンボルを使用して配列を文字列に変換します

push(): コンテンツを配列の末尾を取得して新しい長さを返します

pop(): 配列の末尾からコンテンツを削除し、長さを返します

unshift(): コンテンツを先頭に追加します配列、新しい長さを返します

shift(): 配列 先頭から内容を削除し、削除された内容を返します

sort(): 配列の内容を大きいものから小さいものへ並べ替えます

reverse(): 配列の内容を反転します items

concat() : 配列を結合します。コンテンツがない場合は、配列をコピーします。 content

slice(): 配列をインターセプトします、指定された添字から開始します

splice(): 削除、挿入、置換;

• Delete: 2 つのパラメーター: 削除する最初の項目の位置と項目の数削除されます。
• 挿入: 3 つのパラメーター: 開始位置、0 (削除する項目の数)、および挿入する項目。
• 置換: 3 つのパラメータ: 開始位置、削除する項目の数、および挿入する任意の数の項目。

3. 文字列メソッド

charAt(): 添字に基づいて対応する値を検索します

charCodeAt(): 添字を使用しますvalue 対応する文字を検索します Unicode エンコード

indexOf(): 文字から対応する添え字 (最初に出現) を検索します

lastIndexOf(): 文字から最後に出現する添え字値を検索します

slice(): 文字列、2 つのパラメータ (開始位置、終了位置) をインターセプトします

split(): 区切り文字に従って文字列を配列に分割します

substring() : 文字列をインターセプトします (開始位置、終了位置)

substr(): 指定された位置と長さの文字列をインターセプトします、(開始位置、長さ)

toLowerCase(): 文字列変換to lowercase

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 で、親の this ポインタを子の this Point to に変更することで継承を実現します。
  欠点: 属性の継承のみを解決でき、属性の値は繰り返されませんが、親カテゴリのメソッドは継承できません
• プロトタイプチェーン継承: のプロトタイプを変更します子から親へのインスタンス、それによって継承が実現
  欠点: 子のプロトタイプ オブジェクトはすべて新しい親であるため、インスタンス化されたオブジェクトのプロパティはすべて同じであり、親上の参照型の 1 つのインスタンス オブジェクトが存在する限り、インスタンス化されたオブジェクトのプロパティはすべて同じになります。変更されると、他も変更されます。それに応じて変更されます。それらのプロトタイプ オブジェクトはすべて共有されるため、
• 組み合わせメソッド継承 (最初の 2 つの結合):
  欠点: 親クラスのプロトタイプ オブジェクトが呼び出されます。 2 回 (これは不要であり、学生インスタンス) コンストラクターは Person から取得されます
• また、2 つの結合された継承の最適化も行われます

9. 関数の作成方法

関数宣言:

function Fn(){}

リテラル/関数式:

var m = function(){}

コンストラクター:

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

10. 非同期コールバック地獄の解決方法

プロミス、ジェネレーター、非同期/待機

• プロミス

let getStuPromise = new Promise((resolve,reject)=>{ getStu(function(res){ resolve(res.data); });});getStuPromise.then((data)=>{ // 得到每个学生的课程 getCourse(); // 还可以继续返回promise 对象})

• ジェネレーター

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（失败）

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
        

         ログイン後にコピー
        
       

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;iarr[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;iarr[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数据}//3、使用jQuery进行jsonp操作//jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁//$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

• 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 对象、连接服务器、发送请求、接收响应数据；

（理解）

实例：

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” 的

  元素。

• 属性选择器：$("[href='#']")选取所有带有 href 值等于 “#” 的元素。
• css选择器：$("p").css("background-color","red");

26.隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程，给匹配到的所有元素进行循环遍历，执行相应的方法，而不需要我们自己进行循环遍历

 
web
 
前端
//js$("li").html("WEB前端梦之蓝"); //将所有的li标签html内容全部换成“WEB前端梦之蓝”,这个就属于隐式迭代

感谢大家的阅读，希望大家面试成功。

本文转自：https://blog.csdn.net/Juliet_xmj/article/details/106982585

推荐教程：《JS教程》，《jQuery教程》

以上が史上最も包括的な js および jQuery の面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。