Les questions d'entretien js et jQuery les plus complètes de l'histoire

JS, tri des questions d'entretien jQuery

Type de données

Types de base : sauf. Objet, chaîne, nombre, booléen, nul, non défini.

Type de référence : objet. Il contient la fonction, le tableau et la date.

Articles connexes recommandés : La collection la plus complète de questions d'entretien js en 2020 (dernière)

2. Méthode Array

join() : Convertir le tableau en chaîne, avec des symboles intermédiaires

push() : Ajouter du contenu au fin du tableau et renvoie Nouvelle longueur

pop() : Supprime un élément de contenu de la queue du tableau, renvoie la longueur

unshift() : Ajoute du contenu en tête du tableau tableau, renvoie la nouvelle longueur

shift() : Array Supprime un élément de contenu de la tête et renvoie le contenu supprimé

sort() : Trie le contenu du tableau de grand à petit

reverse() : Inverser les éléments du contenu du tableau

concat() : Épisser les tableaux, copier le contenu du tableau s'il n'y a pas de contenu

slice() : Intercepter le tableau, en commençant à partir de l'indice spécifié

splice() : Supprimer, insérer, remplacer

• Supprimer : 2 paramètres : la position du premier élément à supprimer et le nombre d'éléments à supprimer.
• Insérer : 3 paramètres : position de départ, 0 (nombre d'éléments à supprimer) et éléments à insérer.
• Remplacement : 3 paramètres : position de départ, nombre d'éléments à supprimer et nombre illimité d'éléments à insérer.

3. Méthode String

charAt() : Trouvez la valeur correspondante selon l'indice

charCodeAt() : Trouvez la valeur correspondante valeur via l'indice Rechercher le caractère correspondant Encodage Unicode

indexOf() : Rechercher l'indice correspondant (première occurrence) via les caractères

lastIndexOf() : Rechercher la dernière valeur d'indice qui apparaît via les caractères

🎜>

slice() : intercepte une chaîne, 2 paramètres, (position de départ, position de fin)

split() : divise la chaîne en tableaux selon des délimiteurs

substring() : Intercepter la chaîne, (position de début, position de fin)

substr() : chaîne d'interception avec la position et la longueur spécifiées, (position de début, longueur)

toLowerCase() : chaîne Convertir en minuscules

toUpperCase() : Convertissez la chaîne en majuscules

trim() : Supprimez tous les espaces avant et après la chaîne

4. Empêchez les bulles, empêchez l'événement par défaut

Empêcher le bouillonnement :

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

Empêcher l'événement par défaut :

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

Portée de la fonction

La portée de la fonction signifie que toutes les variables déclarées dans une fonction sont toujours visibles dans le corps de la fonction et peuvent être utilisées et réutilisées dans la portée de la fonction entière.

Variables globales : variables déclarées à l'extérieur les objets accessibles n'importe où dans le code ont une portée globale (toutes les variables sans affectation directe de var sont des variables globales)

Variables locales : déclarées à l'intérieur de la fonction Les variables internes et les portées locales ne sont généralement accessibles qu'à l'intérieur de la fonction. des fragments de code fixes, le plus souvent dans les fonctions, donc à certains endroits, vous verrez des gens appeler cette portée la portée de la fonction.

6. Fermeture

Une fonction permettant aux fonctions externes d'accéder aux fonctions internes et de lire les variables internes d'autres fonctions. Essentiellement, les fermetures constituent le pont entre l’intérieur d’une fonction et l’extérieur de la fonction.

7. Chaîne de prototypes

Chaque objet possède un prototype _proto_, et ce prototype peut aussi avoir son propre prototype, et ainsi de suite, formant une chaîne de prototypes.

• Attribut prototype, l'objet prototype de la fonction. Il est unique à la fonction. Il pointe vers un objet d'une fonction.
• __proto__ est l'objet prototype pointant vers le constructeur, qui est unique à l'objet.

8. Plusieurs modes d'héritage

• 
  Héritage du constructeur : dans Child, remplacez le pointeur this du parent par This Point to de l'enfant, réalisant ainsi l'héritage.
Inconvénients : il ne peut résoudre que l'héritage des attributs, et les valeurs des attributs ne sont pas répétées, mais les méthodes de la catégorie parent ne peuvent pas être héritées
• 
  Héritage de la chaîne de prototypes : modifier le prototype de Instances enfant à parent, réalisant ainsi l'héritage
Inconvénients : étant donné que les objets prototypes de Child sont tous des nouveaux parents, les propriétés des objets instanciés sont les mêmes, et tant qu'un objet instance du type référence sur le parent est modifié , les autres changeront également. Seront modifiés en conséquence. Car leurs objets prototypes sont tous partagés
• 
  Héritage combiné (combinant les deux premiers) :
Inconvénients : L'objet prototype de la classe parent est appelé deux fois, ce qui est inutile, et l'instance étudiante Le constructeur vient de Person
• et il existe deux optimisations d'héritage combinées

9. Comment créer des fonctions

Déclaration de fonction :

function Fn(){}

Expression littérale/fonction :

var m = function(){}

Constructeur :

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

Comment résoudre l'enfer des rappels asynchrones

promesse, générateur, async/attendre

• promesse

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

• générateur

function *generatorGetStu(){
	let stus = yield getStu();
	// 等到getStu异步执行完才会执行getCourse
	let course = yield getCourse();}

• async/ wait
  La fonction async est du sucre syntaxique pour la fonction Generator. Utilisez le mot-clé async pour le représenter et utilisez wait dans la fonction pour représenter l'asynchrone

11. Compréhension de la délégation d'événements

通俗的讲，事件就是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<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(&#39;http://www.example.com/data/?callback=?&#39;,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 = [&#39;MSXML2.XMLHttp&#39;,&#39;Microsoft.XMLHTTP&#39;];
        for (var i = 0,len = versions.length; i<len; i++) {
            try {
                return new ActiveXObject(version[i]);
                break;
            } catch (e) {
                //跳过
            }  
        }
    } else {
        throw new Error(&#39;浏览器不支持XHR对象！&#39;);
    }}//封装ajax，参数为一个对象function ajax(obj) {
    var xhr = createXHR();  //创建XHR对象
    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
    obj.url = obj.url + &#39;?rand=&#39; + Math.random();
    obj.data = params(obj.data);  //通过params()将名值对转换成字符串
    //若是GET请求，则将数据加到url后面
    if (obj.method === &#39;get&#39;) {
        obj.url += obj.url.indexOf(&#39;?&#39;) == -1 ? &#39;?&#39; + obj.data : &#39;&&#39; + 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 === &#39;post&#39;) {
        //post方式需要自己设置http的请求头，来模仿表单提交。
        //放在open方法之后，send方法之前。
        xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/x-www-form-urlencoded&#39;);
        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(&#39;获取数据错误！错误代号：&#39; + xhr.status + &#39;，错误信息：&#39; + xhr.statusText);
        }  
    }}//名值对转换为字符串function params(data) {
    var arr = [];
    for (var i in data) {
        //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
        arr.push(encodeURIComponent(i) + &#39;=&#39; + encodeURIComponent(data[i]));
    }
    return arr.join(&#39;&&#39;);}</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” 的e388a4556c0f65e1904146cc1a846bee元素。
• 属性选择器：$("[href='#']")选取所有带有 href 值等于 “#” 的元素。
• css选择器：$("p").css("background-color","red");

26.隐式迭代

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

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!