史上最全的js、jQuery面試題
- 烟雨青岚轉載
- 2020-07-10 11:23:077321瀏覽
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;
全域變數：宣告在函數外部的變量，在程式碼中任何地方都能存取的物件擁有全域作用域（所有沒有var直接賦值的變數都屬於全域變數）局部變數：宣告在函數內部的變量，局部作用域一般只在固定的程式碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域稱為函數作用域。
- 6.閉包
- 外部函數存取內部函數，能夠讀取其他函數內部變數的函數。在本質上，閉包是將函數內部和函數外部連接起來的橋樑。
- 7.原型鏈
- 每個物件都有一個原型_proto_，這個原型還可以有它自己的原型，以此類推，形成一個原型鏈。
prototype屬性，函數的原型對象，它是函數所獨有的，它是從一個函數指向一個物件。 __proto__是指向建構函數的原型對象，它是對象獨有的。
8.繼承的幾種方式
建構子繼承：在Child裡面,把Parent的this指向改為是Child的this指向,從而實現繼承缺點:只能解決屬性的繼承,使用屬性的值不重複,但是父級類別的方法不能繼承
原型鏈繼承：把Child的原型改為是Parent的實例,從而實現繼承缺點:因為Child的原型物件都是New Parent,所以實例化出來的物件的屬性都是一樣的,而且Parent上面的引用類型只要有一個實例物件修改了,其他也會跟著修改.因為他們原型物件都是共用的
- 組合方式繼承（組合前兩種）：
- 缺點:父類別的原型物件呼叫了兩次,沒有必要,而且student實例的建構函式是來自Person
- ##函式宣告：
function Fn(){}字面量/函數表達式：
var m = function(){}建構子：var sum =new Function(“n1”,”n2”,”return n1+n2”)
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（失败）
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” 的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面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除