역사상 가장 포괄적인 js 및 jQuery 인터뷰 질문

JS, jQuery 인터뷰 질문 편집

1. 데이터 유형

기본 유형: Object, String, Number, boolean, null, undefine 제외.

참조 유형: 객체. 여기에는 함수, 배열 및 날짜가 포함됩니다.

관련 기사 추천 : 2020년 js 인터뷰 질문의 가장 완벽한 모음(최신)

2. 배열 방법

join(): 중간 기호를 사용하여 배열을 문자열로 변환

push(): 배열 끝에 콘텐츠를 추가하고 새 길이를 반환합니다.

pop(): 배열 끝에서 콘텐츠를 삭제하고 길이를 반환합니다.

unshift(): 배열에 콘텐츠를 추가합니다.

shift(): 배열 헤드에서 내용을 삭제하고 삭제된 내용을 반환합니다.

sort(): 배열 내용을 큰 것부터 작은 것 순으로 정렬

reverse(): 역방향 배열 내용 항목

concat(): 배열을 접합하고, 내용이 없으면 배열 내용을 복사합니다.

슬라이스(): 지정된 첨자부터 시작하여 배열을 가로챕니다.

splice(): 삭제, 삽입, 바꾸기 ;

• 삭제: 매개변수 2개: 삭제할 첫 번째 항목의 위치와 삭제할 항목 수.
• 삽입: 3개의 매개변수: 시작 위치, 0(삭제할 항목 수) 및 삽입할 항목.
• 교체: 3개의 매개변수: 시작 위치, 삭제할 항목 수, 삽입할 항목 수.

3. 문자열 메소드

charAt(): 첨자에 따라 해당 값 찾기

charCodeAt(): 첨자 값을 통해 해당 문자 유니코드 인코딩 찾기

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의 이 지점을 Child의 이 지점으로 변경하세요.
  단점: 속성 상속만 해결할 수 있으며 값을 사용합니다. ​​속성은 반복되지 않지만 상위 카테고리의 메소드는 상속될 수 없습니다
• 프로토타입 체인 상속: 상속을 달성하려면 Child의 프로토타입을 Parent의 인스턴스로 변경합니다.
  단점: Child의 프로토타입 객체가 모두 New이기 때문에 부모, 인스턴스화됩니다. 나오는 개체의 속성은 모두 동일하며 부모의 참조 유형의 인스턴스 개체 하나가 수정되는 한 프로토타입 개체가 모두 공유되기 때문에 다른 개체도 수정됩니다.
결합 상속(처음 두 개 결합):
• 단점: 부모 클래스의 프로토타입 객체는 두 번 호출되므로 불필요하며 학생 인스턴스의 생성자는 Person에서 나옵니다
  
두 가지 결합 상속 최적화도 있습니다

9. 함수를 만드는 방법

Function声ming：

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 키워드를 사용하고, 비동기
  

11을 표현하려면 함수 내부에서 wait를 사용하세요.

通俗的讲，事件就是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教程》

위 내용은 역사상 가장 포괄적인 js 및 jQuery 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!